Replace context with api.

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

src/hooks/useRole.ts

@@ -4,8 +4,10 @@ import { useEffect, useState } from 'react';
 export const useRole = (): [
   string,
   React.Dispatch<React.SetStateAction<string>>,
+  boolean,
 ] => {
   const [role, setRole] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     let isMounted = true;
@@ -14,11 +16,12 @@ export const useRole = (): [
     getRole().then((responseRole) => {
       if (isMounted) {
         setRole(responseRole);
+        if (role !== null) setIsLoading(false);
       }
     });
     return () => {
       isMounted = false;
     };
   }, []);
-  return [role, setRole];
+  return [role, setRole, isLoading];
 };