Refactor authentication with Context

src/components/Navbar/MenuDropdown.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-
 import { Nav, Icon, Dropdown, Popover, Whisper } from 'rsuite';
 
 export default function MenuDropdown() {
@@ -12,18 +11,34 @@ export default function MenuDropdown() {
 		triggerRef.current.hide();
 	}
 
+	function handleLogout() {
+		localStorage.removeItem('token');
+		localStorage.removeItem('user');
+		history.push('/');
+	}
+
 	const MenuPopover = ({ onSelect, ...rest }) => (
 		<Popover {...rest} full>
 			<Dropdown.Menu onSelect={onSelect}>
 				<Dropdown.Item eventKey={'/'}>Dashboard</Dropdown.Item>
 				<Dropdown.Item eventKey={'register'}>Register</Dropdown.Item>
 				<Dropdown.Item eventKey={'login'}>Login</Dropdown.Item>
-				<Dropdown.Item eventKey={'schedule'}>1 - Schedule a meeting</Dropdown.Item>
-				<Dropdown.Item eventKey={'invite'}>2 - Invite participants</Dropdown.Item>
-				<Dropdown.Item eventKey={'availability'}>3 - Add your availability</Dropdown.Item>
-				<Dropdown.Item eventKey={'confirm'}>4 - Confirm meeting date</Dropdown.Item>
+				<Dropdown.Item eventKey={'schedule'}>
+					1 - Schedule a meeting
+				</Dropdown.Item>
+				<Dropdown.Item eventKey={'invite'}>
+					2 - Invite participants
+				</Dropdown.Item>
+				<Dropdown.Item eventKey={'availability'}>
+					3 - Add your availability
+				</Dropdown.Item>
+				<Dropdown.Item eventKey={'confirm'}>
+					4 - Confirm meeting date
+				</Dropdown.Item>
 				<Dropdown.Item eventKey={'settings'}>Settings</Dropdown.Item>
-				<Dropdown.Item eventKey={5}>Log Out</Dropdown.Item>
+				<Dropdown.Item eventKey={5} onSelect={() => handleLogout()}>
+					Log Out
+				</Dropdown.Item>
 			</Dropdown.Menu>
 		</Popover>
 	);

src/components/Routes/PrivateRoute.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+
+import { useAuth } from '../../helpers/authContext';
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+	const { authToken } = useAuth();
+
+	return (
+		<Route
+			{...rest}
+			render={(props) =>
+				authToken ? <Component {...props} /> : <Redirect to='/login' />
+			}
+		/>
+	);
+};
+
+export default PrivateRoute;

src/components/Routes/PublicRoute.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+
+import { useAuth } from '../../helpers/authContext';
+
+
+// TODO Make sure it's used, else delete it and remove message in App
+const PublicRoute = ({ component: Component, ...rest }) => {
+	const isAuthenticated = useAuth();
+
+	return (
+		<Route
+			{...rest}
+			render={(props) =>
+				isAuthenticated ? (
+					<Redirect to='/dashboard' />
+				) : (
+					<Component {...props} />
+				)
+			}
+		/>
+	);
+};
+
+export default PublicRoute;

src/components/routes/PrivateRoute.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Route, Redirect } from 'react-router-dom';
-import { getToken } from '../../utils/common';
-
-const isLoggedIn = getToken();
-
-const PrivateRoute = ({ component: Component, user, ...rest }) => {
-	return (
-		<Route
-			{...rest}
-			render={(props) =>
-				isLoggedIn ? (
-					<Component {...rest} {...props} />
-				) : (
-					<Redirect
-						to={{
-							pathname: '/login',
-							state: {
-								from: props.location,
-							},
-						}}
-					/>
-				)
-			}
-		/>
-	);
-};
-
-export default PrivateRoute;

src/components/routes/PublicRoute.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Route, Redirect } from 'react-router-dom';
-import { getToken } from '../../utils/common';
-
-const isLoggedIn = getToken();
-
-function PublicRoute({ component: Component, ...rest }) {
-	return (
-		<Route
-			{...rest}
-			render={(props) =>
-				!isLoggedIn ? (
-					<Component {...props} />
-				) : (
-					<Redirect to={{ pathname: '/dashboard' }} />
-				)
-			}
-		/>
-	);
-}
-
-export default PublicRoute;