refactor: new dictionaries added

jest/setup-tests.js

@@ -4,5 +4,13 @@ import {
 } from '@testing-library/jest-dom/matchers';
 import 'src/icons/icons';
 import 'src/utils/i18n';
+import 'whatwg-fetch';
 
 expect.extend({ toHaveClass, toHaveAttribute });
+
+// mock fetch
+beforeAll(() => {
+  jest.spyOn(window, 'fetch');
+});
+afterEach(() => jest.clearAllMocks());
+afterAll(() => window.fetch.mockRestore());

package.json

@@ -98,7 +98,8 @@
     "webpack": "^4.43.0",
     "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.0",
+    "whatwg-fetch": "^3.0.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.28",

src/containers/app/app.js

@@ -1,21 +1,17 @@
 import { hot } from 'react-hot-loader/root';
 import React, { Component } from 'react';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import copy from 'copy-to-clipboard';
 import { withTranslation } from 'react-i18next';
 import { ToastContainer, Slide } from 'react-toastify';
-import {
-  CARDS_DICTIONARIES,
-  CARDS_TYPES,
-  FIELD_SIZES,
-  LANGUAGES,
-  TEAMS,
-} from 'src/data/constants';
+import { CARDS_TYPES, FIELD_SIZES, LANGUAGES, TEAMS } from 'src/data/constants';
 import * as Location from 'src/utils/location';
 import * as FirebaseService from 'src/service';
 import { getRemainingCardsCount } from 'src/utils/team-progress';
 import { toast } from 'src/utils/toast';
 import { Loader } from 'src/components/loader';
+import { getDefaultDictionary } from 'src/utils/data-provider';
 import { Lobby } from '../lobby';
 import { NotFound } from '../not-found';
 import { ProtectedGame } from '../game';
@@ -29,7 +25,7 @@ class App extends Component {
       settings: {
         language: LANGUAGES['ru'],
         fieldSize: FIELD_SIZES['5x5'],
-        dictionary: CARDS_DICTIONARIES['GAGA'],
+        dictionaryFileName: '',
       },
       users: [],
       cards: [],
@@ -46,24 +42,46 @@ class App extends Component {
       isLoading: true,
     };
     this.sessionId = '';
-    // eslint-disable-next-line react/prop-types
     this.t = props.t;
+    this.i18n = props.i18n;
   }
 
   async componentDidMount() {
-    await this.initialize();
+    await this.setDefaultDictionary();
+    await this.initializeSession();
   }
 
-  async initialize() {
+  async initializeSession() {
     try {
       await this.connectToSession();
       this.addListeners();
     } catch (error) {
-      console.log(error.message);
-      this.setState({ errorMessage: error.message });
+      this.setState({ isLoading: false }, () => {
+        toast.error(error.message);
+      });
     }
   }
 
+  setDefaultDictionary() {
+    return new Promise((resolve) => {
+      const dictionary = getDefaultDictionary(this.i18n.language);
+      if (!dictionary) {
+        this.setState({ isLoading: false }, () => {
+          toast.error(this.t('error.common'));
+        });
+      }
+      this.setState(
+        {
+          settings: {
+            ...this.state.settings,
+            dictionaryFileName: dictionary.fileName,
+          },
+        },
+        resolve,
+      );
+    });
+  }
+
   async connectToSession() {
     let sessionId = Location.getGameSessionId(window.location.href);
     let userId;
@@ -119,10 +137,10 @@ class App extends Component {
     this.setState({ users, currentUser });
   }
 
-  saveSettings({ language, dictionary, fieldSize }) {
+  saveSettings({ language, dictionaryFileName, fieldSize }) {
     FirebaseService.saveSettings(this.sessionId, {
       language,
-      dictionary,
+      dictionaryFileName,
       fieldSize,
     });
   }
@@ -255,6 +273,11 @@ class App extends Component {
   }
 }
 
+App.propTypes = {
+  t: PropTypes.func.isRequired,
+  i18n: PropTypes.object.isRequired,
+};
+
 const HotApp = hot(withTranslation()(App));
 
 export { HotApp as App };

src/containers/lobby/lobby.js

@@ -28,26 +28,33 @@ function Lobby({
   onClickShare,
   onClickGenerateCards,
 }) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const history = useHistory();
 
   const onChangeFieldSize = (e) => {
     onChangeSettings({ ...settings, fieldSize: e.target.value });
   };
   const onChangeDictionary = (e) => {
-    onChangeSettings({ ...settings, dictionary: e.target.value });
+    onChangeSettings({ ...settings, dictionaryFileName: e.target.value });
   };
   const fieldSizes = Object.entries(FIELD_SIZES).map(([label, value]) => (
     <React.Fragment key={value}>
       <Radio label={label} value={value} />
     </React.Fragment>
   ));
-  const dictionaries = Object.entries(CARDS_DICTIONARIES).map(
-    ([label, value]) => (
-      <option key={value} value={value}>
-        {label}
-      </option>
-    ),
+
+  const dictionaries = CARDS_DICTIONARIES.reduce(
+    (acc, { name, fileName, language }) => {
+      if (i18n.language === language) {
+        acc.push(
+          <option key={fileName} value={fileName}>
+            {name}
+          </option>,
+        );
+      }
+      return acc;
+    },
+    [],
   );
 
   let color = 'default';
@@ -127,7 +134,10 @@ function Lobby({
 
         <div className={'mt-5 md:mt-2 row-start-3 col-start-1'}>
           <FormGroup label={t('lobby.dictionary')}>
-            <Select value={settings.dictionary} onChange={onChangeDictionary}>
+            <Select
+              value={settings.dictionaryFileName}
+              onChange={onChangeDictionary}
+            >
               {dictionaries}
             </Select>
           </FormGroup>
@@ -177,7 +187,7 @@ Lobby.propTypes = {
   settings: PropTypes.shape({
     language: PropTypes.string.isRequired,
     fieldSize: PropTypes.string.isRequired,
-    dictionary: PropTypes.string.isRequired,
+    dictionaryFileName: PropTypes.string.isRequired,
   }).isRequired,
   users: PropTypes.arrayOf(
     PropTypes.shape({

src/containers/lobby/lobby.stories.js

@@ -32,7 +32,7 @@ export const Common = () => {
   const settings = {
     language: LANGUAGES['ru'],
     fieldSize: FIELD_SIZES['5x5'],
-    dictionary: CARDS_DICTIONARIES['GAGA'],
+    dictionaryFileName: CARDS_DICTIONARIES[0],
   };
   const captains = {
     [TEAMS['blue']]: '2',

src/data/constants.js

@@ -8,9 +8,28 @@ export const FIELD_SIZES = {
   '5x6': '5x6',
 };
 
-export const CARDS_DICTIONARIES = {
-  GAGA: 'gaga',
-};
+export const CARDS_DICTIONARIES = [
+  {
+    name: 'Стандартный (400+ слов)',
+    fileName: 'default-ru.json',
+    language: 'ru',
+  },
+  {
+    name: 'Расширенный (1000+ слов)',
+    fileName: 'extended-ru.json',
+    language: 'ru',
+  },
+  {
+    name: 'IT: frontend (200+ терминов)',
+    fileName: 'frontend-ru.json',
+    language: 'ru',
+  },
+  {
+    name: 'IT: frontend (200+ words)',
+    fileName: 'frontend-en.json',
+    language: 'en',
+  },
+];
 
 export const CARDS_TYPES = {
   agent: 'agent',