feat(i18n): add react-intl and local state

.eslintrc

@@ -332,6 +332,7 @@
     "@typescript-eslint/explicit-function-return-type": 0,
     "@typescript-eslint/no-var-requires": 0,
     "@typescript-eslint/ban-ts-ignore": 0,
+    "@typescript-eslint/no-unused-vars": 2,
     "react/prop-types": 0
   }
 }

i18n/de.json

@@ -0,0 +1,4 @@
+{
+  "layerSelector.main": "Haupt",
+  "layerSelector.compare": "Vergleich"
+}

i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "layerSelector.main": "Main",
+  "layerSelector.compare": "Compare"
+}

package.json

@@ -35,6 +35,7 @@
     "cesium": "^1.61.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-intl": "^3.3.2",
     "react-redux": "^7.1.1",
     "redux": "^4.0.4",
     "redux-logger": "^3.0.6",

src/scripts/actions/set-locale.ts

@@ -0,0 +1,31 @@
+import {ThunkDispatch} from 'redux-thunk';
+
+import {State} from '../reducers/index';
+import fetchLayers, {FetchLayersActions} from './fetch-layers';
+
+export const SET_LOCALE = 'SET_LOCALE';
+
+export enum Locale {
+  EN = 'en',
+  DE = 'de'
+}
+
+export interface SetLocaleAction {
+  type: typeof SET_LOCALE;
+  locale: Locale;
+}
+
+type AllThunkActions = SetLocaleAction | FetchLayersActions;
+
+const setLocaleAction = (locale: Locale) => (
+  dispatch: ThunkDispatch<State, void, AllThunkActions>
+) => {
+  dispatch({
+    type: SET_LOCALE,
+    locale
+  });
+
+  dispatch(fetchLayers());
+};
+
+export default setLocaleAction;

src/scripts/components/app/app.tsx

@@ -1,25 +1,40 @@
 import React, {FunctionComponent} from 'react';
 import {createStore, applyMiddleware} from 'redux';
-import {Provider} from 'react-redux';
+import {Provider as StoreProvider, useSelector} from 'react-redux';
 import thunk from 'redux-thunk';
 import logger from 'redux-logger';
+import {IntlProvider} from 'react-intl';
+
 import rootReducer from '../../reducers/index';
 import LayerSelector from '../layer-selector/layer-selector';
 import Globe from '../globe/globe';
 import Menu from '../menu/menu';
 
+import {localeSelector} from '../../reducers/locale';
+import translations from '../../i18n';
+
 import styles from './app.styl';
 
 const store = createStore(rootReducer, applyMiddleware(thunk, logger));
 
 const App: FunctionComponent<{}> = () => (
-  <Provider store={store}>
-    <div className={styles.app}>
-      <Globe />
-      <LayerSelector />
-      <Menu />
-    </div>
-  </Provider>
+  <StoreProvider store={store}>
+    <TranslatedApp />
+  </StoreProvider>
 );
 
+const TranslatedApp: FunctionComponent<{}> = () => {
+  const locale = useSelector(localeSelector);
+
+  return (
+    <IntlProvider locale={locale} messages={translations[locale]}>
+      <div className={styles.app}>
+        <Globe />
+        <LayerSelector />
+        <Menu />
+      </div>
+    </IntlProvider>
+  );
+};
+
 export default App;

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

@@ -1,5 +1,7 @@
 import React, {FunctionComponent, useEffect, useState} from 'react';
 import {useSelector, useDispatch} from 'react-redux';
+import {useIntl} from 'react-intl';
+
 import {layersSelector} from '../../reducers/layers';
 import {selectedLayerIdSelector} from '../../reducers/selected-layer-id';
 import fetchLayers from '../../actions/fetch-layers';
@@ -9,17 +11,18 @@ import Tabs from '../tabs/tabs';
 import styles from './layer-selector.styl';
 
 const LayerSelector: FunctionComponent<{}> = () => {
+  const intl = useIntl();
   const layers = useSelector(layersSelector);
   const layerIds = useSelector(selectedLayerIdSelector);
   const dispatch = useDispatch();
   const tabs = [
     {
       id: 'main',
-      label: 'Main'
+      label: intl.formatMessage({id: 'layerSelector.main'})
     },
     {
       id: 'compare',
-      label: 'Compare'
+      label: intl.formatMessage({id: 'layerSelector.compare'})
     }
   ];
 

src/scripts/i18n.ts

@@ -0,0 +1,7 @@
+import en from '../../i18n/en.json';
+import de from '../../i18n/de.json';
+
+export default {
+  en,
+  de
+};

src/scripts/reducers/index.ts

@@ -1,9 +1,11 @@
 import {combineReducers} from 'redux';
 
+import localeReducer from './locale';
 import layersReducer from './layers';
 import selectedLayerReducer from './selected-layer-id';
 
 const rootReducer = combineReducers({
+  locale: localeReducer,
   layers: layersReducer,
   selectedLayer: selectedLayerReducer
 });

src/scripts/reducers/locale.ts

@@ -0,0 +1,22 @@
+import {State} from './index';
+import {SET_LOCALE, Locale, SetLocaleAction} from '../actions/set-locale';
+
+const initialState: Locale = Locale.EN;
+
+function localeReducer(
+  localeState: Locale = initialState,
+  action: SetLocaleAction
+): Locale {
+  switch (action.type) {
+    case SET_LOCALE:
+      return action.locale;
+    default:
+      return localeState;
+  }
+}
+
+export function localeSelector(state: State): Locale {
+  return state.locale;
+}
+
+export default localeReducer;

tsconfig.json

@@ -9,6 +9,7 @@
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "target": "es5",
-    "jsx": "react"
+    "jsx": "react",
+    "resolveJsonModule": true
   }
 }