From ec65c3b9dd954bd2a6cca5c682864a63c3d449bc Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Wed, 19 Aug 2020 20:04:52 +0200
Subject: [PATCH] Implement public/private routing

---
 src/App.js                               | 32 +++++++++++++++
 src/components/General/Title.js          |  3 +-
 src/components/Navbar/NavBar.js          |  4 +-
 src/components/routes/PrivateRoute.js    | 29 ++++++++++++++
 src/components/routes/PublicRoute.js     | 22 ++++++++++
 src/index.js                             |  2 +-
 src/screens/App.js                       | 51 ------------------------
 src/screens/Availability/Availability.js |  4 +-
 src/screens/Invite/Invite.js             |  4 +-
 src/screens/Login.js                     |  4 +-
 src/screens/Register.js                  |  4 +-
 src/screens/Schedule/Schedule.js         |  4 +-
 src/utils/common.js                      | 29 +++++++-------
 13 files changed, 110 insertions(+), 82 deletions(-)
 create mode 100644 src/App.js
 create mode 100644 src/components/routes/PrivateRoute.js
 create mode 100644 src/components/routes/PublicRoute.js
 delete mode 100644 src/screens/App.js

diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..9cee18c
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import 'rsuite/lib/styles/index.less';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+
+import PrivateRoute from './components/routes/PrivateRoute';
+import PublicRoute from './components/routes/PublicRoute';
+
+import Dashboard from './screens/Dashboard';
+import Schedule from './screens/Schedule/Schedule';
+import Availability from './screens/Availability/Availability';
+import Invite from './screens/Invite/Invite';
+import Login from './screens/Login';
+import Register from './screens/Register';
+
+export default function App() {
+	return (
+		<Router>
+			<Switch>
+				<Route path='/' exact component={Login} />
+
+				<PublicRoute path='/login' component={Login} />
+				<PublicRoute path='/register' component={Register} />
+
+				<PrivateRoute path='/dashboard' component={Dashboard} />
+				<PrivateRoute path='/schedule' component={Schedule} />
+				<PrivateRoute path='/invite' component={Invite} />
+				<PrivateRoute path='/availability' component={Availability} />
+				<PrivateRoute path='/schedule' component={Schedule} />
+			</Switch>
+		</Router>
+	);
+}
diff --git a/src/components/General/Title.js b/src/components/General/Title.js
index dc6b261..2eff52b 100644
--- a/src/components/General/Title.js
+++ b/src/components/General/Title.js
@@ -2,10 +2,9 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 
 export default function TitleComponent({ title }) {
-	var defaultTitle = 'Meeting Planner';
 	return (
 		<Helmet>
-			<title>{title ? `${title} | Meeting Planner` : defaultTitle}</title>
+			<title>{title ? `${title} | Meeting Planner` : 'Meeting Planner'}</title>
 		</Helmet>
 	);
 }
diff --git a/src/components/Navbar/NavBar.js b/src/components/Navbar/NavBar.js
index 23b70e0..b39b792 100644
--- a/src/components/Navbar/NavBar.js
+++ b/src/components/Navbar/NavBar.js
@@ -16,13 +16,11 @@ export default function NavBar({ title }) {
 						alignItems: 'center',
 					}}
 				>
+					{/* This hidden nav is a hack to have the title perfectly centered. */}
 					<Nav style={{ visibility: 'hidden' }}>
-						{/* This hidden nav is a hack to have the title perfectly centered. */}
 						<MenuDropdown  />
 					</Nav>
-					<div>
 						<h3>{title}</h3>
-					</div>
 					<MenuDropdown />
 				</Navbar.Body>
 			</Navbar>
diff --git a/src/components/routes/PrivateRoute.js b/src/components/routes/PrivateRoute.js
new file mode 100644
index 0000000..6a840ba
--- /dev/null
+++ b/src/components/routes/PrivateRoute.js
@@ -0,0 +1,29 @@
+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;
diff --git a/src/components/routes/PublicRoute.js b/src/components/routes/PublicRoute.js
new file mode 100644
index 0000000..8a3ab72
--- /dev/null
+++ b/src/components/routes/PublicRoute.js
@@ -0,0 +1,22 @@
+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;
diff --git a/src/index.js b/src/index.js
index fd76d9e..0c4762a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
-import App from './screens/App';
+import App from './App';
 
 import 'rsuite/lib/styles/index.less';
 
diff --git a/src/screens/App.js b/src/screens/App.js
deleted file mode 100644
index a821f8e..0000000
--- a/src/screens/App.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import 'rsuite/lib/styles/index.less';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-
-import Dashboard from './Dashboard';
-import Schedule from './Schedule/Schedule';
-import Availability from './Availability/Availability';
-import Invite from './Invite/Invite';
-import Login from './Login';
-import Register from './Register';
-
-const titles = {
-	schedule: 'Schedule a meeting',
-	invite: 'Invite participants',
-	availability: 'Add your availability',
-	confirm: 'Confirm meeting date',
-	dashboard: 'Dashboard',
-	login: 'Login',
-	register: 'Register',
-	settings: 'Settings',
-};
-
-export default function App() {
-	return (
-		<Router>
-			<Switch>
-				<Route path='/' exact>
-					<Login title={titles.login} />
-				</Route>
-				<Route path='/schedule'>
-					<Schedule title={titles.schedule} />
-				</Route>
-				<Route path='/invite'>
-					<Invite title={titles.invite} />
-				</Route>
-				<Route path='/availability'>
-					<Availability title={titles.availability} />
-				</Route>
-				<Route path='/dashboard'>
-					<Dashboard title={titles.dashboard} />
-				</Route>
-				<Route path='/login'>
-					<Login title={titles.login} />
-				</Route>
-				<Route path='/register'>
-					<Register title={titles.register} />
-				</Route>
-			</Switch>
-		</Router>
-	);
-}
diff --git a/src/screens/Availability/Availability.js b/src/screens/Availability/Availability.js
index d8d4c9c..aa0a3fd 100644
--- a/src/screens/Availability/Availability.js
+++ b/src/screens/Availability/Availability.js
@@ -17,7 +17,7 @@ import IntervalSelector from '../../components/Interval/IntervalSelector';
 
 import './Availability.less';
 
