import { zodResolver } from '@hookform/resolvers/zod'; import { FunctionComponent } from 'react'; import { useForm, SubmitHandler } from 'react-hook-form'; import { z } from 'zod'; import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema'; import toast from 'react-hot-toast'; import createErrorToast from '@/util/createErrorToast'; import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult'; import useBeerStyleComments from '@/hooks/data-fetching/beer-style-comments/useBeerStyleComments'; import { sendCreateBeerStyleCommentRequest } from '@/requests/comments/beer-style-comment'; import CommentForm from '../Comments/CommentForm'; interface BeerCommentFormProps { beerStyle: z.infer; mutate: ReturnType['mutate']; } const BeerStyleCommentForm: FunctionComponent = ({ beerStyle, mutate, }) => { const { register, handleSubmit, formState, watch, reset, setValue } = useForm< z.infer >({ defaultValues: { rating: 0 }, resolver: zodResolver(CreateCommentValidationSchema), }); const onSubmit: SubmitHandler> = async ( data, ) => { const loadingToast = toast.loading('Posting a new comment...'); try { await sendCreateBeerStyleCommentRequest({ body: { content: data.content, rating: data.rating }, beerStyleId: beerStyle.id, }); reset(); toast.remove(loadingToast); toast.success('Comment posted successfully.'); await mutate(); } catch (error) { await mutate(); toast.remove(loadingToast); createErrorToast(error); reset(); } }; return ( ); }; export default BeerStyleCommentForm;