[https://github.com/tracim/tracim/issues/637] added translation mecanism on all frontend folder

build_full_frontend.sh

 npm run build$windoz
 log "cp dist/html-document.app.js"
 cp dist/html-document.app.js ../frontend/dist/app
+log "cp i18next.scanner/en/translation.json ../frontend/dist/app/tml-document_en_translation.json"
+cp i18next.scanner/en/translation.json ../frontend/dist/app/html-document_en_translation.json
+log "cp i18next.scanner/fr/translation.json ../frontend/dist/app/html-document_fr_translation.json"
+cp i18next.scanner/fr/translation.json ../frontend/dist/app/html-document_fr_translation.json
 cd -
 
 log "cd frontend_app_thread"
 npm run build$windoz
 log "cp dist/thread.app.js"
 cp dist/thread.app.js ../frontend/dist/app
+log "cp i18next.scanner/en/translation.json ../frontend/dist/app/thread_en_translation.json"
+cp i18next.scanner/en/translation.json ../frontend/dist/app/thread_en_translation.json
+log "cp i18next.scanner/fr/translation.json ../frontend/dist/app/thread_fr_translation.json"
+cp i18next.scanner/fr/translation.json ../frontend/dist/app/thread_fr_translation.json
+cd -

frontend/i18next.scanner.js

+const scanner = require('i18next-scanner')
+const vfs = require('vinyl-fs')
+
+const option = require('../i18next.option.js')
+
+// this script is run by npm run build-translation and generate i18next.scanner/**/*.json
+
+// --------------------
+// 2018/07/27 - currently, last version is 2.6.5 but a bug is spaming log with errors. So I'm using 2.6.1
+// this issue seems related : https://github.com/i18next/i18next-scanner/issues/88
+// --------------------
+
+vfs.src(['./src/**/*.jsx'])
+  // .pipe(sort()) // Sort files in stream by path
+  .pipe(scanner(option))
+  .pipe(vfs.dest('./i18next.scanner'))

frontend/i18next.scanner/en/translation.json

+{
+  "Create your own collaborative workspaces on trac.im": "Create your own collaborative workspaces on trac.im",
+  "Copyright 2013 - 2017": "Copyright 2013 - 2017",
+  "Disconnection error": "Disconnection error",
+  "Create new workspace": "Create new workspace",
+  "Error": "Error",
+  "Email or password invalid": "Email or password invalid",
+  "Type": "Type",
+  "Document's name": "Document's name",
+  "Status": "Status",
+  "Create in folder...": "Create in folder...",
+  "Search...": "Search..."
+}

frontend/i18next.scanner/fr/translation.json

+{
+  "Create your own collaborative workspaces on trac.im": "Créer votre propre espace de travail sur trac.im",
+  "Copyright 2013 - 2017": "Copyright 2013 - 2017",
+  "Disconnection error": "Erreur de déconnexion",
+  "Create new workspace": "Créer un espace de travail",
+  "Error": "Erreur",
+  "Email or password invalid": "Email ou mot de passe invalid",
+  "Type": "Type",
+  "Document's name": "Nom du document",
+  "Status": "Statut",
+  "Create in folder...": "Créer dans le dossier ...",
+  "Search...": "Rechercher ..."
+}

frontend/package.json

     "servdev-dashboard": "NODE_ENV=development webpack-dashboard -m -- webpack-dev-server --watch --colors --inline --hot --progress",
     "buildwindoz": "set NODE_ENV=production&& webpack -p",
     "build": "NODE_ENV=production webpack -p",
+    "build-translation": "node i18next.scanner.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
+    "i18next-scanner": "^2.6.1",
     "json-server": "^0.12.0",
     "webpack-dashboard": "^1.0.2",
     "webpack-dev-server": "^2.9.2"

frontend/src/appFactory.js

 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 {
         domContainer: 'appContainer',
         apiUrl: FETCH_CONFIG.apiUrl,
         mockApiUrl: FETCH_CONFIG.mockApiUrl,
-        apiHeader: FETCH_CONFIG.headers
+        apiHeader: FETCH_CONFIG.headers,
+        translation: i18n.store.data
       },
       content
     })

frontend/src/component/FlashMessage.jsx

 
               <div className='flashmessage__container__content__text'>
                 <div className='flashmessage__container__content__text__title'>
-                  {props.t('FlashMessage.error')}
+                  {props.t('Error')}
                 </div>
                 <div className='flashmessage__container__content__text__paragraph'>
                   {props.flashMessage[0].message}