-export default function Availability({ title }) {
+export default function Availability() {
 	const [availability, setAvailability] = useState([...availabilityList]);
 
 	const handleClear = () => {
@@ -36,7 +36,7 @@ export default function Availability({ title }) {
 
 	return (
 		<>
-			<NavBar title={title} />
+			<NavBar title='Add your availability' />
 			<Panel style={containerStyle}>
 				<Form className={'av-container'}>
 					<div className={'av-details'}>
diff --git a/src/screens/Invite/Invite.js b/src/screens/Invite/Invite.js
index 45407cd..2790228 100644
--- a/src/screens/Invite/Invite.js
+++ b/src/screens/Invite/Invite.js
@@ -6,7 +6,7 @@ import { Panel, Form, Button, ButtonGroup, Message, TagPicker } from 'rsuite';
 import NavBar from '../../components/Navbar/NavBar';
 import './Invite.less';
 
-export default function Invite({ title }) {
+export default function Invite() {
 	const [participants, setParticipants] = useState([]);
 	const [contactDropdown, setContactDropdown] = useState([]);
 
@@ -63,7 +63,7 @@ export default function Invite({ title }) {
 
 	return (
 		<>
-			<NavBar title={title} />
+			<NavBar title='Invite participants' />
 			<Panel style={containerStyle}>
 				<Form className={'av-container'}>
 					<div className={'interval-selector'}>
diff --git a/src/screens/Login.js b/src/screens/Login.js
index a92f7b2..b46bd72 100644
--- a/src/screens/Login.js
+++ b/src/screens/Login.js
@@ -14,7 +14,7 @@ import {
 import { setUserSession } from '../utils/common';
 import NavBar from './../components/Navbar/NavBar';
 
-export default function Login({ title }) {
+export default function Login() {
 	const history = useHistory();
 
 	const [error, setError] = useState(false);
@@ -46,7 +46,7 @@ export default function Login({ title }) {
 
 	return (
 		<>
-			<NavBar title={title} />
+			<NavBar title='Login' />
 			<Panel bordered style={boxStyle}>
 				{error && <Message type='error' description={error} />}
 				<Form>
diff --git a/src/screens/Register.js b/src/screens/Register.js
index 820fa85..244dcdb 100644
--- a/src/screens/Register.js
+++ b/src/screens/Register.js
@@ -16,10 +16,10 @@ const boxStyle = {
 	padding: '1rem',
 };
 
-export default function Register({ title }) {
+export default function Register() {
 	return (
 		<>
-			<NavBar title={title} />
+			<NavBar title='Register' />
 			<Panel bordered style={boxStyle}>
 				<Form>
 					<FormGroup>
diff --git a/src/screens/Schedule/Schedule.js b/src/screens/Schedule/Schedule.js
index dd26355..31ea981 100644
--- a/src/screens/Schedule/Schedule.js
+++ b/src/screens/Schedule/Schedule.js
@@ -21,7 +21,7 @@ import SelectedDates from '../../components/Schedule/SelectedDates';
 
 import './Schedule.less';
 
-export default function Schedule({ title }) {
+export default function Schedule() {
 	const [eventsList, setEventsList] = useState([]);
 	const [datesList, setDatesList] = useState(eventsToDates(eventsList));
 
@@ -117,7 +117,7 @@ export default function Schedule({ title }) {
 
 	return (
 		<>
-			<NavBar title={title} />
+			<NavBar title='Schedule a meeting' />
 			<Panel style={containerStyle}>
 				<Form className={'meeting-container'}>
 					<div className={'meeting-info'}>
diff --git a/src/utils/common.js b/src/utils/common.js
index 2b4e980..c24569e 100644
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -1,27 +1,26 @@
-// return the user data from the local storage
-export const getUser = () => {
-	const user = JSON.parse(localStorage.getItem('user'));
-
-	if (user) return user;
-	else return null;
+// Set/Remove user and token to local storage
+export const setUserSession = (token, user) => {
+	localStorage.setItem('token', token);
+	localStorage.setItem('user', JSON.stringify(user));
+};
+
+export const getUser = () => {
+	const userJSON = localStorage.getItem('user');
+
+	if (userJSON) {
+		const user = JSON.parse(userJSON);
+		return user;
+	} else return null;
 };
 
-// return the token from the local storage
 export const getToken = () => {
-	const token = JSON.parse(localStorage.getItem('token'));
+	const token = localStorage.getItem('token');
 
 	if (token) return token;
 	else return null;
 };
 
-// remove the token and user from the local storage
 export const removeUserSession = () => {
 	localStorage.removeItem('token');
 	localStorage.removeItem('user');
 };
-
-// set the token and user from the local storage
-export const setUserSession = (token, user) => {
-	localStorage.setItem('token', token);
-	localStorage.setItem('user', JSON.stringify(user));
-};