setup de react-intl

src/main.jsx

@@ -7,19 +7,25 @@ import { store, persistor } from "./redux/store/index";
 
 import App from "./App.jsx";
 import "./main.scss";
-import fr_FR from "./lang/fr_FR.json";
-import en_default from "./lang/en.json";
+
+import fr_FR from "./translations/fr_FR.json";
+import en_default from "./translations/en.json";
 
 const locale = navigator.language;
 let lang = "";
 if (locale !== "fr") {
+	lang = en_default;
+} else {
+	lang = fr_FR;
 }
 
 ReactDOM.render(
 	<React.StrictMode>
 		<Provider store={store}>
 			<PersistGate loading={null} persistor={persistor}>
-				<App />
+				<IntlProvider locale={locale} messages={lang}>
+					<App />
+				</IntlProvider>
 			</PersistGate>
 		</Provider>
 	</React.StrictMode>,

src/pages/Home/index.jsx

@@ -1,6 +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";
 
@@ -14,13 +15,27 @@ const Home = () => {
 			<h2>Home</h2>
 			{currentUser && (
 				<div>
-					<p>Utilisateurice connecté·e, bravo !</p>
+					<p>
+						<FormattedMessage
+							id="home.connected"
+							defaultMessage="Utilisateurice connecté·e - {what}"
+							description="verification header - connected"
+							values={{ what: "react-intl" }}
+						/>
+					</p>
 				</div>
 			)}
 
 			{!currentUser && (
 				<div>
-					<p>Utilisateurice non connecté·e.</p>
+					<p>
+						<FormattedMessage
+							id="home.notConnected"
+							defaultMessage="Utilisateurice non connecté·e - {what}"
+							description="verification header - not connected"
+							values={{ what: "react-intl" }}
+						/>
+					</p>
 				</div>
 			)}
 			<p>{location.state && location.state.status}</p>

src/translations/en.json

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

src/translations/fr_FR.json

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