import { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import workspaceService from "services/workspace.service"; // hooks import useToast from "hooks/use-toast"; import useUser from "hooks/use-user"; import useWorkspaceMembers from "hooks/use-workspace-members"; // 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"; import { SettingsSidebar } from "components/project"; // ui import { CustomMenu, CustomSelect, Icon, Loader, PrimaryButton } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // icons import { XMarkIcon } from "components/icons"; // types import type { NextPage } from "next"; // fetch-keys import { WORKSPACE_DETAILS, WORKSPACE_INVITATION_WITH_EMAIL, WORKSPACE_MEMBERS_WITH_EMAIL, } from "constants/fetch-keys"; // constants import { ROLE } from "constants/workspace"; // helper import { truncateText } from "helpers/string.helper"; 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 { user } = useUser(); const { isOwner } = useWorkspaceMembers(workspaceSlug?.toString(), Boolean(workspaceSlug)); const { data: activeWorkspace } = useSWR( workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug.toString()) : null, () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug.toString()) : null) ); const { data: workspaceMembers, mutate: mutateMembers } = useSWR( workspaceSlug ? WORKSPACE_MEMBERS_WITH_EMAIL(workspaceSlug.toString()) : null, workspaceSlug ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug.toString()) : null ); const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR( workspaceSlug ? WORKSPACE_INVITATION_WITH_EMAIL(workspaceSlug.toString()) : null, workspaceSlug ? () => workspaceService.workspaceInvitationsWithEmail(workspaceSlug.toString()) : null ); const members = [ ...(workspaceInvitations?.map((item) => ({ id: item.id, memberId: item.id, avatar: "", first_name: item.email, last_name: "", email: item.email, display_name: item.email, role: item.role, status: item.accepted, member: false, accountCreated: item?.accepted ? false : true, })) || []), ...(workspaceMembers?.map((item) => ({ id: item.id, memberId: item.member?.id, avatar: item.member?.avatar, first_name: item.member?.first_name, last_name: item.member?.last_name, email: item.member?.email, display_name: item.member?.display_name, role: item.role, status: true, member: true, accountCreated: true, })) || []), ]; const currentUser = workspaceMembers?.find((item) => item.member?.id === user?.id); const handleInviteModalSuccess = () => { mutateInvitations(); }; 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) { workspaceService .deleteWorkspaceMember(workspaceSlug as string, selectedRemoveMember) .catch((err) => { const error = err?.error; setToastAlert({ type: "error", title: "Error", message: error || "Something went wrong", }); }) .finally(() => { mutateMembers((prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember) ); }); } if (selectedInviteRemoveMember) { mutateInvitations( (prevData: any) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember), false ); workspaceService .deleteWorkspaceInvitations(workspaceSlug as string, selectedInviteRemoveMember) .then(() => { setToastAlert({ type: "success", title: "Success", message: "Member removed successfully", }); }) .catch((err) => { const error = err?.error; setToastAlert({ type: "error", title: "Error", message: error || "Something went wrong", }); }) .finally(() => { mutateInvitations(); }); } setSelectedRemoveMember(null); setSelectedInviteRemoveMember(null); }} />

Members

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

{member.display_name || member.email}

)} {isOwner && (

{member.email}

)}
{!member?.status && (

Pending

)} {member?.status && !member?.accountCreated && (

Account not created

)} {ROLE[member.role as keyof typeof ROLE]} {member.memberId !== user?.id && ( )} } value={member.role} onChange={(value: 5 | 10 | 15 | 20 | undefined) => { if (!workspaceSlug) return; mutateMembers( (prevData: any) => prevData?.map((m: any) => m.id === member.id ? { ...m, role: value } : m ), false ); workspaceService .updateWorkspaceMember(workspaceSlug?.toString(), member.id, { role: value, }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "An error occurred while updating member role. Please try again.", }); }); }} position="right" disabled={ member.memberId === currentUser?.member.id || !member.status || (currentUser && currentUser.role !== 20 && currentUser.role < member.role) } > {Object.keys(ROLE).map((key) => { if ( currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key) ) return null; return ( <>{ROLE[parseInt(key) as keyof typeof ROLE]} ); })} { if (member.member) { setSelectedRemoveMember(member.id); } else { setSelectedInviteRemoveMember(member.id); } }} > {" "} {user?.id === member.memberId ? "Leave" : "Remove member"}
)) : null}
)}
); }; export default MembersSettings;