From 0262465acca25f1bf6154877b929f21e79e1d48e Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Fri, 24 Apr 2020 11:21:34 +0200
Subject: [PATCH] adds private route component and updates router

---
 client/src/components/App/index.jsx    |  2 +-
 client/src/components/Router/index.jsx | 24 ----------------
 client/src/constants/authConditions.js |  1 +
 client/src/pages/App/index.jsx         | 15 ++++++++--
 client/src/pages/Landing/index.jsx     | 21 +++++++++-----
 client/src/routes/PrivateRoute.jsx     | 27 ++++++++++++++++++
 client/src/routes/index.jsx            | 38 ++++++++++++++++++++++++++
 7 files changed, 93 insertions(+), 35 deletions(-)
 delete mode 100644 client/src/components/Router/index.jsx
 create mode 100644 client/src/constants/authConditions.js
 create mode 100644 client/src/routes/PrivateRoute.jsx
 create mode 100644 client/src/routes/index.jsx

diff --git a/client/src/components/App/index.jsx b/client/src/components/App/index.jsx
index 7b84727..ed5fe29 100644
--- a/client/src/components/App/index.jsx
+++ b/client/src/components/App/index.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { BrowserRouter as Router } from "react-router-dom";
 import { useFirebase } from "../../services/auth";
 import MainNavbar from "../MainNavbar";
-import MainRouter from "../Router";
+import MainRouter from "../../routes";
 
 const App = () => {
   // for testing only. Transfer Session to store.
diff --git a/client/src/components/Router/index.jsx b/client/src/components/Router/index.jsx
deleted file mode 100644
index cf36015..0000000
--- a/client/src/components/Router/index.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { Route, Switch } from "react-router-dom";
-import * as ROUTES from "../../constants/routes";
-import AppPage from "../../pages/App";
-import LandingPage from "../../pages/Landing";
-import SignUpPage from "../../pages/SignUp";
-import SignInPage from "../../pages/SignIn";
-import PasswordForgetPage from "../../pages/PasswordForget";
-import AccountPage from "../../pages/Account";
-import AdminPage from "../../pages/Admin";
-
-export default function MainRouter() {
-  return (
-    <Switch>
-      <Route exact path={ROUTES.LANDING} component={LandingPage} />
-      <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
-      <Route path={ROUTES.SIGN_IN} component={SignInPage} />
-      <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForgetPage} />
-      <Route path={ROUTES.APP} component={AppPage} />
-      <Route path={ROUTES.ACCOUNT} component={AccountPage} />
-      <Route path={ROUTES.ADMIN} component={AdminPage} />
-    </Switch>
-  );
-}
diff --git a/client/src/constants/authConditions.js b/client/src/constants/authConditions.js
new file mode 100644
index 0000000..07e83e1
--- /dev/null
+++ b/client/src/constants/authConditions.js
@@ -0,0 +1 @@
+export const AUTHENTICATED = (authUser) => !!authUser;
diff --git a/client/src/pages/App/index.jsx b/client/src/pages/App/index.jsx
index 27eeb86..7e606e2 100644
--- a/client/src/pages/App/index.jsx
+++ b/client/src/pages/App/index.jsx
@@ -3,11 +3,20 @@ import { Container } from "reactstrap";
 import ItemModal from "../../components/ItemModal";
 import List from "../../components/List";
 
-export default function AppPage() {
+const useStyles = () => ({
+  root: {
+    paddingTop: "1rem",
+    paddingBottom: "1rem",
+  },
+});
+
+const AppPage = () => {
+  const styles = useStyles();
   return (
-    <Container>
+    <Container style={styles.root}>
       <ItemModal />
       <List />
     </Container>
   );
-}
+};
+export default AppPage;
diff --git a/client/src/pages/Landing/index.jsx b/client/src/pages/Landing/index.jsx
index c4a97bf..bfd479c 100644
--- a/client/src/pages/Landing/index.jsx
+++ b/client/src/pages/Landing/index.jsx
@@ -1,13 +1,20 @@
 import React from "react";
 import { Container } from "reactstrap";
-import ItemModal from "../../components/ItemModal";
-import List from "../../components/List";
 
-export default function LandingPage() {
+const useStyles = () => ({
+  root: {
+    paddingTop: "1rem",
+    paddingBottom: "1rem",
+  },
+});
+
+const LandingPage = () => {
+  const styles = useStyles();
   return (
-    <Container>
-      <ItemModal />
-      <List />
+    <Container style={styles.root}>
+      <h1>Home Page</h1>
+      <p>The Home Page is accessible by everyone.</p>
     </Container>
   );
-}
+};
+export default LandingPage;
diff --git a/client/src/routes/PrivateRoute.jsx b/client/src/routes/PrivateRoute.jsx
new file mode 100644
index 0000000..705dfd8
--- /dev/null
+++ b/client/src/routes/PrivateRoute.jsx
@@ -0,0 +1,27 @@
+import React, { useEffect } from "react";
+import { withRouter, Route } from "react-router-dom";
+import { useFirebase } from "../services/auth";
+import * as ROUTES from "../constants/routes";
+
+const PrivateRoute = ({
+  component: Component,
+  condition,
+  path,
+  history,
+  ...rest
+}) => {
+  const firebase = useFirebase();
+
+  useEffect(() => {
+    firebase.auth.onAuthStateChanged((authUser) => {
+      if (!condition(authUser)) {
+        history.push(ROUTES.SIGN_IN);
+      }
+    });
+  }, [firebase.auth, condition, history]);
+
+  const render = (props) => <Component {...props} />;
+  return <Route path={path} render={render} {...rest} />;
+};
+
+export default withRouter(PrivateRoute);
diff --git a/client/src/routes/index.jsx b/client/src/routes/index.jsx
new file mode 100644
index 0000000..bc015e4
--- /dev/null
+++ b/client/src/routes/index.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import * as ROUTES from "../constants/routes";
+import * as CONDITIONS from "../constants/authConditions";
+import PrivateRoute from "../routes/PrivateRoute";
+import AppPage from "../pages/App";
+import LandingPage from "../pages/Landing";
+import SignUpPage from "../pages/SignUp";
+import SignInPage from "../pages/SignIn";
+import PasswordForgetPage from "../pages/PasswordForget";
+import AccountPage from "../pages/Account";
+import AdminPage from "../pages/Admin";
+
+export default function MainRouter() {
+  return (
+    <Switch>
+      <Route exact path={ROUTES.LANDING} component={LandingPage} />
+      <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
+      <Route path={ROUTES.SIGN_IN} component={SignInPage} />
+      <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForgetPage} />
+      <PrivateRoute
+        path={ROUTES.APP}
+        condition={CONDITIONS.AUTHENTICATED}
+        component={AppPage}
+      />
+      <PrivateRoute
+        path={ROUTES.ACCOUNT}
+        condition={CONDITIONS.AUTHENTICATED}
+        component={AccountPage}
+      />
+      <PrivateRoute
+        path={ROUTES.ADMIN}
+        condition={CONDITIONS.AUTHENTICATED}
+        component={AdminPage}
+      />
+    </Switch>
+  );
+}