added members modal and route
This commit is contained in:
parent
ce96a85e55
commit
835b9a23e2
128
app/api/members/[memberId]/route.ts
Normal file
128
app/api/members/[memberId]/route.ts
Normal file
@ -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});
|
||||
}
|
||||
}
|
||||
164
components/modals/members-modal.tsx
Normal file
164
components/modals/members-modal.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user