API & Client: add user langage preferences in database

fittrackee_client/src/actions/index.js

@@ -1,3 +1,5 @@
+import i18next from 'i18next'
+
 import FitTrackeeApi from '../fitTrackeeApi/index'
 import { history } from '../index'
 
@@ -62,3 +64,7 @@ export const deleteData = (target, id) => dispatch => {
     })
     .catch(error => dispatch(setError(`${target}: ${error}`)))
 }
+
+export const updateLanguage = language => dispatch => {
+  i18next.changeLanguage(language).then(dispatch(setLanguage(language)))
+}

fittrackee_client/src/actions/user.js

@@ -2,7 +2,7 @@ import FitTrackeeGenericApi from '../fitTrackeeApi'
 import FitTrackeeApi from '../fitTrackeeApi/user'
 import { history } from '../index'
 import { generateIds } from '../utils'
-import { getOrUpdateData } from './index'
+import { getOrUpdateData, updateLanguage } from './index'
 
 const AuthError = message => ({ type: 'AUTH_ERROR', message })
 
@@ -34,6 +34,9 @@ export const getProfile = () => dispatch =>
       if (ret.status === 'success') {
         dispatch(getOrUpdateData('getData', 'sports'))
         ret.data.isAuthenticated = true
+        if (ret.data.language) {
+          dispatch(updateLanguage(ret.data.language))
+        }
         return dispatch(ProfileSuccess(ret.data))
       }
       return dispatch(ProfileError(ret.message))

fittrackee_client/src/components/NavBar/LanguageDropdown.jsx

@@ -1,12 +1,11 @@
 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'
+import { updateLanguage } from '../../actions/index'
 
-const languages = [
+export const languages = [
   {
     name: 'en',
     selected: true,
@@ -69,8 +68,7 @@ export default connect(
   dispatch => ({
     onUpdateLanguage: (lang, selected) => {
       if (lang !== selected) {
-        i18next.changeLanguage(lang)
-        dispatch(setLanguage(lang))
+        dispatch(updateLanguage(lang))
       }
     },
   })

fittrackee_client/src/components/User/Profile.jsx

@@ -60,6 +60,9 @@ function Profile({ message, onDeletePicture, onUploadPicture, t, user }) {
                     <p>
                       {t('user:Bio')}: {user.bio}
                     </p>
+                    <p>
+                      {t('user:Language')}: {user.language}
+                    </p>
                     <p>
                       {t('user:Timezone')}: {user.timezone}
                     </p>

fittrackee_client/src/components/User/ProfileEdit.jsx

@@ -7,6 +7,7 @@ import TimezonePicker from 'react-timezone'
 
 import { handleProfileFormSubmit } from '../../actions/user'
 import { history } from '../../index'
+import { languages } from '../NavBar/LanguageDropdown'
 
 class ProfileEdit extends React.Component {
   constructor(props, context) {
@@ -182,6 +183,23 @@ class ProfileEdit extends React.Component {
                               />
                             </label>
                           </div>
+                          <div className="form-group">
+                            <label>
+                              {t('user:Language')}:
+                              <select
+                                name="language"
+                                className="form-control input-lg"
+                                value={formData.language}
+                                onChange={e => this.handleFormChange(e)}
+                              >
+                                {languages.map(lang => (
+                                  <option value={lang.name} key={lang.name}>
+                                    {lang.name}
+                                  </option>
+                                ))}
+                              </select>
+                            </label>
+                          </div>
                           <div className="form-group">
                             <label>
                               {t('user:Timezone')}:

fittrackee_client/src/locales/en/user.json

@@ -10,6 +10,7 @@
   "Enter the password confirmation": "Enter the password confirmation",
   "First day of week": "First day of week",
   "First Name": "First Name",
+  "Language": "Language",
   "Last Name": "Last Name",
   "Location": "Location",
   "loggedOut": "You are now logged out. Click <1>here</1> to log back in.",

fittrackee_client/src/locales/fr/user.json

@@ -10,6 +10,7 @@
   "Enter the password confirmation": "Confirmer le mot de passe",
   "First day of week": "Premier jour de la semaine",
   "First Name": "Prénom",
+  "Language": "Langue",
   "Last Name": "Nom",
   "Location": "Lieu",
   "loggedOut": "Vous êtes déconnecté. Cliquez <1>ici</1> pour vous reconnecter.",