From a30d6b76d3b72e6b60bd7da7a5a38a0961d95671 Mon Sep 17 00:00:00 2001
From: William Petit <wpetit@cadoles.com>
Date: Sun, 9 Aug 2020 10:51:02 +0200
Subject: [PATCH] feat(ui): client side private routes

---
 client/src/components/App.tsx                 | 25 +++++++++++++------
 .../components/DashboardPage/Dashboard.tsx    | 19 ++++++++++++++
 .../DashboardPage/DashboardPage.tsx           | 13 ++++++++++
 .../DashboardPage/EstimationPanel.tsx         | 20 +++++++++++++++
 .../{HomePage => DashboardPage}/ItemPanel.tsx |  0
 client/src/components/HomePage/Dashboard.tsx  | 15 -----------
 client/src/components/HomePage/HomePage.tsx   | 20 ++++++++-------
 .../components/HomePage/WelcomeContent.tsx    |  2 +-
 client/src/components/Navbar.tsx              |  7 +++---
 client/src/components/PrivateRoute.tsx        | 18 +++++++++++++
 .../components/ProfilePage/ProfilePage.tsx    | 14 ++++++-----
 client/src/hooks/useLoggedIn.tsx              |  7 ++++++
 12 files changed, 119 insertions(+), 41 deletions(-)
 create mode 100644 client/src/components/DashboardPage/Dashboard.tsx
 create mode 100644 client/src/components/DashboardPage/DashboardPage.tsx
 create mode 100644 client/src/components/DashboardPage/EstimationPanel.tsx
 rename client/src/components/{HomePage => DashboardPage}/ItemPanel.tsx (100%)
 delete mode 100644 client/src/components/HomePage/Dashboard.tsx
 create mode 100644 client/src/components/PrivateRoute.tsx
 create mode 100644 client/src/hooks/useLoggedIn.tsx

diff --git a/client/src/components/App.tsx b/client/src/components/App.tsx
index af9e243..2bbe2ed 100644
--- a/client/src/components/App.tsx
+++ b/client/src/components/App.tsx
@@ -1,18 +1,29 @@
-import React from 'react';
+import React, { FunctionComponent, useState, useEffect } from 'react';
 import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
 import { HomePage } from './HomePage/HomePage';
 import { ProfilePage } from './ProfilePage/ProfilePage';
+import { DashboardPage } from './DashboardPage/DashboardPage';
+import { PrivateRoute } from './PrivateRoute';
+import { useLoggedIn, LoggedInContext } from '../hooks/useLoggedIn';
+import { useUserProfile } from '../gql/queries/user';
 