frontend/src/component/Footer.jsx

   return (
     <footer className='footer text-right'>
       <div className='footer__text'>
-        {t('Footer.marketing_msg')} - {t('Footer.copyright')}
+        {t('Create your own collaborative workspaces on trac.im')} - {t('Copyright 2013 - 2017')}
       </div>
       <img className='footer__logo' src={logoFooter} />
     </footer>

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

         <input
           type='text'
           className='search__input form-control'
-          placeholder={`${props.t('Header.Search')}...`}
+          placeholder={`${props.t('Search...')}`}
           aria-describedby='headerInputSearch'
           onChange={props.onChangeInput}
         />

frontend/src/component/Workspace/ContentItemHeader.jsx

   return (
     <div className='content__header'>
       <div className='content__header__type'>
-        {props.t('FileItemHeader.type')}
+        {props.t('Type')}
       </div>
       <div className='content__header__name'>
-        {props.t('FileItemHeader.document_name')}
+        {props.t("Document's name")}
       </div>
       <div className='content__header__status'>
-        {props.t('FileItemHeader.status')}
+        {props.t('Status')}
       </div>
     </div>
   )

frontend/src/component/Workspace/Folder.jsx

                 aria-expanded='false'
                 onClick={e => e.stopPropagation()}
               >
-                {t('Folder.create')} ...
+                {t('Create in folder...')}
               </button>
 
               <div className='addbtn__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>

frontend/src/container/Header.jsx

 
       dispatch(setUserDisconnected())
     } else {
-      dispatch(newFlashMessage(t('Login.logout_error', 'danger')))
+      dispatch(newFlashMessage(t('Disconnection error', 'danger')))
     }
   }
 

frontend/src/container/Login.jsx

 
       history.push(PAGE.HOME)
     } else if (fetchPostUserLogin.status === 400) {
-      dispatch(newFlashMessage(t('Login.fail'), 'danger'))
+      dispatch(newFlashMessage(t('Email or password invalid'), 'danger'))
     }
   }
 

frontend/src/container/Sidebar.jsx

 
             <div className='sidebar__btnnewworkspace'>
               <button className='sidebar__btnnewworkspace__btn btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover mb-5'>
-                {t('Sidebar.create_new_workspace')}
+                {t('Create new workspace')}
               </button>
             </div>
 

frontend/src/i18n.js

 import i18n from 'i18next'
 import { reactI18nextModule } from 'react-i18next'
-import { langFr, langEn } from 'tracim_frontend_lib'
-import fr from './translate/fr.js'
-import en from './translate/en.js'
+import { frLib, enLib } from 'tracim_frontend_lib'
+import en from '../i18next.scanner/en/translation.json'
+import fr from '../i18next.scanner/fr/translation.json'
+
+// get translation files of apps
+// theses files are generated by build_appname.sh
+const htmlDocEnTranslation = require('../dist/app/html-document_en_translation.json')
+const htmlDocFrTranslation = require('../dist/app/html-document_fr_translation.json')
 
 i18n
   .use(reactI18nextModule)
   .init({
-    fallbackLng: 'fr',
+    fallbackLng: 'en',
     // 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: {
-        translation: {...langEn.translation, ...en.translation}
+        translation: {
+          ...enLib, // fronted_lib
+          ...en, // frontend
+          ...htmlDocEnTranslation // html-document
+        }
       },
       fr: {
-        translation: {...langFr.translation, ...fr.translation}
+        translation: {
+          ...frLib, // fronted_lib
+          ...fr, // frontend
+          ...htmlDocFrTranslation // html-document
+        }
       }
     }
   })

frontend_app_html-document/build_html-document.sh

+#!/bin/bash
+
+. ../bash_library.sh # source bash_library.sh
+
+windoz=""
+if [[ $1 = "-w" ]]; then
+    windoz="windoz"
+fi
+
+log "npm run build$windoz"
+npm run build$windoz
+log "cp dist/html-document.app.js ../frontend/dist/app"
+cp dist/html-document.app.js ../frontend/dist/app
+log "cp i18next.scanner/en/translation.json ../frontend/dist/app/html-document_en_translation.json"
+cp i18next.scanner/en/translation.json ../frontend/dist/app/html-document_en_translation.json
+log "cp i18next.scanner/fr/translation.json ../frontend/dist/app/html-document_fr_translation.json"
+cp i18next.scanner/fr/translation.json ../frontend/dist/app/html-document_fr_translation.json

frontend_app_html-document/i18next.scanner.js

