✨ Add private/public routing (#621)

Co-authored-by: Esteban Maya Cadavid <emaya@trueblue.com>

src/new-frontend/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

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 { login, logout };
-        return user !== null;
-    };
-
-    return { login, logout, isLoggedIn };
 }
 
+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 { isLoggedIn } from './hooks/useAuth';
-import Dashboard from './pages/Dashboard';
+import privateRoutes from './routes/private_route';
-import ErrorPage from './pages/ErrorPage';
+import publicRoutes from './routes/public_route';
-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 theme from './theme';
 
 
@@ -23,19 +18,8 @@ OpenAPI.TOKEN = async () => {
 }
 
 const router = createBrowserRouter([
-  {
+  isLoggedIn() ? privateRoutes() : {},
-    path: '/',
+  ...publicRoutes(),
-    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 />, },
 ]);
 
 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');
+        const fetchUser = async () => {
-        if (token) {
+            if (isLoggedIn()) {
-            (async () => {
                 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",
+            main: '#009688',
-            secondary: "#EDF2F7",
+            secondary: '#EDF2F7',
             success: '#48BB78',
             danger: '#E53E3E',
-            focus: 'red',
         }
     },
     components: {
@@ -22,15 +21,6 @@ const theme = extendTheme({
                 },
             },
         },
-        Input: {
-            baseStyle: {
-                field: {
-                    _focus: {
-                        borderColor: 'ui.focus',
-                    },
-                },
-            },
-        },
     },
 });