feat(i18n): add 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,24 @@
+import React, {FunctionComponent} from 'react';
+import {FormattedMessage} from 'react-intl';
+import {useDispatch} from 'react-redux';
+
+import setLocaleAction, {Locale} from '../../actions/set-locale';
+
+const locales = Object.values(Locale);
+
+const LanguageSelector: FunctionComponent<{}> = () => {
+  const dispatch = useDispatch();
+  const setLocale = (locale: Locale) => dispatch(setLocaleAction(locale));
+
+  return (
+    <ul>
+      {locales.map(locale => (
+        <li key={locale} onClick={() => setLocale(locale)}>
+          <FormattedMessage id={`language.${locale}`} />
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default LanguageSelector;

src/scripts/components/menu/menu.tsx

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