added delete and leave functionality

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

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

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

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

components/modals/delete-server-modal.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import axios from "axios";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { useModal } from "@/hooks/use-modal-store";
+import { Button } from "@/components/ui/button";
+
+
+export const DeleteServerModal = () => {
+    const { isOpen, onClose, type, data } = useModal();
+    const router = useRouter();
+
+    const isModalOpen = isOpen && type === "deleteServer";
+    const { server } = data;
+
+    const [isLoading, setIsLoading] = useState(false);
+
+    const onClick = async () => 
+    {
+        try 
+        {
+            setIsLoading(true);
+
+            await axios.delete(`/api/servers/${server?.id}`);
+
+            onClose();
+            router.refresh();
+            router.push("/");
+
+
+        } 
+        catch (error) 
+        {
+            console.log(error);
+        } 
+        finally 
+        {
+            setIsLoading(false);
+            onClose();
+        }
+    }
+
+    return (
+        <Dialog open={isModalOpen} onOpenChange={onClose}>
+            <DialogContent className="bg-white text-black p-0 overflow-hidden">
+                <DialogHeader className="pt-8 px-6">
+                    <DialogTitle className="text-2xl text-center font-bold">
+                        Delete Server
+                    </DialogTitle>
+                    <DialogDescription className="text-center text-zinc-500">
+                        Are you sure you want to do this? <br/>
+                        <span className="font-semibold text-indigo-500" >
+                            {server?.name}
+                        </span> will be permenantly deleted.
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter className="bg-gray-100 px-6 py-4">
+                    <div className="flex items-center justify-between w-full">
+                        <Button disabled={isLoading} onClick={onClose} variant="ghost">
+                            Cancel
+                        </Button>
+                        <Button disabled={isLoading} onClick={onClick} variant="primary">
+                            Confirm
+                        </Button>
+                    </div>
+
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

components/modals/leave-server-modal.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import axios from "axios";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { useModal } from "@/hooks/use-modal-store";
+import { Button } from "@/components/ui/button";
+
+
+export const LeaveServerModal = () => {
+    const { isOpen, onClose, type, data } = useModal();
+    const router = useRouter();
+
+    const isModalOpen = isOpen && type === "leaveServer";
+    const { server } = data;
+
+    const [isLoading, setIsLoading] = useState(false);
+
+    const onClick = async () => 
+    {
+        try 
+        {
+            setIsLoading(true);
+
+            await axios.patch(`/api/servers/${server?.id}/leave`);
+
+            onClose();
+            router.refresh();
+            router.push("/");
+
+
+        } 
+        catch (error) 
+        {
+            console.log(error);
+        } 
+        finally 
+        {
+            setIsLoading(false);
+            onClose();
+        }
+    }
+
+    return (
+        <Dialog open={isModalOpen} onOpenChange={onClose}>
+            <DialogContent className="bg-white text-black p-0 overflow-hidden">
+                <DialogHeader className="pt-8 px-6">
+                    <DialogTitle className="text-2xl text-center font-bold">
+                        Leave Server
+                    </DialogTitle>
+                    <DialogDescription className="text-center text-zinc-500">
+                        Are you sure you wan to leave 
+                        <span className="font-semibold text-indigo-500" >
+                            {server?.name}
+                        </span>
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter className="bg-gray-100 px-6 py-4">
+                    <div className="flex items-center justify-between w-full">
+                        <Button disabled={isLoading} onClick={onClose} variant="ghost">
+                            Cancel
+                        </Button>
+                        <Button disabled={isLoading} onClick={onClick} variant="primary">
+                            Confirm
+                        </Button>
+                    </div>
+
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

components/providors/modal-providor.tsx

@@ -7,6 +7,8 @@ import { CreateServerModal } from "@/components/modals/create-server-modal";
 import { InviteModal } from "@/components/modals/invite-modal";
 import { MembersModal } from "@/components/modals/members-modal";
 import { CreateChannelModal } from "@/components/modals/create-channel-modal";
+import { LeaveServerModal } from "@/components/modals/leave-server-modal";
+import { DeleteServerModal } from "@/components/modals/delete-server-modal";
 
 export const ModalProvidor = () => {
     const [isMounted, setIsMounted] = useState(false);
@@ -26,6 +28,8 @@ export const ModalProvidor = () => {
             <EditServerModal />
             <MembersModal/>
             <CreateChannelModal/>
+            <LeaveServerModal/>
+            <DeleteServerModal/>
         </>
     )
 }

components/server/server-header.tsx

@@ -71,6 +71,7 @@ export const SeverHeader = ({server, role}: ServerHeaderProps) => {
                 )}
                 {isAdmin && (
                     <DropdownMenuItem
+                        onClick={() => onOpen("deleteServer", {server})}
                         className="text-rose-500 px-3 py-2 text-sm cursor-pointer"
                     >
                         Delete Server
@@ -79,6 +80,7 @@ export const SeverHeader = ({server, role}: ServerHeaderProps) => {
                 )}
                 {!isAdmin && (
                     <DropdownMenuItem
+                        onClick={() => onOpen("leaveServer", {server})}
                         className="text-rose-500 px-3 py-2 text-sm cursor-pointer"
                     >
                         Leave Server

hooks/use-modal-store.ts

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