Client - store language w/ redux

fittrackee_client/src/actions/index.js

@@ -12,6 +12,11 @@ export const setError = message => ({
   message,
 })
 
+export const setLanguage = language => ({
+  type: 'SET_LANGUAGE',
+  language,
+})
+
 export const setLoading = loading => ({
   type: 'SET_LOADING',
   loading,

fittrackee_client/src/components/NavBar/LanguageDropdown.jsx

@@ -1,8 +1,10 @@
 import React, { Component } from 'react'
 import i18next from 'i18next'
+import { connect } from 'react-redux'
 
 import { ReactComponent as EnFlag } from '../../images/flags/en.svg'
 import { ReactComponent as FrFlag } from '../../images/flags/fr.svg'
+import { setLanguage } from '../../actions/index'
 
 const languages = [
   {
@@ -22,16 +24,6 @@ class Dropdown extends Component {
     super(props)
     this.state = {
       isOpen: false,
-      selected: 'en',
-    }
-  }
-
-  selectLanguage(name) {
-    if (name !== this.state.selected) {
-      i18next.changeLanguage(name)
-      this.setState({
-        selected: name,
-      })
     }
   }
 
@@ -42,7 +34,8 @@ class Dropdown extends Component {
   }
 
   render() {
-    const { isOpen, selected } = this.state
+    const { isOpen } = this.state
+    const { language: selected, onUpdateLanguage } = this.props
     return (
       <div className="dropdown-wrapper" onClick={() => this.toggleDropdown()}>
         <ul className="dropdown-list i18n-flag">
@@ -58,7 +51,7 @@ class Dropdown extends Component {
                     : ''
                 }`}
                 key={language.name}
-                onClick={() => this.selectLanguage(language.name)}
+                onClick={() => onUpdateLanguage(language.name, selected)}
               >
                 {language.flag} {language.name}
               </li>
@@ -69,4 +62,16 @@ class Dropdown extends Component {
   }
 }
 
-export default Dropdown
+export default connect(
+  state => ({
+    language: state.language,
+  }),
+  dispatch => ({
+    onUpdateLanguage: (lang, selected) => {
+      if (lang !== selected) {
+        i18next.changeLanguage(lang)
+        dispatch(setLanguage(lang))
+      }
+    },
+  })
+)(Dropdown)

fittrackee_client/src/reducers/index.js

@@ -57,6 +57,13 @@ const gpx = (state = initial.gpx, action) => {
   return state
 }
 
+const language = (state = initial.language, action) => {
+  if (action.type === 'SET_LANGUAGE') {
+    return action.language
+  }
+  return state
+}
+
 const loading = (state = initial.loading, action) => {
   if (action.type === 'SET_LOADING') {
     return action.loading
@@ -124,6 +131,7 @@ export default history =>
     calendarActivities,
     chartData,
     gpx,
+    language,
     loading,
     message,
     messages,

fittrackee_client/src/reducers/initial.js

@@ -3,6 +3,7 @@ const emptyData = {
 }
 
 export default {
+  language: 'en',
   message: '',
   messages: [],
   user: {