Update routing and token retrieval

src/App.tsx

@@ -1,8 +1,15 @@
+import jwtDecode from 'jwt-decode';
 import { useEffect } from 'react';
 import { Switch } from 'react-router-dom';
-import { useReactiveVar } from '@apollo/client';
+import { useLazyQuery, useReactiveVar } from '@apollo/client';
-import { ProtectedRoute, AuthRoute, Navbar, Sidebar } from './components';
+import {
-import { roleVar, tokenVar } from './graphql/state';
+  ProtectedRoute,
+  AuthRoute,
+  Navbar,
+  Sidebar,
+  Spinner,
+} from './components';
+import { roleVar, tokenVar, userVar } from './graphql/state';
 import {
   AdditionalInfo,
   ForgotPassword,
@@ -12,23 +19,58 @@ import {
   Project,
   Settings,
 } from './pages';
+import { GetUserByIdQuery, GetUserByIdQueryVariables } from './graphql/types';
+import { GET_USER_BY_ID } from './graphql/auth.api';
 
 const App = () => {
   const token = useReactiveVar(tokenVar);
   const role = useReactiveVar(roleVar);
+  const currentUser = useReactiveVar(userVar);
+
+  const [getUserById, { loading }] = useLazyQuery<
+    GetUserByIdQuery,
+    GetUserByIdQueryVariables
+  >(GET_USER_BY_ID, {
+    onCompleted({ getUserById: user }) {
+      userVar(user);
+      switch (user.role) {
+        case 'Client':
+          roleVar('client');
+          break;
+        case 'ProductOwner':
+          roleVar('productOwner');
+          break;
+        case 'Developer':
+          roleVar('developer');
+          break;
+        case 'Admin':
+          roleVar('admin');
+          break;
+        default:
+          break;
+      }
+    },
+  });
 
   useEffect(() => {
     const localStorageToken = localStorage.getItem('token');
 
-    if (localStorageToken) tokenVar(localStorageToken);
+    if (localStorageToken) {
+      const { id } = jwtDecode<{ id: string; role: string }>(localStorageToken);
+
+      getUserById({ variables: { id } });
+      tokenVar(localStorageToken);
+    }
+
+    // eslint-disable-next-line
   }, []);
 
-  return (
+  return !loading ? (
     <>
-      {token && (
+      {token && currentUser?.firstName && (
         <>
-          <Navbar withSidebar={role !== 'admin'} />
+          <Navbar />
-          {role !== 'admin' && <Sidebar />}
+          <Sidebar />
         </>
       )}
       <Switch>
@@ -47,9 +89,9 @@ const App = () => {
         <AuthRoute path='/signup' exact>
           <Signup />
         </AuthRoute>
-        <AuthRoute path='/additional-info' exact>
+        <ProtectedRoute path='/additional-info' exact>
           <AdditionalInfo />
-        </AuthRoute>
+        </ProtectedRoute>
         <AuthRoute path='/forgot-password' exact>
           <ForgotPassword />
         </AuthRoute>
@@ -58,6 +100,8 @@ const App = () => {
         </AuthRoute>
       </Switch>
     </>
+  ) : (
+    <Spinner fullScreen color={role || 'client'} />
   );
 };