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