Replace context with api.

This keeps the user logged in after tab closing, since state is stored
in the server.

src/components/Authorization/Authorization.tsx

@@ -4,6 +4,8 @@ import { NonAuthRoutes } from 'api/routes';
 import { Redirect } from 'react-router-dom';
 import { Unauthorized } from 'components/Unauthorized/Unauthorized';
 import { AuthContext } from 'components/Auth/AuthContext';
+import { useRole } from 'hooks/useRole';
+import { useAuth } from 'hooks/useAuth';
 
 const HandleIsAuth: FC<{ isAuth: boolean }> = ({ isAuth }) =>
   isAuth ? (
@@ -35,11 +37,12 @@ export const withAuthorization = (allowedRoles: string[]) => <
   const ComponentWithAuthorization: FC<T> = (
     props: Omit<T, keyof WithAuthProps>,
   ) => {
-    const { role, isAuth } = useContext(AuthContext);
-    console.log(`ROLE ${role} AUTH ${isAuth}`);
+    const [role, setRole, isLoading] = useRole();
+    const [isAuth] = useAuth();
+    console.log(`ROLE ${role} AUTH ${isAuth} LOADED ${isLoading}`);
 
     /* eslint-disable no-nested-ternary */
-    return typeof isAuth === null && role === null ? (
+    return isAuth === null || isLoading ? (
       <BlurCircular />
     ) : // props comes afterwards so the can override the default ones.
     allowedRoles.includes(role) && isAuth ? (