"use client"; import qs from "query-string"; import axios from "axios"; import * as z from "zod"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { ChannelType } from "@prisma/client"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import{ Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { useRouter } from "next/navigation"; import { useModal } from "@/hooks/use-modal-store"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { useEffect } from "react"; const formSchema = z.object({ name: z.string().min(1, { message: "Channel name is required", }).refine( name => name !== "general", { message: "Channel name cannot be 'general'", } ), type: z.nativeEnum(ChannelType), }); export const EditChannelModal = () => { const { isOpen, onClose, type, data } = useModal(); const router = useRouter(); const isModalOpen = isOpen && type === "editChannel"; const { channel, server } = data; const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { name: "", type: channel?.type || ChannelType.TEXT, } }); useEffect(() => { if (channel) { form.setValue("name", channel.name), form.setValue("type", channel.type) } }, [form, channel]) const isLoading = form.formState.isSubmitting; const onSubmit = async (values: z.infer) => { try { const url = qs.stringifyUrl({ url: `/api/channels/${channel?.id}`, query: { serverId: server?.id } }); await axios.patch(url, values); form.reset(); router.refresh(); onClose(); } catch (error) { console.error(error); } } const handleClose = () => { form.reset(); onClose(); } return ( Edit Channel
( Channel name )} /> ( Channel Type )} />
) }