Routes privées avec page d'accueil publique

client/src/components/App.tsx

@@ -1,22 +1,33 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
 import { HomePage } from './HomePage/HomePage';
 import { ProfilePage } from './ProfilePage/ProfilePage';
 import { WorkgroupPage } from './WorkgroupPage/WorkgroupPage';
 import { DecisionSupportFilePage } from './DecisionSupportFilePage/DecisionSupportFilePage';
+import { DashboardPage } from './DashboardPage/DashboardPage';
+import { useUserProfile } from '../gql/queries/profile';
+import { LoggedInContext } from '../hooks/useLoggedIn';
+import { PrivateRoute } from './PrivateRoute';
+
+export interface AppProps {
+
+}
+
+export const App: FunctionComponent<AppProps> = () => {
+  const { user } = useUserProfile();
 
-export class App extends React.Component {
-  render() {
   return (
+    <LoggedInContext.Provider value={user.id !== ''}>
       <BrowserRouter>
         <Switch>
           <Route path="/" exact component={HomePage} />
-          <Route path="/profile" exact component={ProfilePage} />
-          <Route path="/workgroups/:id" exact component={WorkgroupPage} />
-          <Route path="/decisions/:id" exact component={DecisionSupportFilePage} />
+          <PrivateRoute path="/profile" exact component={ProfilePage} />
+          <PrivateRoute path="/workgroups/:id" exact component={WorkgroupPage} />
+          <PrivateRoute path="/decisions/:id" exact component={DecisionSupportFilePage} />
+          <PrivateRoute path="/dashboard" exact component={DashboardPage} />
           <Route component={() => <Redirect to="/" />} />
         </Switch>
       </BrowserRouter>
+    </LoggedInContext.Provider>
   );
-  }
 }

client/src/components/DashboardPage/DashboardPage.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Page } from '../Page';
+import { Dashboard } from './Dashboard';
+
+export function DashboardPage() {
+  return (
+    <Page title={'Tableau de bord'}>
+      <div className="container is-fluid">
+        <section className="mt-5">
+          <Dashboard />
+        </section>
+      </div>
+    </Page>
+  );
+}

client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx

@@ -72,7 +72,7 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
                   onClick={selectTab.bind(null, 0)}>
                   <a>
                     <span className="icon is-small"><i className="fas fa-pen" aria-hidden="true"></i></span>
-                    <span>Clarifier la décision</span>
+                    <span>Clarifier la proposition</span>
                   </a>
                 </li>
                 <li className={`has-background-white ${state.selectedTabIndex === 1 ? 'is-active': ''}`} 

client/src/components/HomePage/HomePage.tsx

@@ -1,33 +1,20 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Page } from '../Page';
-import { Dashboard } from './Dashboard';
-import { useUserProfileQuery } from '../../gql/queries/profile';
-import { WithLoader } from '../WithLoader';
+import { WelcomeContent } from './WelcomeContent';
+import { useUserProfile } from '../../gql/queries/profile';
+import { useHistory } from 'react-router';
 
 export function HomePage() {
-  const { data, loading } = useUserProfileQuery();
+  const { user } = useUserProfile();
+  const history = useHistory();
 
-  const { userProfile } = (data || {});
+  useEffect(() => {
+    if (user.id !== '') history.push('/dashboard');
+  }, [user.id])
 
   return (
-    <Page title={userProfile ? 'Tableau de bord' : 'Accueil'}>
-      <div className="container is-fluid">
-        <section className="mt-5">
-          <WithLoader loading={loading}>
-          {
-            userProfile ?
-            <Dashboard /> :
-            <div className="columns">
-              <div className="column is-4 is-offset-4">
-                <div className="box">
-                  <p>Veuillez vous authentifier.</p>
-                </div>
-              </div>
-            </div> 
-          }
-          </WithLoader>
-        </section>
-      </div>
+    <Page title="Accueil">
+      <WelcomeContent />
     </Page>
   );
 }

client/src/components/HomePage/WelcomeContent.tsx

@@ -0,0 +1,75 @@
+import React, { FunctionComponent, Fragment } from "react";
+
+export interface WelcomeContentProps {
+
+}
+
+export const WelcomeContent: FunctionComponent<WelcomeContentProps> = () => {
+  return (
+    <Fragment>
+      <section className="hero is-normal is-light is-bold">
+        <div className="hero-body has-text-centered">
+          <div className="container">
+            <h1 className="title">
+              Bienvenue sur Daddy !
+            </h1>
+            <h2 className="subtitle">
+              L'outil de suivi de la vie d'entreprise démocratique.
+            </h2>
+          </div>
+        </div>
+      </section>
+      <div className="box cta">
+        <p className="has-text-centered">
+          <span className="tag is-info">Attention</span> Le service est actuellement en alpha. L'accès est restreint aux adresses autorisées.
+        </p>
+      </div>
+      <section className="container mt-5">
+        <div className="columns">
+          <div className="column is-4">
+            <div className="card is-shady">
+              <div className="card-image has-text-centered">
+                <i className="fa fa-at mt-5" style={{fontSize: '8rem'}}></i>
+              </div>
+              <div className="card-content">
+                <div className="content">
+                  <h4>Une adresse courriel et c'est parti !</h4>
+                  <p>Pas de création de compte, pas de mot de passe à retenir. Entrez votre adresse courriel et commencez directement à travailler !</p>
+                  {/* <p><a href="#">En savoir plus</a></p> */}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="column is-4">
+            <div className="card is-shady">
+              <div className="card-image has-text-centered">
+                <i className="fa fa-edit mt-5" style={{fontSize: '8rem'}}></i>
+              </div>
+              <div className="card-content">
+                <div className="content">
+                  <h4>Préparer vos dossiers d'aide à la décision</h4>
+                  <p>Une décision à prendre ? Un nouveau projet à lancer ? Crééz votre groupe de travail et rédigez un dossier pour faciliter la prise de décision collective !</p>
+                  {/* <p><a href="#">En savoir plus</a></p> */}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="column is-4">
+            <div className="card is-shady">
+              <div className="card-image has-text-centered">
+                <i className="fa fa-users mt-5" style={{fontSize: '8rem'}}></i>
+              </div>
+              <div className="card-content">
+                <div className="content">
+                  <h4>Travaillez collaborativement</h4>
+                  <p>Éditez à plusieurs vos dossiers d'aide à la décision, suivi l'avancée des débats et retrouvez simplement les décisions prises dans l'entreprise.</p>
+                  {/* <p><a href="#">En savoir plus</a></p> */}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </Fragment>
+  );
+};

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}}} />}
+    />
+  )
+}

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);
+};