125 lines
3.0 KiB
TypeScript
125 lines
3.0 KiB
TypeScript
import {
|
|
Button,
|
|
FormControl,
|
|
FormErrorMessage,
|
|
FormLabel,
|
|
Input,
|
|
Modal,
|
|
ModalBody,
|
|
ModalCloseButton,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
ModalOverlay,
|
|
} from "@chakra-ui/react"
|
|
import { useMutation, useQueryClient } from "@tanstack/react-query"
|
|
import { type SubmitHandler, useForm } from "react-hook-form"
|
|
|
|
import {
|
|
type ApiError,
|
|
type ItemPublic,
|
|
type ItemUpdate,
|
|
ItemsService,
|
|
} from "../../client"
|
|
import useCustomToast from "../../hooks/useCustomToast"
|
|
import { handleError } from "../../utils"
|
|
|
|
interface EditItemProps {
|
|
item: ItemPublic
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
const EditItem = ({ item, isOpen, onClose }: EditItemProps) => {
|
|
const queryClient = useQueryClient()
|
|
const showToast = useCustomToast()
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { isSubmitting, errors, isDirty },
|
|
} = useForm<ItemUpdate>({
|
|
mode: "onBlur",
|
|
criteriaMode: "all",
|
|
defaultValues: item,
|
|
})
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: (data: ItemUpdate) =>
|
|
ItemsService.updateItem({ id: item.id, requestBody: data }),
|
|
onSuccess: () => {
|
|
showToast("Success!", "Item updated successfully.", "success")
|
|
onClose()
|
|
},
|
|
onError: (err: ApiError) => {
|
|
handleError(err, showToast)
|
|
},
|
|
onSettled: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["items"] })
|
|
},
|
|
})
|
|
|
|
const onSubmit: SubmitHandler<ItemUpdate> = async (data) => {
|
|
mutation.mutate(data)
|
|
}
|
|
|
|
const onCancel = () => {
|
|
reset()
|
|
onClose()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
size={{ base: "sm", md: "md" }}
|
|
isCentered
|
|
>
|
|
<ModalOverlay />
|
|
<ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
|
|
<ModalHeader>Edit Item</ModalHeader>
|
|
<ModalCloseButton />
|
|
<ModalBody pb={6}>
|
|
<FormControl isInvalid={!!errors.title}>
|
|
<FormLabel htmlFor="title">Title</FormLabel>
|
|
<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>
|
|
<Input
|
|
id="description"
|
|
{...register("description")}
|
|
placeholder="Description"
|
|
type="text"
|
|
/>
|
|
</FormControl>
|
|
</ModalBody>
|
|
<ModalFooter gap={3}>
|
|
<Button
|
|
variant="primary"
|
|
type="submit"
|
|
isLoading={isSubmitting}
|
|
isDisabled={!isDirty}
|
|
>
|
|
Save
|
|
</Button>
|
|
<Button onClick={onCancel}>Cancel</Button>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default EditItem
|