amir/full-stack-fastapi-template
1
0
Fork 0
mirror of https://github.com/fastapi/full-stack-fastapi-template.git synced 2026-11-03 20:36:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Format with Prettier (#646)

Browse Source
This commit is contained in:
Alejandra
2024-03-08 14:58:36 +01:00
committed by GitHub
parent 6a3e47b7c9
commit 2d138b4622
29 changed files with 2076 additions and 1371 deletions
Download Patch File Download Diff File Expand all files Collapse all files
new-frontend/src/components/Items/AddItem.tsx
+111 -86
View File
@@ -1,98 +1,123 @@
import React from 'react';
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 { 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';
import { ApiError, ItemCreate, ItemsService } from '../../client'
import useCustomToast from '../../hooks/useCustomToast'
interface AddItemProps {
isOpen: boolean;
onClose: () => void;
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 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 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 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);
}
const onSubmit: SubmitHandler<ItemCreate> = (data) => {
mutation.mutate(data)
}
return (
<>
<Modal
isOpen={isOpen}
onClose={onClose}
size={{ base: 'sm', md: 'md' }}
isCentered
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}
>
<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>
Save
</Button>
<Button onClick={onClose}>Cancel</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
}
<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;
export default AddItem