Move up pathname to useUser

src/AuthenticatedApp.js

@@ -18,7 +18,6 @@ import { useUser } from './context/user';
 
 function AuthenticatedApp() {
   const { state } = useUser();
-  const { pathname } = useLocation();
   const layoutType = useLayoutType();
 
   return (
@@ -35,7 +34,10 @@ function AuthenticatedApp() {
         maxWidth="false"
         sx={layoutType === 'desktop' ? container : mobileContainer}
       >
-        <MainMenu options={menuOptions(pathname)} layoutType={layoutType} />
+        <MainMenu
+          options={menuOptions(state.pathname)}
+          layoutType={layoutType}
+        />
         <Routes>
           <Route path="/home" element={<Home />} />
           <Route path="/info" element={<Information />} />

src/context/user.js

@@ -1,4 +1,5 @@
 import { createContext, useContext, useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { sleep } from '../utils/sleep';
 import { useAuthState } from './auth';
 
@@ -40,16 +41,18 @@ const UserContext = createContext();
 
 function UserProvider(props) {
   const { user } = useAuthState();
+  const { pathname } = useLocation();
   const [state, setState] = useState({
     status: 'idle',
     user: null,
     classrooms: [],
     error: null,
+    pathname: '',
   });
 
   useEffect(() => {
-    setState({ user });
+    setState({ user, pathname });
-  }, [user]);
+  }, [user, pathname]);
 
   const classrooms = () => {
     setState({ ...state, status: 'pending' });