Changement du fonctionnement de la localisation - le changement de langue est maintenant peristant au rechargement de la page

src/App.jsx

@@ -8,25 +8,28 @@ import {
 import { useSelector } from "react-redux";
 import { IntlProvider } from "react-intl";
 
+import { LOCALES } from "./i18n/locales";
+import { messages } from "./i18n/messages";
+
 import Navbar from "./components/Navbar/";
 import Home from "./pages/Home/";
 import SignupPage from "./pages/Signup";
 import LoginPage from "./pages/Login/";
 import ProfilePage from "./pages/Profile";
 
-import fr_FR from "./translations/fr_FR";
-import en_default from "./translations/en.json";
-
 const App = () => {
-	const [language, setLanguage] = useState(navigator.language);
+	const getInitialLocal = () => {
+		const savedLocale = localStorage.getItem("locale");
+		return savedLocale || LOCALES.FRENCH;
+	};
+
+	const [currentLocale, setCurrentLocale] = useState(getInitialLocal());
 	const currentUser = useSelector((state) => state.currentUser);
 
-	let lang = null;
-	if (language !== "fr") {
-		lang = en_default;
-	} else {
-		lang = fr_FR;
-	}
+	const handleLocaleChange = (e) => {
+		setCurrentLocale(e.target.value);
+		localStorage.setItem("locale", e.target.value);
+	};
 
 	const UnAuthRoute = ({ component: Component, ...rest }) => (
 		<Route
@@ -55,23 +58,27 @@ const App = () => {
 	);
 
 	return (
-		<div className="App">
-			<IntlProvider locale={language} messages={lang}>
-				<Router>
-					<Navbar setLanguage={setLanguage} />
-					<section className="pages">
-						<Switch>
-							<Route exact path="/">
-								<Home />
-							</Route>
-							<UnAuthRoute path="/login" component={LoginPage} />
-							<UnAuthRoute path="/signup" component={SignupPage} />
-							<AuthRoute path="/me" component={ProfilePage} />
-						</Switch>
-					</section>
-				</Router>
-			</IntlProvider>
-		</div>
+		<IntlProvider
+			messages={messages[currentLocale]}
+			locale={currentLocale}
+			defaultLocale={LOCALES.FRENCH}>
+			<Router>
+				<Navbar
+					currentLocale={currentLocale}
+					handleLocaleChange={handleLocaleChange}
+				/>
+				<section className="app">
+					<Switch>
+						<Route exact path="/">
+							<Home />
+						</Route>
+						<UnAuthRoute path="/login" component={LoginPage} />
+						<UnAuthRoute path="/signup" component={SignupPage} />
+						<AuthRoute path="/me" component={ProfilePage} />
+					</Switch>
+				</section>
+			</Router>
+		</IntlProvider>
 	);
 };
 

src/components/Navbar/index.jsx

@@ -5,10 +5,15 @@ import { useSelector } from "react-redux";
 import "./index.scss";
 import Star from "../../assets/img/star.ico";
 import LogoutButton from "../buttons/LogoutButton";
+import { LOCALES } from "../../i18n/locales";
 
-const Navbar = ({ setLanguage }) => {
+const Navbar = ({ handleLocaleChange, currentLocale }) => {
 	const currentUser = useSelector((state) => state.currentUser);
 
+	const languages = [
+		{ name: "French", code: LOCALES.FRENCH },
+		{ name: "English", code: LOCALES.ENGLISH }
+	];
 	return (
 		<div className="navbar">
 			<div className="navbar__LeftSide">
@@ -24,13 +29,15 @@ const Navbar = ({ setLanguage }) => {
 				</Link>
 			</div>
 			<div className="navbar__RightSide">
-				<div className="localeLinks">
-					<button id="setFr" onClick={() => setLanguage("fr")}>
-						Fr
-					</button>
-					<button id="setEn" onClick={() => setLanguage("en")}>
-						En
-					</button>
+				<div className="languageSwitcher">
+					Languages{""}
+					<select onChange={handleLocaleChange} value={currentLocale}>
+						{languages.map(({ name, code }) => (
+							<option key={code} value={code}>
+								{name}
+							</option>
+						))}
+					</select>
 				</div>
 				{!currentUser && (
 					<>

src/i18n/locales.js

@@ -0,0 +1,4 @@
+export const LOCALES = {
+	ENGLISH: "en",
+	FRENCH: "fr"
+};

src/i18n/messages.js

@@ -0,0 +1,15 @@
+import { LOCALES } from "./locales";
+
+import { en } from "./translations/en";
+import { fr } from "./translations/fr";
+
+export const messages = {
+	[LOCALES.ENGLISH]: {
+		home_connected: "User is connected",
+		home_notConnected: "User is not connected"
+	},
+	[LOCALES.FRENCH]: {
+		home_connected: "Utilisateurice connecté·e - lol",
+		home_notConnected: "Utilisateurice non connecté·e - lol"
+	}
+};

src/i18n/translations/en.js

@@ -0,0 +1,4 @@
+export const en = {
+	home_connected: "User is connected",
+	home_notConnected: "User is not connected"
+};

src/i18n/translations/fr.js

@@ -0,0 +1,4 @@
+export const fr = {
+	home_connected: "Utilisateurice connecté·e - lol",
+	home_notConnected: "Utilisateurice non connecté·e - lol"
+};

src/pages/Home/index.jsx

@@ -1,9 +1,7 @@
 import React, { useEffect } from "react";
 import { useLocation } from "react-router";
 import { useSelector } from "react-redux";
-import { FormattedMessage } from "react-intl";
-
-import Cookies from "js-cookie";
+import { FormattedMessage, FormattedDate } from "react-intl";
 
 const Home = () => {
 	const currentUser = useSelector((state) => state.currentUser);
@@ -17,27 +15,27 @@ const Home = () => {
 				<div>
 					<p>
 						<FormattedMessage
-							id="home.connected"
+							id="home_connected"
 							defaultMessage="Utilisateurice connecté·e - {what}"
 							description="verification header - connected"
-							values={{ what: "react-intl" }}
+							values={{ what: "default msg" }}
 						/>
 					</p>
 				</div>
 			)}
-
 			{!currentUser && (
 				<div>
 					<p>
 						<FormattedMessage
-							id="home.notConnected"
+							id="home_notConnected"
 							defaultMessage="Utilisateurice non connecté·e - {what}"
 							description="verification header - not connected"
-							values={{ what: "react-intl" }}
+							values={{ what: "default msg" }}
 						/>
 					</p>
 				</div>
 			)}
+			<FormattedDate value={Date.now()} /> <br />
 			<p>{location.state && location.state.status}</p>
 		</div>
 	);

src/translations/en.json

@@ -1,4 +0,0 @@
-{
-	"home.connected": "User is connected",
-	"home.notConnected": "User is not connected"
-}

src/translations/fr_FR.json

@@ -1,4 +0,0 @@
-{
-	"home.connected": "Utilisateurice connecté·e - lol",
-	"home.notConnected": "Utilisateurice non connecté·e - lol"
-}