👽 Synchroniser la langue initiale

source/containers/Layout.js

@@ -21,23 +21,6 @@ import ReactPiwik from 'Components/Tracker'
 import createHistory from 'history/createBrowserHistory'
 import { Header, Footer } from 'Components/pages/Header'
 import { getIframeOption } from '../utils'
-import queryString from 'query-string'
-import enTranslations from '../locales/en.yaml'
-
-let lang = getIframeOption('lang') || queryString.parse(location.search)['lang'] || sessionStorage['lang']
-if (lang) sessionStorage['lang'] = lang
-
-i18next
-	.init({
-		debug: true,
-		lng: lang,
-		resources: {
-				en: {
-			translation: enTranslations
-		}}
-	}, (err, t) => {
-		console.log("Error from i18n load",err,t)
-	})
 
 const piwik = new ReactPiwik({
 	url: 'stats.data.gouv.fr',

source/entry.dev.js

@@ -8,6 +8,9 @@ import debounceFormChangeActions from './debounceFormChangeActions'
 import computeThemeColours from './components/themeColours'
 import { getIframeOption, getUrl } from './utils'
 
+import { rules, rulesFr } from 'Engine/rules'
+import lang from './i18n'
+
 import App from './containers/App.dev'
 
 let initialStore = {
@@ -20,7 +23,8 @@ let enhancer = compose(
 	DevTools.instrument()
 )
 
-let store = createStore(reducers, initialStore, enhancer)
+let initialRules = lang == 'en' ? rules : rulesFr
+let store = createStore(reducers(initialRules), initialStore, enhancer)
 let anchor = document.querySelector('#js')
 
 render(<App store={store} />, anchor)

source/entry.prod.js

@@ -8,6 +8,9 @@ import { getIframeOption, getUrl } from './utils'
 import { Provider } from 'react-redux'
 import Layout from './containers/Layout'
 
+import { rules, rulesFr } from 'Engine/rules'
+import lang from './i18n'
+
 let initialStore = {
 	iframe: getUrl().includes('iframe'),
 	themeColours: computeThemeColours(getIframeOption('couleur'))
@@ -15,7 +18,8 @@ let initialStore = {
 
 let enhancer = compose(applyMiddleware(debounceFormChangeActions()))
 
-let store = createStore(reducers, initialStore, enhancer)
+let initialRules = lang == 'en' ? rules : rulesFr
+let store = createStore(reducers(initialRules), initialStore, enhancer)
 let anchor = document.querySelector('#js')
 
 render(

source/i18n.js

@@ -0,0 +1,23 @@
+import { I18nextProvider } from 'react-i18next';
+import i18next from 'i18next'
+import queryString from 'query-string'
+
+import { getIframeOption } from './utils'
+import enTranslations from './locales/en.yaml'
+
+let lang = getIframeOption('lang') || queryString.parse(location.search)['lang'] || sessionStorage['lang']
+if (lang) sessionStorage['lang'] = lang
+
+i18next
+	.init({
+		debug: true,
+		lng: lang,
+		resources: {
+				en: {
+			translation: enTranslations
+		}}
+	}, (err, t) => {
+		console.log("Error from i18n load",err,t)
+	})
+
+export default lang

source/reducers.js

@@ -202,7 +202,7 @@ function currentExample(state = null, { type, situation, name }) {
 	}
 }
 
-export default reduceReducers(
+export default (initialRules) => reduceReducers(
 	combineReducers({
 		sessionId: (id = Math.floor(Math.random() * 1000000000000) + '') => id,
 		//  this is handled by redux-form, pas touche !
@@ -233,5 +233,5 @@ export default reduceReducers(
 		currentExample
 	}),
 	// cross-cutting concerns because here `state` is the whole state tree
-	reduceSteps(ReactPiwik, rulesFr, formatInputs(rulesFr, formValueSelector))
+	reduceSteps(ReactPiwik, initialRules, formatInputs(initialRules, formValueSelector))
 )