From 5e6fe909adff5c2b6e7adec40bba64b290f3f32f Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Tue, 5 May 2020 02:20:50 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20R=C3=A9pare=20le=20hot=20reload?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                |  2 +-
 source/Provider.tsx                         |  6 ++++--
 source/sites/mon-entreprise.fr/App.tsx      | 19 +++----------------
 source/sites/mon-entreprise.fr/entry.en.tsx | 15 +++++++++++----
 source/sites/mon-entreprise.fr/entry.fr.tsx | 12 ++++++++++--
 yarn.lock                                   |  8 ++++----
 6 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 70c063c6c..499b68422 100644
--- a/package.json
+++ b/package.json
@@ -193,7 +193,7 @@
 		"prettier": "^1.19.1",
 		"ramda-fantasy": "^0.8.0",
 		"raw-loader": "^0.5.1",
-		"react-hot-loader": "^4.12.15",
+		"react-hot-loader": "^4.12.21",
 		"serve": "^11.1.0",
 		"serve-handler": "^6.1.1",
 		"sinon": "^4.5.0",
diff --git a/source/Provider.tsx b/source/Provider.tsx
index 503427681..8f8622e80 100644
--- a/source/Provider.tsx
+++ b/source/Provider.tsx
@@ -64,7 +64,6 @@ export default function Provider({
 	onStoreCreated,
 	children
 }: ProviderProps) {
-	const { language } = useTranslation().i18n as { language: AvailableLangs }
 	const history = useMemo(
 		() =>
 			createBrowserHistory({
@@ -90,7 +89,10 @@ export default function Provider({
 		)
 	)
 
-	const store = createStore(reducers, initialStore, storeEnhancer)
+	// Hack: useMemo is used to persist the store across hot reloads.
+	const store = useMemo(() => {
+		return createStore(reducers, initialStore, storeEnhancer)
+	}, [])
 	onStoreCreated?.(store)
 
 	// Remove loader
diff --git a/source/sites/mon-entreprise.fr/App.tsx b/source/sites/mon-entreprise.fr/App.tsx
index bbe424b0c..85a67f1bb 100644
--- a/source/sites/mon-entreprise.fr/App.tsx
+++ b/source/sites/mon-entreprise.fr/App.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { Route, Switch } from 'react-router-dom'
 import createSentryMiddleware from 'redux-sentry-middleware'
-import rulesFr, { Rules } from 'Rules'
+import { Rules } from 'Rules'
 import {
 	configSituationSelector,
 	situationSelector
@@ -84,14 +84,10 @@ type RootProps = {
 	rules: Rules
 }
 
-function Root({ basename, rules }: RootProps) {
+export default function Root({ basename, rules }: RootProps) {
 	const { language } = useTranslation().i18n
-	// Hot reload rules
-	if (process.env.NODE_ENV !== 'production' && language === 'fr') {
-		rules = rulesFr
-	}
-
 	const paths = constructLocalizedSitePath(language as AvailableLangs)
+
 	return (
 		<Provider
 			basename={basename}
@@ -182,12 +178,3 @@ const App = () => {
 		</div>
 	)
 }
-
-let ExportedApp = Root
-
-if (process.env.NODE_ENV !== 'production') {
-	const { hot } = require('react-hot-loader')
-	ExportedApp = hot(module)(Root)
-}
-
-export default ExportedApp
diff --git a/source/sites/mon-entreprise.fr/entry.en.tsx b/source/sites/mon-entreprise.fr/entry.en.tsx
index 9161fe31b..b1cbd3b28 100644
--- a/source/sites/mon-entreprise.fr/entry.en.tsx
+++ b/source/sites/mon-entreprise.fr/entry.en.tsx
@@ -1,4 +1,5 @@
 import 'core-js/stable'
+import 'react-hot-loader'
 import { translateRules } from 'Engine'
 import React from 'react'
 import { render } from 'react-dom'
@@ -12,11 +13,17 @@ import App from './App'
 i18next.addResourceBundle('en', 'translation', translations)
 i18next.changeLanguage('en')
 
-let anchor = document.querySelector('#js')
-render(
+let Root = () => (
 	<App
 		basename="infrance"
 		rules={translateRules('en', ruleTranslations, rules)}
-	/>,
-	anchor
+	/>
 )
+
+if (process.env.NODE_ENV !== 'production') {
+	const { hot } = require('react-hot-loader/root')
+	Root = hot(Root)
+}
+
+const anchor = document.querySelector('#js')
+render(<Root />, anchor)
diff --git a/source/sites/mon-entreprise.fr/entry.fr.tsx b/source/sites/mon-entreprise.fr/entry.fr.tsx
index c9b79cbfb..a50040b0b 100644
--- a/source/sites/mon-entreprise.fr/entry.fr.tsx
+++ b/source/sites/mon-entreprise.fr/entry.fr.tsx
@@ -1,4 +1,5 @@
 import 'core-js/stable'
+import 'react-hot-loader'
 import React from 'react'
 import { render } from 'react-dom'
 import 'regenerator-runtime/runtime'
@@ -8,5 +9,12 @@ import i18next from '../../i18n'
 
 i18next.changeLanguage('fr')
 
-let anchor = document.querySelector('#js')
-render(<App basename="mon-entreprise" rules={rules} />, anchor)
+let Root = () => <App basename="mon-entreprise" rules={rules} />
+
+if (process.env.NODE_ENV !== 'production') {
+	const { hot } = require('react-hot-loader/root')
+	Root = hot(Root)
+}
+
+const anchor = document.querySelector('#js')
+render(<Root />, anchor)
diff --git a/yarn.lock b/yarn.lock
index 2d5caf6cd..e724a8f29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9674,10 +9674,10 @@ react-helmet@^6.0.0:
     react-fast-compare "^2.0.4"
     react-side-effect "^2.1.0"
 
-react-hot-loader@^4.12.15:
-  version "4.12.20"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.20.tgz#c2c42362a7578e5c30357a5ff7afa680aa0bef8a"
-  integrity sha512-lPlv1HVizi0lsi+UFACBJaydtRYILWkfHAC/lyCs6ZlAxlOZRQIfYHDqiGaRvL/GF7zyti+Qn9XpnDAUvdFA4A==
+react-hot-loader@^4.12.21:
+  version "4.12.21"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.21.tgz#332e830801fb33024b5a147d6b13417f491eb975"
+  integrity sha512-Ynxa6ROfWUeKWsTHxsrL2KMzujxJVPjs385lmB2t5cHUxdoRPGind9F00tOkdc1l5WBleOF4XEAMILY1KPIIDA==
   dependencies:
     fast-levenshtein "^2.0.6"
     global "^4.3.0"