+const scanner = require('i18next-scanner')
+const vfs = require('vinyl-fs')
+
+const option = require('../i18next.option.js')
+
+// --------------------
+// 2018/07/27 - currently, last version is 2.6.5 but a bug is spaming log with errors. So I'm using 2.6.1
+// this issue seems related : https://github.com/i18next/i18next-scanner/issues/88
+// --------------------
+
+vfs.src(['./src/**/*.jsx'])
+// .pipe(sort()) // Sort files in stream by path
+  .pipe(scanner(option))
+  .pipe(vfs.dest('./i18next.scanner'))

frontend_app_html-document/i18next.scanner/en/translation.json

+{
+  "Last version": "Last version"
+}

frontend_app_html-document/i18next.scanner/fr/translation.json

+{
+  "Last version": "Dernière version"
+}

frontend_app_html-document/package.json

     "servdev": "NODE_ENV=development webpack-dev-server --watch --colors --inline --hot --progress",
     "servdevwindoz": "set NODE_ENV=development&& webpack-dev-server --watch --colors --inline --hot --progress",
     "servdev-dashboard": "NODE_ENV=development webpack-dashboard -m -p 9871 -- webpack-dev-server --watch --colors --inline --hot --progress",
-    "buildwindoz": "set NODE_ENV=production&& webpack -p",
     "build": "NODE_ENV=production webpack -p",
+    "build-translation": "node i18next.scanner.js",
+    "buildwindoz": "set NODE_ENV=production&& webpack -p",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
+    "i18next-scanner": "^2.6.1",
     "webpack-dashboard": "^1.1.1",
     "webpack-dev-server": "^2.9.2"
   },

frontend_app_html-document/rebuild_html-document.sh

-#!/bin/bash
-
-. ../bash_library.sh # source bash_library.sh
-
-windoz=""
-if  [[ $1 = "-w" ]]; then
-    windoz="windoz"
-fi
-
-log "npm run build$windoz"
-npm run build$windoz
-log "cp dist/html-document.app.js ../frontend/dist/app"
-cp dist/html-document.app.js ../frontend/dist/app

frontend_app_html-document/src/container/HtmlDocument.jsx

 import React from 'react'
 import HtmlDocumentComponent from '../component/HtmlDocument.jsx'
+import { translate } from 'react-i18next'
+import i18n from '../i18n.js'
 import {
+  addAllResourceI18n,
   handleFetchResult,
   PopinFixed,
   PopinFixedHeader,
   putHtmlDocContent,
   putHtmlDocStatus
 } from '../action.async.js'
-import i18n from '../i18n.js'
 
 class HtmlDocument extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      appName: 'html-documents',
+      appName: 'html-document',
       isVisible: true,
       config: props.data ? props.data.config : debug.config,
       loggedUser: props.data ? props.data.loggedUser : debug.loggedUser,
       mode: MODE.VIEW
     }
 
+    // i18n has been init, add resources from frontend
+    addAllResourceI18n(i18n, props.data ? props.data.config.translation : debug.config.translation)
+
     document.addEventListener('appCustomEvent', this.customEventReducer)
   }
 
 
   render () {
     const { isVisible, loggedUser, content, timeline, newComment, timelineWysiwyg, config, mode } = this.state
+    const { t } = this.props
 
     if (!isVisible) return null
 
                   style={{backgroundColor: config.hexcolor, color: '#fdfdfd'}}
                 >
                   <i className='fa fa-code-fork' />
-                  Dernière version
+                  {t('Last version')}
                 </button>
               }
             </div>
   }
 }
 
-export default HtmlDocument
+export default translate()(HtmlDocument)

frontend_app_html-document/src/container/PopupCreateHtmlDocument.jsx

   CardPopupCreateContent, handleFetchResult
 } from 'tracim_frontend_lib'
 import { postHtmlDocContent } from '../action.async.js'
+import {addAllResourceForI18n, addAllResourceI18n} from '../../../frontend_lib'
+import i18n from '../i18n.js'
 
 const debug = { // outdated
   config: {
       idFolder: props.data ? props.data.idFolder : debug.idFolder,
       newContentName: ''
     }
+
+    // i18n has been init, add resources from frontend
+    addAllResourceI18n(i18n, props.data ? props.data.config.translation : debug.config.translation)
   }
 
   handleChangeNewContentName = e => this.setState({newContentName: e.target.value})

frontend_app_html-document/src/helper.js

       faIcon: 'warning',
       hexcolor: '#ababab',
       globalStatus: 'closed'
