added edit sever settings

app/api/servers/[serverId]/route.ts

@@ -0,0 +1,36 @@
+import { currentProfile } from "@/lib/current-profile";
+import { NextResponse } from "next/server";
+import { db } from "@/lib/db";
+
+export async function PATCH(req: Request, { params }: { params: { serverId: string }}) 
+{
+    try 
+    {
+        const profile = await currentProfile();
+        const { name, imageUrl } = await req.json();
+
+        if (!profile) 
+        {
+            return new NextResponse("Unauthorized", { status: 401 });
+        }
+
+        const server = await db.server.update({
+            where: 
+            {
+                id: params.serverId,
+                profileId: profile.id,
+            },
+            data: 
+            {
+                name,
+                imageUrl,
+            }
+        });
+        return NextResponse.json(server);
+    } 
+    catch (error) 
+    {
+        console.log("[SERVER_ID_PATCH]", error);
+        return new NextResponse("Internal Error", { status: 500});
+    }
+}

components/modals/edit-server-modal.tsx

@@ -0,0 +1,149 @@
+"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<typeof formSchema>) => {
+        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 (
+        <Dialog open={isModalOpen} onOpenChange={handleClose}>
+            <DialogContent className="bg-white text-black p-0 overflow-hidden">
+                <DialogHeader className="pt-8 px-6">
+                    <DialogTitle className="text-2xl text-center">
+                        Customize your server
+                    </DialogTitle>
+                    <DialogDescription className="text-center text-zinc-500">
+                        Give your server a personality with a name and an image. You can always change it later.
+                    </DialogDescription>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                        <div className="space-y-8 px-6">
+                            <div className="flex items-center justify-center text-center">
+                                <FormField
+                                    control={form.control}
+                                    name="imageUrl"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormControl>
+                                                <FileUpload 
+                                                    endpoint="serverImage"
+                                                    value={field.value}
+                                                    onChange={field.onChange}
+                                                />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                            <FormField 
+                                control={form.control}
+                                name="name"
+                                render={({ field }) => (
+                                    <FormItem>                                        
+                                        <FormLabel
+                                            className="uppercase text-xs font-bold text-zinc-500 dark:text-secondary/70"
+                                        >
+                                            Server name
+                                        </FormLabel>
+                                        <FormControl>
+                                            <Input
+                                            disabled={isLoading}
+                                            className="bg-zinc-300/50 border-0 
+                                                focus-visible:ring-0 text-black
+                                                focus-visible:ring-offset-0"
+                                                placeholder="Enter server name"
+                                                {...field}
+                                            />
+                                        </FormControl>
+                                        <FormMessage/>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                        <DialogFooter className="bg-gray-100 px-6 py-4">
+                            <Button variant={"primary"} disabled={isLoading}>
+                                Save
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    )
+}

components/providors/modal-providor.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 
+import { EditServerModal } from "@/components/modals/edit-server-modal";
 import { CreateServerModal } from "@/components/modals/create-server-modal";
 import { InviteModal } from "@/components/modals/invite-modal";
 
@@ -20,6 +21,7 @@ export const ModalProvidor = () => {
         <>
             <CreateServerModal />
             <InviteModal />
+            <EditServerModal />
         </>
     )
 }

components/server/server-header.tsx

@@ -41,6 +41,7 @@ export const SeverHeader = ({server, role}: ServerHeaderProps) => {
                 )}
                 {isAdmin && (
                     <DropdownMenuItem
+                        onClick={() => onOpen("editServer", {server})}
                         className=" px-3 py-2 text-sm cursor-pointer"
                     >
                         Server Settings

hooks/use-modal-store.ts

@@ -2,7 +2,7 @@
 import { Server } from "@prisma/client";
 import { create } from "zustand";
 
-export type ModalType = "createServer" | "invite";
+export type ModalType = "createServer" | "invite" | "editServer" | "members";
 
 interface ModalData {
     server?: Server