added members modal and route

app/api/members/[memberId]/route.ts

@@ -0,0 +1,128 @@
+import { currentProfile } from "@/lib/current-profile";
+import { db } from "@/lib/db";
+import { NextResponse } from "next/server";
+
+export async function DELETE(req: Request, { params }: { params: { memberId: string }})
+{
+    try 
+    {
+        const profile = await currentProfile();
+        const { searchParams } = new URL(req.url);
+        const serverId = searchParams.get("serverId");
+
+        if (!profile) 
+        {
+            return new NextResponse("Unauthorized", { status: 401 });
+        }
+
+        if (!serverId) 
+        {
+            return new NextResponse("Server ID Missing", { status: 400 });
+        }
+
+        if (!params.memberId) 
+        {
+            return new NextResponse("Member ID Missing", { status: 400 });
+        }
+
+        const server = await db.server.update({
+            where: {
+                id: serverId,
+                profileId: profile.id,
+            },
+            data: {
+                members: {
+                    deleteMany: {
+                        id: params.memberId,
+                        profileId: {
+                            not: profile.id
+                        },
+                    }
+                }
+            },
+            include: {
+                members: {
+                    include: {
+                        profile: true
+                    },
+                    orderBy: {
+                        role: "asc"
+                    }
+                }
+            }
+        });
+
+        return NextResponse.json(server);
+    } 
+    catch (error) 
+    {
+        console.log("[MEMBER_ID_DELETE]", error);
+        return new NextResponse("Internal Error", { status: 500});
+    }
+}
+
+export async function PATCH(req: Request, { params }: { params: { memberId: string }})
+{
+    try 
+    {
+        const profile = await currentProfile();
+        const { searchParams } = new URL(req.url);
+        const { role } = await req.json();
+
+        const serverId = searchParams.get("serverId");
+        
+        if (!profile) 
+        {
+            return new NextResponse("Unauthorized", { status: 401 });
+        }
+
+        if (!serverId) 
+        {
+            return new NextResponse("Server ID Missing", { status: 400 });
+        }
+
+        if (!params.memberId) 
+        {
+            return new NextResponse("Member ID Missing", { status: 400 });
+        }
+
+        const server = await db.server.update({
+            where: {
+                id: serverId,
+                profileId: profile.id,
+            },
+            data: {
+                members: {
+                    update: {
+                        where: {
+                            id: params.memberId,
+                            profileId: {
+                                not: profile.id
+                            },
+                        },
+                        data: {
+                            role
+                        }
+                    }
+                }
+            },
+            include: {
+                members: {
+                    include: {
+                        profile: true
+                    },
+                    orderBy: {
+                        role: "asc"
+                    }
+                }
+            }
+        });
+        
+        return NextResponse.json(server);
+    }
+    catch (error) 
+    {
+        console.log("[MEMBER_ID_PATCH]", error);
+        return new NextResponse("Internal Error", { status: 500});
+    }
+}

