"use client"; import axios from "axios"; import * as z from "zod"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { Dialog, DialogContent, DialogDescription, 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 { FileUpload } from "@/components/file-upload"; import { useRouter } from "next/navigation"; import { useModal } from "@/hooks/use-modal-store"; import { useEffect } from "react"; const formSchema = z.object({ name: z.string().min(1, { message: "Server name is required", }), imageUrl: z.string().min(1, { message: "Server image is required", }), }); export const EditServerModal = () => { const { isOpen, onClose, type, data } = useModal(); const router = useRouter(); const isModalOpen = isOpen && type === "editServer"; const { server } = data; const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { name: "", imageUrl: "", } }); useEffect(() => { if (server) { form.setValue("name", server.name), form.setValue("imageUrl", server.imageUrl) } }, [server, form]); const isLoading = form.formState.isSubmitting; const onSubmit = async (values: z.infer) => { try { await axios.patch(`/api/servers/${server?.id}`, values); form.reset(); router.refresh(); onClose(); } catch (error) { console.error(error); } } const handleClose = () => { form.reset(); onClose(); } return ( Customize your server Give your server a personality with a name and an image. You can always change it later.
( )} />
( Server name )} />
) }