merge

build_full_frontend.sh

@@ -21,6 +21,10 @@ log "npm run build$windoz # for frontend_app_html-document"
 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"
@@ -29,3 +33,8 @@ log "npm run build$windoz # for 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/package.json

@@ -10,6 +10,7 @@
     "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": "",
@@ -52,6 +53,7 @@
     "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

@@ -1,5 +1,8 @@
 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 {
@@ -10,7 +13,8 @@ export function appFactory (WrappedComponent) {
         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

@@ -22,7 +22,7 @@ const FlashMessage = props => {
 
               <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

@@ -7,7 +7,7 @@ const Footer = ({ t }) => {
   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

@@ -9,7 +9,7 @@ const Search = props => {
         <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

@@ -5,13 +5,13 @@ const FileItemHeader = props => {
   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

@@ -65,7 +65,7 @@ class Folder extends React.Component {
                 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

@@ -49,7 +49,7 @@ class Header extends React.Component {
 
       dispatch(setUserDisconnected())
     } else {
-      dispatch(newFlashMessage(t('Login.logout_error', 'danger')))
+      dispatch(newFlashMessage(t('Disconnection error', 'danger')))
     }
   }
 

frontend/src/container/Login.jsx

@@ -57,7 +57,7 @@ class Login extends React.Component {
 
       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

@@ -86,7 +86,7 @@ class Sidebar extends React.Component {
 
             <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

@@ -1,29 +1,39 @@
 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/package.json

@@ -7,8 +7,9 @@
     "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": "",
@@ -41,6 +42,7 @@
     "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

@@ -1,13 +0,0 @@
-#!/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

@@ -1,6 +1,9 @@
 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,
@@ -20,13 +23,12 @@ import {
   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,
@@ -38,6 +40,9 @@ class HtmlDocument extends React.Component {
       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)
   }
 
@@ -284,6 +289,7 @@ class HtmlDocument extends React.Component {
 
   render () {
     const { isVisible, loggedUser, content, timeline, newComment, timelineWysiwyg, config, mode } = this.state
+    const { t } = this.props
 
     if (!isVisible) return null
 
@@ -321,7 +327,7 @@ class HtmlDocument extends React.Component {
                   style={{backgroundColor: config.hexcolor, color: '#fdfdfd'}}
                 >
                   <i className='fa fa-code-fork' />
-                  Dernière version
+                  {t('Last version')}
                 </button>
               }
             </div>
@@ -381,4 +387,4 @@ class HtmlDocument extends React.Component {
   }
 }
 
-export default HtmlDocument
+export default translate()(HtmlDocument)

frontend_app_html-document/src/container/PopupCreateHtmlDocument.jsx

@@ -3,6 +3,8 @@ import {
   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: {
@@ -42,6 +44,9 @@ class PopupCreateHtmlDocument extends React.Component {
       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

@@ -51,7 +51,19 @@ export const debug = {
       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

@@ -1,8 +1,5 @@
 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)
@@ -18,14 +15,7 @@ i18n
     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/package.json

@@ -8,6 +8,7 @@
     "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"
   },
@@ -41,6 +42,7 @@
     "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

@@ -1,13 +0,0 @@
-#!/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

@@ -1,5 +1,6 @@
 import React from 'react'
 import {
+  addAllResourceI18n,
   CardPopupCreateContent,
   handleFetchResult
 } from 'tracim_frontend_lib'
@@ -19,6 +20,14 @@ const debug = { // outdated
       'Accept': 'application/json',
       'Content-Type': 'application/json',
       'Authorization': 'Basic ' + btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
+    },
+    translation: {
+      en: {
+        translation: {}
+      },
+      fr: {
+        translation: {}
+      }
     }
   },
   loggedUser: {
@@ -44,6 +53,9 @@ class PopupCreateHtmlDocument extends React.Component {
       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

@@ -2,6 +2,7 @@ import React from 'react'
 import i18n from '../i18n.js'
 import { debug } from '../helper.js'
 import {
+  addAllResourceI18n,
   handleFetchResult,
   PopinFixed,
   PopinFixedHeader,
@@ -33,6 +34,9 @@ class Thread extends React.Component {
       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/src/component/Input/SelectStatus/SelectStatus.jsx

@@ -27,7 +27,7 @@ export const SelectStatus = props => {
       </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' />
 
@@ -39,7 +39,7 @@ export const SelectStatus = props => {
             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

@@ -20,3 +20,11 @@ export const libHandleFetchResult = async fetchResult => {
       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

@@ -1,4 +1,6 @@
-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'
 
@@ -24,6 +26,8 @@ import libSelectStatus from './component/Input/SelectStatus/SelectStatus.jsx'
 export const langFr = fr
 export const langEn = en
 
+export const addAllResourceI18n = libAddAllResourceI18n
+
 export const handleFetchResult = libHandleFetchResult
 
 export const PopinFixed = libPopinFixed

install_frontend_dependencies.sh

@@ -18,6 +18,14 @@ log "npm link tracim_frontend_lib"
 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"