-    }]
+    }],
+    translation: {
+      en: {
+        translation: {
+          'Last version': 'Last version debug en'
+        }
+      },
+      fr: {
+        translation: {
+          'Last version': 'Dernière version debug fr'
+        }
+      }
+    }
   },
   loggedUser: { // @FIXME this object is outdated
     user_id: 5,

frontend_app_html-document/src/i18n.js

 import i18n from 'i18next'
 import { reactI18nextModule } from 'react-i18next'
-import { langFr, langEn } from 'tracim_frontend_lib'
-import fr from './translate/fr.js'
-import en from './translate/en.js'
 
 i18n
   .use(reactI18nextModule)
     react: {
       wait: true
     },
-    resources: {
-      en: {
-        translation: {...langEn.translation, ...en.translation}
-      },
-      fr: {
-        translation: {...langFr.translation, ...fr.translation}
-      }
-    }
+    resources: {} // init with empty resources, they will come from frontend in app constructor
   })
 
 export default i18n

frontend_app_thread/build_thread.sh

+#!/bin/bash
+
+. ../bash_library.sh # source bash_library.sh
+
+windoz=""
+if  [[ $1 = "-w" ]]; then
+    windoz="windoz"
+fi
+
+log "npm run build$windoz"
+npm run build$windoz
+log "cp dist/thread.app.js ../frontend/dist/app"
+cp dist/thread.app.js ../frontend/dist/app
+log "cp i18next.scanner/en/translation.json ../frontend/dist/app/thread_en_translation.json"
+cp i18next.scanner/en/translation.json ../frontend/dist/app/thread_en_translation.json
+log "cp i18next.scanner/fr/translation.json ../frontend/dist/app/thread_fr_translation.json"
+cp i18next.scanner/fr/translation.json ../frontend/dist/app/thread_fr_translation.json

frontend_app_thread/i18next.scanner.js

+const scanner = require('i18next-scanner')
+const vfs = require('vinyl-fs')
+
+const option = require('../i18next.option.js')
+
+// --------------------
+// 2018/07/27 - currently, last version is 2.6.5 but a bug is spaming log with errors. So I'm using 2.6.1
+// this issue seems related : https://github.com/i18next/i18next-scanner/issues/88
+// --------------------
+
+vfs.src(['./src/**/*.jsx'])
+// .pipe(sort()) // Sort files in stream by path
+  .pipe(scanner(option))
+  .pipe(vfs.dest('./i18next.scanner'))

frontend_app_thread/i18next.scanner/en/translation.json

+{}

frontend_app_thread/i18next.scanner/fr/translation.json

+{}

frontend_app_thread/package.json

     "servdevwindoz": "set NODE_ENV=development&& webpack-dev-server --watch --colors --inline --hot --progress",
     "servdev-dashboard": "NODE_ENV=development webpack-dashboard -m -p 9872 -- webpack-dev-server --watch --colors --inline --hot --progress",
     "build": "NODE_ENV=production webpack -p",
+    "build-translation": "node i18next.scanner.js",
     "buildwindoz": "set NODE_ENV=production&& webpack -p",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
+    "i18next-scanner": "^2.6.1",
     "webpack-dashboard": "^1.1.1",
     "webpack-dev-server": "^2.9.2"
   },

frontend_app_thread/rebuild_thread.sh

-#!/bin/bash
-
-. ../bash_library.sh # source bash_library.sh
-
-windoz=""
-if  [[ $1 = "-w" ]]; then
-    windoz="windoz"
-fi
-
-log "npm run build$windoz"
-npm run build$windoz
-log "cp dist/thread.app.js ../frontend/dist/app"
-cp dist/thread.app.js ../frontend/dist/app

frontend_app_thread/src/container/PopupCreateThread.jsx

 import React from 'react'
 import {
+  addAllResourceI18n,
   CardPopupCreateContent,
   handleFetchResult
 } from 'tracim_frontend_lib'
       'Accept': 'application/json',
       'Content-Type': 'application/json',
       'Authorization': 'Basic ' + btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
+    },
+    translation: {
+      en: {
+        translation: {}
+      },
+      fr: {
+        translation: {}
+      }
     }
   },
   loggedUser: {
       idFolder: props.data ? props.data.idFolder : debug.idFolder,
       newContentName: ''
     }
+
+    // i18n has been init, add resources from frontend
+    addAllResourceI18n(i18n, props.data ? props.data.config.translation : debug.config.translation)
   }
 
   handleChangeNewContentName = e => this.setState({newContentName: e.target.value})

frontend_app_thread/src/container/Thread.jsx

 import i18n from '../i18n.js'
 import { debug } from '../helper.js'
 import {
+  addAllResourceI18n,
   handleFetchResult,
   PopinFixed,
   PopinFixedHeader,
       timelineWysiwyg: false
     }
 
