import { useState } from "react"; import Image from "next/image"; import { useRouter } from "next/router"; import useSWR from "swr"; // hooks import useToast from "hooks/use-toast"; // services import workspaceService from "services/workspace.service"; // layouts import { WorkspaceAuthorizationLayout } from "layouts/auth-layout"; // components import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove"; import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal"; // ui import { CustomMenu, CustomSelect, Loader } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; // types import type { NextPage } from "next"; // fetch-keys import { WORKSPACE_DETAILS, WORKSPACE_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys"; // constants import { ROLE } from "constants/workspace"; const MembersSettings: NextPage = () => { const [selectedRemoveMember, setSelectedRemoveMember] = useState(null); const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState(null); const [inviteModal, setInviteModal] = useState(false); const router = useRouter(); const { workspaceSlug } = router.query; const { setToastAlert } = useToast(); const { data: activeWorkspace } = useSWR( workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null) ); const { data: workspaceMembers, mutate: mutateMembers } = useSWR( workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null, workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null ); const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR( workspaceSlug ? WORKSPACE_INVITATIONS : null, workspaceSlug ? () => workspaceService.workspaceInvitations(workspaceSlug as string) : null ); const members = [ ...(workspaceMembers?.map((item) => ({ id: item.id, avatar: item.member?.avatar, first_name: item.member?.first_name, last_name: item.member?.last_name, email: item.member?.email, role: item.role, status: true, member: true, })) || []), ...(workspaceInvitations?.map((item) => ({ id: item.id, avatar: item.avatar ?? "", first_name: item.first_name ?? item.email, last_name: item.last_name ?? "", email: item.email, role: item.role, status: item.accepted, member: false, })) || []), ]; return ( <> { setSelectedRemoveMember(null); setSelectedInviteRemoveMember(null); }} data={ selectedRemoveMember ? members.find((item) => item.id === selectedRemoveMember) : selectedInviteRemoveMember ? members.find((item) => item.id === selectedInviteRemoveMember) : null } handleDelete={async () => { if (!workspaceSlug) return; if (selectedRemoveMember) { await workspaceService.deleteWorkspaceMember( workspaceSlug as string, selectedRemoveMember ); mutateMembers( (prevData) => prevData?.filter((item) => item.id !== selectedRemoveMember), false ); } if (selectedInviteRemoveMember) { await workspaceService.deleteWorkspaceInvitations( workspaceSlug as string, selectedInviteRemoveMember ); mutateInvitations( (prevData) => prevData?.filter((item) => item.id !== selectedInviteRemoveMember), false ); } setToastAlert({ type: "success", title: "Success", message: "Member removed successfully", }); setSelectedRemoveMember(null); setSelectedInviteRemoveMember(null); }} /> } >

Members

{!workspaceMembers || !workspaceInvitations ? ( ) : (
{members.length > 0 ? members.map((member) => (
{member.avatar && member.avatar !== "" ? ( {member.first_name} ) : member.first_name !== "" ? ( member.first_name.charAt(0) ) : ( member.email.charAt(0) )}

{member.first_name} {member.last_name}

{member.email}

{!member?.status && (

Pending

)}
{ workspaceService .updateWorkspaceMember(activeWorkspace?.slug as string, member.id, { role: value, }) .then(() => { mutateMembers( (prevData) => prevData?.map((m) => m.id === member.id ? { ...m, role: value } : m ), false ); setToastAlert({ title: "Success", type: "success", message: "Member role updated successfully.", }); }) .catch(() => { setToastAlert({ title: "Error", type: "error", message: "An error occurred while updating member role.", }); }); }} > {Object.keys(ROLE).map((key) => ( <>{ROLE[parseInt(key) as keyof typeof ROLE]} ))} { if (member.member) { setSelectedRemoveMember(member.id); } else { setSelectedInviteRemoveMember(member.id); } }} > Remove member
)) : null}
)}
); }; export default MembersSettings;