✨ Add private/public routing

src/new-frontend/src/components/Common/ActionsMenu.tsx

@@ -12,7 +12,7 @@ import Delete from './DeleteAlert';
 interface ActionsMenuProps {
     type: string;
     id: number;
-    disabled: boolean;
+    disabled?: boolean;
 }
 
 const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, id, disabled }) => {

src/new-frontend/src/components/UserSettings/DeleteConfirmation.tsx

@@ -47,7 +47,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
                         </AlertDialogHeader>
 
                         <AlertDialogBody>
-                            All your account data will be <strong>permanently deleted.</strong> If you're sure, please click <strong>'Confirm'</strong> to proceed.
+                            All your account data will be <strong>permanently deleted.</strong> If you are sure, please click <strong>'Confirm'</strong> to proceed.
                         </AlertDialogBody>
 
                         <AlertDialogFooter gap={3}>

src/new-frontend/src/hooks/useAuth.tsx

@@ -4,19 +4,23 @@ import { useUsersStore } from '../store/users-store';
 import { useItemsStore } from '../store/items-store';
 import { useNavigate } from 'react-router-dom';
 
+const isLoggedIn = () => {
+    return localStorage.getItem('access_token') !== null;
+};
+
 const useAuth = () => {
-    const { user, getUser, resetUser } = useUserStore();
+    const { getUser, resetUser } = useUserStore();
     const { resetUsers } = useUsersStore();
     const { resetItems } = useItemsStore();
     const navigate = useNavigate();
 
-
     const login = async (data: AccessToken) => {
         const response = await LoginService.loginAccessToken({
             formData: data,
         });
         localStorage.setItem('access_token', response.access_token);
         await getUser();
+        navigate('/');
     };
 
     const logout = () => {
@@ -27,11 +31,8 @@ const useAuth = () => {
         navigate('/login');
     };
 
-    const isLoggedIn = () => {
-        return user !== null;
-    };
-
-    return { login, logout, isLoggedIn };
+    return { login, logout };
 }
 
+export { isLoggedIn };
 export default useAuth;

src/new-frontend/src/main.tsx

@@ -6,14 +6,9 @@ import { createStandaloneToast } from '@chakra-ui/toast';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
 import { OpenAPI } from './client';
-import Admin from './pages/Admin';
-import Dashboard from './pages/Dashboard';
-import ErrorPage from './pages/ErrorPage';
-import Items from './pages/Items';
-import Login from './pages/Login';
-import RecoverPassword from './pages/RecoverPassword';
-import Root from './pages/Root';
-import Profile from './pages/UserSettings';
+import { isLoggedIn } from './hooks/useAuth';
+import privateRoutes from './routes/private_route';
+import publicRoutes from './routes/public_route';
 import theme from './theme';
 
 
@@ -23,19 +18,8 @@ OpenAPI.TOKEN = async () => {
 }
 
 const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <Root />,
-    errorElement: <ErrorPage />,
-    children: [
-      { path: '/', element: <Dashboard /> },
-      { path: 'items', element: <Items /> },
-      { path: 'admin', element: <Admin /> },
-      { path: 'settings', element: <Profile /> },
-    ],
-  },
-  { path: 'login', element: <Login />, errorElement: <ErrorPage />, },
-  { path: 'recover-password', element: <RecoverPassword />, errorElement: <ErrorPage />, },
+  isLoggedIn() ? privateRoutes() : {},
+  ...publicRoutes(),
 ]);
 
 const { ToastContainer } = createStandaloneToast();

src/new-frontend/src/pages/Layout.tsx

@@ -6,18 +6,19 @@ import { Outlet } from 'react-router-dom';
 import Sidebar from '../components/Common/Sidebar';
 import UserMenu from '../components/Common/UserMenu';
 import { useUserStore } from '../store/user-store';
+import { isLoggedIn } from '../hooks/useAuth';
 
 const Layout: React.FC = () => {
     const { getUser } = useUserStore();
 
     useEffect(() => {
-        const token = localStorage.getItem('access_token');
-        if (token) {
-            (async () => {
+        const fetchUser = async () => {
+            if (isLoggedIn()) {
                 await getUser();
-            })();
-        }
-    }, [getUser]);
+            }
+        };
+        fetchUser();
+    }, []);
 
     return (
         <Flex maxW='large' h='auto' position='relative'>

src/new-frontend/src/routes/private_route.tsx

@@ -0,0 +1,21 @@
+import Admin from '../pages/Admin';
+import Dashboard from '../pages/Dashboard';
+import ErrorPage from '../pages/ErrorPage';
+import Items from '../pages/Items';
+import Layout from '../pages/Layout';
+import UserSettings from '../pages/UserSettings';
+
+export default function privateRoutes() {
+
+    return {
+        path: '/',
+        element: <Layout />,
+        errorElement: <ErrorPage />,
+        children: [
+            { path: '/', element: <Dashboard /> },
+            { path: 'items', element: <Items /> },
+            { path: 'admin', element: <Admin /> },
+            { path: 'settings', element: <UserSettings /> },
+        ],
+    };
+}

src/new-frontend/src/routes/public_route.tsx

@@ -0,0 +1,13 @@
+import ErrorPage from '../pages/ErrorPage';
+import Login from '../pages/Login';
+import RecoverPassword from '../pages/RecoverPassword';
+
+export default function publicRoutes() {
+    return [
+        { path: '/login', element: <Login />, errorElement: <ErrorPage /> },
+        { path: 'recover-password', element: <RecoverPassword />, errorElement: <ErrorPage /> },
+        // TODO: complete this
+        // { path: '*', element: <Navigate to='/login' replace /> }
+    ];
+}
+

src/new-frontend/src/theme.tsx

@@ -1,13 +1,12 @@
-import { extendTheme } from "@chakra-ui/react"
+import { extendTheme } from '@chakra-ui/react'
 
 const theme = extendTheme({
     colors: {
         ui: {
-            main: "#009688",
-            secondary: "#EDF2F7",
+            main: '#009688',
+            secondary: '#EDF2F7',
             success: '#48BB78',
             danger: '#E53E3E',
-            focus: 'red',
         }
     },
     components: {
@@ -22,15 +21,6 @@ const theme = extendTheme({
                 },
             },
         },
-        Input: {
-            baseStyle: {
-                field: {
-                    _focus: {
-                        borderColor: 'ui.focus',
-                    },
-                },
-            },
-        },
     },
 });