API & Client: add user langage preferences in database

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')}: