✨ Migrate to TanStack Query (React Query) and TanStack Router (#637)

new-frontend/.env

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost

new-frontend/package.json

@@ -15,7 +15,7 @@
     "@chakra-ui/react": "2.8.2",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
-    "@types/react-router-dom": "5.3.3",
+    "@tanstack/react-router": "1.19.1",
     "axios": "1.6.2",
     "form-data": "4.0.0",
     "framer-motion": "10.16.16",
@@ -23,10 +23,12 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "7.49.3",
     "react-icons": "5.0.1",
-    "react-router-dom": "6.21.1",
+    "react-query": "3.39.3",
     "zustand": "4.5.0"
   },
   "devDependencies": {
+    "@tanstack/router-devtools": "1.19.1",
+    "@tanstack/router-vite-plugin": "1.19.0",
     "@types/node": "20.10.5",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",

new-frontend/src/components/Admin/AddUser.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 
 import { Button, Checkbox, Flex, FormControl, FormErrorMessage, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
 import { SubmitHandler, useForm } from 'react-hook-form';
+import { useMutation, useQueryClient } from 'react-query';
 
-import { UserCreate } from '../../client';
+import { UserCreate, UsersService } from '../../client';
-import useCustomToast from '../../hooks/useCustomToast';
-import { useUsersStore } from '../../store/users-store';
 import { ApiError } from '../../client/core/ApiError';
+import useCustomToast from '../../hooks/useCustomToast';
 
 interface AddUserProps {
     isOpen: boolean;
@@ -19,6 +19,7 @@ interface UserCreateForm extends UserCreate {
 }
 
 const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
+    const queryClient = useQueryClient();
     const showToast = useCustomToast();
     const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting } } = useForm<UserCreateForm>({
         mode: 'onBlur',
@@ -32,18 +33,28 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
             is_active: false
         }
     });
-    const { addUser } = useUsersStore();
 
