Ajout du switch des langues

src/App.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
 	BrowserRouter as Router,
 	Route,
@@ -6,6 +6,7 @@ import {
 	Redirect
 } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { IntlProvider } from "react-intl";
 
 import Navbar from "./components/Navbar/";
 import Home from "./pages/Home/";
@@ -13,9 +14,20 @@ 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 currentUser = useSelector((state) => state.currentUser);
 
+	let lang = null;
+	if (language !== "fr") {
+		lang = en_default;
+	} else {
+		lang = fr_FR;
+	}
+
 	const UnAuthRoute = ({ component: Component, ...rest }) => (
 		<Route
 			{...rest}
@@ -44,19 +56,21 @@ const App = () => {
 
 	return (
 		<div className="App">
-			<Router>
-				<Navbar />
-				<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 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>
 	);
 };

src/components/Navbar/index.jsx

@@ -6,7 +6,7 @@ import "./index.scss";
 import Star from "../../assets/img/star.ico";
 import LogoutButton from "../buttons/LogoutButton";
 
-const Navbar = () => {
+const Navbar = ({ setLanguage }) => {
 	const currentUser = useSelector((state) => state.currentUser);
 
 	return (
@@ -24,6 +24,14 @@ const Navbar = () => {
 				</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>
 				{!currentUser && (
 					<>
 						<Link to="/signup">

src/main.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { IntlProvider } from "react-intl";
+// import { IntlProvider } from "react-intl";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import { store, persistor } from "./redux/store/index";
@@ -8,24 +8,11 @@ import { store, persistor } from "./redux/store/index";
 import App from "./App.jsx";
 import "./main.scss";
 
-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}>
-				<IntlProvider locale={locale} messages={lang}>
-					<App />
-				</IntlProvider>
+				<App />
 			</PersistGate>
 		</Provider>
 	</React.StrictMode>,

src/redux/action/index.js

@@ -1,14 +1,14 @@
 const setCurrentUser = (currentUser) => {
-  return {
-    type: "SET_CURRENT_USER",
-    payload: currentUser
-  }
-}
+	return {
+		type: "SET_CURRENT_USER",
+		payload: currentUser
+	};
+};
 
 const removeCurrentUser = () => {
-  return {
-    type: "REMOVE_CURRENT_USER"
-  }
-}
+	return {
+		type: "REMOVE_CURRENT_USER"
+	};
+};
 
-export { setCurrentUser, removeCurrentUser }
+export { setCurrentUser, removeCurrentUser };

src/redux/reducer/index.js

@@ -1,14 +1,14 @@
-const initialState = { currentUser: null }
+const initialState = { currentUser: null };
 
-const reducer = ( state = initialState, action ) => {
-  switch (action.type){
-    case "SET_CURRENT_USER":
-      return { currentUser: action.payload };
-    case "REMOVE_CURRENT_USER":
-      return initialState;
-    default:
-      return { ...state }
-  }
-}
+const reducer = (state = initialState, action) => {
+	switch (action.type) {
+		case "SET_CURRENT_USER":
+			return { currentUser: action.payload };
+		case "REMOVE_CURRENT_USER":
+			return initialState;
+		default:
+			return { ...state };
+	}
+};
 
-export default reducer;
+export default reducer;

src/redux/store/index.js

@@ -1,23 +1,23 @@
-import { createStore, compose, applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
-import { persistStore, persistReducer } from 'redux-persist'
-import storage from 'redux-persist/lib/storage'
-import reducer from "../reducer/index"
+import { createStore, compose, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+import { persistStore, persistReducer } from "redux-persist";
+import storage from "redux-persist/lib/storage";
+import reducer from "../reducer/index";
 
 const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 const persistConfig = {
-  key: 'root',
-  storage,
-}
+	key: "root",
+	storage
+};
 
-const persistedReducer = persistReducer(persistConfig, reducer)
+const persistedReducer = persistReducer(persistConfig, reducer);
 
 const store = createStore(
-  persistedReducer,
-  composeEnhancer(applyMiddleware(thunk))
-  );
+	persistedReducer,
+	composeEnhancer(applyMiddleware(thunk))
+);
 
 const persistor = persistStore(store);
 
-export { store, persistor };
+export { store, persistor };