added i18n for translation

jsonserver/server.js

@@ -39,6 +39,8 @@ server.patch('/user', (req, res) => res.jsonp({lang: 'fr'}))
 //   res.jsonp('gg')
 // })
 
+server.get('/lang', (req, res) => res.jsonp(jsonDb.lang))
+
 server.post('/user/login', (req, res) => {
   if (req.body.login !== '' && req.body.password !== '') return res.jsonp(jsonDb.user_logged)
   else return res.jsonp('error')

jsonserver/static_db.json

@@ -1,4 +1,15 @@
 {
+  "lang": [{
+    "id": "fr",
+    "name": "Français",
+    "src": "https://upload.wikimedia.org/wikipedia/commons/c/c3/Flag_of_France.svg",
+    "active": true
+  }, {
+    "id": "en",
+    "name": "English",
+    "src": "https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg",
+    "active": false
+  }],
   "user_logged": {
     "logged": true,
     "user": {

package.json

@@ -26,10 +26,12 @@
     "classnames": "^2.2.5",
     "css-loader": "^0.28.7",
     "file-loader": "^1.1.5",
+    "i18next": "^10.5.0",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-animate-height": "^0.10.10",
     "react-dom": "^16.0.0",
+    "react-i18next": "^7.4.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "redux": "^3.7.2",

src/action-creator.async.js

@@ -1,5 +1,7 @@
 import { FETCH_CONFIG } from './helper.js'
 import {
+  LANG,
+  updateLangList,
   USER_LOGIN,
   USER_DATA,
   USER_CONNECTED,
@@ -59,6 +61,16 @@ const fetchWrapper = async ({url, param, actionName, dispatch, debug = false}) =
   return fetchResult
 }
 
+export const getLangList = () => async dispatch => {
+  const fetchGetLangList = await fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/lang`,
+    param: {...FETCH_CONFIG.header, method: 'GET'},
+    actionName: LANG,
+    dispatch
+  })
+  if (fetchGetLangList.status === 200) dispatch(updateLangList(fetchGetLangList.json))
+}
+
 export const userLogin = (login, password, rememberMe) => async dispatch => {
   const fetchUserLogin = await fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/user/login`,
@@ -87,7 +99,7 @@ export const getIsUserConnected = () => async dispatch => {
   if (fetchUserLogged.status === 200) dispatch(updateUserConnected(fetchUserLogged.json))
 }
 
-export const updateUserLang = newLang => async dispatch => {
+export const updateUserLang = newLang => async dispatch => { // unused
   const fetchUpdateUserLang = await fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/user`,
     param: {...FETCH_CONFIG.header, method: 'PATCH', body: JSON.stringify({lang: newLang})},

src/action-creator.sync.js

@@ -10,7 +10,7 @@ export const updateWorkspaceData = workspace => ({ type: `Update/${WORKSPACE}`,
 
 export const WORKSPACE_LIST = 'WorkspaceList'
 export const updateWorkspaceListData = workspaceList => ({ type: `Update/${WORKSPACE_LIST}`, workspaceList })
-export const updateWorkspaceListIsOpen = (workspaceId, isOpen) => ({ type: `Update/${WORKSPACE_LIST}/isOpen`, workspaceId, isOpen })
+export const setWorkspaceListIsOpen = (workspaceId, isOpen) => ({ type: `Set/${WORKSPACE_LIST}/isOpen`, workspaceId, isOpen })
 
 export const FILE_CONTENT = 'FileContent'
 export const setActiveFileContent = file => ({ type: `Set/${FILE_CONTENT}/Active`, file })
@@ -18,3 +18,7 @@ export const hideActiveFileContent = () => ({ type: `Set/${FILE_CONTENT}/Hide` }
 
 export const APP_LIST = 'App/List'
 export const setAppList = appList => ({ type: `Set/${APP_LIST}`, appList })
+
+export const LANG = 'Lang'
+export const updateLangList = langList => ({ type: `Update/${LANG}`, langList })
+export const setLangActive = langId => ({ type: `Set/${LANG}/Active`, langId })

src/component/Header/MenuActionListItem/DropdownLang.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import flagFr from '../../../img/flagFr.png' // for default lang
 
 const DropdownLang = props => {
-  const activeLang = props.langList.find(l => l.active) || {id: 'fr', name: 'Français', src: flagFr, active: true}
+  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'>

src/component/Header/MenuActionListItem/Search.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { translate } from 'react-i18next'
 
 const Search = props => {
   return (
@@ -8,7 +9,7 @@ const Search = props => {
         <input
           type='text'
           className='search__input form-control'
-          placeholder='Rechercher un dossier ..'
+          placeholder={`${props.t('Header.Search')}...`}
           aria-describedby='headerInputSearch'
           onChange={props.onChangeInput}
         />
@@ -23,7 +24,7 @@ const Search = props => {
     </li>
   )
 }
-export default Search
+export default translate()(Search)
 
 Search.propTypes = {
   onChangeInput: PropTypes.func.isRequired,

src/component/Workspace/FileItemHeader.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { translate } from 'react-i18next'
 
 const FileItemHeader = props => {
   return (
@@ -10,16 +11,16 @@ const FileItemHeader = props => {
       </div>
       <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-10'>
         <div className='file__header__name'>
-          Nom du document ou fichier
+          {props.t('FileItemHeader.document_name')}
         </div>
       </div>
       <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
         <div className='file__header__status'>
-          Statut
+          {props.t('FileItemHeader.status')}
         </div>
       </div>
     </div>
   )
 }
 
-export default FileItemHeader
+export default translate()(FileItemHeader)

src/component/Workspace/Folder.jsx

@@ -1,27 +1,28 @@
-import React, { Component } from 'react'
+import React from 'react'
+import { translate } from 'react-i18next'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import FileItem from './FileItem.jsx'
 
 // @TODO set Folder as a component, state open will come from parent container (which will come from redux) // update: or not ?
 
-class Folder extends Component {
+class Folder extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
       open: false
     }
-    this.handleClickToggleFolder = this.handleClickToggleFolder.bind(this)
   }
 
   handleClickToggleFolder = () => this.setState({open: !this.state.open})
+
   handleClickNewFile = e => {
     e.stopPropagation() // because we have a link inside a link (togler and newFile)
     console.log('new file') // @TODO
   }
 
   render () {
-    const { app, folderData: { title, content }, isLast } = this.props
+    const { app, folderData: { title, content }, isLast, t } = this.props
     return (
       <div className={classnames('folder', {'active': this.state.open, 'item-last': isLast})}>
         <div className='folder__header' onClick={this.handleClickToggleFolder}>
@@ -37,7 +38,7 @@ class Folder extends Component {
             </div>
             <div className='folder__header__name__addbtn' onClick={this.handleClickNewFile}>
               <div className='folder__header__name__addbtn__text btn btn-primary'>
-                créer ...
+                {t('Folder.create')} ...
               </div>
             </div>
           </div>
@@ -72,7 +73,7 @@ class Folder extends Component {
   }
 }
 
-export default Folder
+export default translate()(Folder)
 
 Folder.propTypes = {
   folderData: PropTypes.shape({

src/container/Header.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import i18n from '../i18n.js'
 import Logo from '../component/Header/Logo.jsx'
 import NavbarToggler from '../component/Header/NavbarToggler.jsx'
 import MenuLinkList from '../component/Header/MenuLinkList.jsx'
@@ -9,14 +10,9 @@ import MenuActionListItemDropdownLang from '../component/Header/MenuActionListIt
 import MenuActionListItemHelp from '../component/Header/MenuActionListItem/Help.jsx'
 import MenuActionListItemMenuProfil from '../component/Header/MenuActionListItem/MenuProfil.jsx'
 import logoHeader from '../img/logoHeader.svg'
-import flagFr from '../img/flagFr.png'
-import flagEn from '../img/flagEn.png'
-// import { updateUserLang } from '../action-creator.async.js'
+import { setLangActive } from '../action-creator.sync.js'
 
 class Header extends React.Component {
-  // handleChangeLang = newLang => this.props.dispatch(updateUserLang(newLang))
-  // handleSubmitSearch = search => console.log('search submited : ', search)
-
   handleClickLogo = () => {}
 
   handleClickFeature = () => {}
@@ -26,7 +22,10 @@ class Header extends React.Component {
   handleChangeInput = e => this.setState({inputSearchValue: e.target.value})
   handleClickSubmit = () => {}
 
-  handleChangeLang = langId => {}
+  handleChangeLang = langId => {
+    this.props.dispatch(setLangActive(langId))
+    i18n.changeLanguage(langId)
+  }
 
   handleClickHelp = () => {}
 
@@ -34,28 +33,12 @@ class Header extends React.Component {
   handleClickLogout = () => {}
 
   render () {
-    const { user } = this.props
-    const langList = [{ // @TODO this should come from API
-      id: 'fr',
-      name: 'Français',
-      src: flagFr,
-      active: true
-    }, {
-      id: 'en',
-      name: 'English',
-      src: flagEn,
-      active: false
-    }]
-    // const userLogged = {
-    //   name: 'MrLapin',
-    //   avatar: 'https://photos-5.dropbox.com/t/2/AABmH38-9J0wawQdkSbEd757WfRA411L4h1eGtK0MLbWhA/' +
-    //   '12/14775898/png/32x32/1/_/1/2/avatar.png/ELyA_woY8SUgBygH/f3VzTEnU5OWqjkWwGyHOrJA2vYQKb3j' +
-    //   'S_zkvxpAJO0g?size=800x600&size_mode=3'
-    // }
+    const { lang, user } = this.props
 
     const HeaderWrapper = props => <header><nav className='header navbar navbar-expand-md navbar-light bg-light'>{props.children}</nav></header>
     const HeaderMenuRightWrapper = props => <div className='header__menu collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>{props.children}</div>
     const MenuActionListWrapper = props => <ul className='header__menu__rightside'>{ props.children }</ul>
+
     return (
       <HeaderWrapper>
         <Logo logoSrc={logoHeader} onClickImg={this.handleClickLogo} />
@@ -73,7 +56,7 @@ class Header extends React.Component {
               onClickSubmit={this.handleClickSubmit}
             />
             <MenuActionListItemDropdownLang
-              langList={langList}
+              langList={lang}
               onChangeLang={this.handleChangeLang}
             />
             <MenuActionListItemHelp
@@ -90,4 +73,6 @@ class Header extends React.Component {
     )
   }
 }
-export default connect(({ user }) => ({ user }))(Header)
+
+const mapStateToProps = ({ lang, user }) => ({ lang, user })
+export default connect(mapStateToProps)(Header)

src/container/Sidebar.jsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 import WorkspaceListItem from '../component/Sidebar/WorkspaceListItem.jsx'
 import { getWorkspaceList } from '../action-creator.async.js'
-import { updateWorkspaceListIsOpen } from '../action-creator.sync.js'
+import { setWorkspaceListIsOpen } from '../action-creator.sync.js'
 import { PAGE_NAME } from '../helper.js'
 
 class Sidebar extends React.Component {
@@ -24,7 +24,7 @@ class Sidebar extends React.Component {
     user.id !== 0 && prevProps.user.id !== user.id && dispatch(getWorkspaceList(user.id))
   }
 
-  handleClickWorkspace = (wsId, newIsOpen) => this.props.dispatch(updateWorkspaceListIsOpen(wsId, newIsOpen))
+  handleClickWorkspace = (wsId, newIsOpen) => this.props.dispatch(setWorkspaceListIsOpen(wsId, newIsOpen))
 
   handleClickAllContent = wsId => {
     this.props.history.push(`${PAGE_NAME.WS_CONTENT}/${wsId}`)

src/container/Tracim.jsx

@@ -14,11 +14,15 @@ import {
 } from 'react-router-dom'
 import PrivateRoute from './PrivateRoute.jsx'
 import { PAGE_NAME } from '../helper.js'
-import { getIsUserConnected } from '../action-creator.async.js'
+import {
+  getLangList,
+  getIsUserConnected
+} from '../action-creator.async.js'
 
 class Tracim extends React.Component {
   componentDidMount = () => {
     this.props.dispatch(getIsUserConnected())
+    this.props.dispatch(getLangList())
   }
 
   render () {

src/css/Header.styl

@@ -53,6 +53,8 @@
               padding 0
               min-width 0
               .subdropdown
+                &__link
+                  cursor pointer
                 &__flag
                   width 25px
                   height 18px

src/i18n.js

@@ -0,0 +1,26 @@
+import i18n from 'i18next'
+import { reactI18nextModule } from 'react-i18next'
+import fr from './translate/fr.js'
+import en from './translate/en.js'
+
+i18n
+  .use(reactI18nextModule)
+  .init({
+    fallbackLng: 'fr',
+    // have a common namespace used around the full app
+    ns: ['translation'], // namespace
+    defaultNS: 'translation',
+    debug: true,
+    // interpolation: {
+    //   escapeValue: false, // not needed for react!!
+    // },
+    react: {
+      wait: true
+    },
+    resources: {
+      en,
+      fr
+    }
+  })
+
+export default i18n

src/index.js

@@ -4,13 +4,17 @@ import { Provider } from 'react-redux'
 import { store } from './store.js'
 import Tracim from './container/Tracim.jsx'
 import { BrowserRouter } from 'react-router-dom'
+import { I18nextProvider } from 'react-i18next'
+import i18n from './i18n.js'
 
 require('./css/index.styl')
 
 ReactDOM.render(
   <Provider store={store}>
     <BrowserRouter>
-      <Tracim />
+      <I18nextProvider i18n={i18n}>
+        <Tracim />
+      </I18nextProvider>
     </BrowserRouter>
   </Provider>
   , document.getElementById('content')

src/reducer/lang.js

@@ -0,0 +1,16 @@
+import { LANG } from '../action-creator.sync.js'
+
+export function lang (state = [], action) {
+  switch (action.type) {
+    case `Update/${LANG}`:
+      return action.langList
+
+    case `Set/${LANG}/Active`:
+      return state.map(l => ({...l, active: l.id === action.langId}))
+
+    default:
+      return state
+  }
+}
+
+export default lang

src/reducer/root.js

@@ -1,10 +1,11 @@
 import { combineReducers } from 'redux'
+import lang from './lang.js'
 import user from './user.js'
 import workspace from './workspace.js'
 import workspaceList from './workspaceList.js'
 import activeFileContent from './activeFileContent.js'
 import app from './app.js'
 
-const rootReducer = combineReducers({ user, workspace, workspaceList, activeFileContent, app })
+const rootReducer = combineReducers({ lang, user, workspace, workspaceList, activeFileContent, app })
 
 export default rootReducer

src/reducer/workspaceList.js

@@ -10,7 +10,7 @@ export function workspaceList (state = [], action) {
         isOpen: false
       }))
 
-    case `Update/${WORKSPACE_LIST}/isOpen`:
+    case `Set/${WORKSPACE_LIST}/isOpen`:
       return state.map(ws => ws.id === action.workspaceId
         ? {...ws, isOpen: action.isOpen}
         : ws

src/translate/en.js

@@ -0,0 +1,16 @@
+const en = {
+  translation: { // 'en' in the namespace 'translation'
+    Header: {
+      Search: 'Search'
+    },
+    FileItemHeader: {
+      document_name: "Document's name",
+      status: 'Status'
+    },
+    Folder: {
+      create: 'Create'
+    }
+  }
+}
+
+export default en

src/translate/fr.js

@@ -0,0 +1,16 @@
+const fr = {
+  translation: { // 'fr' in the namespace 'translation'
+    Header: {
+      Search: 'Rechercher'
+    },
+    FileItemHeader: {
+      document_name: 'Nom du document',
+      status: 'Status'
+    },
+    Folder: {
+      create: 'Créer'
+    }
+  }
+}
+
+export default fr