+    // i18n has been init, add resources from frontend
+    addAllResourceI18n(i18n, props.data ? props.data.config.translation : debug.config.translation)
+
     document.addEventListener('appCustomEvent', this.customEventReducer)
   }
 

frontend_lib/i18next.scanner.js

+const scanner = require('i18next-scanner')
+const vfs = require('vinyl-fs')
+
+const option = require('../i18next.option.js')
+
+vfs.src(['./src/**/*.jsx'])
+// .pipe(sort()) // Sort files in stream by path
+  .pipe(scanner(option))
+  .pipe(vfs.dest('./i18next.scanner'))

frontend_lib/i18next.scanner/en/translation.json

+{
+  "File status": "File status"
+}

frontend_lib/i18next.scanner/fr/translation.json

+{
+  "File status": "__NOT_TRANSLATED__"
+}

frontend_lib/package.json

     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
+    "i18next-scanner": "^2.6.1",
     "webpack-dashboard": "^1.1.1",
     "webpack-dev-server": "^2.9.2"
   },

frontend_lib/src/component/Input/SelectStatus/SelectStatus.jsx

       </button>
 
       <div className='selectStatus__submenu dropdown-menu' aria-labelledby='dropdownMenu2'>
-        <h6 className='dropdown-header'>{props.t('Input.SelectStatus.file_status')}</h6>
+        <h6 className='dropdown-header'>{props.t('File status')}</h6>
 
         <div className='dropdown-divider' />
 
             key={`status_${s.slug}`}
             style={{color: s.hexcolor}}
           >
-            {s.label /* props.t('Input.SelectStatus.ongoing') */}
+            {s.label}
             <div className='selectStatus__submenu__item__icon'>
               <i className={`fa fa-fw fa-${s.faIcon}`} />
             </div>

frontend_lib/src/helper.js

       return new Promise((resolve, reject) => reject(fetchResult)) // @TODO : handle errors from api result
   }
 }
+
+export const libAddAllResourceI18n = (i18n, translation) => {
+  Object.keys(translation).forEach(lang =>
+    Object.keys(translation[lang]).forEach(namespace =>
+      i18n.addResources(lang, namespace, translation[lang][namespace])
+    )
+  )
+}

frontend_lib/src/index.js

-import { libHandleFetchResult } from './helper.js'
+import { libAddAllResourceI18n, libHandleFetchResult } from './helper.js'
+
+// fr and en are deprecated
 import fr from './translate/fr.js'
 import en from './translate/en.js'
 
 export const langFr = fr
 export const langEn = en
 
+export const addAllResourceI18n = libAddAllResourceI18n
+
 export const handleFetchResult = libHandleFetchResult
 
 export const PopinFixed = libPopinFixed

i18next.option.js

+module.exports = {
+  debug: true,
+  removeUnusedKeys: true,
+  func: {
+    list: ['t', 'props.t', 'this.props.t'],
+    extensions: ['.js', '.jsx']
+  },
+  lngs: ['en', 'fr'],
+  defaultLng: 'en',
+  keySeparator: false, // false means "keyBasedFallback"
+  nsSeparator: false, // false means "keyBasedFallback"
+  fallbackLng: false,
+
+  ns: ['translation'], // namespace
+  defaultNS: 'translation',
+
+  // @param {string} lng The language currently used.
+  // @param {string} ns The namespace currently used.
+  // @param {string} key The translation key.
+  // @return {string} Returns a default value for the translation key.
+  // Return key as the default value for English language. Otherwise, returns '__NOT_TRANSLATED__'
+  defaultValue: (lng, ns, key) => lng === 'en' ? key : '__NOT_TRANSLATED__',
+
+  react: {wait: true},
+
+  resource: {
+    // The path where resources get loaded from.
+    // /!\ /!\ /!\ Relative to CURRENT working directory. /!\
+    loadPath: 'i18next.scanner/{{lng}}/{{ns}}.json',
+    // The path to store resources.
+    // /!\ /!\ /!\ Relative to the path specified by `vfs.dest('./i18next.scanner')`. /!\
+    savePath: '{{lng}}/{{ns}}.json',
+    jsonIndent: 2,
+    lineEnding: '\n'
+  },
+  // interpolation: {
+  //   escapeValue: false, // not needed for react!!
+  // },
+  trans: false,
+}

install_frontend_dependencies.sh

 npm link tracim_frontend_lib
 cd -
 
+log "cd frontend_app_thread"
+cd frontend_app_thread
+log "npm i"
+npm i
+log "npm link tracim_frontend_lib"
+npm link tracim_frontend_lib
+cd -
+
 log "cd frontend"
 cd frontend
 log "npm i"