Ajout de AuthRoute et UnAuthRoute et d'une page profile

src/App.jsx

@@ -1,12 +1,47 @@
 import React from "react";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import {
+	BrowserRouter as Router,
+	Route,
+	Switch,
+	Redirect
+} from "react-router-dom";
+import { useSelector } from "react-redux";
 
 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";
 
 const App = () => {
+	const currentUser = useSelector((state) => state.currentUser);
+
+	const UnAuthRoute = ({ component: Component, ...rest }) => (
+		<Route
+			{...rest}
+			render={(props) =>
+				currentUser ? (
+					<Redirect to={{ pathname: "/" }} />
+				) : (
+					<Component {...props} />
+				)
+			}
+		/>
+	);
+
+	const AuthRoute = ({ component: Component, ...rest }) => (
+		<Route
+			{...rest}
+			render={(props) =>
+				currentUser ? (
+					<Component {...props} />
+				) : (
+					<Redirect to={{ pathname: "/signin" }} />
+				)
+			}
+		/>
+	);
+
 	return (
 		<div className="App">
 			<Router>
@@ -16,12 +51,9 @@ const App = () => {
 						<Route exact path="/">
 							<Home />
 						</Route>
-						<Route exact path="/login">
-							<LoginPage />
-						</Route>
-						<Route exact path="/Signup">
-							<SignupPage />
-						</Route>
+						<UnAuthRoute path="/login" component={LoginPage} />
+						<UnAuthRoute path="/signup" component={SignupPage} />
+						<AuthRoute path="/me" component={ProfilePage} />
 					</Switch>
 				</section>
 			</Router>

src/components/Navbar/index.jsx

@@ -36,7 +36,9 @@ const Navbar = () => {
 				)}
 				{currentUser && (
 					<>
-						<button>Profil</button>
+						<Link to="/me">
+							<button>Profile</button>
+						</Link>
 						<LogoutButton />
 					</>
 				)}

src/components/Navbar/index.scss

@@ -36,8 +36,10 @@
 
   .navbar__RightSide{
     display: flex;
-    justify-content: space-between;
-    width: 350px;
+    justify-content: end;
     margin-right: 15px;
+    button {
+      margin: 0px 10px;
+    }
   }
 } 

src/components/forms/LoginForm/index.jsx

@@ -41,7 +41,8 @@ const LoginForm = () => {
 				const payload = {
 					type: "user",
 					id: jwt_decode(response.data.token).user_id,
-					email: userData.email
+					email: userData.email,
+					username: response.data.username
 				};
 				dispatch(setCurrentUser(payload));
 				history.push("/");

src/pages/Home/index.jsx

@@ -1,9 +1,40 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { useSelector } from "react-redux";
+
+import Cookies from "js-cookie";
 
 const Home = () => {
+	const currentUser = useSelector((state) => state.currentUser);
+
+	// const isThereAToken = () => {
+	// 	let token = Cookies.get("token");
+	// 	if (token) {
+	// 		console.log("Connecté 666");
+	// 	} else {
+	// 		console.log("Non connecté 666");
+	// 	}
+	// };
+	// Problématique à résoudre : s'il n'y a plus de token stocké dans un cookie (supprimé volontairement ou non par un·e utilisateurice), il faut alors déconnecter l'utilisateurice (supprimer le contenu du store Redux)
+	// Piste : une fonction qui serait exécutée dans les useEffect des pages uniquement, pas des composants, et qui observerait la présence/absence d'un token, et viderait le store si nécessaire
+
+	// useEffect(() => {
+	// 	isThereAToken();
+	// }, []);
+
 	return (
 		<div className="test">
 			<h2>Home</h2>
+			{currentUser && (
+				<div>
+					<p>Utilisateurice connecté·e, bravo !</p>
+				</div>
+			)}
+
+			{!currentUser && (
+				<div>
+					<p>Utilisateurice non connecté·e.</p>
+				</div>
+			)}
 		</div>
 	);
 };

src/pages/Profile/index.jsx

@@ -0,0 +1,17 @@
+import React, { useEffect } from "react";
+import { useSelector } from "react-redux";
+
+const ProfilePage = () => {
+	const currentUser = useSelector((state) => state.currentUser);
+
+	useEffect(() => {
+		console.log(currentUser);
+	}, []);
+	return (
+		<div>
+			<h1>Hello {currentUser.username}</h1>
+		</div>
+	);
+};
+
+export default ProfilePage;