components/modals/members-modal.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import axios from "axios";
+import qs from "query-string";
+import { Check, Gavel, Loader2, MoreVertical, Shield, ShieldAlert, ShieldCheck, ShieldQuestion } from "lucide-react";
+import { useState } from "react";
+import { MemberRole } from "@prisma/client";
+import { useRouter } from "next/navigation";
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { useModal } from "@/hooks/use-modal-store";
+import { ServerWithMembersWithProfiles } from "@/types";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { UserAvatar } from "@/components/user-avatar";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuPortal,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuTrigger,
+    DropdownMenuSubTrigger,
+} from "@/components/ui/dropdown-menu";
+
+const roleIconMap = {
+    "GUEST": null,
+    "MODERATOR": <ShieldCheck className="w-4 h-4 ml-2 text-indigo-500"/>,
+    "ADMIN": <ShieldAlert className="w-4 h-4 text-rose-500"/>
+}
+
+export const MembersModal = () => {
+    const router = useRouter();
+    const { onOpen, isOpen, onClose, type, data } = useModal();
+    const [loadingId, setLodaingId] = useState("");
+
+    const isModalOpen = isOpen && type === "members";
+    const { server } = data as { server: ServerWithMembersWithProfiles };
+
+    const onKick = async (memberId: string) => {
+        try {
+            setLodaingId(memberId);
+            const url = qs.stringifyUrl({
+                url: `/api/members/${memberId}`,
+                query: {
+                    serverId: server?.id,
+                }
+            });
+
+            const repsponse = await axios.delete(url);
+
+            router.refresh();
+            onOpen("members", {server: repsponse.data});      
+        } catch (error) {
+            console.log(error);
+        } finally {
+            setLodaingId("");
+        }        
+    }
+
+    const onRoleChange = async (memberId: string, role: MemberRole) => {
+        try {
+            setLodaingId(memberId);
+            const url = qs.stringifyUrl({
+                url: `/api/members/${memberId}`,
+                query: {
+                    serverId: server?.id,
+                }
+            });
+
+            const response = await axios.patch(url, { role });
+
+            router.refresh();
+            onOpen("members", {server: response.data});            
+        } catch (error) {
+            console.log(error);
+        } finally {
+            setLodaingId("");
+        }
+    }
+
+    return (
+        <Dialog open={isModalOpen} onOpenChange={onClose}>
+            <DialogContent className="bg-white text-black overflow-hidden">
+                <DialogHeader className="pt-8 px-6">
+                    <DialogTitle className="text-2xl text-center font-bold">
+                        Manage Members
+                    </DialogTitle>
+                    <DialogDescription className="text-center text-zinc-500">
+                        {server?.members?.length} Members
+                    </DialogDescription>
+                </DialogHeader>
+                <ScrollArea className="mt-8 max-h-[420px] pr-6">
+                    {server?.members?.map((member) => (
+                        <div key={member.id} className="flex items-center gap-x-2 mb-6">
+                            <UserAvatar src={member.profile.imageUrl}/>
+                            <div className="flex flex-col gap-y-1">
+                                <div className="text-xs font-semibold flex items-center gap-x-1">
+                                    {member.profile.name}
+                                    {roleIconMap[member.role]}
+                                </div>
+                                <p className="text-xs text-zinc-500">
+                                    {member.profile.email}
+                                </p>
+                            </div>
+                            {server.profileId !== member.profileId && loadingId !== member.id && (
+                                <div className="ml-auto">
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger>
+                                            <MoreVertical className="h-4 w-4 text-zinc-500">
+
+                                            </MoreVertical>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent side="left">
+                                            <DropdownMenuSub>
+                                                <DropdownMenuSubTrigger className="flex items-center">
+                                                    <ShieldQuestion className="w-4 h-4 mr-2"/>
+                                                    <span>Role</span>                                                   
+                                                </DropdownMenuSubTrigger>
+                                                <DropdownMenuPortal>
+                                                    <DropdownMenuSubContent>
+                                                        <DropdownMenuItem onClick={() => onRoleChange(member.id, "GUEST")}>
+                                                            <Shield className="w-4 h-4 mr-2"/>
+                                                            Guest
+                                                            {member.role === "GUEST" && (
+                                                                <Check className="w-4 h-4 ml-auto"/>
+                                                            )}
+                                                        </DropdownMenuItem>
+                                                        <DropdownMenuItem onClick={() => onRoleChange(member.id, "MODERATOR")}>
+                                                            <ShieldCheck className="w-4 h-4 mr-2"/>
+                                                            Moderator
+                                                            {member.role === "MODERATOR" && (
+                                                                <Check className="w-4 h-4 ml-auto"/>
+                                                            )}
+                                                        </DropdownMenuItem>
+                                                    </DropdownMenuSubContent>
+                                                </DropdownMenuPortal>
+                                            </DropdownMenuSub>
+                                            <DropdownMenuSeparator/>
+                                            <DropdownMenuItem onClick={() => onKick(member.id)}>
+                                                <Gavel className="h-4 w-4 mr-2"/>
+                                                Kick
+                                            </DropdownMenuItem>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                </div>
+                            )}
+                            {loadingId === member.id && (
+                                <Loader2 className="animate-spin text-zinc-500 ml-auto w-4 h-4"/>
+                            )}
+                        </div>
+                    ))}
+                </ScrollArea>
+            </DialogContent>
+        </Dialog>
+    )
+}

components/providors/modal-providor.tsx

@@ -5,6 +5,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";
+import { MembersModal } from "@/components/modals/members-modal";
 
 export const ModalProvidor = () => {
     const [isMounted, setIsMounted] = useState(false);
@@ -22,6 +23,7 @@ export const ModalProvidor = () => {
             <CreateServerModal />
             <InviteModal />
             <EditServerModal />
+            <MembersModal/>
         </>
     )
 }