refactor: linter errors fix

.eslintignore

@@ -0,0 +1 @@
+node_modules/

.eslintrc.js

@@ -1,4 +1,7 @@
 module.exports = {
+  globals: {
+    JSX: true,
+  },
   env: {
     browser: true,
     es2021: true,

package.json

@@ -56,6 +56,8 @@
     "start": "webpack serve",
     "dev": "webpack --mode development",
     "build": "webpack --mode production",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

src/components/CountryPage/index.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import {
-  useTranslation
+  useTranslation,
 } from 'react-i18next';
 import {
   useParams,
 } from 'react-router-dom';
+import { rootProps } from '../../store/rootConnector';
+import { URLParamTypes } from '../../types';
 
-
-export default function CountryPage(): JSX.Element {
+const CountryPage: React.FC<rootProps> = () => {
   const { t } = useTranslation();
 
   const { countryId } = useParams<URLParamTypes>();
 
   // TODO
-  
+
   return (<div title={t(`${countryId}.name`)}>{t(`${countryId}.name`)}</div>);
-}
+};
+
+export default CountryPage;

src/components/ImagesGrid/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import {
-  useTranslation
+  useTranslation,
 } from 'react-i18next';
 import {
   createStyles,
@@ -13,42 +14,39 @@ import {
 } from '@material-ui/core';
 import rootConnector,
 {
-  rootProps
+  rootProps,
 } from '../../store/rootConnector';
-import { Link } from 'react-router-dom';
 
+const useStyles = makeStyles(() => createStyles({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+    overflow: 'hidden',
+    maxWidth: 1000,
+  },
+  gridList: {
+    flexWrap: 'nowrap',
+    transform: 'translateZ(0)',
+  },
+  imgFullWidth: {
+    position: 'relative',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: '100%',
+  },
+  title: {
+    // color: theme.palette.primary.light,
+  },
+  titleBar: {
+    background:
+      'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
+  },
+}));
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    root: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      justifyContent: 'space-around',
-      overflow: 'hidden',
-      maxWidth: 1000,
-    },
-    gridList: {
-      flexWrap: 'nowrap',
-      transform: 'translateZ(0)',
-    },
-    imgFullWidth: {
-      position: 'relative',
-      top: '50%',
-      transform: 'translateY(-50%)',
-      width: '100%',
-    },
-    title: {
-      // color: theme.palette.primary.light,
-    },
-    titleBar: {
-      background:
-        'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
-    },
-  }),
-);
 const ImagesGrid: React.FC<rootProps> = (props: rootProps) => {
   const classes = useStyles();
-  const { lang, countries } = props;
+  const { countries } = props;
   const { t } = useTranslation();
 
   return (
@@ -57,16 +55,20 @@ const ImagesGrid: React.FC<rootProps> = (props: rootProps) => {
         {countries.map((country) => (
           <GridListTile key={country.pictureURL}>
             <Link to={`country/${country.id}`}>
-              <img src={country.pictureURL} alt={t(`${country.id}.name`)} className={classes.imgFullWidth}/>
+              <img
+                src={country.pictureURL}
+                alt={t(`${country.id}.name`)}
+                className={classes.imgFullWidth}
+              />
               <GridListTileBar
                 title={t(`${country.id}.name`)}
               />
-              </Link>
+            </Link>
           </GridListTile>
         ))}
       </GridList>
     </div>
   );
-}
+};
 
 export default rootConnector(ImagesGrid);

src/i18next.ts

@@ -1,18 +1,18 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import en_translation from './i18next/en/translation.json';
-import de_translation from './i18next/de/translation.json';
-import ru_translation from './i18next/ru/translation.json';
+import enTranslation from './i18next/en/translation.json';
+import deTranslation from './i18next/de/translation.json';
+import ruTranslation from './i18next/ru/translation.json';
 
 export const resources = {
-  en: { translation: en_translation },
-  de: { translation: de_translation },
-  ru: { translation: ru_translation },
+  en: { translation: enTranslation },
+  de: { translation: deTranslation },
+  ru: { translation: ruTranslation },
 };
 
-
 i18n
-  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
+  // load translation using http -> see /public/locales
+  // (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
   // learn more: https://github.com/i18next/i18next-http-backend
   // .use(Backend)
   // detect user language
@@ -28,8 +28,7 @@ i18n
     // ns: ['special', 'common'],
     // defaultNS: 'special',
     resources,
-    supportedLngs: ['de','en','ru']
+    supportedLngs: ['de', 'en', 'ru'],
   });
 
-
 export default i18n;

src/store/rootReducer.ts

@@ -1,3 +1,5 @@
+import { Country } from '../types';
+
 export interface IAppState {
   lang: 'EN' | 'RU' | 'DE',
   countries: Country[],

src/store/store.ts

@@ -1,9 +1,13 @@
-import {createStore, applyMiddleware, compose} from 'redux';
-import rootReducer from './rootReducer';
 import ReduxThunk from 'redux-thunk';
+import {
+  createStore,
+  applyMiddleware,
+  compose,
+} from 'redux';
+import rootReducer from './rootReducer';
 
 declare global {
-  interface Window {
+  export interface Window {
     __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
   }
 }

src/types/index.d.ts

@@ -1,9 +1,8 @@
-interface Country {
+export interface Country {
   id: string,
   name: string,
   pictureURL: string,
 }
-
-interface URLParamTypes {
+export interface URLParamTypes {
   countryId: string,
 }