full-stack-fastapi-template/new-frontend/src/components/Items/AddItem.tsx

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, ItemsService } from '../../client';
import useCustomToast from '../../hooks/useCustomToast';

interface AddItemProps {
    isOpen: boolean;
    onClose: () => void;
}

const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
    const queryClient = useQueryClient();
    const showToast = useCustomToast();
    const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm<ItemCreate>({
        mode: 'onBlur',
        criteriaMode: 'all',
        defaultValues: {
            title: '',
            description: '',
        },
    });

    const addItem = async (data: ItemCreate) => {
        await ItemsService.createItem({ requestBody: data })
    }

    const mutation = useMutation(addItem, {
        onSuccess: () => {
            showToast('Success!', 'Item created successfully.', 'success');
            reset();
            onClose();
        },
        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 (
        <>
            <Modal
                isOpen={isOpen}
                onClose={onClose}
                size={{ base: 'sm', md: 'md' }}
                isCentered
            >
                <ModalOverlay />
                <ModalContent as='form' onSubmit={handleSubmit(onSubmit)}>
                    <ModalHeader>Add Item</ModalHeader>
                    <ModalCloseButton />
                    <ModalBody pb={6}>
                        <FormControl isRequired isInvalid={!!errors.title}>
                            <FormLabel htmlFor='title'>Title</FormLabel>
                            <Input
                                id='title'
                                {...register('title', { required: 'Title is required.' })}
                                placeholder='Title'
                                type='text'
                            />
                            {errors.title && <FormErrorMessage>{errors.title.message}</FormErrorMessage>}
                        </FormControl>
                        <FormControl mt={4}>
                            <FormLabel htmlFor='description'>Description</FormLabel>
                            <Input
                                id='description'
                                {...register('description')}
                                placeholder='Description'
                                type='text'
                            />
                        </FormControl>
                    </ModalBody>

                    <ModalFooter gap={3}>
                        <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
                            Save
                        </Button>
                        <Button onClick={onClose}>
                            Cancel
                        </Button>
                    </ModalFooter>
                </ModalContent>
            </Modal>
        </>
    );
};

export default AddItem;