🐛 répare la page blanche sur mycompanyinfrance.fr

.eslintrc.yaml

@@ -25,8 +25,8 @@ env:
   es6: true
 settings:
   react:
-    version: detect
-    flowVersion: detect
+    version: 'detect'
+    flowVersion: '0.92'
 
 overrides:
   files: ['*.test.js', 'cypress/integration/**/*.js']

package.json

@@ -24,24 +24,24 @@
 		"color-convert": "^1.9.2",
 		"focus-trap-react": "^3.1.2",
 		"fuse.js": "^3.2.1",
-		"i18next": "^10.0.7",
+		"i18next": "^14.1.1",
 		"iframe-resizer": "^3.6.2",
 		"marked": "^0.3.17",
 		"nearley": "^2.13.0",
 		"ramda": "^0.25.0",
 		"raven-for-redux": "^1.3.1",
 		"raven-js": "^3.26.4",
-		"react": "^16.8.0-alpha.1",
+		"react": "^16.8.0",
 		"react-addons-css-transition-group": "^15.6.2",
 		"react-color": "^2.14.0",
-		"react-dom": "^16.8.0-alpha.1",
+		"react-dom": "^16.8.0",
 		"react-easy-emoji": "^1.2.0",
 		"react-helmet": "^5.2.0",
 		"react-highlight-words": "^0.11.0",
-		"react-i18next": "^8.3.0",
+		"react-i18next": "^10.0.1",
 		"react-redux": "^5.0.7",
-		"react-router": "^4.2.0",
-		"react-router-dom": "^4.2.2",
+		"react-router": "^4.3.1",
+		"react-router-dom": "^4.3.1",
 		"react-select": "^1.2.1",
 		"react-select-fast-filter-options": "^0.2.3",
 		"react-spring": "^5.8.0",
@@ -69,7 +69,7 @@
 		"test-inversions": "yarn test-watch --grep 'inversions'",
 		"test-meca": "yarn test-watch --grep 'Mécanismes'",
 		"test-rules": "yarn test-watch --grep 'notre base de règles'",
-		"test-cypress" : "yarn run cypress run",
+		"test-cypress": "yarn run cypress run",
 		"test-watch": "yarn test-common --watch",
 		"test-common": "mocha-webpack --webpack-config source/webpack.test.js --require source-map-support/register --include componentTestSetup.js --require mock-local-storage --require test/helpers/browser.js \"./{,!(node_modules)/**/}!(webpack).test.js\"",
 		"test": "yarn test-common",
@@ -96,7 +96,7 @@
 		"@babel/preset-react": "^7.0.0",
 		"akh": "^3.1.2",
 		"autoprefixer": "^9.3.1",
-		"babel-eslint": "^10.0.1",
+		"babel-eslint": "^11.0.0-beta.0",
 		"babel-loader": "^8.0.2",
 		"babel-plugin-ramda": "^1.6.3",
 		"babel-plugin-syntax-dynamic-import": "^6.18.0",
@@ -111,10 +111,10 @@
 		"dedent-js": "^1.0.1",
 		"enzyme": "^3.3.0",
 		"enzyme-adapter-react-16": "^1.1.1",
-		"eslint": "^5.9.0",
-		"eslint-config-prettier": "^3.3.0",
-		"eslint-plugin-flowtype": "^2.50.1",
-		"eslint-plugin-react": "^7.11.1",
+		"eslint": "^5.13.0",
+		"eslint-config-prettier": "^4.0.0",
+		"eslint-plugin-flowtype": "^3.2.1",
+		"eslint-plugin-react": "^7.12.4",
 		"express": "^4.16.3",
 		"file-loader": "^1.1.11",
 		"flow-bin": "^0.92.0",
@@ -136,7 +136,7 @@
 		"mock-local-storage": "^1.0.5",
 		"nearley-loader": "^2.0.0",
 		"postcss-loader": "^2.1.2",
-		"prettier": "^1.15.3",
+		"prettier": "^1.16.4",
 		"ramda-fantasy": "^0.8.0",
 		"raw-loader": "^0.5.1",
 		"react-hot-loader": "^4.3.11",

source/Provider.js

