import React, { useState } from "react"; // next import { useRouter } from "next/router"; import type { NextPage } from "next"; // 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"; // fetching keys import { PROJECT_MEMBERS, PROJECT_INVITATIONS } from "constants/fetch-keys"; // layouts import AdminLayout from "layouts/AdminLayout"; // components import SendProjectInvitationModal from "components/project/SendProjectInvitationModal"; // ui import { Spinner, Button } 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 { activeWorkspace, activeProject } = useUser(); 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, email: item.member?.email, role: item.role, status: true, member: true, })) || []), ...(projectInvitations?.map((item: any) => ({ id: item.id, email: item.email, role: item.role, status: item.accepted, member: false, })) || []), ]; return ( {!projectMembers || !projectInvitations ? (
) : (

Invite Members

setIsOpen(true)} />
{members && members.length === 0 ? null : ( {members?.map((member: any) => ( ))}
Name Role Status Edit
{member.email ?? "No email has been added."} {ROLE[member.role as keyof typeof ROLE] ?? "None"} {member?.member ? ( "Member" ) : member.status ? ( Accepted ) : ( Pending )}
)}
)}
); }; export default ProjectMembers;