feat: use redux to select the language

Author: jgiovaresco

package.json

@@ -85,6 +85,7 @@
         "node-sass": "^4.12.0",
         "prettier": "^1.18.2",
         "react-docgen-typescript-loader": "^3.1.0",
+        "redux-devtools-extension": "^2.13.8",
         "sass": "^1.22.7",
         "sass-loader": "^7.1.0",
         "semantic-release": "^15.13.18",
@@ -102,6 +103,8 @@
         "normalize.css": "^8.0.1",
         "phaser-ce": "2.13.2",
         "react": "^16.8.6",
-        "react-dom": "^16.8.6"
+        "react-dom": "^16.8.6",
+        "react-redux": "^7.1.0",
+        "redux": "^4.0.4"
     }
 }

src/app/App.tsx

@@ -1,47 +1,21 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { useSelector } from 'react-redux';
 
 import { TheGame } from './the-game';
-import { Language, LanguageSelector } from './components';
+import { SelectLanguage } from './containers';
 import { isEmpty } from 'lodash';
-import { i18nService, SupportedLocale } from '../i18n/I18nService';
+import { i18nService } from '../i18n/I18nService';
 import './App.scss';
 
-type AppProps = {};
+export const App = () => {
+    i18nService.init();
 
-type AppState = {
-    selectedLanguage: string;
-    availableLanguages: Language[];
-};
-
-export class App extends Component<AppProps, AppState> {
-    constructor(props: AppProps) {
-        super(props);
-
-        i18nService.init();
-
-        this.state = {
-            selectedLanguage: '',
-            availableLanguages: [{ code: 'en', name: 'English' }, { code: 'fr', name: 'Français' }],
-        };
-    }
+    const selectedLanguage = useSelector(state => state.language.selectedLanguage);
 
-    setActiveLanguage(language: SupportedLocale) {
-        this.setState({ ...this.state, selectedLanguage: language });
-        return i18nService.setLanguage(language);
+    let component = <SelectLanguage />;
+    if (!isEmpty(selectedLanguage)) {
+        component = <TheGame />;
     }
 
-    render() {
-        let component = (
-            <LanguageSelector
-                languages={this.state.availableLanguages}
-                setActiveLanguage={l => this.setActiveLanguage(l)}
-            />
-        );
-
-        if (!isEmpty(this.state.selectedLanguage)) {
-            component = <TheGame />;
-        }
-
-        return component;
-    }
-}
+    return component;
+};

src/app/app.store.ts

@@ -0,0 +1,5 @@
+import { createStore } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import { reducers } from './reducers';
+
+export const store = createStore(reducers, composeWithDevTools());

src/app/containers/index.ts

@@ -0,0 +1 @@
+export * from './select-language';

src/app/containers/select-language/SelectLanguage.ts

@@ -0,0 +1,26 @@
+import { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+
+import { LanguageSelector } from '../../components';
+import { selectLanguage } from '../../reducers';
+import { i18nService, SupportedLocale } from '../../../i18n/I18nService';
+
+const mapStateToProps = (state: any) => {
+    return {
+        languages: state.language.availableLanguages,
+    };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => {
+    return {
+        setActiveLanguage: async (selectedLanguage: SupportedLocale) => {
+            await i18nService.setLanguage(selectedLanguage);
+            dispatch(selectLanguage(selectedLanguage));
+        },
+    };
+};
+
+export const SelectLanguage = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(LanguageSelector);

src/app/containers/select-language/index.ts

@@ -0,0 +1 @@
+export * from './SelectLanguage';

src/app/reducers/index.ts

@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux';
+import { languageReducer } from './language.reducer';
+
+export * from './language.action';
+export { LanguageState } from './language.reducer';
+
+export const reducers = combineReducers({
+    language: languageReducer,
+});

src/app/reducers/language.action.ts

@@ -0,0 +1,17 @@
+import { SupportedLocale } from '../../i18n/I18nService';
+
+export const SELECT_LANGUAGE = 'SELECT_LANGUAGE';
+
+export type SelectLanguageAction = {
+    type: typeof SELECT_LANGUAGE;
+    payload: SupportedLocale;
+};
+
+export type LanguageActionTypes = SelectLanguageAction;
+
+export function selectLanguage(language: SupportedLocale): SelectLanguageAction {
+    return {
+        type: SELECT_LANGUAGE,
+        payload: language,
+    };
+}

src/app/reducers/language.reducer.test.ts

@@ -0,0 +1,16 @@
+import { selectLanguage } from './language.action';
+import { languageReducer } from './language.reducer';
+
+describe('Language reducer', () => {
+    it('provides an initial state', () => {
+        expect(languageReducer(undefined, {} as any)).toEqual({
+            selectedLanguage: '',
+        });
+    });
+
+    it('set the languageReducer on SELECT_LANGUAGE', () => {
+        expect(languageReducer(undefined, selectLanguage('fr'))).toEqual({
+            selectedLanguage: 'fr',
+        });
+    });
+});

src/app/reducers/language.reducer.ts

@@ -0,0 +1,25 @@
+import { LanguageActionTypes } from './language.action';
+import { Language } from '../components/language-selector';
+
+export type LanguageState = {
+    availableLanguages: Language[];
+    selectedLanguage: string;
+};
+
+const INITIAL_STATE: LanguageState = {
+    availableLanguages: [{ code: 'en', name: 'English' }, { code: 'fr', name: 'Français' }],
+    selectedLanguage: '',
+};
+
+export const languageReducer = (state = INITIAL_STATE, action: LanguageActionTypes) => {
+    switch (action.type) {
+        case 'SELECT_LANGUAGE':
+            return {
+                ...state,
+                selectedLanguage: action.payload,
+            };
+
+        default:
+            return state;
+    }
+};