@@ -43,7 +43,10 @@ export default class Provider extends PureComponent {
 		const storeEnhancer = composeEnhancers(
 			applyMiddleware(
 				// Allows us to painlessly do route transition in action creators
-				thunk.withExtraArgument(this.history),
+				thunk.withExtraArgument({
+					history: this.history,
+					sitePaths: this.props.sitePaths
+				}),
 				...props.reduxMiddlewares
 			)
 		)

source/actions/actions.js

@@ -8,10 +8,9 @@ import type {
 	SetSituationBranchAction
 } from 'Types/ActionsTypes'
 // $FlowFixMe
-import { reset } from 'redux-form';
-import { deletePersistedSimulation } from '../storage/persistSimulation';
-
-import type { RouterHistory } from 'react-router-dom'
+import { reset } from 'redux-form'
+import { deletePersistedSimulation } from '../storage/persistSimulation'
+import type { Thunk } from 'Types/ActionsTypes'
 
 export const resetSimulation = () => (dispatch: any => void): void => {
 	dispatch(
@@ -27,11 +26,9 @@ export const setSituationBranch = (id: number): SetSituationBranchAction => ({
 	id
 })
 
-export const setSimulationConfig = (config: Object) => (
-	dispatch: SetSimulationConfigAction => void,
-	_: any,
-	history: RouterHistory
-): void => {
+export const setSimulationConfig = (
+	config: Object
+): Thunk<SetSimulationConfigAction> => (dispatch, _, { history }): void => {
 	const url = history.location.pathname
 	dispatch({
 		type: 'SET_SIMULATION',
@@ -50,7 +47,7 @@ export const deletePreviousSimulation = () => (
 }
 
 export const startConversation = (priorityNamespace: ?string) => (
-	dispatch: StartConversationAction => void,
+	dispatch: StartConversationAction => void
 ) => {
 	dispatch({
 		type: 'START_CONVERSATION',
@@ -63,11 +60,11 @@ export function setExample(name, situation, dottedName) {
 	return { type: 'SET_EXAMPLE', name, situation, dottedName }
 }
 
-export const goBackToSimulation = () => (
-	dispatch: any => void,
-	getState: any,
-	history: RouterHistory
-): void => {
+export const goBackToSimulation = (): Thunk<any> => (
+	dispatch,
+	getState,
+	{ history }
+) => {
 	dispatch({ type: 'SET_EXEMPLE', name: null })
 	history.push(getState().simulation.url)
 }

source/actions/companyStatusActions.js

@@ -1,4 +1,7 @@
 /* @flow */
+
+import { dropWhile, last } from 'ramda'
+import { nextQuestionUrlSelector } from 'Selectors/companyStatusSelectors'
 import type {
 	ChooseCompanyLiabilityAction,
 	CompanyLiability,
@@ -9,19 +12,17 @@ import type {
 	DirectorIsInAMinorityAction,
 	DefineDirectorStatusAction
 } from 'Types/companyTypes'
-import { dropWhile, last } from 'ramda'
-import { nextQuestionUrlSelector } from 'Selectors/companyStatusSelectors'
-import sitePaths from '../sites/mycompanyinfrance.fr/sitePaths'
-import type { RouterHistory } from 'react-router'
+import type { Thunk } from 'Types/ActionsTypes'
 
-const thenGoToNextQuestion = actionCreator => (...args: any) => (
-	dispatch: any => void,
-	getState: () => any,
-	history: RouterHistory
-) => {
-	dispatch(actionCreator(...args))
-	history.push(nextQuestionUrlSelector(getState()))
-}
+// Bug : last et dropline sont automatiquement enlevé par le formatOnSave de visual studio code sinon
+// eslint-disable-next-line
+let x = [dropWhile, last]
+
+const thenGoToNextQuestion = actionCreator => (...args: any) =>
+	((dispatch, getState, { history, sitePaths }) => {
+		dispatch(actionCreator(...args))
+		history.push(nextQuestionUrlSelector(getState(), { sitePaths }))
+	}: Thunk<any>)
 
 export const chooseCompanyLiability = thenGoToNextQuestion(
 	(setup: ?CompanyLiability): ChooseCompanyLiabilityAction => ({
@@ -58,23 +59,22 @@ export const directorIsInAMinority = thenGoToNextQuestion(
 	})
 )
 
-export const goToCompanyStatusChoice = () => (
-	dispatch: ResetCompanyStatusAction => void,
-	_: any,
-	history: RouterHistory
+export const goToCompanyStatusChoice = (): Thunk<ResetCompanyStatusAction> => (
+	dispatch,
+	_,
+	{ history, sitePaths }
 ) => {
 	dispatch(
 		({
 			type: 'RESET_COMPANY_STATUS_CHOICE'
 		}: ResetCompanyStatusAction)
 	)
-	history.push(sitePaths().entreprise.index)
+	history.push(sitePaths.entreprise.index)
 }
 
-export const resetCompanyStatusChoice = (from: string) => (
-	dispatch: ResetCompanyStatusAction => void,
-	getState: () => any
-) => {
+export const resetCompanyStatusChoice = (
+	from: string
+): Thunk<ResetCompanyStatusAction> => (dispatch, getState) => {
 	const answeredQuestion = Object.keys(
 		getState().inFranceApp.companyLegalStatus
 	)
@@ -82,31 +82,27 @@ export const resetCompanyStatusChoice = (from: string) => (
 	if (!answersToReset.length) {
 		return
 	}
-	dispatch(
-		({
-			type: 'RESET_COMPANY_STATUS_CHOICE',
-			answersToReset
-		}: ResetCompanyStatusAction)
-	)
+	dispatch({
+		type: 'RESET_COMPANY_STATUS_CHOICE',
+		answersToReset
+	})
 }
 
-export const goBackToPreviousQuestion = () => (
-	dispatch: ResetCompanyStatusAction => void,
-	getState: () => any,
-	history: RouterHistory
+export const goBackToPreviousQuestion = (): Thunk<ResetCompanyStatusAction> => (
+	dispatch,
+	getState,
+	{ history, sitePaths }
 ) => {
 	const previousQuestion = last(
 		Object.keys(getState().inFranceApp.companyLegalStatus)
 	)
 	if (previousQuestion) {
-		dispatch(
-			({
-				type: 'RESET_COMPANY_STATUS_CHOICE',
-				answersToReset: [previousQuestion]
-			}: ResetCompanyStatusAction)
-		)
+		dispatch({
+			type: 'RESET_COMPANY_STATUS_CHOICE',
+			answersToReset: [previousQuestion]
+		})
 	}
 	history.push(
-		sitePaths().entreprise.statutJuridique[previousQuestion || 'index']
+		sitePaths.entreprise.statutJuridique[previousQuestion || 'index']
 	)
 }

source/components/Feedback/PageFeedback.js

@@ -2,7 +2,7 @@
 
 import withTracker from 'Components/utils/withTracker'
 import React, { Component } from 'react'
-import { Trans, withNamespaces } from 'react-i18next'
+import { Trans, withTranslation } from 'react-i18next'
 import { withRouter } from 'react-router'
 import { compose } from 'redux'
 import safeLocalStorage from '../../storage/safeLocalStorage'
@@ -155,6 +155,6 @@ const PageFeedbackWithRouter = ({ location, ...props }) => (
 )
 export default (compose(
 	withRouter,
-	withNamespaces(),
+	withTranslation(),
 	withTracker,
 )(PageFeedbackWithRouter): React$ComponentType<OwnProps>)

source/components/LangSwitcher.js

@@ -1,7 +1,7 @@
 import { compose } from 'ramda'
 import React, { Component } from 'react'
 import emoji from 'react-easy-emoji'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 
@@ -12,7 +12,7 @@ const languageCodeToEmoji = {
 
 export default compose(
 	withRouter,
-	withNamespaces(),
+	withTranslation(),
 	connect(
 		null,
 		dispatch => ({

source/components/LegalNotice.js

@@ -1,9 +1,9 @@
 import Overlay from 'Components/Overlay'
 import { ScrollToTop } from 'Components/utils/Scroll'
 import React, { Component } from 'react'
-import { Trans, withNamespaces } from 'react-i18next'
+import { Trans, withTranslation } from 'react-i18next'
 
-export const LegalNoticeContent = withNamespaces()(() => (
+export const LegalNoticeContent = withTranslation()(() => (
 	<>
 		<h1>
 			<Trans i18nKey="legalNotice.title">Mentions légales</Trans>

source/components/PeriodSwitch.js

@@ -2,7 +2,7 @@ import { findRuleByDottedName, nestedSituationToPathMap } from 'Engine/rules'
 import { compose, filter, map, toPairs } from 'ramda'
 import React, { useEffect } from 'react'
 import emoji from 'react-easy-emoji'
-import { Trans, translate } from 'react-i18next'
+import { Trans, withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { batchActions } from 'redux-batched-actions'
 import { change, Field, reduxForm } from 'redux-form'
@@ -18,7 +18,7 @@ export default compose(
 		form: 'conversation',
 		destroyOnUnmount: false
 	}),
-	translate(),
+	withTranslation(),
 	connect(
 		state => {
 			let situation = situationsWithDefaultsSelector(state)

source/components/PreviousSimulationBanner.js

@@ -5,7 +5,7 @@ import {
 } from 'Actions/actions'
 import { compose } from 'ramda'
 import React from 'react'
-import { Trans, withNamespaces } from 'react-i18next'
+import { Trans, withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { noUserInputSelector } from 'Selectors/analyseSelectors'
 import { LinkButton } from 'Ui/Button'
@@ -42,7 +42,7 @@ const PreviousSimulationBanner = ({
 )
 
 export default compose(
-	withNamespaces(),
+	withTranslation(),
 	connect(
 		state => ({
 			previousSimulation: state.previousSimulation,

source/components/RulePage.js

@@ -5,7 +5,7 @@ import { decodeRuleName, findRuleByDottedName, findRulesByName } from 'Engine/ru
 import { compose, head, path } from 'ramda';
 import React, { Component } from 'react';
 import emoji from 'react-easy-emoji';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { Link, Redirect } from 'react-router-dom';
@@ -23,7 +23,7 @@ export default compose(
 		brancheName: situationBranchNameSelector(state)
 	})),
 
-	withNamespaces()
+	withTranslation()
 )(
 	class RulePage extends Component {
 		render() {
@@ -70,7 +70,7 @@ const BackToSimulation = compose(
 		{ goBackToSimulation }
 	),
 	withRouter,
-	withNamespaces()
+	withTranslation()
 )(
 	// Triggers rerender when the language changes
 	class BackToSimulation extends Component {

source/components/SearchBar.js

@@ -4,7 +4,7 @@ import Fuse from 'fuse.js'
 import { compose, pick, sortBy } from 'ramda'
 import React from 'react'
 import Highlighter from 'react-highlight-words'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { Link, Redirect } from 'react-router-dom'
 import Select from 'react-select'
 import 'react-select/dist/react-select.css'
@@ -121,5 +121,5 @@ class SearchBar extends React.Component {
 
 export default compose(
 	withSitePaths,
-	withNamespaces()
+	withTranslation()
 )(SearchBar)

source/components/SearchButton.js

@@ -1,7 +1,7 @@
 import { compose } from 'ramda'
 import React, { Component } from 'react'
 import emoji from 'react-easy-emoji'
-import { Trans, withNamespaces } from 'react-i18next'
+import { Trans, withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { flatRulesSelector } from 'Selectors/analyseSelectors'
 import Overlay from './Overlay'
@@ -11,7 +11,7 @@ export default compose(
 	connect(state => ({
 		flatRules: flatRulesSelector(state)
 	})),
-	withNamespaces()
+	withTranslation()
 )(
 	class SearchButton extends Component {
 		componentDidMount() {

source/components/TargetSelection.js

@@ -8,7 +8,7 @@ import withSitePaths from 'Components/utils/withSitePaths'
 import { encodeRuleName, findRuleByDottedName } from 'Engine/rules'
 import { compose, propEq } from 'ramda'
 import React, { Component } from 'react'
-import { translate } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 import { Link } from 'react-router-dom'
@@ -29,7 +29,7 @@ import './TargetSelection.css'
 
 const MAX_NUMBER_QUESTION = 18
 export default compose(
-	translate(),
+	withTranslation(),
 	withColours,
 	reduxForm({
 		form: 'conversation',

source/components/conversation/Conversation.js

@@ -2,7 +2,7 @@ import Scroll from 'Components/utils/Scroll';
 import { getInputComponent } from 'Engine/generateQuestions';
 import { compose } from 'ramda';
 import React, { Component } from 'react';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { reduxForm } from 'redux-form';
 import { currentQuestionSelector, flatRulesSelector } from 'Selectors/analyseSelectors';
@@ -15,7 +15,7 @@ export default compose(
 		form: 'conversation',
 		destroyOnUnmount: false
 	}),
-	withNamespaces(),
+	withTranslation(),
 	connect(state => ({
 		conversationStarted: state.conversationStarted,
 		flatRules: flatRulesSelector(state),

source/components/conversation/FormDecorator.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import Explicable from 'Components/conversation/Explicable';
 import { compose } from 'ramda';
 import React, { Component } from 'react';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { change, Field } from 'redux-form';
 import IgnoreStepButton from './IgnoreStepButton';
@@ -34,7 +34,7 @@ export var FormDecorator = formType => RenderField =>
 					dispatch(change('conversation', field, value))
 			})
 		),
-		withNamespaces()
+		withTranslation()
 	)(
 		class extends Component {
 			state = {

source/components/conversation/IgnoreStepButton.js

@@ -2,12 +2,12 @@ import HoverDecorator from 'Components/utils/HoverDecorator';
 import withColours from 'Components/utils/withColours';
 import { compose } from 'ramda';
 import React, { Component } from 'react';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import './IgnoreStepButton.css';
 
 export default compose(
 	HoverDecorator,
-	withNamespaces(),
+	withTranslation(),
 	withColours
 )(
 	class IgnoreStepButton extends Component {

source/components/conversation/Input.js

@@ -2,7 +2,7 @@ import classnames from 'classnames'
 import withColours from 'Components/utils/withColours'
 import { compose } from 'ramda'
 import { React, Component, T } from 'Components'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { debounce } from '../../utils'
 import { FormDecorator } from './FormDecorator'
 import InputSuggestions from './InputSuggestions'
@@ -12,7 +12,7 @@ import { formValueSelector } from 'redux-form'
 
 export default compose(
 	FormDecorator('input'),
-	withNamespaces(),
+	withTranslation(),
 	withColours,
 	connect(state => ({
 		period: formValueSelector('conversation')(state, 'période')

source/components/conversation/InputSuggestions.js

@@ -1,14 +1,14 @@
 import withColours from 'Components/utils/withColours'
 import { compose, toPairs } from 'ramda'
 import React, { Component } from 'react'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import './InputSuggestions.css'
 import { connect } from 'react-redux'
 import { formValueSelector } from 'redux-form'
 
 export default compose(
 	withColours,
-	withNamespaces(),
+	withTranslation(),
 	connect(state => ({
 		period: formValueSelector('conversation')(state, 'période')
 	}))

source/components/conversation/Question.js

@@ -2,7 +2,7 @@ import HoverDecorator from 'Components/utils/HoverDecorator'
 import withColours from 'Components/utils/withColours'
 import { compose, is } from 'ramda'
 import React, { Component } from 'react'
-import { Trans, withNamespaces } from 'react-i18next'
+import { Trans, withTranslation } from 'react-i18next'
 import Explicable from './Explicable'
 import { FormDecorator } from './FormDecorator'
 import './Question.css'
@@ -29,7 +29,7 @@ import { answer, answered } from './userAnswerButtonStyle'
 // dont Question est un example
 export default compose(
 	FormDecorator('question'),
-	withNamespaces(),
+	withTranslation(),
 	withColours
 )(
 	class Question extends Component {
@@ -145,7 +145,7 @@ let RadioLabel = props => (
 
 const RadioLabelContent = compose(
 	HoverDecorator,
-	withNamespaces(),
+	withTranslation(),
 	withColours
 )(
 	class RadioLabelContent extends Component {

source/components/conversation/SendButton.js

@@ -1,11 +1,11 @@
 import HoverDecorator from 'Components/utils/HoverDecorator'
 import { compose } from 'ramda'
 import React, { Component } from 'react'
-import { Trans, withNamespaces } from 'react-i18next'
+import { Trans, withTranslation } from 'react-i18next'
 
 export default compose(
 	HoverDecorator,
-	withNamespaces()
+	withTranslation()
 )(
 	class SendButton extends Component {
 		getAction() {

source/components/conversation/TextArea.js

@@ -1,11 +1,11 @@
 import { compose } from 'ramda';
 import React, { Component } from 'react';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { FormDecorator } from './FormDecorator';
 
 export default compose(
 	FormDecorator('text-area'),
-	withNamespaces()
+	withTranslation()
 )(
 	class Input extends Component {
 		render() {

source/components/rule/Algorithm.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { makeJsx } from 'Engine/evaluation';
 import { any, compose, identity, path } from 'ramda';
 import React from 'react';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import './Algorithm.css';
 // The showValues prop is passed as a context. It used to be delt in CSS (not(.showValues) display: none), both coexist right now
 import { ShowValuesProvider } from './ShowValuesContext';
@@ -30,7 +30,7 @@ let Conditions = ({
 	) : null
 }
 
-export default compose(withNamespaces())(
+export default compose(withTranslation())(
 	class Algorithm extends React.Component {
 		render() {
 			let { rule, showValues } = this.props

source/components/rule/Destinataire.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
-import { Trans, withNamespaces } from 'react-i18next'
+import { Trans, withTranslation } from 'react-i18next'
 import possiblesDestinataires from 'Règles/ressources/destinataires/destinataires.yaml'
 import './Destinataire.css'
 
-export default withNamespaces()(
+export default withTranslation()(
 	class Rule extends Component {
 		render() {
 			let { destinataire } = this.props,

source/components/rule/Examples.js

@@ -2,7 +2,7 @@ import { setExample } from 'Actions/actions'
 import classNames from 'classnames'
 import { compose } from 'ramda'
 import React, { Component } from 'react'
-import { Trans, withNamespaces } from 'react-i18next'
+import { Trans, withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 
 export default compose(
@@ -18,7 +18,7 @@ export default compose(
 			)
 		})
 	),
-	withNamespaces()
+	withTranslation()
 )(
 	class Examples extends Component {
 		render() {

source/components/rule/References.js

@@ -1,11 +1,11 @@
 import { toPairs } from 'ramda'
 import React from 'react'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import references from 'Règles/ressources/références/références.yaml'
 import { capitalise0 } from '../../utils'
 import './References.css'
 
-export default withNamespaces()(
+export default withTranslation()(
 	class References extends React.Component {
 		state = {
 			showComplementary: false

source/components/rule/Rule.js

@@ -10,7 +10,7 @@ import { compose, isEmpty, isNil } from 'ramda';
 import React, { Component, Suspense } from 'react';
 import emoji from 'react-easy-emoji';
 import Helmet from 'react-helmet';
-import { Trans, withNamespaces } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { reduxForm } from 'redux-form';
@@ -35,7 +35,7 @@ export default compose(
 		analysedExample: exampleAnalysisSelector(state, props)
 	})),
 	AttachDictionary(knownMecanisms),
-	withNamespaces(),
+	withTranslation(),
 	withSitePaths,
 	withLanguage
 )(

source/components/utils/withLanguage.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 
 export default function withLanguage(WrappedComponent) {
-	return withNamespaces()(
+	return withTranslation()(
 		class WithLanguage extends Component {
 			static displayName = `withLanguage(${Component.displayName ||
 				Component.name})`

source/components/utils/withSitePaths.js

@@ -2,14 +2,12 @@
 
 import React, { Component, createContext } from 'react'
 
-export type SitePaths = Object
-
 const SitePathsContext: React$Context<SitePaths> = createContext({})
 
 export const SitePathProvider = SitePathsContext.Provider
 export default function withSitePaths<Props: { sitePaths: SitePaths }>(
 	WrappedComponent: React$ComponentType<Props>
-): React$ComponentType<$Diff<Props, {sitePaths: SitePaths}>> {
+): React$ComponentType<$Diff<Props, { sitePaths: SitePaths }>> {
 	class WithSitePaths extends Component<
 		$Diff<Props, { sitePaths: SitePaths }>
 	> {
@@ -26,3 +24,5 @@ export default function withSitePaths<Props: { sitePaths: SitePaths }>(
 	}
 	return WithSitePaths
 }
+
+export type SitePaths = Object

source/i18n.js

@@ -1,5 +1,6 @@
 import i18next from 'i18next'
 import queryString from 'query-string'
+import { initReactI18next } from 'react-i18next'
 import enTranslations from './locales/en.yaml'
 import { getIframeOption, parseDataAttributes } from './utils'
 
@@ -19,7 +20,7 @@ let lang =
 	'fr'
 
 setToSessionStorage('lang', lang)
-i18next.init(
+i18next.use(initReactI18next).init(
 	{
 		lng: lang,
 		resources: {

source/selectors/analyseSelectors.js

@@ -1,11 +1,31 @@
-
-import { collectMissingVariablesByTarget, getNextSteps } from 'Engine/generateQuestions';
-import { collectDefaults, disambiguateExampleSituation, findRuleByDottedName, formatInputs, nestedSituationToPathMap, rules as baseRulesEn, rulesFr as baseRulesFr } from 'Engine/rules';
-import { analyse, analyseMany, parseAll } from 'Engine/traverse';
-import { add, contains, difference, equals, head, intersection, isNil, mergeDeepWith, pick } from 'ramda';
-import { getFormValues } from 'redux-form';
-import { createSelector, createSelectorCreator, defaultMemoize } from 'reselect';
-import { mapOrApply, softCatch } from '../utils';
+import {
+	collectMissingVariablesByTarget,
+	getNextSteps
+} from 'Engine/generateQuestions'
+import {
+	collectDefaults,
+	disambiguateExampleSituation,
+	findRuleByDottedName,
+	formatInputs,
+	nestedSituationToPathMap,
+	rules as baseRulesEn,
+	rulesFr as baseRulesFr
+} from 'Engine/rules'
+import { analyse, analyseMany, parseAll } from 'Engine/traverse'
+import {
+	add,
+	contains,
+	difference,
+	equals,
+	head,
+	intersection,
+	isNil,
+	mergeDeepWith,
+	pick
+} from 'ramda'
+import { getFormValues } from 'redux-form'
+import { createSelector, createSelectorCreator, defaultMemoize } from 'reselect'
+import { mapOrApply, softCatch } from '../utils'
 // create a "selector creator" that uses deep equal instead of ===
 const createDeepEqualSelector = createSelectorCreator(defaultMemoize, equals)
 
@@ -16,9 +36,7 @@ const createDeepEqualSelector = createSelectorCreator(defaultMemoize, equals)
  *
  * */
 
-
-export let flatRulesSelector
-	= createSelector(
+export let flatRulesSelector = createSelector(
 	state => state.lang,
 	(state, props) => props && props.rules,
 	(lang, rules) => rules || (lang === 'en' ? baseRulesEn : baseRulesFr)
@@ -84,11 +102,11 @@ const createSituationBrancheSelector = situationSelector =>
 				return branches.map(({ situation: branchSituation }) => ({
 					...configSituation,
 					...branchSituation,
-					...situation,
+					...situation
 				}))
 			}
 			if (configSituation) {
-				return {  ...configSituation, ...situation }
+				return { ...configSituation, ...situation }
 			}
 			return situation || {}
 		}
@@ -246,7 +264,6 @@ export let nextStepsSelector = createSelector(
 	],
 	(mv, questions) => {
 		let nextSteps = getNextSteps(mv)
-		console.log(nextSteps, questions)
 
 		if (questions && questions.blacklist) {
 			return difference(nextSteps, questions.blacklist)

source/selectors/companyStatusSelectors.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import type { State, LegalStatusRequirements } from 'Types/companyTypes'
+import type { SitePaths } from 'Components/utils/withSitePaths'
 import {
 	add,
 	any,
@@ -15,8 +16,6 @@ import {
 	pick,
 	sortBy
 } from 'ramda'
-//TODO : use react context
-import sitePaths from '../sites/mycompanyinfrance.fr/sitePaths'
 
 const LEGAL_STATUS_DETAILS: {
 	[status: string]: Array<LegalStatusRequirements> | LegalStatusRequirements
@@ -179,13 +178,15 @@ export const nextQuestionSelector = (state: {
 	return sortedPossibleNextQuestions[0]
 }
 
-export const nextQuestionUrlSelector = (state: { inFranceApp: State }) => {
-	const paths = sitePaths()
+export const nextQuestionUrlSelector = (
+	state: { inFranceApp: State },
+	{ sitePaths }: { sitePaths: SitePaths }
+) => {
 	const nextQuestion = nextQuestionSelector(state)
 	if (!nextQuestion) {
-		return paths.entreprise.statutJuridique.liste
+		return sitePaths.entreprise.statutJuridique.liste
 	}
-	return paths.entreprise.statutJuridique[nextQuestion]
+	return sitePaths.entreprise.statutJuridique[nextQuestion]
 }
 
 export const régimeSelector = (state: {

source/sites/embauche.gouv.fr/App.js

@@ -7,7 +7,7 @@ import { defaultTracker } from 'Components/utils/withTracker'
 import createRavenMiddleware from 'raven-for-redux'
 import Raven from 'raven-js'
 import React, { Component } from 'react'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { Redirect, Route, Switch } from 'react-router-dom'
 import 'Ui/index.css'
 import Provider from '../../Provider'
@@ -81,7 +81,7 @@ class EmbaucheRoute extends Component {
 		)
 	}
 }
-const RouterSwitch = withNamespaces()(() => (
+const RouterSwitch = withTranslation()(() => (
 	<Switch>
 		<Route exact path="/" component={Home} />
 		<Route path="/contact" component={Contact} />

source/sites/embauche.gouv.fr/pages/Couleur.js

@@ -1,28 +1,29 @@
-import React, { Suspense } from 'react';
-import Home from './Home';
+import React, { Suspense } from 'react'
+import Home from './Home'
 
 let LazyColorPicker = React.lazy(() => import('./ColorPicker'))
 
 const Couleur = () => {
-	const colour = 1;
-	return (<div className="ui__ container">
-		<p className="indication">
-			Visualisez sur cette page l’apparence du module pour différentes
-			couleurs principales.
-		</p>
-		<Suspense fallback={<div>Chargement...</div>}>
-			<LazyColorPicker
-				color={this.props.couleur}
-				onChangeComplete={this.changeColour}
+	return (
+		<div className="ui__ container">
+			<p className="indication">
+				Visualisez sur cette page l’apparence du module pour différentes
+				couleurs principales.
+			</p>
+			<Suspense fallback={<div>Chargement...</div>}>
+				<LazyColorPicker
+					color={this.props.couleur}
+					onChangeComplete={this.changeColour}
 				/>
-		</Suspense>
-		<p className="indication">
-			La couleur sélectionnée, à déclarer comme attribut
-			&quot;data-couleur&quot; du script sur votre page est :{' '}
-			<b>{this.props.couleur}</b>
-		</p>
-		<Home />
-	</div>)
-			}
+			</Suspense>
+			<p className="indication">
+				La couleur sélectionnée, à déclarer comme attribut
+				&quot;data-couleur&quot; du script sur votre page est :{' '}
+				<b>{this.props.couleur}</b>
+			</p>
+			<Home />
+		</div>
+	)
+}
 
-export default Couleur
+export default Couleur

source/sites/embauche.gouv.fr/pages/Header.js

@@ -3,14 +3,14 @@ import React, { Component } from 'react'
 import { withRouter } from 'react-router'
 import { T } from "Components";
 import { Link } from 'react-router-dom'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import Logo from '../images/logo/logo-simulateur.svg'
 import './Header.css'
 import { compose } from 'ramda';
 
 export const Header = compose(
 	withRouter,
-	withNamespaces()
+	withTranslation()
 )(
 	class Header extends Component {
 		state = {

source/sites/embauche.gouv.fr/pages/IframeFooter.js

@@ -1,11 +1,11 @@
 import LangSwitcher from 'Components/LangSwitcher'
 import React, { Component } from 'react'
 import emoji from 'react-easy-emoji'
-import { Trans, withNamespaces } from 'react-i18next'
+import { Trans, withTranslation } from 'react-i18next'
 import screenfull from 'screenfull'
 import { isIE } from '../../../utils'
 
-export default withNamespaces()(
+export default withTranslation()(
 	class IframeFooter extends Component {
 		componentDidMount() {
 			screenfull.enabled && screenfull.onchange(() => this.forceUpdate())

source/sites/mycompanyinfrance.fr/App.js

@@ -7,7 +7,7 @@ import createRavenMiddleware from 'raven-for-redux'
 import Raven from 'raven-js'
 import React, { Component } from 'react'
 import Helmet from 'react-helmet'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { Route, Switch } from 'react-router-dom'
 import 'Ui/index.css'
 import Provider from '../../Provider'
@@ -23,7 +23,7 @@ import HiringProcess from './pages/HiringProcess'
 import Landing from './pages/Landing'
 import Sitemap from './pages/Sitemap'
 import SocialSecurity from './pages/SocialSecurity'
-import sitePaths from './sitePaths'
+import { constructLocalizedSitePath } from './sitePaths'
 
 if (process.env.NODE_ENV === 'production') {
 	Raven.config(
@@ -52,7 +52,7 @@ class InFranceRoute extends Component {
 		}
 	}
 	render() {
-		const paths = sitePaths()
+		const paths = constructLocalizedSitePath(this.props.language)
 		return (
 			<Provider
 				basename={this.props.basename}
@@ -71,7 +71,7 @@ class InFranceRoute extends Component {
 	}
 }
 
-let RouterSwitch = compose(withNamespaces())(() => {
+let RouterSwitch = compose(withTranslation())(() => {
 	return (
 		<Switch>
 			<Route exact path="/" component={Landing} />
@@ -82,7 +82,7 @@ let RouterSwitch = compose(withNamespaces())(() => {
 
 const App = compose(
 	withSitePaths,
-	withNamespaces()
+	withTranslation()
 )(({ sitePaths, t }) => (
 	<div className="app-container">
 		<Helmet titleTemplate={`%s | ${t(['siteName', 'Mon-entreprise.fr'])}`} />

source/sites/mycompanyinfrance.fr/layout/Navigation/Navigation.js

@@ -2,7 +2,7 @@
 import { React, T } from 'Components';
 import withSitePaths from 'Components/utils/withSitePaths';
 import { compose } from 'ramda';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { NavLink, } from 'react-router-dom';
 import {  withRouter } from "react-router";
@@ -263,7 +263,7 @@ const StepsHeader = ({ t, sitePaths, companyStatusChoice }: Props) => (
 
 export default (compose(
 	withRouter,
-	withNamespaces(),
+	withTranslation(),
 	withSitePaths,
 	connect(
 		state => ({

source/sites/mycompanyinfrance.fr/layout/ProgressHeader/ProgressHeader.js

@@ -4,7 +4,7 @@ import { React, T } from 'Components'
 import withSitePaths from 'Components/utils/withSitePaths'
 import withTracker from 'Components/utils/withTracker'
 import { compose } from 'ramda'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 import { NavLink } from 'react-router-dom'
@@ -92,6 +92,6 @@ export default (compose(
 		{}
 	),
 	withRouter,
-	withNamespaces(),
+	withTranslation(),
 	withSitePaths
 )(StepsHeader): React$ComponentType<OwnProps>)

source/sites/mycompanyinfrance.fr/pages/Company/AfterRegistration.js

@@ -3,7 +3,7 @@ import { React, T } from 'Components'
 import { ScrollToTop } from 'Components/utils/Scroll'
 import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import Animate from 'Ui/animate'
@@ -112,6 +112,6 @@ export default (compose(
 	connect(state => ({
 		companyStatusChoice: state.inFranceApp.companyStatusChoice
 	})),
-	withNamespaces(),
+	withTranslation(),
 	withSitePaths
 )(AfterRegistration): React$ComponentType<OwnProps>)

source/sites/mycompanyinfrance.fr/pages/Company/AutoEntrepreneur.js

@@ -3,7 +3,7 @@ import { isAutoentrepreneur } from 'Actions/companyStatusActions'
 import { React, T } from 'Components'
 import { compose } from 'ramda'
 import Helmet from 'react-helmet'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import CompanyStatusNavigation from './CompanyStatusNavigation'
 
@@ -97,7 +97,7 @@ const Autoentrepreneur = ({ isAutoentrepreneur, t }: Props) => (
 )
 
 export default compose(
-	withNamespaces(),
+	withTranslation(),
 	connect(
 		null,
 		{ isAutoentrepreneur }

source/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js

@@ -9,7 +9,7 @@ import Scroll from 'Components/utils/Scroll'
 import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
 import Helmet from 'react-helmet'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import * as Animate from 'Ui/animate'
@@ -463,7 +463,7 @@ const CreateCompany = ({
 	)
 }
 export default compose(
-	withNamespaces(),
+	withTranslation(),
 	withSitePaths,
 	connect(
 		state => ({

source/sites/mycompanyinfrance.fr/pages/Company/DirectorStatus.js

@@ -4,7 +4,7 @@ import { React, T } from 'Components'
 import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
 import Helmet from 'react-helmet'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import CompanyStatusNavigation from './CompanyStatusNavigation'
@@ -86,7 +86,7 @@ const DefineDirectorStatus = ({
 )
 
 export default compose(
-	withNamespaces(),
+	withTranslation(),
 	connect(
 		null,
 		{ defineDirectorStatus }

source/sites/mycompanyinfrance.fr/pages/Company/Find.js

@@ -4,7 +4,7 @@ import { React, T } from 'Components'
 import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
 import Helmet from 'react-helmet'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 import { Link } from 'react-router-dom'
@@ -123,5 +123,5 @@ export default (compose(
 			onCompanyDetailsConfirmation: saveExistingCompanyDetails
 		}
 	),
-	withNamespaces()
+	withTranslation()
 )(Search): React$ComponentType<OwnProps>)

source/sites/mycompanyinfrance.fr/pages/Company/Home.js

@@ -1,10 +1,11 @@
 /* @flow */
 import { resetCompanyStatusChoice } from 'Actions/companyStatusActions'
-import { React, T } from 'Components'
+import { T } from 'Components'
 import withSitePaths from 'Components/utils/withSitePaths'
 import { compose, toPairs } from 'ramda'
+import React, { useEffect } from 'react'
 import Helmet from 'react-helmet'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link, Redirect } from 'react-router-dom'
 import { nextQuestionUrlSelector } from 'Selectors/companyStatusSelectors'
@@ -33,39 +34,42 @@ const CreateMyCompany = ({
 	t,
 	location
 }: Props) => {
-	if (!match.isExact) {
-		const companyStatusCurrentQuestionName = (toPairs(
-			sitePaths.entreprise.statutJuridique
-		).find(([, pathname]) => location.pathname === pathname) || [])[0]
-		resetCompanyStatusChoice(companyStatusCurrentQuestionName)
-	}
+	useEffect(() => {
+		if (!match.isExact) {
+			const companyStatusCurrentQuestionName = (toPairs(
+				sitePaths.entreprise.statutJuridique
+			).find(([, pathname]) => location.pathname === pathname) || [])[0]
+			resetCompanyStatusChoice(companyStatusCurrentQuestionName)
+			return
+		}
+	})
 
 	return (
 		<>
 			{match.isExact && guideAlreadyStarted && (
 				<Redirect to={nextQuestionUrl} />
 			)}
-			<Helmet>
-				<title>
-					{t(
-						'formeJuridique.page.titre',
-						'Quel statut juridique choisir : le guide pas à pas'
-					)}
-				</title>
-				<meta
-					name="description"
-					content={t(
-						'formeJuridique.page.description',
-						"Le droit des affaires français définit plus de 20 statuts juridiques possibles pour déclarer une société avec différents acronymes et processus : SAS, SARL, SA, EIRL.... Ce guide vous aide rapidement à trouver le bon statut pour votre projet d'entreprise"
-					)}
-				/>
-			</Helmet>
 
 			<h1 className="question__title">
 				<T k="formeJuridique.titre">Choisir le statut juridique</T>
 			</h1>
 			{match.isExact && (
 				<>
+					<Helmet>
+						<title>
+							{t(
+								'formeJuridique.page.titre',
+								'Quel statut juridique choisir : le guide pas à pas'
+							)}
+						</title>
+						<meta
+							name="description"
+							content={t(
+								'formeJuridique.page.description',
+								"Le droit des affaires français définit plus de 20 statuts juridiques possibles pour déclarer une société avec différents acronymes et processus : SAS, SARL, SA, EIRL.... Ce guide vous aide rapidement à trouver le bon statut pour votre projet d'entreprise"
+							)}
+						/>
+					</Helmet>
 					<p>
 						<T k="formeJuridique.intro">
 							Le droit des sociétés définit plus de 20 statuts juridiques
@@ -92,14 +96,14 @@ const CreateMyCompany = ({
 }
 
 export default (compose(
+	withSitePaths,
 	connect(
-		state => ({
-			nextQuestionUrl: nextQuestionUrlSelector(state),
+		(state, { sitePaths }) => ({
+			nextQuestionUrl: nextQuestionUrlSelector(state, { sitePaths }),
 			guideAlreadyStarted: !!Object.keys(state.inFranceApp.companyLegalStatus)
 				.length
 		}),
 		{ resetCompanyStatusChoice }
 	),
-	withSitePaths,
-	withNamespaces()
+	withTranslation()
 )(CreateMyCompany): React$ComponentType<OwnProps>)

source/sites/mycompanyinfrance.fr/pages/Company/Liability.js

@@ -3,7 +3,7 @@ import { chooseCompanyLiability } from 'Actions/companyStatusActions'
 import { React, T } from 'Components'
 import { compose } from 'ramda'
 import Helmet from 'react-helmet'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import CompanyStatusNavigation from './CompanyStatusNavigation'
 import type { CompanyLiability } from 'Types/companyTypes'
@@ -116,7 +116,7 @@ const Liability = ({
 )
 
 export default compose(
-	withNamespaces(),
+	withTranslation(),
 	connect(
 		state => ({
 			multipleAssociates:

source/sites/mycompanyinfrance.fr/pages/Company/MinorityDirector.js

@@ -3,7 +3,7 @@ import { directorIsInAMinority } from 'Actions/companyStatusActions'
 import { React, T } from 'Components'
 import { compose } from 'ramda'
 import Helmet from 'react-helmet'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import CompanyStatusNavigation from './CompanyStatusNavigation'
 import type { TFunction } from 'react-i18next'
@@ -72,7 +72,7 @@ const MinorityDirector = ({ directorIsInAMinority, t }: Props) => (
 )
 
 export default compose(
-	withNamespaces(),
+	withTranslation(),
 	connect(
 		null,
 		{ directorIsInAMinority }

source/sites/mycompanyinfrance.fr/pages/Company/NumberOfAssociate.js

@@ -4,7 +4,7 @@ import { companyHasMultipleAssociates } from 'Actions/companyStatusActions'
 import { React, T } from 'Components'
 import { compose } from 'ramda'
 import Helmet from 'react-helmet'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import CompanyStatusNavigation from './CompanyStatusNavigation'
 import type { TFunction } from 'react-i18next'
@@ -70,7 +70,7 @@ const NumberOfAssociates = ({ companyHasMultipleAssociates, t }: Props) => (
 )
 
 export default compose(
-	withNamespaces(),
+	withTranslation(),
 	connect(
 		null,
 		{ companyHasMultipleAssociates }

source/sites/mycompanyinfrance.fr/pages/Company/PickLegalStatus.js

@@ -5,7 +5,7 @@ import withLanguage from 'Components/utils/withLanguage'
 import withSitePaths from 'Components/utils/withSitePaths'
 import { compose, filter } from 'ramda'
 import Helmet from 'react-helmet'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { possibleStatusSelector } from 'Selectors/companyStatusSelectors'
@@ -25,7 +25,7 @@ type Props = {
 }
 
 const StatusButton = withSitePaths(
-	withNamespaces()(
+	withTranslation()(
 		({
 			status,
 			t,
@@ -142,7 +142,7 @@ const SetMainStatus = ({
 }
 
 export default compose(
-	withNamespaces(),
+	withTranslation(),
 	withSitePaths,
 	withLanguage,
 	connect(

source/sites/mycompanyinfrance.fr/pages/Company/YourCompany.js

@@ -4,7 +4,7 @@ import { React, T } from 'Components'
 import withLanguage from 'Components/utils/withLanguage'
 import withSitePaths from 'Components/utils/withSitePaths'
 import { compose, toPairs } from 'ramda'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link, Redirect } from 'react-router-dom'
 import type { ResetExistingCompanyDetailsAction } from 'Types/companyTypes'
@@ -38,7 +38,7 @@ const LocaleDate = withLanguage(
 		}).format(date)
 )
 
-export const CompanyDetails = withNamespaces()(
+export const CompanyDetails = withTranslation()(
 	({ t, ...data }: { t: TFunction, [string]: string }) => {
 		const localizedCompanyDataSelection = companyDataSelection(t)
 		return (

source/sites/mycompanyinfrance.fr/pages/Company/index.js

@@ -1,7 +1,7 @@
 import withSitePaths from 'Components/utils/withSitePaths';
 import { compose } from 'ramda';
 import React from 'react';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Redirect, Route, Switch } from 'react-router';
 import * as Animate from 'Ui/animate';
@@ -107,6 +107,6 @@ export default compose(
 		companyStatusChoice: state.inFranceApp.companyStatusChoice,
 		existingCompany: state.inFranceApp.existingCompanyDetails
 	})),
-	withNamespaces(),
+	withTranslation(),
 	withSitePaths
 )(CreateMyCompany)

source/sites/mycompanyinfrance.fr/pages/HiringProcess.js

@@ -7,7 +7,7 @@ import { React, T } from 'Components'
 import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
 import Helmet from 'react-helmet'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import Animate from 'Ui/animate'
@@ -207,7 +207,7 @@ const HiringProcess = ({
 )
 
 export default compose(
-	withNamespaces(),
+	withTranslation(),
 	withSitePaths,
 	connect(
 		state => ({ hiringChecklist: state.inFranceApp.hiringChecklist }),

source/sites/mycompanyinfrance.fr/pages/Landing.js

@@ -8,7 +8,7 @@ import urssafSvg from 'Images/urssaf.svg'
 import { compose } from 'ramda'
 import React from 'react'
 import emoji from 'react-easy-emoji'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import Footer from '../layout/Footer/Footer'
 import './Landing.css'
@@ -22,7 +22,7 @@ type Props = {
 export default compose(
 	withSitePaths,
 	withColours,
-	withNamespaces()
+	withTranslation()
 )(({ colours: { colour }, sitePaths }: Props) => (
 	<div className="app-content">
 		<section className="landing__banner" style={{ backgroundColor: colour }}>

source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Home.js

@@ -7,7 +7,7 @@ import withSitePaths from 'Components/utils/withSitePaths';
 import { compose } from 'ramda';
 import emoji from 'react-easy-emoji';
 import Helmet from 'react-helmet';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { régimeSelector } from 'Selectors/companyStatusSelectors';
@@ -104,7 +104,7 @@ class SocialSecurity extends Component<Props, {}> {
 }
 
 export default compose(
-	withNamespaces(),
+	withTranslation(),
 	withLanguage,
 	withSitePaths,
 	connect(state => ({

source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Salarié.js

@@ -7,7 +7,7 @@ import TargetSelection from 'Components/TargetSelection';
 import withSitePaths from 'Components/utils/withSitePaths';
 import { compose } from 'ramda';
 import { Helmet } from 'react-helmet';
-import { withNamespaces } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 export let SalarySimulation = withSitePaths(({ sitePaths }) => (
@@ -53,4 +53,4 @@ const Salarié = ({t}) => (
 		<SalarySimulation />
 	</>
 )
-export default compose(withNamespaces(), withSimulationConfig(salariéConfig))(Salarié)
+export default compose(withTranslation(), withSimulationConfig(salariéConfig))(Salarié)

source/sites/mycompanyinfrance.fr/sitePaths.js

@@ -22,7 +22,7 @@ const translateTo = language => (str1, str2, options = {}) =>
 		...(language ? { lng: language } : {}),
 		...options
 	})
-const constructLocalizedSitePath = language => {
+export const constructLocalizedSitePath = (language: string) => {
 	const t = translateTo(language)
 	return constructSitePaths('', {
 		index: '',
@@ -111,12 +111,6 @@ const constructLocalizedSitePath = language => {
 	})
 }
 
-let sitePath = constructLocalizedSitePath(i18n.language)
-i18n.on('languageChanged', () => {
-	sitePath = constructLocalizedSitePath(i18n.language)
-})
-
-export default () => sitePath
 const deepReduce = (fn, initialValue, object: Object) =>
 	reduce(
 		(acc, [key, value]) =>

source/types/ActionsTypes.js

@@ -1,3 +1,6 @@
+import type { SitePaths } from 'Components/utils/withSitePaths'
+import type { RouterHistory } from 'react-router'
+
 /* @flow */
 
 export type LoadPreviousSimulationAction = {
@@ -35,3 +38,9 @@ export type Action =
 	| ResetSimulationAction
 	| DeletePreviousSimulationAction
 	| StepAction
+
+export type Thunk<Action: Object> = (
+	dispatch: (Action) => void,
+	getState: () => any,
+	{ history: RouterHistory, sitePaths: SitePaths }
+) => void