nt_web_template/full-stack-fastapi-template
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Alejandra
2024-03-07 19:16:23 +01:00
committed by GitHub
parent 7c2b617c09
commit 11c09b50b2
40 changed files with 4967 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
new-frontend/.env Normal file
View File

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

4375
new-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
new-frontend/package.json
View File

@@ -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",

29
new-frontend/src/components/Admin/AddUser.tsx
View File

@@ -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 useCustomToast from '../../hooks/useCustomToast';
import { useUsersStore } from '../../store/users-store';
import { UserCreate, UsersService } from '../../client';
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) => {
try {
await addUser(data);
const addUser = async (data: UserCreate) => {
await UsersService.createUser({ requestBody: 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 (

56
new-frontend/src/components/Admin/EditUser.tsx
View File

@@ -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 } } = useForm<UserUpdateForm>({
const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting, isDirty } } = useForm<UserUpdateForm>({
mode: 'onBlur',
criteriaMode: 'all',
defaultValues: {
email: currentUser?.email,
full_name: currentUser?.full_name,
password: '',
confirm_password: '',
is_superuser: currentUser?.is_superuser,
is_active: currentUser?.is_active
defaultValues: user
});
const updateUser = async (data: UserUpdateForm) => {
await UsersService.updateUser({ userId: user.id, requestBody: data });
}
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 === '') {
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>

11
new-frontend/src/components/Common/ActionsMenu.tsx
View File

@@ -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} />
: <EditItem id={id} isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
type === 'User' ? <EditUser user={value as UserOut} 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>
</>
);

40
new-frontend/src/components/Common/DeleteAlert.tsx
View File

@@ -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 { deleteItem } = useItemsStore();
const { deleteUser } = useUsersStore();
const onSubmit = async () => {
try {
type === 'Item' ? await deleteItem(id) : await deleteUser(id);
const deleteEntity = async (id: number) => {
if (type === 'Item') {
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}>

17
new-frontend/src/components/Common/Navbar.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { Button, Flex, Icon, Input, InputGroup, InputLeftElement, useDisclosure } from '@chakra-ui/react';
import { FaPlus, FaSearch } from "react-icons/fa";
import { Button, Flex, Icon, useDisclosure } from '@chakra-ui/react';
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" }}>
<InputLeftElement pointerEvents="none">
<Icon as={FaSearch} color="gray.400" />
{/* TODO: Complete search functionality */}
{/* <InputGroup w={{ base: '100%', md: 'auto' }}>
<InputLeftElement pointerEvents='none'>
<Icon as={FaSearch} color='gray.400' />
</InputLeftElement>
<Input type="text" placeholder="Search" fontSize={{ base: "sm", md: "inherit" }} borderRadius="8px" />
</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}>
<Input type='text' placeholder='Search' fontSize={{ base: 'sm', md: 'inherit' }} borderRadius='8px' />
</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}>
<Icon as={FaPlus} /> Add {type}
</Button>
<AddUser isOpen={addUserModal.isOpen} onClose={addUserModal.onClose} />

22
new-frontend/src/components/Common/NotFound.tsx Normal file
View File

@@ -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;

14
new-frontend/src/components/Common/Sidebar.tsx
View File

@@ -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 &&
<Text color={textColor} noOfLines={2} fontSize='sm' p={2}>Logged in as: {user.email}</Text>
currentUser?.email &&
<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 &&
<Text color={textColor} noOfLines={2} fontSize='sm' p={2} maxW='180px'>Logged in as: {user.email}</Text>
currentUser?.email &&
<Text color={textColor} noOfLines={2} fontSize='sm' p={2} maxW='180px'>Logged in as: {currentUser.email}</Text>
}
</Flex>
</Box>

34
new-frontend/src/components/Common/SidebarItems.tsx
View File

@@ -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: FiBriefcase, title: 'Items', path: "/items" },
{ icon: FiSettings, title: 'User Settings', path: "/settings" },
{ icon: FiHome, title: 'Dashboard', path: '/' },
{ icon: FiBriefcase, title: 'Items', path: '/items' },
{ 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 bgActive = useColorModeValue("#E2E8F0", "#4A5568");
const location = useLocation();
const { user } = useUserStore();
const queryClient = useQueryClient();
const textColor = useColorModeValue('ui.main', '#E2E8F0');
const bgActive = useColorModeValue('#E2E8F0', '#4A5568');
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={{
style: {
background: bgActive,
borderRadius: "12px",
} : {}}
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>
));

2
new-frontend/src/components/Common/UserMenu.tsx
View File

@@ -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();

29
new-frontend/src/components/Items/AddItem.tsx
View File

@@ -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) => {
try {
await addItem(data);
const addItem = async (data: ItemCreate) => {
await ItemsService.createItem({ requestBody: 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 (
<>

54
new-frontend/src/components/Items/EditItem.tsx
View File

@@ -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 currentItem = items.find((item) => item.id === id);
const { register, handleSubmit, reset, formState: { isSubmitting }, } = useForm<ItemUpdate>({ defaultValues: { title: currentItem?.title, description: currentItem?.description } });
const { register, handleSubmit, reset, formState: { isSubmitting, errors, isDirty } } = useForm<ItemUpdate>({
mode: 'onBlur',
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 {
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');
}
mutation.mutate(data)
}
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>

60
new-frontend/src/components/UserSettings/ChangePassword.tsx
View File

@@ -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 { editPassword } = useUserStore();
const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting } } = useForm<UpdatePasswordForm>({
mode: 'onBlur',
criteriaMode: 'all'
});
const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
try {
await editPassword(data);
showToast('Success!', 'Password updated.', 'success');
reset();
} catch (err) {
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
const UpdatePassword = async (data: UpdatePassword) => {
await UsersService.updatePasswordMe({ requestBody: data })
}
const mutation = useMutation(UpdatePassword, {
onSuccess: () => {
showToast('Success!', 'Password updated.', 'success');
reset();
},
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>
<FormLabel color={color} htmlFor='currentPassword'>Current password</FormLabel>
<Input id='currentPassword' {...register('current_password')} placeholder='••••••••' type='password' />
<FormControl isRequired isInvalid={!!errors.current_password}>
<FormLabel color={color} htmlFor='current_password'>Current password</FormLabel>
<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}>
<FormLabel color={color} htmlFor='newPassword'>New password</FormLabel>
<Input id='newPassword' {...register('new_password')} placeholder='••••••••' type='password' />
<FormControl mt={4} isRequired isInvalid={!!errors.new_password}>
<FormLabel htmlFor='password'>Set Password</FormLabel>
<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}>
<FormLabel color={color} htmlFor='confirmPassword'>Confirm new password</FormLabel>
<Input id='confirmPassword' {...register('confirm_password')} placeholder='••••••••' type='password' />
<FormControl mt={4} isRequired isInvalid={!!errors.confirm_password}>
<FormLabel htmlFor='confirm_password'>Confirm Password</FormLabel>
<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

32
new-frontend/src/components/UserSettings/DeleteConfirmation.tsx
View File

@@ -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 () => {
try {
await deleteUser(user!.id);
const deleteCurrentUser = async (id: number) => {
await UsersService.deleteUser({ userId: 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) {
const errDetail = (err as ApiError).body.detail;
},
onError: (err: ApiError) => {
const errDetail = err.body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
},
onSettled: () => {
queryClient.invalidateQueries('currentUser');
}
})
const onSubmit = async () => {
mutation.mutate(currentUser!.id);
}
return (

60
new-frontend/src/components/UserSettings/UserInformation.tsx
View File

@@ -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, editUser } = useUserStore();
const { getUsers } = useUsersStore();
const { user: currentUser } = useAuth();
const { register, handleSubmit, reset, formState: { isSubmitting, errors, isDirty } } = useForm<UserOut>({
mode: 'onBlur', criteriaMode: 'all', defaultValues: {
full_name: currentUser?.full_name,
email: currentUser?.email
}
})
const toggleEditMode = () => {
setEditMode(!editMode);
};
const onSubmit: SubmitHandler<UserUpdateMe> = async (data) => {
try {
await editUser(data);
await getUsers()
showToast('Success!', 'User updated successfully.', 'success');
} catch (err) {
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
const updateInfo = async (data: UserUpdateMe) => {
await UsersService.updateUserMe({ requestBody: data })
}
const mutation = useMutation(updateInfo, {
onSuccess: () => {
showToast('Success!', 'User updated successfully.', 'success');
},
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>

33
new-frontend/src/hooks/useAuth.ts Normal file
View File

@@ -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;

38
new-frontend/src/hooks/useAuth.tsx
View File

@@ -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;

1
new-frontend/src/hooks/useCustomToast.tsx → new-frontend/src/hooks/useCustomToast.ts
View File

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

36
new-frontend/src/main.tsx
View File

@@ -1,35 +1,33 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ChakraProvider } from '@chakra-ui/provider';
import { createStandaloneToast } from '@chakra-ui/toast';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { ChakraProvider } from '@chakra-ui/react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { RouterProvider, createRouter } from '@tanstack/react-router'
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([
isLoggedIn() ? privateRoutes() : {},
...publicRoutes(),
]);
const queryClient = new QueryClient();
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}>
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
<ToastContainer />
</QueryClientProvider>
</ChakraProvider>
</React.StrictMode>,
)
</StrictMode>
);

22
new-frontend/src/pages/Dashboard.tsx
View File

@@ -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;

25
new-frontend/src/pages/ErrorPage.tsx
View File

@@ -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;

32
new-frontend/src/pages/Layout.tsx
View File

@@ -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;

118
new-frontend/src/routeTree.gen.ts Normal file
View File

@@ -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 */

13
new-frontend/src/routes/__root.tsx Normal file
View File

@@ -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 />,
})

38
new-frontend/src/routes/_layout.tsx Normal file
View File

@@ -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;

46
new-frontend/src/pages/Admin.tsx → new-frontend/src/routes/_layout/admin.tsx
View File

@@ -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 ActionsMenu from '../components/Common/ActionsMenu';
import Navbar from '../components/Common/Navbar';
import useCustomToast from '../hooks/useCustomToast';
import { useUserStore } from '../store/user-store';
import { useUsersStore } from '../store/users-store';
import { ApiError, UserOut, UsersService } from '../../client';
import ActionsMenu from '../../components/Common/ActionsMenu';
import Navbar from '../../components/Common/Navbar';
import useCustomToast from '../../hooks/useCustomToast';
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 { users, getUsers } = useUsersStore();
const { user: currentUser } = useUserStore();
const currentUser = queryClient.getQueryData<UserOut>('currentUser');
const { data: users, isLoading, isError, error } = useQuery('users', () => UsersService.readUsers({}))
useEffect(() => {
const fetchUsers = async () => {
setIsLoading(true);
try {
await getUsers();
} catch (err) {
const errDetail = (err as ApiError).body.detail;
if (isError) {
const errDetail = (error 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>
))}

27
new-frontend/src/routes/_layout/index.tsx Normal file
View File

@@ -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;

43
new-frontend/src/pages/Items.tsx → new-frontend/src/routes/_layout/items.tsx
View File

@@ -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 ActionsMenu from '../components/Common/ActionsMenu';
import Navbar from '../components/Common/Navbar';
import useCustomToast from '../hooks/useCustomToast';
import { useItemsStore } from '../store/items-store';
import { ApiError, ItemsService } from '../../client';
import ActionsMenu from '../../components/Common/ActionsMenu';
import Navbar from '../../components/Common/Navbar';
import useCustomToast from '../../hooks/useCustomToast';
const Items: React.FC = () => {
export const Route = createFileRoute('/_layout/items')({
component: Items,
})
function Items() {
const showToast = useCustomToast();
const [isLoading, setIsLoading] = useState(false);
const { items, getItems } = useItemsStore();
const { data: items, isLoading, isError, error } = useQuery('items', () => ItemsService.readItems({}))
useEffect(() => {
const fetchItems = async () => {
setIsLoading(true);
try {
await getItems();
} catch (err) {
const errDetail = (err as ApiError).body.detail;
if (isError) {
const errDetail = (error as ApiError).body?.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
} finally {
setIsLoading(false);
}
}
if (items.length === 0) {
fetchItems();
}
}, [])
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>
))}

28
new-frontend/src/pages/UserSettings.tsx → new-frontend/src/routes/_layout/settings.tsx
View File

@@ -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 ChangePassword from '../components/UserSettings/ChangePassword';
import DeleteAccount from '../components/UserSettings/DeleteAccount';
import UserInformation from '../components/UserSettings/UserInformation';
import { useUserStore } from '../store/user-store';
import { createFileRoute } from '@tanstack/react-router';
import { useQueryClient } from 'react-query';
import { UserOut } from '../../client';
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 = () => {
const { user } = useUserStore();
const finalTabs = user?.is_superuser ? tabsConfig.slice(0, 3) : tabsConfig;
export const Route = createFileRoute('/_layout/settings')({
component: UserSettings,
})
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;

21
new-frontend/src/pages/Login.tsx → new-frontend/src/routes/login.tsx
View File

@@ -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>

21
new-frontend/src/routes/private_route.tsx
View File

@@ -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 /> },
],
};
}

15
new-frontend/src/routes/public_route.tsx
View File

@@ -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 /> }
];
}

44
new-frontend/src/pages/RecoverPassword.tsx → new-frontend/src/routes/recover-password.tsx
View File

@@ -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 { SubmitHandler, useForm } from "react-hook-form";
import { LoginService } from "../client";
import useCustomToast from "../hooks/useCustomToast";
import { LoginService } from '../client';
import useCustomToast from '../hooks/useCustomToast';
import { isLoggedIn } from '../hooks/useAuth';
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"
maxW="sm"
alignItems="stretch"
justifyContent="center"
h='100vh'
maxW='sm'
alignItems='stretch'
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>

61
new-frontend/src/pages/ResetPassword.tsx → new-frontend/src/routes/reset-password.tsx
View File

@@ -1,16 +1,29 @@
import React from "react";
import { Button, Container, FormControl, FormErrorMessage, FormLabel, Heading, Input, Text } from "@chakra-ui/react";
import { SubmitHandler, useForm } from "react-hook-form";
import { Button, Container, FormControl, FormErrorMessage, FormLabel, Heading, Input, Text } from '@chakra-ui/react';
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 useCustomToast from "../hooks/useCustomToast";
import { ApiError, LoginService, NewPassword } from '../client';
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) => {
try {
const resetPassword = async (data: NewPassword) => {
const token = new URLSearchParams(window.location.search).get('token');
await LoginService.resetPassword({
requestBody: { new_password: data.new_password, token: token! }
});
showToast("Password reset.", "Your password has been reset successfully.", "success");
} catch (error) {
showToast("Error", "An error occurred while resetting your password.", "error");
}
const mutation = useMutation(resetPassword, {
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"
maxW="sm"
alignItems="stretch"
justifyContent="center"
h='100vh'
maxW='sm'
alignItems='stretch'
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>

36
new-frontend/src/store/items-store.tsx
View File

@@ -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: [] });
}
}));

28
new-frontend/src/store/user-store.tsx
View File

@@ -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 });
}
}));

36
new-frontend/src/store/users-store.tsx
View File

@@ -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: [] });
}
}))

5
new-frontend/vite.config.ts
View File

@@ -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()],
})