Merge pull request #139 from ubilabs/feat/i18n-language-switcher

feat(i18n): language switcher

i18n/de.json

@@ -1,4 +1,6 @@
 {
   "layerSelector.main": "Haupt",
-  "layerSelector.compare": "Vergleich"
+  "layerSelector.compare": "Vergleich",
+  "language.en": "Englisch",
+  "language.de": "Deutsch"
 }

i18n/en.json

@@ -1,4 +1,6 @@
 {
   "layerSelector.main": "Main",
-  "layerSelector.compare": "Compare"
+  "layerSelector.compare": "Compare",
+  "language.en": "English",
+  "language.de": "German"
 }

src/scripts/components/language-selector/language-selector.tsx

@@ -0,0 +1,25 @@
+import React, {FunctionComponent} from 'react';
+import {FormattedMessage} from 'react-intl';
+import {useDispatch} from 'react-redux';
+
+import setLanguageAction, {Language} from '../../actions/set-language';
+
+const languages = Object.values(Language);
+
+const LanguageSelector: FunctionComponent<{}> = () => {
+  const dispatch = useDispatch();
+  const setLanguage = (language: Language) =>
+    dispatch(setLanguageAction(language));
+
+  return (
+    <ul>
+      {languages.map(language => (
+        <li key={language} onClick={() => setLanguage(language)}>
+          <FormattedMessage id={`language.${language}`} />
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default LanguageSelector;

src/scripts/components/menu/menu.tsx

@@ -3,6 +3,8 @@ import {Link} from 'react-router-dom';
 
 import styles from './menu.styl';
 
+import LanguageSelector from '../language-selector/language-selector';
+
 interface MenuItem {
   id: string;
   name: string;
@@ -47,6 +49,8 @@ const Menu: FunctionComponent<{}> = () => {
               ) : (
                 menuItem.name
               )}
+
+              {menuItem.id === 'language' && <LanguageSelector />}
             </li>
           ))}
         </ul>