added switch lang btn in header

frontend/src/action-creator.sync.js

@@ -15,10 +15,12 @@ export const USER_DATA = 'User/Data'
 export const USER_ROLE = 'User/Role'
 export const USER_CONNECTED = 'User/Connected'
 export const USER_DISCONNECTED = 'User/Disconnected'
+export const USER_LANG = 'User/Lang'
 export const setUserConnected = user => ({ type: `Set/${USER_CONNECTED}`, user })
 export const setUserDisconnected = () => ({ type: `Set/${USER_DISCONNECTED}` })
 export const updateUserData = userData => ({ type: `Update/${USER_DATA}`, data: userData })
 export const setUserRole = userRole => ({ type: `Set/${USER_ROLE}`, userRole }) // this actually update workspaceList state
+export const setUserLang = lang => ({ type: `Set/${USER_LANG}`, lang })
 export const updateUserWorkspaceSubscriptionNotif = (workspaceId, subscriptionNotif) =>
   ({ type: `Update/${USER_ROLE}/SubscriptionNotif`, workspaceId, subscriptionNotif })
 
@@ -41,4 +43,3 @@ export const setContentTypeList = contentTypeList => ({ type: `Set/${CONTENT_TYP
 
 export const LANG = 'Lang'
 export const updateLangList = langList => ({ type: `Update/${LANG}`, langList })
-export const setLangActive = langId => ({ type: `Set/${LANG}/Active`, langId })

frontend/src/appFactory.js

@@ -2,8 +2,6 @@ import React from 'react'
 import { FETCH_CONFIG } from './helper.js'
 import i18n from './i18n.js'
 
-console.log('appFactory', i18n)
-
 export function appFactory (WrappedComponent) {
   return class AppFactory extends React.Component {
     renderAppFull = (appConfig, user, content) => GLOBAL_renderAppFull({

frontend/src/component/Header/MenuActionListItem/DropdownLang.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 const DropdownLang = props => {
-  const activeLang = props.langList.find(l => l.active) || {id: 'fr', name: 'Français', src: '', active: true}
   return (
     <li className='header__menu__rightside__itemlanguage'>
       <div className='header__menu__rightside__itemlanguage__languagedropdown dropdown'>
@@ -14,12 +13,12 @@ const DropdownLang = props => {
           aria-haspopup='true'
           aria-expanded='false'
         >
-          <img className='languagedropdown__btnlanguage__imgselected' src={activeLang.src} />
+          <img className='languagedropdown__btnlanguage__imgselected' src={props.langList.find(l => l.id === props.idLangActive).icon} />
         </button>
         <div className='languagedropdown__subdropdown dropdown-menu' aria-labelledby='headerDropdownMenuButton'>
-          { props.langList.map((l, i) => l.active === false &&
+          { props.langList.filter(l => l.id !== props.idLangActive).map((l, i) =>
             <div className='subdropdown__link dropdown-item' onClick={() => props.onChangeLang(l.id)} key={i}>
-              <img className='subdropdown__flag' src={l.src} />
+              <img className='subdropdown__flag' src={l.icon} />
             </div>
           )}
         </div>
@@ -31,5 +30,6 @@ export default DropdownLang
 
 DropdownLang.propTypes = {
   langList: PropTypes.array.isRequired,
+  idLangActive: PropTypes.string.isRequired,
   onChangeLang: PropTypes.func.isRequired
 }

frontend/src/container/Header.jsx

@@ -14,7 +14,7 @@ import MenuActionListItemNotification from '../component/Header/MenuActionListIt
 import logoHeader from '../img/logo-tracim.png'
 import {
   newFlashMessage,
-  setLangActive,
+  setUserLang,
   setUserDisconnected
 } from '../action-creator.sync.js'
 import {
@@ -33,7 +33,7 @@ class Header extends React.Component {
   handleClickSubmit = () => {}
 
   handleChangeLang = langId => {
-    this.props.dispatch(setLangActive(langId))
+    this.props.dispatch(setUserLang(langId))
     i18n.changeLanguage(langId)
   }
 
@@ -82,6 +82,7 @@ class Header extends React.Component {
 
               <MenuActionListItemDropdownLang
                 langList={lang}
+                idLangActive={user.lang}
                 onChangeLang={this.handleChangeLang}
               />
 

frontend/src/css/Header.styl

@@ -40,7 +40,6 @@
         background-color transparent
         cursor pointer
       &__itemlanguage
-        display none
         &__languagedropdown
           .languagedropdown
             &__btnlanguage

frontend/src/reducer/lang.js

@@ -1,12 +1,23 @@
 import { LANG } from '../action-creator.sync.js'
+import flagEn from '../img/flag_en.png'
+import flagFr from '../img/flag_fr.png'
 
-export function lang (state = [], action) {
+const defaultLang = [{
+  id: 'en',
+  icon: flagEn
+}, {
+  id: 'fr',
+  icon: flagFr
+}]
+
+export function lang (state = defaultLang, action) {
   switch (action.type) {
     case `Update/${LANG}`:
       return action.langList
 
-    case `Set/${LANG}/Active`:
-      return state.map(l => ({...l, active: l.id === action.langId}))
+    // Côme - 2018/07/30 - deprecated, lang active is saved in user reducer
+    // case `Set/${LANG}/Active`:
+    //   return state.map(l => ({...l, active: l.id === action.langId}))
 
     default:
       return state

frontend/src/reducer/user.js

@@ -1,12 +1,14 @@
 import {
   USER_CONNECTED,
   USER_DISCONNECTED,
-  USER_DATA
+  USER_DATA,
+  USER_LANG
 } from '../action-creator.sync.js'
 
 const defaultUser = {
   user_id: -1,
   logged: null, // null avoid to be redirected to /login while whoami ep has not responded yet
+  auth: '',
   timezone: '',
   profile: {
     id: 1,
@@ -17,13 +19,15 @@ const defaultUser = {
   caldav_url: null,
   avatar_url: null,
   created: '',
-  display_name: ''
+  public_name: '',
+  lang: 'en' // @FIXME Côme - 2018/07/30 - remove this line when api returns the lang (https://github.com/tracim/tracim/issues/734)
 }
 
 export default function user (state = defaultUser, action) {
   switch (action.type) {
     case `Set/${USER_CONNECTED}`:
       return {
+        ...state,
         ...action.user,
         avatar_url: 'https://www.algoo.fr/static/images/people_images/PERSO_SEUL.png' // @FIXME use avatar from api when db handles it
       }
@@ -34,6 +38,9 @@ export default function user (state = defaultUser, action) {
     case `Update/${USER_DATA}`:
       return {...state, ...action.data}
 
+    case `Set/${USER_LANG}`:
+      return {...state, lang: action.lang}
+
     default:
       return state
   }