-    const onSubmit: SubmitHandler<UserCreateForm> = async (data) => {
+    const addUser = async (data: UserCreate) => {
-        try {
+        await UsersService.createUser({ requestBody: data })
-            await addUser(data);
+    }
+
+    const mutation = useMutation(addUser, {
+        onSuccess: () => {
             showToast('Success!', 'User created successfully.', 'success');
             reset();
             onClose();
-        } catch (err) {
+        },
-            const errDetail = (err as ApiError).body.detail;
+        onError: (err: ApiError) => {
+            const errDetail = err.body.detail;
             showToast('Something went wrong.', `${errDetail}`, 'error');
+        },
+        onSettled: () => {
+            queryClient.invalidateQueries('users');
         }
+    });
+
+    const onSubmit: SubmitHandler<UserCreateForm> = (data) => {
+        mutation.mutate(data);
     }
 
     return (

new-frontend/src/components/Admin/EditUser.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 
 import { Button, Checkbox, Flex, FormControl, FormErrorMessage, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
 import { SubmitHandler, useForm } from 'react-hook-form';
+import { useMutation, useQueryClient } from 'react-query';
 
-import { ApiError, UserUpdate } from '../../client';
+import { ApiError, UserOut, UserUpdate, UsersService } from '../../client';
 import useCustomToast from '../../hooks/useCustomToast';
-import { useUsersStore } from '../../store/users-store';
 
 interface EditUserProps {
-    user_id: number;
+    user: UserOut;
     isOpen: boolean;
     onClose: () => void;
 }
@@ -17,37 +17,39 @@ interface UserUpdateForm extends UserUpdate {
     confirm_password: string;
 }
 
-const EditUser: React.FC<EditUserProps> = ({ user_id, isOpen, onClose }) => {
+const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
+    const queryClient = useQueryClient();
     const showToast = useCustomToast();
-    const { editUser, users } = useUsersStore();
+
-    const currentUser = users.find((user) => user.id === user_id);
+    const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting, isDirty } } = useForm<UserUpdateForm>({
-    const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting } } = useForm<UserUpdateForm>({
         mode: 'onBlur',
         criteriaMode: 'all',
-        defaultValues: {
+        defaultValues: user
-            email: currentUser?.email,
+    });
-            full_name: currentUser?.full_name,
+
-            password: '',
+    const updateUser = async (data: UserUpdateForm) => {
-            confirm_password: '',
+        await UsersService.updateUser({ userId: user.id, requestBody: data });
-            is_superuser: currentUser?.is_superuser,
+    }
-            is_active: currentUser?.is_active
+
+    const mutation = useMutation(updateUser, {
+        onSuccess: () => {
+            showToast('Success!', 'User updated successfully.', 'success');
+            onClose();
+        },
+        onError: (err: ApiError) => {
+            const errDetail = err.body.detail;
+            showToast('Something went wrong.', `${errDetail}`, 'error');
+        },
+        onSettled: () => {
+            queryClient.invalidateQueries('users');
         }
     });
 
-
     const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => {
-        try {
+        if (data.password === '') {
-            if (data.password === '') {
+            delete data.password;
-                delete data.password;
-            }
-            await editUser(user_id, data);
-            showToast('Success!', 'User updated successfully.', 'success');
-            reset();
-            onClose();
-        } catch (err) {
-            const errDetail = (err as ApiError).body.detail;
-            showToast('Something went wrong.', `${errDetail}`, 'error');
         }
+        mutation.mutate(data)
     }
 
     const onCancel = () => {
@@ -70,12 +72,12 @@ const EditUser: React.FC<EditUserProps> = ({ user_id, isOpen, onClose }) => {
                     <ModalBody pb={6}>
                         <FormControl isInvalid={!!errors.email}>
                             <FormLabel htmlFor='email'>Email</FormLabel>
-                            <Input id='email' {...register('email', { pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} placeholder='Email' type='email' />
+                            <Input id='email' {...register('email', { required: 'Email is required', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} placeholder='Email' type='email' />
                             {errors.email && <FormErrorMessage>{errors.email.message}</FormErrorMessage>}
                         </FormControl>
                         <FormControl mt={4}>
                             <FormLabel htmlFor='name'>Full name</FormLabel>
-                            <Input id="name" {...register('full_name')} type='text' />
+                            <Input id='name' {...register('full_name')} type='text' />
                         </FormControl>
                         <FormControl mt={4} isInvalid={!!errors.password}>
                             <FormLabel htmlFor='password'>Set Password</FormLabel>
@@ -100,7 +102,7 @@ const EditUser: React.FC<EditUserProps> = ({ user_id, isOpen, onClose }) => {
                     </ModalBody>
 
                     <ModalFooter gap={3}>
-                        <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
+                        <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting} isDisabled={!isDirty}>
                             Save
                         </Button>
                         <Button onClick={onCancel}>Cancel</Button>

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

@@ -7,15 +7,16 @@ import { FiEdit, FiTrash } from 'react-icons/fi';
 import EditUser from '../Admin/EditUser';
 import EditItem from '../Items/EditItem';
 import Delete from './DeleteAlert';
+import { ItemOut, UserOut } from '../../client';
 
 
 interface ActionsMenuProps {
     type: string;
-    id: number;
+    value: ItemOut | UserOut;
     disabled?: boolean;
 }
 
-const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, id, disabled }) => {
+const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, value, disabled }) => {
     const editUserModal = useDisclosure();
     const deleteModal = useDisclosure();
 
@@ -29,10 +30,10 @@ const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, id, disabled }) => {
                     <MenuItem onClick={deleteModal.onOpen} icon={<FiTrash fontSize='16px' />} color='ui.danger'>Delete {type}</MenuItem>
                 </MenuList>
                 {
-                    type === 'User' ? <EditUser user_id={id} isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
+                    type === 'User' ? <EditUser user={value as UserOut} isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
-                        : <EditItem id={id} isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
+                        : <EditItem item={value as ItemOut} isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
                 }
-                <Delete type={type} id={id} isOpen={deleteModal.isOpen} onClose={deleteModal.onClose} />
+                <Delete type={type} id={value.id} isOpen={deleteModal.isOpen} onClose={deleteModal.onClose} />
             </Menu>
         </>
     );

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

@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
+import { useMutation, useQueryClient } from 'react-query';
 
+import { ItemsService, UsersService } from '../../client';
 import useCustomToast from '../../hooks/useCustomToast';
-import { useItemsStore } from '../../store/items-store';
-import { useUsersStore } from '../../store/users-store';
 
 interface DeleteProps {
     type: string;
@@ -15,20 +15,36 @@ interface DeleteProps {
 }
 
 const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
+    const queryClient = useQueryClient();
     const showToast = useCustomToast();
     const cancelRef = React.useRef<HTMLButtonElement | null>(null);
-    const { handleSubmit, formState: {isSubmitting} } = useForm();
+    const { handleSubmit, formState: { isSubmitting } } = useForm();
-    const { deleteItem } = useItemsStore();
-    const { deleteUser } = useUsersStore();
 
-    const onSubmit = async () => {
+    const deleteEntity = async (id: number) => {
-        try {
+        if (type === 'Item') {
-            type === 'Item' ? await deleteItem(id) : await deleteUser(id);
+            await ItemsService.deleteItem({ id: id });
+        } else if (type === 'User') {
+            await UsersService.deleteUser({ userId: id });
+        } else {
+            throw new Error(`Unexpected type: ${type}`);
+        }
+    }
+
+    const mutation = useMutation(deleteEntity, {
+        onSuccess: () => {
             showToast('Success', `The ${type.toLowerCase()} was deleted successfully.`, 'success');
             onClose();
-        } catch (err) {
+        },
+        onError: () => {
             showToast('An error occurred.', `An error occurred while deleting the ${type.toLowerCase()}.`, 'error');
+        },
+        onSettled: () => {
+            queryClient.invalidateQueries(type === 'Item' ? 'items' : 'users');
         }
+    })
+
+    const onSubmit = async () => {
+        mutation.mutate(id);
     }
 
     return (
@@ -37,11 +53,11 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
                 isOpen={isOpen}
                 onClose={onClose}
                 leastDestructiveRef={cancelRef}
-                size={{ base: "sm", md: "md" }}
+                size={{ base: 'sm', md: 'md' }}
                 isCentered
             >
                 <AlertDialogOverlay>
-                    <AlertDialogContent as="form" onSubmit={handleSubmit(onSubmit)}>
+                    <AlertDialogContent as='form' onSubmit={handleSubmit(onSubmit)}>
                         <AlertDialogHeader>
                             Delete {type}
                         </AlertDialogHeader>
@@ -52,7 +68,7 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
                         </AlertDialogBody>
 
                         <AlertDialogFooter gap={3}>
-                            <Button bg="ui.danger" color="white" _hover={{ opacity: 0.8 }} type="submit" isLoading={isSubmitting}>
+                            <Button bg='ui.danger' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
                                 Delete
                             </Button>
                             <Button ref={cancelRef} onClick={onClose} isDisabled={isSubmitting}>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Button, Flex, Icon, Input, InputGroup, InputLeftElement, useDisclosure } from '@chakra-ui/react';
+import { Button, Flex, Icon, useDisclosure } from '@chakra-ui/react';
-import { FaPlus, FaSearch } from "react-icons/fa";
+import { FaPlus } from 'react-icons/fa';
 
 import AddUser from '../Admin/AddUser';
 import AddItem from '../Items/AddItem';
@@ -17,13 +17,14 @@ const Navbar: React.FC<NavbarProps> = ({ type }) => {
     return (
         <>
             <Flex py={8} gap={4}>
-                <InputGroup w={{ base: "100%", md: "auto" }}>
+                {/* TODO: Complete search functionality */}
-                    <InputLeftElement pointerEvents="none">
+                {/* <InputGroup w={{ base: '100%', md: 'auto' }}>
-                        <Icon as={FaSearch} color="gray.400" />
+                    <InputLeftElement pointerEvents='none'>
+                        <Icon as={FaSearch} color='gray.400' />
                     </InputLeftElement>
-                    <Input type="text" placeholder="Search" fontSize={{ base: "sm", md: "inherit" }} borderRadius="8px" />
+                    <Input type='text' placeholder='Search' fontSize={{ base: 'sm', md: 'inherit' }} borderRadius='8px' />
-                </InputGroup>
+                </InputGroup> */}
-                <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} gap={1} fontSize={{ base: "sm", md: "inherit" }} onClick={type === "User" ? addUserModal.onOpen : addItemModal.onOpen}>
+                <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} gap={1} fontSize={{ base: 'sm', md: 'inherit' }} onClick={type === 'User' ? addUserModal.onOpen : addItemModal.onOpen}>
                     <Icon as={FaPlus} /> Add {type}
                 </Button>
                 <AddUser isOpen={addUserModal.isOpen} onClose={addUserModal.onClose} />

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

@@ -0,0 +1,22 @@
+import { Button, Container, Text } from '@chakra-ui/react';
+import { Link } from '@tanstack/react-router';
+
+const NotFound: React.FC = () => {
+
+    return (
+        <>
+            <Container h='100vh'
+                alignItems='stretch'
+                justifyContent='center' textAlign='center' maxW='sm' centerContent>
+                <Text fontSize='8xl' color='ui.main' fontWeight='bold' lineHeight='1' mb={4}>404</Text>
+                <Text fontSize='md'>Oops!</Text>
+                <Text fontSize='md'>Page not found.</Text>
+                <Button as={Link} to='/' color='ui.main' borderColor='ui.main' variant='outline' mt={4}>Go back</Button>
+            </Container>
+        </>
+    );
+}
+
+export default NotFound;
+
+

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

@@ -2,18 +2,20 @@ import React from 'react';
 
 import { Box, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Flex, IconButton, Image, Text, useColorModeValue, useDisclosure } from '@chakra-ui/react';
 import { FiLogOut, FiMenu } from 'react-icons/fi';
+import { useQueryClient } from 'react-query';
 
 import Logo from '../../assets/images/fastapi-logo.svg';
+import { UserOut } from '../../client';
 import useAuth from '../../hooks/useAuth';
-import { useUserStore } from '../../store/user-store';
 import SidebarItems from './SidebarItems';
 
 const Sidebar: React.FC = () => {
+    const queryClient = useQueryClient();
     const bgColor = useColorModeValue('white', '#1a202c');
     const textColor = useColorModeValue('gray', 'white');
     const secBgColor = useColorModeValue('ui.secondary', '#252d3d');
+    const currentUser = queryClient.getQueryData<UserOut>('currentUser');
     const { isOpen, onOpen, onClose } = useDisclosure();
-    const { user } = useUserStore();
     const { logout } = useAuth();
 
     const handleLogout = async () => {
@@ -40,8 +42,8 @@ const Sidebar: React.FC = () => {
                                 </Flex>
                             </Box>
                             {
-                                user?.email &&
+                                currentUser?.email &&
-                                <Text color={textColor} noOfLines={2} fontSize='sm' p={2}>Logged in as: {user.email}</Text>
+                                <Text color={textColor} noOfLines={2} fontSize='sm' p={2}>Logged in as: {currentUser.email}</Text>
                             }
                         </Flex>
                     </DrawerBody>
@@ -56,8 +58,8 @@ const Sidebar: React.FC = () => {
                         <SidebarItems />
                     </Box>
                     {
-                        user?.email &&
+                        currentUser?.email &&
-                        <Text color={textColor} noOfLines={2} fontSize='sm' p={2} maxW='180px'>Logged in as: {user.email}</Text>
+                        <Text color={textColor} noOfLines={2} fontSize='sm' p={2} maxW='180px'>Logged in as: {currentUser.email}</Text>
                     }
                 </Flex>
             </Box>

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

@@ -2,14 +2,15 @@ import React from 'react';
 
 import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
 import { FiBriefcase, FiHome, FiSettings, FiUsers } from 'react-icons/fi';
-import { Link, useLocation } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
+import { useQueryClient } from 'react-query';
 
-import { useUserStore } from '../../store/user-store';
+import { UserOut } from '../../client';
 
 const items = [
-    { icon: FiHome, title: 'Dashboard', path: "/" },
+    { icon: FiHome, title: 'Dashboard', path: '/' },
-    { icon: FiBriefcase, title: 'Items', path: "/items" },
+    { icon: FiBriefcase, title: 'Items', path: '/items' },
-    { icon: FiSettings, title: 'User Settings', path: "/settings" },
+    { icon: FiSettings, title: 'User Settings', path: '/settings' },
 ];
 
 interface SidebarItemsProps {
@@ -17,28 +18,31 @@ interface SidebarItemsProps {
 }
 
 const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
-    const textColor = useColorModeValue("ui.main", "#E2E8F0");
+    const queryClient = useQueryClient();
-    const bgActive = useColorModeValue("#E2E8F0", "#4A5568");
+    const textColor = useColorModeValue('ui.main', '#E2E8F0');
-    const location = useLocation();
+    const bgActive = useColorModeValue('#E2E8F0', '#4A5568');
-    const { user } = useUserStore();
+    const currentUser = queryClient.getQueryData<UserOut>('currentUser');
 
-    const finalItems = user?.is_superuser ? [...items, { icon: FiUsers, title: 'Admin', path: "/admin" }] : items;
+
+    const finalItems = currentUser?.is_superuser ? [...items, { icon: FiUsers, title: 'Admin', path: '/admin' }] : items;
 
     const listItems = finalItems.map((item) => (
         <Flex
             as={Link}
             to={item.path}
-            w="100%"
+            w='100%'
             p={2}
             key={item.title}
-            style={location.pathname === item.path ? {
+            activeProps={{
-                background: bgActive,
+                style: {
-                borderRadius: "12px",
+                    background: bgActive,
-            } : {}}
+                    borderRadius: '12px',
+                },
+            }}
             color={textColor}
             onClick={onClose}
         >
-            <Icon as={item.icon} alignSelf="center" />
+            <Icon as={item.icon} alignSelf='center' />
             <Text ml={2}>{item.title}</Text>
         </Flex>
     ));

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

@@ -3,9 +3,9 @@ import React from 'react';
 import { Box, IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
 import { FaUserAstronaut } from 'react-icons/fa';
 import { FiLogOut, FiUser } from 'react-icons/fi';
-import { Link } from 'react-router-dom';
 
 import useAuth from '../../hooks/useAuth';
+import { Link } from '@tanstack/react-router';
 
 const UserMenu: React.FC = () => {
     const { logout } = useAuth();

new-frontend/src/components/Items/AddItem.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { Button, FormControl, FormErrorMessage, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
 import { SubmitHandler, useForm } from 'react-hook-form';
+import { useMutation, useQueryClient } from 'react-query';
 
-import { ApiError, ItemCreate } from '../../client';
+import { ApiError, ItemCreate, ItemsService } from '../../client';
 import useCustomToast from '../../hooks/useCustomToast';
-import { useItemsStore } from '../../store/items-store';
 
 interface AddItemProps {
     isOpen: boolean;
@@ -13,6 +13,7 @@ interface AddItemProps {
 }
 
 const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
+    const queryClient = useQueryClient();
     const showToast = useCustomToast();
     const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm<ItemCreate>({
         mode: 'onBlur',
@@ -22,19 +23,29 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
             description: '',
         },
     });
-    const { addItem } = useItemsStore();
 
-    const onSubmit: SubmitHandler<ItemCreate> = async (data) => {
+    const addItem = async (data: ItemCreate) => {
-        try {
+        await ItemsService.createItem({ requestBody: data })
-            await addItem(data);
+    }
+
+    const mutation = useMutation(addItem, {
+        onSuccess: () => {
             showToast('Success!', 'Item created successfully.', 'success');
             reset();
             onClose();
-        } catch (err) {
+        },
-            const errDetail = (err as ApiError).body.detail;
+        onError: (err: ApiError) => {
+            const errDetail = err.body.detail;
             showToast('Something went wrong.', `${errDetail}`, 'error');
+        },
+        onSettled: () => {
+            queryClient.invalidateQueries('items');
         }
-    };
+    });
+
+    const onSubmit: SubmitHandler<ItemCreate> = (data) => {
+        mutation.mutate(data);
+    }
 
     return (
         <>

new-frontend/src/components/Items/EditItem.tsx

@@ -1,34 +1,47 @@
 import React from 'react';
 
-import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
+import { Button, FormControl, FormErrorMessage, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
-import { ApiError, ItemUpdate } from '../../client';
+import { useMutation, useQueryClient } from 'react-query';
+import { ApiError, ItemOut, ItemUpdate, ItemsService } from '../../client';
 import useCustomToast from '../../hooks/useCustomToast';
-import { useItemsStore } from '../../store/items-store';
 
 interface EditItemProps {
-    id: number;
+    item: ItemOut;
     isOpen: boolean;
     onClose: () => void;
 }
 
-const EditItem: React.FC<EditItemProps> = ({ id, isOpen, onClose }) => {
+const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
+    const queryClient = useQueryClient();
     const showToast = useCustomToast();
-    const { editItem, items } = useItemsStore();
+    const { register, handleSubmit, reset, formState: { isSubmitting, errors, isDirty } } = useForm<ItemUpdate>({
-    const currentItem = items.find((item) => item.id === id);
+        mode: 'onBlur',
-    const { register, handleSubmit, reset, formState: { isSubmitting }, } = useForm<ItemUpdate>({ defaultValues: { title: currentItem?.title, description: currentItem?.description } });
+        criteriaMode: 'all',
+        defaultValues: item
+    });
+
+    const updateItem = async (data: ItemUpdate) => {
+        await ItemsService.updateItem({ id: item.id, requestBody: data });
+    }
+
+    const mutation = useMutation(updateItem, {
+        onSuccess: () => {
+            showToast('Success!', 'Item updated successfully.', 'success');
+            onClose();
+        },
+        onError: (err: ApiError) => {
+            const errDetail = err.body.detail;
+            showToast('Something went wrong.', `${errDetail}`, 'error');
+        },
+        onSettled: () => {
+            queryClient.invalidateQueries('items');
+        }
+    });
 
     const onSubmit: SubmitHandler<ItemUpdate> = async (data) => {
-        try {
+        mutation.mutate(data)
-            await editItem(id, data);
-            showToast('Success!', 'Item updated successfully.', 'success');
-            reset();
-            onClose();
-        } catch (err) {
-            const errDetail = (err as ApiError).body.detail;
-            showToast('Something went wrong.', `${errDetail}`, 'error');
-        }
     }
 
     const onCancel = () => {
@@ -49,9 +62,10 @@ const EditItem: React.FC<EditItemProps> = ({ id, isOpen, onClose }) => {
                     <ModalHeader>Edit Item</ModalHeader>
                     <ModalCloseButton />
                     <ModalBody pb={6}>
-                        <FormControl>
+                        <FormControl isInvalid={!!errors.title}>
                             <FormLabel htmlFor='title'>Title</FormLabel>
-                            <Input id='title' {...register('title')} type='text' />
+                            <Input id='title' {...register('title', { required: 'Title is required' })} type='text' />
+                            {errors.title && <FormErrorMessage>{errors.title.message}</FormErrorMessage>}
                         </FormControl>
                         <FormControl mt={4}>
                             <FormLabel htmlFor='description'>Description</FormLabel>
@@ -59,7 +73,7 @@ const EditItem: React.FC<EditItemProps> = ({ id, isOpen, onClose }) => {
                         </FormControl>
                     </ModalBody>
                     <ModalFooter gap={3}>
-                        <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
+                        <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting} isDisabled={!isDirty}>
                             Save
                         </Button>
                         <Button onClick={onCancel}>Cancel</Button>

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

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import { Box, Button, Container, FormControl, FormLabel, Heading, Input, useColorModeValue } from '@chakra-ui/react';
+import { Box, Button, Container, FormControl, FormErrorMessage, FormLabel, Heading, Input, useColorModeValue } from '@chakra-ui/react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { ApiError, UpdatePassword } from '../../client';
+import { useMutation } from 'react-query';
+
+import { ApiError, UpdatePassword, UsersService } from '../../client';
 import useCustomToast from '../../hooks/useCustomToast';
-import { useUserStore } from '../../store/user-store';
 
 interface UpdatePasswordForm extends UpdatePassword {
     confirm_password: string;
@@ -13,19 +14,28 @@ interface UpdatePasswordForm extends UpdatePassword {
 const ChangePassword: React.FC = () => {
     const color = useColorModeValue('gray.700', 'white');
     const showToast = useCustomToast();
-    const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UpdatePasswordForm>();
+    const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting } } = useForm<UpdatePasswordForm>({
-    const { editPassword } = useUserStore();
+        mode: 'onBlur',
+        criteriaMode: 'all'
+    });
 
-    const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
+    const UpdatePassword = async (data: UpdatePassword) => {
-        try {
+        await UsersService.updatePasswordMe({ requestBody: data })
-            await editPassword(data);
+    }
+
+    const mutation = useMutation(UpdatePassword, {
+        onSuccess: () => {
             showToast('Success!', 'Password updated.', 'success');
             reset();
-        } catch (err) {
+        },
-            const errDetail = (err as ApiError).body.detail;
+        onError: (err: ApiError) => {
+            const errDetail = err.body.detail;
             showToast('Something went wrong.', `${errDetail}`, 'error');
         }
+    })
 
+    const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
+        mutation.mutate(data);
     }
 
     return (
@@ -35,17 +45,23 @@ const ChangePassword: React.FC = () => {
                     Change Password
                 </Heading>
                 <Box w={{ 'sm': 'full', 'md': '50%' }}>
-                    <FormControl>
+                    <FormControl isRequired isInvalid={!!errors.current_password}>
-                        <FormLabel color={color} htmlFor='currentPassword'>Current password</FormLabel>
+                        <FormLabel color={color} htmlFor='current_password'>Current password</FormLabel>
-                        <Input id='currentPassword' {...register('current_password')} placeholder='••••••••' type='password' />
+                        <Input id='current_password' {...register('current_password', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='Password' type='password' />
+                        {errors.current_password && <FormErrorMessage>{errors.current_password.message}</FormErrorMessage>}
                     </FormControl>
-                    <FormControl mt={4}>
+                    <FormControl mt={4} isRequired isInvalid={!!errors.new_password}>
-                        <FormLabel color={color} htmlFor='newPassword'>New password</FormLabel>
+                        <FormLabel htmlFor='password'>Set Password</FormLabel>
-                        <Input id='newPassword' {...register('new_password')} placeholder='••••••••' type='password' />
+                        <Input id='password' {...register('new_password', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='Password' type='password' />
+                        {errors.new_password && <FormErrorMessage>{errors.new_password.message}</FormErrorMessage>}
                     </FormControl>
-                    <FormControl mt={4}>
+                    <FormControl mt={4} isRequired isInvalid={!!errors.confirm_password}>
-                        <FormLabel color={color} htmlFor='confirmPassword'>Confirm new password</FormLabel>
+                        <FormLabel htmlFor='confirm_password'>Confirm Password</FormLabel>
-                        <Input id='confirmPassword' {...register('confirm_password')} placeholder='••••••••' type='password' />
+                        <Input id='confirm_password' {...register('confirm_password', {
+                            required: 'Please confirm your password',
+                            validate: value => value === getValues().new_password || 'The passwords do not match'
+                        })} placeholder='Password' type='password' />
+                        {errors.confirm_password && <FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>}
                     </FormControl>
                     <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} mt={4} type='submit' isLoading={isSubmitting}>
                         Save

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

@@ -2,10 +2,11 @@ import React from 'react';
 
 import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
-import { ApiError } from '../../client';
+import { useMutation, useQueryClient } from 'react-query';
+
+import { ApiError, UserOut, UsersService } from '../../client';
 import useAuth from '../../hooks/useAuth';
 import useCustomToast from '../../hooks/useCustomToast';
-import { useUserStore } from '../../store/user-store';
 
 interface DeleteProps {
     isOpen: boolean;
@@ -13,22 +14,35 @@ interface DeleteProps {
 }
 
 const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
+    const queryClient = useQueryClient();
     const showToast = useCustomToast();
     const cancelRef = React.useRef<HTMLButtonElement | null>(null);
     const { handleSubmit, formState: { isSubmitting } } = useForm();
-    const { user, deleteUser } = useUserStore();
+    const currentUser = queryClient.getQueryData<UserOut>('currentUser');
     const { logout } = useAuth();
 
-    const onSubmit = async () => {
+    const deleteCurrentUser = async (id: number) => {
-        try {
+        await UsersService.deleteUser({ userId: id });
-            await deleteUser(user!.id);
+    }
+
+    const mutation = useMutation(deleteCurrentUser, {
+        onSuccess: () => {
+            showToast('Success', 'Your account has been successfully deleted.', 'success');
             logout();
             onClose();
-            showToast('Success', 'Your account has been successfully deleted.', 'success');
+        },
-        } catch (err) {
+        onError: (err: ApiError) => {
-            const errDetail = (err as ApiError).body.detail;
+            const errDetail = err.body.detail;
             showToast('Something went wrong.', `${errDetail}`, 'error');
+        },
+        onSettled: () => {
+            queryClient.invalidateQueries('currentUser');
         }
+    })
+
+
+    const onSubmit = async () => {
+        mutation.mutate(currentUser!.id);
     }
 
     return (

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

@@ -1,34 +1,50 @@
 import React, { useState } from 'react';
 
-import { Box, Button, Container, Flex, FormControl, FormLabel, Heading, Input, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Button, Container, Flex, FormControl, FormErrorMessage, FormLabel, Heading, Input, Text, useColorModeValue } from '@chakra-ui/react';
-
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { ApiError, UserOut, UserUpdateMe } from '../../client';
+import { useMutation, useQueryClient } from 'react-query';
+
+import { ApiError, UserOut, UserUpdateMe, UsersService } from '../../client';
+import useAuth from '../../hooks/useAuth';
 import useCustomToast from '../../hooks/useCustomToast';
-import { useUserStore } from '../../store/user-store';
-import { useUsersStore } from '../../store/users-store';
 
 const UserInformation: React.FC = () => {
+    const queryClient = useQueryClient();
     const color = useColorModeValue('gray.700', 'white');
     const showToast = useCustomToast();
     const [editMode, setEditMode] = useState(false);
-    const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UserOut>();
+    const { user: currentUser } = useAuth();
-    const { user, editUser } = useUserStore();
+    const { register, handleSubmit, reset, formState: { isSubmitting, errors, isDirty } } = useForm<UserOut>({
-    const { getUsers } = useUsersStore();
+        mode: 'onBlur', criteriaMode: 'all', defaultValues: {
+            full_name: currentUser?.full_name,
+            email: currentUser?.email
+        }
+    })
 
     const toggleEditMode = () => {
         setEditMode(!editMode);
     };
 
-    const onSubmit: SubmitHandler<UserUpdateMe> = async (data) => {
+    const updateInfo = async (data: UserUpdateMe) => {
-        try {
+        await UsersService.updateUserMe({ requestBody: data })
-            await editUser(data);
+    }
-            await getUsers()
+
+    const mutation = useMutation(updateInfo, {
+        onSuccess: () => {
             showToast('Success!', 'User updated successfully.', 'success');
-        } catch (err) {
+        },
-            const errDetail = (err as ApiError).body.detail;
+        onError: (err: ApiError) => {
+            const errDetail = err.body.detail;
             showToast('Something went wrong.', `${errDetail}`, 'error');
+        },
+        onSettled: () => {
+            queryClient.invalidateQueries('users');
+            queryClient.invalidateQueries('currentUser');
         }
+    });
+
+    const onSubmit: SubmitHandler<UserUpdateMe> = async (data) => {
+        mutation.mutate(data)
     }
 
     const onCancel = () => {
@@ -47,21 +63,22 @@ const UserInformation: React.FC = () => {
                         <FormLabel color={color} htmlFor='name'>Full name</FormLabel>
                         {
                             editMode ?
-                                <Input id='name' {...register('full_name')} defaultValue={user?.full_name} type='text' size='md' /> :
+                                <Input id='name' {...register('full_name', { maxLength: 30 })} type='text' size='md' /> :
                                 <Text size='md' py={2}>
-                                    {user?.full_name || 'N/A'}
+                                    {currentUser?.full_name || 'N/A'}
                                 </Text>
                         }
                     </FormControl>
-                    <FormControl mt={4}>
+                    <FormControl mt={4} isInvalid={!!errors.email}>
                         <FormLabel color={color} htmlFor='email'>Email</FormLabel>
                         {
                             editMode ?
-                                <Input id='email' {...register('email')} defaultValue={user?.email} type='text' size='md' /> :
+                                <Input id='email' {...register('email', { required: 'Email is required', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} type='text' size='md' /> :
                                 <Text size='md' py={2}>
-                                    {user?.email || 'N/A'}
+                                    {currentUser!.email}
                                 </Text>
                         }
+                        {errors.email && <FormErrorMessage>{errors.email.message}</FormErrorMessage>}
                     </FormControl>
                     <Flex mt={4} gap={3}>
                         <Button
@@ -71,6 +88,7 @@ const UserInformation: React.FC = () => {
                             onClick={toggleEditMode}
                             type={editMode ? 'button' : 'submit'}
                             isLoading={editMode ? isSubmitting : false}
+                            isDisabled={editMode ? !isDirty : false}
                         >
                             {editMode ? 'Save' : 'Edit'}
                         </Button>

new-frontend/src/hooks/useAuth.ts

@@ -0,0 +1,33 @@
+import { useQuery } from 'react-query';
+import { useNavigate } from '@tanstack/react-router';
+
+import { Body_login_login_access_token as AccessToken, LoginService, UserOut, UsersService } from '../client';
+
+const isLoggedIn = () => {
+    return localStorage.getItem('access_token') !== null;
+};
+
+const useAuth = () => {
+    const navigate = useNavigate();
+    const { data: user, isLoading } = useQuery<UserOut | null, Error>('currentUser', UsersService.readUserMe, {
+        enabled: isLoggedIn(),
+    });
+
+    const login = async (data: AccessToken) => {
+        const response = await LoginService.loginAccessToken({
+            formData: data,
+        });
+        localStorage.setItem('access_token', response.access_token);
+        navigate({ to: '/' });
+    };
+
+    const logout = () => {
+        localStorage.removeItem('access_token');
+        navigate({ to: '/login' });
+    };
+
+    return { login, logout, user, isLoading };
+}
+
+export { isLoggedIn };
+export default useAuth;

new-frontend/src/hooks/useAuth.tsx

@@ -1,38 +0,0 @@
-import { useUserStore } from '../store/user-store';
-import { Body_login_login_access_token as AccessToken, LoginService } from '../client';
-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 { 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 = () => {
-        localStorage.removeItem('access_token');
-        resetUser();
-        resetUsers();
-        resetItems();
-        navigate('/login');
-    };
-
-    return { login, logout };
-}
-
-export { isLoggedIn };
-export default useAuth;

new-frontend/src/hooks/useCustomToast.ts

@@ -11,6 +11,7 @@ const useCustomToast = () => {
             description,
             status,
             isClosable: true,
+            position: 'bottom-right'
         });
     }, [toast]);
 

new-frontend/src/main.tsx

@@ -1,35 +1,33 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
-
+import { ChakraProvider } from '@chakra-ui/react';
-import { ChakraProvider } from '@chakra-ui/provider';
+import { QueryClient, QueryClientProvider } from 'react-query';
-import { createStandaloneToast } from '@chakra-ui/toast';
+import { RouterProvider, createRouter } from '@tanstack/react-router'
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { routeTree } from './routeTree.gen'
 
 import { OpenAPI } from './client';
-import { isLoggedIn } from './hooks/useAuth';
-import privateRoutes from './routes/private_route';
-import publicRoutes from './routes/public_route';
 import theme from './theme';
-
+import { StrictMode } from 'react';
 
 OpenAPI.BASE = import.meta.env.VITE_API_URL;
 OpenAPI.TOKEN = async () => {
   return localStorage.getItem('access_token') || '';
 }
 
-const router = createBrowserRouter([
+const queryClient = new QueryClient();
-  isLoggedIn() ? privateRoutes() : {},
-  ...publicRoutes(),
-]);
 
-const { ToastContainer } = createStandaloneToast();
+const router = createRouter({ routeTree })
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+  <StrictMode>
     <ChakraProvider theme={theme}>
-      <RouterProvider router={router} />
+      <QueryClientProvider client={queryClient}>
-      <ToastContainer />
+        <RouterProvider router={router} />
+      </QueryClientProvider>
     </ChakraProvider>
-  </React.StrictMode>,
+  </StrictMode>
-)
+);
-

new-frontend/src/pages/Dashboard.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { Container, Text } from '@chakra-ui/react';
-
-import { useUserStore } from '../store/user-store';
-
-
-const Dashboard: React.FC = () => {
-    const { user } = useUserStore();
-
-    return (
-        <>
-            <Container maxW='full' pt={12}>
-                <Text fontSize='2xl'>Hi, {user?.full_name || user?.email} 👋🏼</Text>
-                <Text>Welcome back, nice to see you again!</Text>
-            </Container>
-        </>
-
-    )
-}
-
-export default Dashboard;

new-frontend/src/pages/ErrorPage.tsx

@@ -1,25 +0,0 @@
-import { Button, Container, Text } from '@chakra-ui/react';
-import { Link, useRouteError } from 'react-router-dom';
-
-const ErrorPage: React.FC = () => {
-    const error = useRouteError();
-    console.log(error);
-
-    return (
-        <>
-            <Container h='100vh'
-                alignItems='stretch'
-                justifyContent='center' textAlign='center' maxW='xs' centerContent>
-                <Text fontSize='8xl' color='ui.main' fontWeight='bold' lineHeight='1' mb={4}>Oops!</Text>
-                <Text fontSize='md'>Houston, we have a problem.</Text>
-                <Text fontSize='md'>An unexpected error has occurred.</Text>
-                {/* <Text color='ui.danger'><i>{error.statusText || error.message}</i></Text> */}
-                <Button as={Link} to='/' color='ui.main' borderColor='ui.main' variant='outline' mt={4}>Go back to Home</Button>
-            </Container>
-        </>
-    );
-}
-
-export default ErrorPage;
-
-

new-frontend/src/pages/Layout.tsx

@@ -1,32 +0,0 @@
-import React, { useEffect } from 'react';
-
-import { Flex } from '@chakra-ui/react';
-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 fetchUser = async () => {
-            if (isLoggedIn()) {
-                await getUser();
-            }
-        };
-        fetchUser();
-    }, []);
-
-    return (
-        <Flex maxW='large' h='auto' position='relative'>
-            <Sidebar />
-            <Outlet />
-            <UserMenu />
-        </Flex>
-    );
-};
-
-export default Layout;

new-frontend/src/routeTree.gen.ts

@@ -0,0 +1,118 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as ResetPasswordImport } from './routes/reset-password'
+import { Route as RecoverPasswordImport } from './routes/recover-password'
+import { Route as LoginImport } from './routes/login'
+import { Route as LayoutImport } from './routes/_layout'
+import { Route as LayoutIndexImport } from './routes/_layout/index'
+import { Route as LayoutSettingsImport } from './routes/_layout/settings'
+import { Route as LayoutItemsImport } from './routes/_layout/items'
+import { Route as LayoutAdminImport } from './routes/_layout/admin'
+
+// Create/Update Routes
+
+const ResetPasswordRoute = ResetPasswordImport.update({
+  path: '/reset-password',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const RecoverPasswordRoute = RecoverPasswordImport.update({
+  path: '/recover-password',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const LoginRoute = LoginImport.update({
+  path: '/login',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const LayoutRoute = LayoutImport.update({
+  id: '/_layout',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const LayoutIndexRoute = LayoutIndexImport.update({
+  path: '/',
+  getParentRoute: () => LayoutRoute,
+} as any)
+
+const LayoutSettingsRoute = LayoutSettingsImport.update({
+  path: '/settings',
+  getParentRoute: () => LayoutRoute,
+} as any)
+
+const LayoutItemsRoute = LayoutItemsImport.update({
+  path: '/items',
+  getParentRoute: () => LayoutRoute,
+} as any)
+
+const LayoutAdminRoute = LayoutAdminImport.update({
+  path: '/admin',
+  getParentRoute: () => LayoutRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/_layout': {
+      preLoaderRoute: typeof LayoutImport
+      parentRoute: typeof rootRoute
+    }
+    '/login': {
+      preLoaderRoute: typeof LoginImport
+      parentRoute: typeof rootRoute
+    }
+    '/recover-password': {
+      preLoaderRoute: typeof RecoverPasswordImport
+      parentRoute: typeof rootRoute
+    }
+    '/reset-password': {
+      preLoaderRoute: typeof ResetPasswordImport
+      parentRoute: typeof rootRoute
+    }
+    '/_layout/admin': {
+      preLoaderRoute: typeof LayoutAdminImport
+      parentRoute: typeof LayoutImport
+    }
+    '/_layout/items': {
+      preLoaderRoute: typeof LayoutItemsImport
+      parentRoute: typeof LayoutImport
+    }
+    '/_layout/settings': {
+      preLoaderRoute: typeof LayoutSettingsImport
+      parentRoute: typeof LayoutImport
+    }
+    '/_layout/': {
+      preLoaderRoute: typeof LayoutIndexImport
+      parentRoute: typeof LayoutImport
+    }
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren([
+  LayoutRoute.addChildren([
+    LayoutAdminRoute,
+    LayoutItemsRoute,
+    LayoutSettingsRoute,
+    LayoutIndexRoute,
+  ]),
+  LoginRoute,
+  RecoverPasswordRoute,
+  ResetPasswordRoute,
+])
+
+/* prettier-ignore-end */

new-frontend/src/routes/__root.tsx

@@ -0,0 +1,13 @@
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import NotFound from '../components/Common/NotFound'
+
+export const Route = createRootRoute({
+    component: () => (
+        <>
+            <Outlet />
+            <TanStackRouterDevtools />
+        </>
+    ),
+    notFoundComponent: () => <NotFound />,
+})

new-frontend/src/routes/_layout.tsx

@@ -0,0 +1,38 @@
+import { Flex, Spinner } from '@chakra-ui/react';
+import { Outlet, createFileRoute, redirect } from '@tanstack/react-router';
+
+import Sidebar from '../components/Common/Sidebar';
+import UserMenu from '../components/Common/UserMenu';
+import useAuth, { isLoggedIn } from '../hooks/useAuth';
+
+
+export const Route = createFileRoute('/_layout')({
+    component: Layout,
+    beforeLoad: async () => {
+        if (!isLoggedIn()) {
+            throw redirect({
+                to: '/login',
+            })
+        }
+    }
+})
+
+function Layout() {
+    const { isLoading } = useAuth();
+
+    return (
+        <Flex maxW='large' h='auto' position='relative'>
+            <Sidebar />
+            {isLoading ? (
+                <Flex justify='center' align='center' height='100vh' width='full'>
+                    <Spinner size='xl' color='ui.main' />
+                </Flex>
+            ) : (
+                <Outlet />
+            )}
+            <UserMenu />
+        </Flex>
+    );
+};
+
+export default Layout;

new-frontend/src/routes/_layout/admin.tsx

@@ -1,36 +1,26 @@
-import React, { useEffect, useState } from 'react';
-
 import { Badge, Box, Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
+import { createFileRoute } from '@tanstack/react-router';
+import { useQuery, useQueryClient } from 'react-query';
 
-import { ApiError } from '../client';
+import { ApiError, UserOut, UsersService } from '../../client';
-import ActionsMenu from '../components/Common/ActionsMenu';
+import ActionsMenu from '../../components/Common/ActionsMenu';
-import Navbar from '../components/Common/Navbar';
+import Navbar from '../../components/Common/Navbar';
-import useCustomToast from '../hooks/useCustomToast';
+import useCustomToast from '../../hooks/useCustomToast';
-import { useUserStore } from '../store/user-store';
-import { useUsersStore } from '../store/users-store';
 
-const Admin: React.FC = () => {
+export const Route = createFileRoute('/_layout/admin')({
+    component: Admin,
+})
+
+function Admin() {
+    const queryClient = useQueryClient();
     const showToast = useCustomToast();
-    const [isLoading, setIsLoading] = useState(false);
+    const currentUser = queryClient.getQueryData<UserOut>('currentUser');
-    const { users, getUsers } = useUsersStore();
+    const { data: users, isLoading, isError, error } = useQuery('users', () => UsersService.readUsers({}))
-    const { user: currentUser } = useUserStore();
 
-    useEffect(() => {
+    if (isError) {
-        const fetchUsers = async () => {
+        const errDetail = (error as ApiError).body?.detail;
-            setIsLoading(true);
+        showToast('Something went wrong.', `${errDetail}`, 'error');
-            try {
+    }
-                await getUsers();
-            } catch (err) {
-                const errDetail = (err as ApiError).body.detail;
-                showToast('Something went wrong.', `${errDetail}`, 'error');
-            } finally {
-                setIsLoading(false);
-            }
-        }
-        if (users.length === 0) {
-            fetchUsers();
-        }
-    }, [])
 
     return (
         <>
@@ -58,7 +48,7 @@ const Admin: React.FC = () => {
                                 </Tr>
                             </Thead>
                             <Tbody>
-                                {users.map((user) => (
+                                {users.data.map((user) => (
                                     <Tr key={user.id}>
                                         <Td color={!user.full_name ? 'gray.600' : 'inherit'}>{user.full_name || 'N/A'}{currentUser?.id === user.id && <Badge ml='1' colorScheme='teal'>You</Badge>}</Td>
                                         <Td>{user.email}</Td>
@@ -76,7 +66,7 @@ const Admin: React.FC = () => {
                                             </Flex>
                                         </Td>
                                         <Td>
-                                            <ActionsMenu type='User' id={user.id} disabled={currentUser?.id === user.id ? true : false} />
+                                            <ActionsMenu type='User' value={user} disabled={currentUser?.id === user.id ? true : false} />
                                         </Td>
                                     </Tr>
                                 ))}

new-frontend/src/routes/_layout/index.tsx

@@ -0,0 +1,27 @@
+
+import { Container, Text } from '@chakra-ui/react';
+import { useQueryClient } from 'react-query';
+import { createFileRoute } from '@tanstack/react-router';
+
+import { UserOut } from '../../client';
+
+export const Route = createFileRoute('/_layout/')({
+    component: Dashboard,
+})
+
+function Dashboard() {
+    const queryClient = useQueryClient();
+
+    const currentUser = queryClient.getQueryData<UserOut>('currentUser');
+
+    return (
+        <>
+            <Container maxW='full' pt={12}>
+                <Text fontSize='2xl'>Hi, {currentUser?.full_name || currentUser?.email} 👋🏼</Text>
+                <Text>Welcome back, nice to see you again!</Text>
+            </Container>
+        </>
+    )
+}
+
+export default Dashboard;

new-frontend/src/routes/_layout/items.tsx

@@ -1,35 +1,24 @@
-import React, { useEffect, useState } from 'react';
-
 import { Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
+import { createFileRoute } from '@tanstack/react-router';
+import { useQuery } from 'react-query';
 
-import { ApiError } from '../client';
+import { ApiError, ItemsService } from '../../client';
-import ActionsMenu from '../components/Common/ActionsMenu';
+import ActionsMenu from '../../components/Common/ActionsMenu';
-import Navbar from '../components/Common/Navbar';
+import Navbar from '../../components/Common/Navbar';
-import useCustomToast from '../hooks/useCustomToast';
+import useCustomToast from '../../hooks/useCustomToast';
-import { useItemsStore } from '../store/items-store';
 
-const Items: React.FC = () => {
+export const Route = createFileRoute('/_layout/items')({
+    component: Items,
+})
+
+function Items() {
     const showToast = useCustomToast();
-    const [isLoading, setIsLoading] = useState(false);
+    const { data: items, isLoading, isError, error } = useQuery('items', () => ItemsService.readItems({}))
-    const { items, getItems } = useItemsStore();
-
-    useEffect(() => {
-        const fetchItems = async () => {
-            setIsLoading(true);
-            try {
-                await getItems();
-            } catch (err) {
-                const errDetail = (err as ApiError).body.detail;
-                showToast('Something went wrong.', `${errDetail}`, 'error');
-            } finally {
-                setIsLoading(false);
-            }
-        }
-        if (items.length === 0) {
-            fetchItems();
-        }
-    }, [])
 
+    if (isError) {
+        const errDetail = (error as ApiError).body?.detail;
+        showToast('Something went wrong.', `${errDetail}`, 'error');
+    }
 
     return (
         <>
@@ -56,13 +45,13 @@ const Items: React.FC = () => {
                                 </Tr>
                             </Thead>
                             <Tbody>
-                                {items.map((item) => (
+                                {items.data.map((item) => (
                                     <Tr key={item.id}>
                                         <Td>{item.id}</Td>
                                         <Td>{item.title}</Td>
                                         <Td color={!item.description ? 'gray.600' : 'inherit'}>{item.description || 'N/A'}</Td>
                                         <Td>
-                                            <ActionsMenu type={'Item'} id={item.id} />
+                                            <ActionsMenu type={'Item'} value={item} />
                                         </Td>
                                     </Tr>
                                 ))}

new-frontend/src/routes/_layout/settings.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
-
 import { Container, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
-import Appearance from '../components/UserSettings/Appearance';
+import { createFileRoute } from '@tanstack/react-router';
-import ChangePassword from '../components/UserSettings/ChangePassword';
+import { useQueryClient } from 'react-query';
-import DeleteAccount from '../components/UserSettings/DeleteAccount';
+
-import UserInformation from '../components/UserSettings/UserInformation';
+import { UserOut } from '../../client';
-import { useUserStore } from '../store/user-store';
+import Appearance from '../../components/UserSettings/Appearance';
+import ChangePassword from '../../components/UserSettings/ChangePassword';
+import DeleteAccount from '../../components/UserSettings/DeleteAccount';
+import UserInformation from '../../components/UserSettings/UserInformation';
 
 const tabsConfig = [
     { title: 'My profile', component: UserInformation },
@@ -14,11 +15,14 @@ const tabsConfig = [
     { title: 'Danger zone', component: DeleteAccount },
 ];
 
-const UserSettings: React.FC = () => {
+export const Route = createFileRoute('/_layout/settings')({
-    const { user } = useUserStore();
+    component: UserSettings,
-
+})
-    const finalTabs = user?.is_superuser ? tabsConfig.slice(0, 3) : tabsConfig;
 
+function UserSettings() {
+    const queryClient = useQueryClient();
+    const currentUser = queryClient.getQueryData<UserOut>('currentUser');
+    const finalTabs = currentUser?.is_superuser ? tabsConfig.slice(0, 3) : tabsConfig;
 
     return (
         <Container maxW='full'>
@@ -41,6 +45,6 @@ const UserSettings: React.FC = () => {
             </Tabs>
         </Container>
     );
-};
+}
 
 export default UserSettings;

new-frontend/src/routes/login.tsx

@@ -2,16 +2,28 @@ import React from 'react';
 
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import { Button, Center, Container, FormControl, FormErrorMessage, Icon, Image, Input, InputGroup, InputRightElement, Link, useBoolean } from '@chakra-ui/react';
+import { Link as RouterLink, createFileRoute, redirect } from '@tanstack/react-router';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { Link as ReactRouterLink } from 'react-router-dom';
 
 import Logo from '../assets/images/fastapi-logo.svg';
 import { ApiError } from '../client';
 import { Body_login_login_access_token as AccessToken } from '../client/models/Body_login_login_access_token';
-import useAuth from '../hooks/useAuth';
+import useAuth, { isLoggedIn } from '../hooks/useAuth';
 
-const Login: React.FC = () => {
+export const Route = createFileRoute('/login')({
+  component: Login,
+  beforeLoad: async () => {
+    if (isLoggedIn()) {
+      throw redirect({
+        to: '/',
+      })
+    }
+  }
+})
+
+function Login() {
   const [show, setShow] = useBoolean();
+  const { login } = useAuth();
   const [error, setError] = React.useState<string | null>(null);
   const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<AccessToken>({
     mode: 'onBlur',
@@ -21,7 +33,6 @@ const Login: React.FC = () => {
       password: ''
     }
   });
-  const { login } = useAuth();
 
   const onSubmit: SubmitHandler<AccessToken> = async (data) => {
     try {
@@ -73,7 +84,7 @@ const Login: React.FC = () => {
           </FormErrorMessage>}
         </FormControl>
         <Center>
-          <Link as={ReactRouterLink} to='/recover-password' color='blue.500'>
+          <Link as={RouterLink} to='/recover-password' color='blue.500'>
             Forgot password?
           </Link>
         </Center>

new-frontend/src/routes/private_route.tsx

@@ -1,21 +0,0 @@
-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 /> },
-        ],
-    };
-}

new-frontend/src/routes/public_route.tsx

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

new-frontend/src/routes/recover-password.tsx

@@ -1,16 +1,27 @@
-import React from "react";
+import { Button, Container, FormControl, FormErrorMessage, Heading, Input, Text } from '@chakra-ui/react';
+import { createFileRoute, redirect } from '@tanstack/react-router';
+import { SubmitHandler, useForm } from 'react-hook-form';
 
-import { Button, Container, FormControl, FormErrorMessage, Heading, Input, Text } from "@chakra-ui/react";
+import { LoginService } from '../client';
-import { SubmitHandler, useForm } from "react-hook-form";
+import useCustomToast from '../hooks/useCustomToast';
-
+import { isLoggedIn } from '../hooks/useAuth';
-import { LoginService } from "../client";
-import useCustomToast from "../hooks/useCustomToast";
 
 interface FormData {
   email: string;
 }
 
-const RecoverPassword: React.FC = () => {
+export const Route = createFileRoute('/recover-password')({
+  component: RecoverPassword,
+  beforeLoad: async () => {
+    if (isLoggedIn()) {
+      throw redirect({
+        to: '/',
+      })
+    }
+  }
+})
+
+function RecoverPassword() {
   const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>();
   const showToast = useCustomToast();
 
@@ -18,32 +29,31 @@ const RecoverPassword: React.FC = () => {
     await LoginService.recoverPassword({
       email: data.email,
     });
-
+    showToast('Email sent.', 'We sent an email with a link to get back into your account.', 'success');
-    showToast("Email sent.", "We sent an email with a link to get back into your account.", "success");
   };
 
   return (
     <Container
-      as="form"
+      as='form'
       onSubmit={handleSubmit(onSubmit)}
-      h="100vh"
+      h='100vh'
-      maxW="sm"
+      maxW='sm'
-      alignItems="stretch"
+      alignItems='stretch'
-      justifyContent="center"
+      justifyContent='center'
       gap={4}
       centerContent
     >
-      <Heading size="xl" color="ui.main" textAlign="center" mb={2}>
+      <Heading size='xl' color='ui.main' textAlign='center' mb={2}>
         Password Recovery
       </Heading>
-      <Text align="center">
+      <Text align='center'>
         A password recovery email will be sent to the registered account.
       </Text>
       <FormControl isInvalid={!!errors.email}>
         <Input id='email' {...register('email', { required: 'Email is required', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} placeholder='Email' type='email' />
         {errors.email && <FormErrorMessage>{errors.email.message}</FormErrorMessage>}
       </FormControl>
-      <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} type="submit" isLoading={isSubmitting}>
+      <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
         Continue
       </Button>
     </Container>

new-frontend/src/routes/reset-password.tsx

@@ -1,16 +1,29 @@
-import React from "react";
 
-import { Button, Container, FormControl, FormErrorMessage, FormLabel, Heading, Input, Text } from "@chakra-ui/react";
+import { Button, Container, FormControl, FormErrorMessage, FormLabel, Heading, Input, Text } from '@chakra-ui/react';
-import { SubmitHandler, useForm } from "react-hook-form";
+import { createFileRoute, redirect } from '@tanstack/react-router';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { useMutation } from 'react-query';
 
-import { LoginService, NewPassword } from "../client";
+import { ApiError, LoginService, NewPassword } from '../client';
-import useCustomToast from "../hooks/useCustomToast";
+import { isLoggedIn } from '../hooks/useAuth';
+import useCustomToast from '../hooks/useCustomToast';
 
 interface NewPasswordForm extends NewPassword {
     confirm_password: string;
 }
 
-const ResetPassword: React.FC = () => {
+export const Route = createFileRoute('/reset-password')({
+    component: ResetPassword,
+    beforeLoad: async () => {
+        if (isLoggedIn()) {
+            throw redirect({
+                to: '/',
+            })
+        }
+    }
+})
+
+function ResetPassword() {
     const { register, handleSubmit, getValues, formState: { errors } } = useForm<NewPasswordForm>({
         mode: 'onBlur',
         criteriaMode: 'all',
@@ -20,33 +33,43 @@ const ResetPassword: React.FC = () => {
     });
     const showToast = useCustomToast();
 
-    const onSubmit: SubmitHandler<NewPasswordForm> = async (data) => {
+    const resetPassword = async (data: NewPassword) => {
-        try {
+        const token = new URLSearchParams(window.location.search).get('token');
-            const token = new URLSearchParams(window.location.search).get('token');
+        await LoginService.resetPassword({
-            await LoginService.resetPassword({
+            requestBody: { new_password: data.new_password, token: token! }
-                requestBody: { new_password: data.new_password, token: token! }
+        });
-            });
+    }
-            showToast("Password reset.", "Your password has been reset successfully.", "success");
+
-        } catch (error) {
+    const mutation = useMutation(resetPassword, {
-            showToast("Error", "An error occurred while resetting your password.", "error");
+        onSuccess: () => {
+            showToast('Success!', 'Password updated.', 'success');
+        },
+        onError: (err: ApiError) => {
+            const errDetail = err.body.detail;
+            showToast('Something went wrong.', `${errDetail}`, 'error');
         }
+    })
+
+
+    const onSubmit: SubmitHandler<NewPasswordForm> = async (data) => {
+        mutation.mutate(data);
     };
 
     return (
         <Container
-            as="form"
+            as='form'
             onSubmit={handleSubmit(onSubmit)}
-            h="100vh"
+            h='100vh'
-            maxW="sm"
+            maxW='sm'
-            alignItems="stretch"
+            alignItems='stretch'
-            justifyContent="center"
+            justifyContent='center'
             gap={4}
             centerContent
         >
-            <Heading size="xl" color="ui.main" textAlign="center" mb={2}>
+            <Heading size='xl' color='ui.main' textAlign='center' mb={2}>
                 Reset Password
             </Heading>
-            <Text textAlign="center">
+            <Text textAlign='center'>
                 Please enter your new password and confirm it to reset your password.
             </Text>
             <FormControl mt={4} isInvalid={!!errors.new_password}>
@@ -62,7 +85,7 @@ const ResetPassword: React.FC = () => {
                 })} placeholder='Password' type='password' />
                 {errors.confirm_password && <FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>}
             </FormControl>
-            <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} type="submit">
+            <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit'>
                 Reset Password
             </Button>
         </Container>

new-frontend/src/store/items-store.tsx

@@ -1,36 +0,0 @@
-import { create } from 'zustand';
-import { ItemCreate, ItemOut, ItemUpdate, ItemsService } from '../client';
-
-interface ItemsStore {
-    items: ItemOut[];
-    getItems: () => Promise<void>;
-    addItem: (item: ItemCreate) => Promise<void>;
-    editItem: (id: number, item: ItemUpdate) => Promise<void>;
-    deleteItem: (id: number) => Promise<void>;
-    resetItems: () => void;
-}
-
-export const useItemsStore = create<ItemsStore>((set) => ({
-    items: [],
-    getItems: async () => {
-        const itemsResponse = await ItemsService.readItems({ skip: 0, limit: 10 });
-        set({ items: itemsResponse.data });
-    },
-    addItem: async (item: ItemCreate) => {
-        const itemResponse = await ItemsService.createItem({ requestBody: item });
-        set((state) => ({ items: [...state.items, itemResponse] }));
-    },
-    editItem: async (id: number, item: ItemUpdate) => {
-        const itemResponse = await ItemsService.updateItem({ id: id, requestBody: item });
-        set((state) => ({
-            items: state.items.map((item) => (item.id === id ? itemResponse : item))
-        }));
-    },
-    deleteItem: async (id: number) => {
-        await ItemsService.deleteItem({ id });
-        set((state) => ({ items: state.items.filter((item) => item.id !== id) }));
-    },
-    resetItems: () => {
-        set({ items: [] });
-    }
-}));

new-frontend/src/store/user-store.tsx

@@ -1,28 +0,0 @@
-import { create } from 'zustand';
-import { UpdatePassword, UserOut, UserUpdateMe, UsersService } from '../client';
-
-interface UserStore {
-    user: UserOut | null;
-    getUser: () => Promise<void>;
-    editUser: (user: UserUpdateMe) => Promise<void>;
-    editPassword: (password: UpdatePassword) => Promise<void>;
-    resetUser: () => void;
-}
-
-export const useUserStore = create<UserStore>((set) => ({
-    user: null,
-    getUser: async () => {
-        const user = await UsersService.readUserMe();
-        set({ user });
-    },
-    editUser: async (user: UserUpdateMe) => {
-        const updatedUser = await UsersService.updateUserMe({ requestBody: user });
-        set((state) => ({ user: { ...state.user, ...updatedUser } }));
-    },
-    editPassword: async (password: UpdatePassword) => {
-        await UsersService.updatePasswordMe({ requestBody: password });
-    },
-    resetUser: () => {
-        set({ user: null });
-    }
-}));

new-frontend/src/store/users-store.tsx

@@ -1,36 +0,0 @@
-import { create } from "zustand";
-import { UserCreate, UserOut, UserUpdate, UsersService } from "../client";
-
-interface UsersStore {
-    users: UserOut[];
-    getUsers: () => Promise<void>;
-    addUser: (user: UserCreate) => Promise<void>;
-    editUser: (id: number, user: UserUpdate) => Promise<void>;
-    deleteUser: (id: number) => Promise<void>;
-    resetUsers: () => void;
-}
-
-export const useUsersStore = create<UsersStore>((set) => ({
-    users: [],
-    getUsers: async () => {
-        const usersResponse = await UsersService.readUsers({ skip: 0, limit: 10 });
-        set({ users: usersResponse.data });
-    },
-    addUser: async (user: UserCreate) => {
-        const userResponse = await UsersService.createUser({ requestBody: user });
-        set((state) => ({ users: [...state.users, userResponse] }));
-    },
-    editUser: async (id: number, user: UserUpdate) => {
-        const userResponse = await UsersService.updateUser({ userId: id, requestBody: user });
-        set((state) => ({
-            users: state.users.map((user) => (user.id === id ? userResponse : user))
-        }));
-    },
-    deleteUser: async (id: number) => {
-        await UsersService.deleteUser({ userId: id });
-        set((state) => ({ users: state.users.filter((user) => user.id !== id) }));
-    },
-    resetUsers: () => {
-        set({ users: [] });
-    }
-}))

new-frontend/vite.config.ts

@@ -1,7 +1,8 @@
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
+import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
+import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), TanStackRouterVite()],
 })