-export class App extends React.Component {
-  render() {
-    return (
+export interface AppProps {
+
+}
+
+export const App: FunctionComponent<AppProps> = () => {
+  const { user } = useUserProfile();
+
+  return (
+    <LoggedInContext.Provider value={user.id !== ''}>
       <BrowserRouter>
         <Switch>
           <Route path="/" exact component={HomePage} />
-          <Route path="/profile" exact component={ProfilePage} />
+          <PrivateRoute path="/profile" exact component={ProfilePage} />
+          <PrivateRoute path="/dashboard" exact component={DashboardPage} />
           <Route component={() => <Redirect to="/" />} />
         </Switch>
       </BrowserRouter>
-    );
-  }
+    </LoggedInContext.Provider>
+  );
 }
\ No newline at end of file
diff --git a/client/src/components/DashboardPage/Dashboard.tsx b/client/src/components/DashboardPage/Dashboard.tsx
new file mode 100644
index 0000000..8a87750
--- /dev/null
+++ b/client/src/components/DashboardPage/Dashboard.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { EstimationPanel } from './EstimationPanel';
+
+export function Dashboard() {
+  return (
+    <div className="container is-fluid">
+      <div className="columns">
+        <div className="column is-4">
+          <EstimationPanel />
+        </div>
+        <div className="column is-4">
+        </div>
+        <div className="column is-4">
+          
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/DashboardPage/DashboardPage.tsx b/client/src/components/DashboardPage/DashboardPage.tsx
new file mode 100644
index 0000000..a7a3509
--- /dev/null
+++ b/client/src/components/DashboardPage/DashboardPage.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Page } from '../Page';
+import { Dashboard } from './Dashboard';
+
+export function DashboardPage() {
+  return (
+    <Page title="Tableau de bord">
+      <section className="mt-5">
+        <Dashboard />
+      </section>
+    </Page>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/DashboardPage/EstimationPanel.tsx b/client/src/components/DashboardPage/EstimationPanel.tsx
new file mode 100644
index 0000000..7090716
--- /dev/null
+++ b/client/src/components/DashboardPage/EstimationPanel.tsx
@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from "react";
+import { ItemPanel } from "./ItemPanel";
+
+export interface EstimationPanelProps {
+
+}
+
+export const EstimationPanel: FunctionComponent<EstimationPanelProps> = () => {
+  return (
+    <ItemPanel
+      title="Mes estimations"
+      className="is-primary"
+      newItemUrl="/estimations/new"
+      items={[]}
+      itemKey={(item) => { return item.id }}
+      itemLabel={(item) => { return item.id }}
+      itemUrl={(item) => { return `/estimations/${item.id}` }}
+    />
+  );
+};
\ No newline at end of file
diff --git a/client/src/components/HomePage/ItemPanel.tsx b/client/src/components/DashboardPage/ItemPanel.tsx
similarity index 100%
rename from client/src/components/HomePage/ItemPanel.tsx
rename to client/src/components/DashboardPage/ItemPanel.tsx
diff --git a/client/src/components/HomePage/Dashboard.tsx b/client/src/components/HomePage/Dashboard.tsx
deleted file mode 100644
index b7a1c6e..0000000
--- a/client/src/components/HomePage/Dashboard.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-export function Dashboard() {
-  return (
-    <div className="columns">
-      <div className="column is-6">
-      </div>
-      <div className="column is-3">
-      </div>
-      <div className="column is-3">
-        
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/client/src/components/HomePage/HomePage.tsx b/client/src/components/HomePage/HomePage.tsx
index 2f7cb1f..60762be 100644
--- a/client/src/components/HomePage/HomePage.tsx
+++ b/client/src/components/HomePage/HomePage.tsx
@@ -1,20 +1,22 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Page } from '../Page';
-import { Dashboard } from './Dashboard';
 import { useUserProfile } from '../../gql/queries/user';
 import { WelcomeContent } from './WelcomeContent';
+import { useHistory } from 'react-router';
+import { useLoggedIn } from '../../hooks/useLoggedIn';
 
 export function HomePage() {
-  const { user, loading } = useUserProfile();
+  const loggedIn = useLoggedIn();
+  const history = useHistory();
+
+  useEffect(() => {
+    if (loggedIn) history.push('/dashboard');
+  }, [loggedIn]);
 
   return (
-    <Page title={user.id ? 'Tableau de bord' : 'Accueil'}>
+    <Page title="Accueil">
       <section className="mt-5">
-        {
-          user.id ?
-          <Dashboard /> :
-          <WelcomeContent />
-        }
+        <WelcomeContent />
       </section>
     </Page>
   );
diff --git a/client/src/components/HomePage/WelcomeContent.tsx b/client/src/components/HomePage/WelcomeContent.tsx
index b126de0..f9be7bc 100644
--- a/client/src/components/HomePage/WelcomeContent.tsx
+++ b/client/src/components/HomePage/WelcomeContent.tsx
@@ -61,7 +61,7 @@ export const WelcomeContent: FunctionComponent<WelcomeContentProps> = () => {
               </div>
               <div className="card-content">
                 <div className="content">
-                  <h4>Partager simplement vos estimations.</h4>
+                  <h4>Partagez simplement vos estimations.</h4>
                   <p>Une adresse courriel et votre estimation est partagée ! Le niveau d'accès (lecture seule, écriture, vue partielle...) peut être défini pour chaque partage.</p>
                   {/* <p><a href="#">En savoir plus</a></p> */}
                 </div>
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 4e9f700..fa8a634 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -3,9 +3,10 @@ import { Config } from '../config';
 import { Link } from 'react-router-dom';
 import { useUserProfile } from '../gql/queries/user';
 import { WithLoader } from './WithLoader';
+import { useLoggedIn } from '../hooks/useLoggedIn';
 
 export function Navbar() {
-  const { user, loading } = useUserProfile();
+  const loggedIn = useLoggedIn();
   const [ isActive, setActive ] = useState(false);
 
   const toggleMenu = () => {
@@ -16,7 +17,7 @@ export function Navbar() {
     <nav className="navbar is-fixed-top" role="navigation" aria-label="main navigation">
       <div className="container is-fluid">
         <div className="navbar-brand">
-          <Link className="navbar-item" to="/">
+          <Link className="navbar-item" to={loggedIn ? '/dashboard' : '/'}>
             <h1 className="is-size-4">
               <i className="fa fa-stopwatch mr-1"></i>
               Guesstimate
@@ -37,7 +38,7 @@ export function Navbar() {
             <div className="navbar-item">
               <div className="buttons">
                 {
-                  user.id ?
+                  loggedIn ?
                   <Fragment>
                     <Link to="/profile" className="button">
                       <span className="icon">
diff --git a/client/src/components/PrivateRoute.tsx b/client/src/components/PrivateRoute.tsx
new file mode 100644
index 0000000..fa14f28
--- /dev/null
+++ b/client/src/components/PrivateRoute.tsx
@@ -0,0 +1,18 @@
+import React, { FunctionComponent, Component, ReactType } from "react"
+import { Route, Redirect, RouteProps } from "react-router"
+import { useLoggedIn } from "../hooks/useLoggedIn";
+
+export interface PrivateRouteProps extends RouteProps {
+}
+
+export const PrivateRoute: FunctionComponent<PrivateRouteProps> = ({component: Component, ...rest}) => {  
+  const loggedIn = useLoggedIn();
+  return (
+    <Route
+      {...rest}
+      render={(props) => loggedIn === true
+        ? <Component {...props} />
+        : <Redirect to={{pathname: '/', state: {from: props.location}}} />}
+    />
+  )
+}
\ No newline at end of file
diff --git a/client/src/components/ProfilePage/ProfilePage.tsx b/client/src/components/ProfilePage/ProfilePage.tsx
index e60655e..59f24b2 100644
--- a/client/src/components/ProfilePage/ProfilePage.tsx
+++ b/client/src/components/ProfilePage/ProfilePage.tsx
@@ -23,12 +23,14 @@ export function ProfilePage() {
         <section className="section">
           <div className="columns">
             <div className="column is-6 is-offset-3">
-              <h2 className="is-size-2 subtitle">Mon profil</h2>
-              <WithLoader loading={isLoading || !user}>
-              {
-                <UserForm onChange={onUserChange} user={user} />
-              }
-              </WithLoader>
+              <div className="box">
+                <h2 className="is-size-2 subtitle">Mon profil</h2>
+                <WithLoader loading={isLoading || !user}>
+                {
+                  <UserForm onChange={onUserChange} user={user} />
+                }
+                </WithLoader>
+              </div>
             </div>
           </div>
         </section>
diff --git a/client/src/hooks/useLoggedIn.tsx b/client/src/hooks/useLoggedIn.tsx
new file mode 100644
index 0000000..8c92e4d
--- /dev/null
+++ b/client/src/hooks/useLoggedIn.tsx
@@ -0,0 +1,7 @@
+import React, { useState, useContext } from "react";
+
+export const LoggedInContext = React.createContext(false);
+
+export const useLoggedIn = () => {
+  return useContext(LoggedInContext);
+};
\ No newline at end of file