diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..40b878d --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js index 830c650..7263bfe 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,7 @@ module.exports = { + globals: { + JSX: true, + }, env: { browser: true, es2021: true, diff --git a/package.json b/package.json index cd92ba1..0205b04 100644 --- a/package.json +++ b/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": { diff --git a/src/components/CountryPage/index.tsx b/src/components/CountryPage/index.tsx index b8a040c..2e4adf2 100644 --- a/src/components/CountryPage/index.tsx +++ b/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 = () => { const { t } = useTranslation(); const { countryId } = useParams(); // TODO - + return (
{t(`${countryId}.name`)}
); -} +}; + +export default CountryPage; diff --git a/src/components/ImagesGrid/index.tsx b/src/components/ImagesGrid/index.tsx index 1ab97a5..a036a4b 100644 --- a/src/components/ImagesGrid/index.tsx +++ b/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 = (props: rootProps) => { const classes = useStyles(); - const { lang, countries } = props; + const { countries } = props; const { t } = useTranslation(); return ( @@ -57,16 +55,20 @@ const ImagesGrid: React.FC = (props: rootProps) => { {countries.map((country) => ( - {t(`${country.id}.name`)} + {t(`${country.id}.name`)} - + ))} ); -} +}; export default rootConnector(ImagesGrid); diff --git a/src/i18next.ts b/src/i18next.ts index a38dd6f..d2ad401 100644 --- a/src/i18next.ts +++ b/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; diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts index c114e8b..35dd757 100644 --- a/src/store/rootReducer.ts +++ b/src/store/rootReducer.ts @@ -1,3 +1,5 @@ +import { Country } from '../types'; + export interface IAppState { lang: 'EN' | 'RU' | 'DE', countries: Country[], diff --git a/src/store/store.ts b/src/store/store.ts index acaf8df..6a7caa5 100644 --- a/src/store/store.ts +++ b/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; } } diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 8d436e0..40f1ea2 100644 --- a/src/types/index.d.ts +++ b/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, }