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

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>