Conservation de l'état connecté entre 2 rafraichissement de page

L'état de connexion est conservé dans le sessionStorage et réutilisé par
défaut lors du rafraichissement de la page.

Si une erreur 401 survient lors d'un appel à l'API alors l'utilisateur
est redirigé vers la page d'accueil.

client/src/components/App.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useState } 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';
@@ -6,44 +6,76 @@ 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 { LoggedInContext, getSavedLoggedIn, saveLoggedIn } from '../hooks/useLoggedIn';
 import { PrivateRoute } from './PrivateRoute';
 import { useKonamiCode } from '../hooks/useKonamiCode';
 import { Modal } from './Modal';
+import { createClient } from '../util/apollo';
+import { ApolloProvider } from '@apollo/client';
+import { LogoutPage } from './LogoutPage';
 
 export interface AppProps {
 
 }
 
+
+
 export const App: FunctionComponent<AppProps> = () => {
-  const { user } = useUserProfile();
+  const [ loggedIn, setLoggedIn ] = useState(getSavedLoggedIn());
+
+  const client = createClient((loggedIn) => {
+    setLoggedIn(loggedIn);
+  });
+
+  useEffect(() => {
+    saveLoggedIn(loggedIn);
+  }, [loggedIn]);
 
   const [ showBoneyM, setShowBoneyM ] = useState(false);
   useKonamiCode(() => setShowBoneyM(true));
 
   return (
-    <LoggedInContext.Provider value={user.id !== ''}>
-      <BrowserRouter>
-        <Switch>
-          <Route path="/" exact component={HomePage} />
-          <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>
-      {
-        showBoneyM ?
-        <Modal active={true} showCloseButton={true} onClose={() => setShowBoneyM(false)}>
-          <iframe width={560} height={315}
-            frameBorder={0}
-            allowFullScreen={true}
-            src="https://www.youtube.com/embed/uVzT5QEEQ2c?autoplay=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
-          </iframe>
-        </Modal> :
-        null
-      }
-    </LoggedInContext.Provider>
+    <ApolloProvider client={client}>
+      <LoggedInContext.Provider value={loggedIn}>
+        <UserSessionCheck setLoggedIn={setLoggedIn} />
+        <BrowserRouter>
+          <Switch>
+            <Route path="/" exact component={HomePage} />
+            <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} />
+            <PrivateRoute path="/logout" exact component={LogoutPage} />
+            <Route component={() => <Redirect to="/" />} />
+          </Switch>
+        </BrowserRouter>
+        {
+          showBoneyM ?
+          <Modal active={true} showCloseButton={true} onClose={() => setShowBoneyM(false)}>
+            <iframe width={560} height={315}
+              frameBorder={0}
+              allowFullScreen={true}
+              src="https://www.youtube.com/embed/uVzT5QEEQ2c?autoplay=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
+            </iframe>
+          </Modal> :
+          null
+        }
+      </LoggedInContext.Provider>
+    </ApolloProvider>
   );
-}
+}
+
+interface UserSessionCheckProps {
+  setLoggedIn: (boolean) => void
+}
+
+const UserSessionCheck: FunctionComponent<UserSessionCheckProps> = ({ setLoggedIn }) => {
+  const { user, loading } = useUserProfile();
+
+  useEffect(() => {
+    if (loading) return;
+    setLoggedIn(user.id !== '');
+  }, [user]);
+
+  return null;
+};

client/src/components/DashboardPage/WorkgroupsPanel.tsx

@@ -1,10 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, {  } from 'react';
 import { Workgroup, inWorkgroup } from '../../types/workgroup';
-import { User } from '../../types/user';
-import { Link } from 'react-router-dom';
-import { useWorkgroupsQuery, useWorkgroups } from '../../gql/queries/workgroups';
-import { useUserProfileQuery, useUserProfile } from '../../gql/queries/profile';
-import { WithLoader } from '../WithLoader';
+import { useWorkgroups } from '../../gql/queries/workgroups';
+import { useUserProfile } from '../../gql/queries/profile';
 import { ItemPanel, Item } from './ItemPanel';
 
 export function WorkgroupsPanel() {

client/src/components/HomePage/HomePage.tsx

@@ -3,14 +3,15 @@ import { Page } from '../Page';
 import { WelcomeContent } from './WelcomeContent';
 import { useUserProfile } from '../../gql/queries/profile';
 import { useHistory } from 'react-router';
+import { useLoggedIn } from '../../hooks/useLoggedIn';
 
 export function HomePage() {
-  const { user } = useUserProfile();
+  const loggedIn = useLoggedIn();
   const history = useHistory();
 
   useEffect(() => {
-    if (user.id !== '') history.push('/dashboard');
-  }, [user.id])
+    if (loggedIn) history.push('/dashboard');
+  }, [loggedIn])
 
   return (
     <Page title="Accueil">

client/src/components/LogoutPage.tsx

@@ -0,0 +1,15 @@
+import React, { FunctionComponent, useEffect } from "react";
+import { saveLoggedIn } from "../hooks/useLoggedIn";
+import { Config } from "../config";
+
+export interface LogoutPageProps {
+  
+}
+
+export const LogoutPage: FunctionComponent<LogoutPageProps> = () => {
+  useEffect(() => {
+    saveLoggedIn(false);
+    window.location.replace(Config.logoutURL);
+  }, []);
+  return null;
+};

client/src/components/Navbar.tsx

@@ -44,11 +44,11 @@ export function Navbar() {
                       </span>
                       <span>Mon profil</span>
                     </Link>
-                    <a className="button is-warning" href={Config.logoutURL}>
+                    <Link className="button is-warning" to="/logout">
                       <span className="icon">
                         <i className="fas fa-sign-out-alt"></i>
                       </span>
-                    </a>
+                    </Link>
                   </Fragment> :
                   <a className="button is-primary" href={Config.loginURL}>
                     <span className="icon">