import React, { useState } from "react"; // next import Image from "next/image"; import type { NextPage } from "next"; import { useRouter } from "next/router"; // swr import useSWR from "swr"; // headless ui import { Menu } from "@headlessui/react"; // services import projectService from "lib/services/project.service"; // hooks import useUser from "lib/hooks/useUser"; import useToast from "lib/hooks/useToast"; // fetching keys import { PROJECT_MEMBERS, PROJECT_INVITATIONS } from "constants/fetch-keys"; // layouts import AdminLayout from "layouts/AdminLayout"; // components import SendProjectInvitationModal from "components/project/SendProjectInvitationModal"; import ConfirmProjectMemberRemove from "components/project/ConfirmProjectMemberRemove"; // ui import { Spinner, CustomListbox } from "ui"; // icons import { PlusIcon, EllipsisHorizontalIcon } from "@heroicons/react/20/solid"; import HeaderButton from "ui/HeaderButton"; import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs"; const ROLE = { 5: "Guest", 10: "Viewer", 15: "Member", 20: "Admin", }; const ProjectMembers: NextPage = () => { const [isOpen, setIsOpen] = useState(false); const [selectedMember, setSelectedMember] = useState(null); const [selectedRemoveMember, setSelectedRemoveMember] = useState(null); const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState(null); const { activeWorkspace, activeProject } = useUser(); const { setToastAlert } = useToast(); const router = useRouter(); const { projectId } = router.query; const { data: projectMembers, mutate: mutateMembers } = useSWR( activeWorkspace && projectId ? PROJECT_MEMBERS(projectId as string) : null, activeWorkspace && projectId ? () => projectService.projectMembers(activeWorkspace.slug, projectId as any) : null ); const { data: projectInvitations, mutate: mutateInvitations } = useSWR( activeWorkspace && projectId ? PROJECT_INVITATIONS : null, activeWorkspace && projectId ? () => projectService.projectInvitations(activeWorkspace.slug, projectId as any) : null ); let members = [ ...(projectMembers?.map((item: any) => ({ id: item.id, avatar: item.member?.avatar, first_name: item.member?.first_name, email: item.member?.email, role: item.role, status: true, member: true, })) || []), ...(projectInvitations?.map((item: any) => ({ id: item.id, avatar: item.avatar ?? "", first_name: item.first_name ?? item.email, email: item.email, role: item.role, status: item.accepted, member: false, })) || []), ]; return ( { setSelectedRemoveMember(null); setSelectedInviteRemoveMember(null); }} data={members.find( (item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember )} handleDelete={async () => { if (!activeWorkspace || !projectId) return; if (selectedRemoveMember) { await projectService.deleteProjectMember( activeWorkspace.slug, projectId as string, selectedRemoveMember ); mutateMembers( (prevData: any[]) => prevData?.filter((item: any) => item.id !== selectedRemoveMember), false ); } if (selectedInviteRemoveMember) { await projectService.deleteProjectInvitation( activeWorkspace.slug, projectId as string, selectedInviteRemoveMember ); mutateInvitations( (prevData: any[]) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember), false ); } setToastAlert({ type: "success", message: "Member removed successfully", title: "Success", }); }} /> {!projectMembers || !projectInvitations ? (
) : (

Invite Members

setIsOpen(true)} />
{members && members.length === 0 ? null : ( {members?.map((member: any) => ( ))}
Name Role Status Edit
{member.avatar && member.avatar !== "" ? ( {member.first_name} ) : ( {member.first_name.charAt(0)} )} {member.email ?? "No email has been added."} {selectedMember === member.id ? ( ({ value: key, display: ROLE[parseInt(key) as keyof typeof ROLE], }))} title={ROLE[member.role as keyof typeof ROLE] ?? "Select Role"} value={member.role} onChange={(value) => { if (!activeWorkspace || !projectId) return; projectService .updateProjectMember( activeWorkspace.slug, projectId as string, member.id, { role: value, } ) .then((res) => { setToastAlert({ type: "success", message: "Member role updated successfully.", title: "Success", }); mutateMembers( (prevData: any) => prevData.map((m: any) => { return m.id === selectedMember ? { ...m, ...res, role: value } : m; }), false ); setSelectedMember(null); }) .catch((err) => { console.log(err); }); }} /> ) : ( ROLE[member.role as keyof typeof ROLE] ?? "None" )} {member.status ? ( Active ) : ( Pending )}
)}
)}
); }; export default ProjectMembers;