Main Page

.eslintignore

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

.eslintrc.js

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

package.json

@@ -6,11 +6,14 @@
   "dependencies": {
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
+    "i18next": "^19.9.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-i18next": "^11.8.8",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@types/material-ui": "^0.21.8",
@@ -53,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/App.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-
   color: darkcyan;
   font-size: 1.5rem;
+  height: 100%;
 }

src/components/App.tsx

@@ -1,5 +1,12 @@
-import * as React from 'react';
+import React from 'react';
+import {
+  BrowserRouter,
+  Route,
+  Switch,
+} from 'react-router-dom';
 import Button from '@material-ui/core/Button';
+import MainPage from './MainPage';
+import CountryPage from './CountryPage';
 import handleLangChange from '../controller/handlers';
 import rootConnector, { rootProps } from '../store/rootConnector';
 import './App.scss';
@@ -10,23 +17,33 @@ const App: React.FC<rootProps> = (props: rootProps) => (
     {' '}
     {props.lang}
     <Button
-      id="RU"
+      id="ru"
       onClick={(e: React.SyntheticEvent) => handleLangChange(props, e)}
     >
       RU
     </Button>
     <Button
-      id="DE"
+      id="de"
       onClick={(e: React.SyntheticEvent) => handleLangChange(props, e)}
     >
       DE
     </Button>
     <Button
-      id="EN"
+      id="en"
       onClick={(e: React.SyntheticEvent) => handleLangChange(props, e)}
     >
       EN
     </Button>
+    <BrowserRouter>
+      <Switch>
+        <Route path="/country/:countryId">
+          <CountryPage />
+        </Route>
+        <Route path="/">
+          <MainPage />
+        </Route>
+      </Switch>
+    </BrowserRouter>
   </div>
 );
 

src/components/CountryPage/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  useTranslation,
+} from 'react-i18next';
+import {
+  useParams,
+} from 'react-router-dom';
+import rootConnector, {
+  rootProps,
+} from '../../store/rootConnector';
+import { URLParamTypes } from '../../types';
+
+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 rootConnector(CountryPage);

src/components/ImagesGrid/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  useTranslation,
+} from 'react-i18next';
+import {
+  createStyles,
+  makeStyles,
+} from '@material-ui/core/styles';
+import {
+  GridList,
+  GridListTile,
+  GridListTileBar,
+} from '@material-ui/core';
+import rootConnector,
+{
+  rootProps,
+} from '../../store/rootConnector';
+import { Country } from '../../types';
+
+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 { countries } = props;
+  const { t } = useTranslation();
+
+  return (
+    <div className={classes.root}>
+      <GridList className={classes.gridList} cols={2.5}>
+        {countries.map((country: Country) => (
+          <GridListTile key={country.pictureURL}>
+            <Link to={`/country/${country.id}`}>
+              <img
+                src={country.pictureURL}
+                alt={t(`${country.id}.name`)}
+                className={classes.imgFullWidth}
+              />
+              <GridListTileBar
+                title={t(`${country.id}.name`)}
+              />
+            </Link>
+          </GridListTile>
+        ))}
+      </GridList>
+    </div>
+  );
+};
+
+export default rootConnector(ImagesGrid);

src/components/MainPage/index.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+
+import ImagesGrid from '../ImagesGrid';
+import rootConnector, { rootProps } from '../../store/rootConnector';
+
+const MainPage: FC<rootProps> = () => (<ImagesGrid />);
+
+export default rootConnector(MainPage);

src/controller/handlers.ts

@@ -1,8 +1,11 @@
-import * as React from 'react';
+import React from 'react';
 import { rootProps } from '../store/rootConnector';
+import i18n from '../i18next';
 
 const handleLangChange = (props: rootProps, event: React.SyntheticEvent) => {
-  props.setLang(event.currentTarget.id);
+  const lng = event.currentTarget.id;
+  props.setLang(lng);
+  i18n.changeLanguage(lng);
 };
 
 export default handleLangChange;

src/i18next.ts

@@ -0,0 +1,34 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+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: 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)
+  // learn more: https://github.com/i18next/i18next-http-backend
+  // .use(Backend)
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  // .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    fallbackLng: 'en',
+    debug: true,
+    // ns: ['special', 'common'],
+    // defaultNS: 'special',
+    resources,
+    supportedLngs: ['de', 'en', 'ru'],
+  });
+
+export default i18n;

src/i18next/de/translation.json

@@ -0,0 +1,29 @@
+{
+  "br": {
+    "name": "Brasilien"
+  },
+  "tz": {
+    "name": "Tanzania"
+  },
+  "sp": {
+    "name": "Spanien"
+  },
+  "ca": {
+    "name": "Kanada"
+  },
+  "in": {
+    "name": "Indien"
+  },
+  "ir": {
+    "name": "Irland"
+  },
+  "ae": {
+    "name": "Vereinigte Arabische Emirate"
+  },
+  "nz": {
+    "name": "Neuseeland"
+  },
+  "jp": {
+    "name": "Japan"
+  }
+}

src/i18next/en/translation.json

@@ -0,0 +1,29 @@
+{
+  "br": {
+    "name": "Brazil"
+  },
+  "tz": {
+    "name": "Tanzania"
+  },
+  "sp": {
+    "name": "Spain"
+  },
+  "ca": {
+    "name": "Canada"
+  },
+  "in": {
+    "name": "India"
+  },
+  "ir": {
+    "name": "Ireland"
+  },
+  "ae": {
+    "name": "United Arab Emirates"
+  },
+  "nz": {
+    "name": "New Zealand"
+  },
+  "jp": {
+    "name": "Japan"
+  }
+}

src/i18next/ru/translation.json

@@ -0,0 +1,29 @@
+{
+  "br": {
+    "name": "Бразилия"
+  },
+  "tz": {
+    "name": "Танзания"
+  },
+  "sp": {
+    "name": "Испания"
+  },
+  "ca": {
+    "name": "Канада"
+  },
+  "in": {
+    "name": "Индия"
+  },
+  "ir": {
+    "name": "Ирландия"
+  },
+  "ae": {
+    "name": "Объединённые Арабские Эмираты"
+  },
+  "nz": {
+    "name": "Новая Зеландия"
+  },
+  "jp": {
+    "name": "Япония"
+  }
+}

src/index.scss

@@ -2,4 +2,9 @@ body {
   text-align: center;
   font-size: 2rem;
   font-family: 'Roboto', sans-serif;
+  height: 100%;
+  min-height: 100vh;
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
 }

src/index.tsx

@@ -1,14 +1,12 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import { render } from 'react-dom';
 import { Provider } from 'react-redux';
-import { createStore } from 'redux';
-import rootReducer from './store/rootReducer';
+import store from './store/store';
 import App from './components/App';
+import './i18next';
 import './index.scss';
 
-const store = createStore(rootReducer);
-
-ReactDOM.render(
+render(
   <Provider store={store}>
     <App />
   </Provider>,

src/store/rootConnector.ts

@@ -6,6 +6,7 @@ export type rootProps = ConnectedProps<typeof rootConnector>;
 
 const mapStateToProps = (state: IAppState) => ({
   lang: state.lang,
+  countries: state.countries,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({