147 lines
3.7 KiB
TypeScript
147 lines
3.7 KiB
TypeScript
import { useMutation, useQueryClient } from "@tanstack/react-query"
|
|
import { type SubmitHandler, useForm } from "react-hook-form"
|
|
|
|
import {
|
|
Button,
|
|
DialogActionTrigger,
|
|
DialogTitle,
|
|
Input,
|
|
Text,
|
|
VStack,
|
|
} from "@chakra-ui/react"
|
|
import { useState } from "react"
|
|
import { FaPlus } from "react-icons/fa"
|
|
|
|
import { type ItemCreate, ItemsService } from "@/client"
|
|
import type { ApiError } from "@/client/core/ApiError"
|
|
import useCustomToast from "@/hooks/useCustomToast"
|
|
import { handleError } from "@/utils"
|
|
import {
|
|
DialogBody,
|
|
DialogCloseTrigger,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogRoot,
|
|
DialogTrigger,
|
|
} from "../ui/dialog"
|
|
import { Field } from "../ui/field"
|
|
|
|
const AddItem = () => {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const queryClient = useQueryClient()
|
|
const { showSuccessToast } = useCustomToast()
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors, isValid, isSubmitting },
|
|
} = useForm<ItemCreate>({
|
|
mode: "onBlur",
|
|
criteriaMode: "all",
|
|
defaultValues: {
|
|
title: "",
|
|
description: "",
|
|
},
|
|
})
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: (data: ItemCreate) =>
|
|
ItemsService.createItem({ requestBody: data }),
|
|
onSuccess: () => {
|
|
showSuccessToast("Item created successfully.")
|
|
reset()
|
|
setIsOpen(false)
|
|
},
|
|
onError: (err: ApiError) => {
|
|
handleError(err)
|
|
},
|
|
onSettled: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["items"] })
|
|
},
|
|
})
|
|
|
|
const onSubmit: SubmitHandler<ItemCreate> = (data) => {
|
|
mutation.mutate(data)
|
|
}
|
|
|
|
return (
|
|
<DialogRoot
|
|
size={{ base: "xs", md: "md" }}
|
|
placement="center"
|
|
open={isOpen}
|
|
onOpenChange={({ open }) => setIsOpen(open)}
|
|
>
|
|
<DialogTrigger asChild>
|
|
<Button value="add-item" my={4}>
|
|
<FaPlus fontSize="16px" />
|
|
Add Item
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<DialogHeader>
|
|
<DialogTitle>Add Item</DialogTitle>
|
|
</DialogHeader>
|
|
<DialogBody>
|
|
<Text mb={4}>Fill in the details to add a new item.</Text>
|
|
<VStack gap={4}>
|
|
<Field
|
|
required
|
|
invalid={!!errors.title}
|
|
errorText={errors.title?.message}
|
|
label="Title"
|
|
>
|
|
<Input
|
|
id="title"
|
|
{...register("title", {
|
|
required: "Title is required.",
|
|
})}
|
|
placeholder="Title"
|
|
type="text"
|
|
/>
|
|
</Field>
|
|
|
|
<Field
|
|
invalid={!!errors.description}
|
|
errorText={errors.description?.message}
|
|
label="Description"
|
|
>
|
|
<Input
|
|
id="description"
|
|
{...register("description")}
|
|
placeholder="Description"
|
|
type="text"
|
|
/>
|
|
</Field>
|
|
</VStack>
|
|
</DialogBody>
|
|
|
|
<DialogFooter gap={2}>
|
|
<DialogActionTrigger asChild>
|
|
<Button
|
|
variant="subtle"
|
|
colorPalette="gray"
|
|
disabled={isSubmitting}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</DialogActionTrigger>
|
|
<Button
|
|
variant="solid"
|
|
type="submit"
|
|
disabled={!isValid}
|
|
loading={isSubmitting}
|
|
>
|
|
Save
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
<DialogCloseTrigger />
|
|
</DialogContent>
|
|
</DialogRoot>
|
|
)
|
|
}
|
|
|
|
export default AddItem
|