import { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // services import { WorkspaceService } from "services/workspace.service"; // hooks import useToast from "hooks/use-toast"; // components import { ConfirmWorkspaceMemberRemove } from "components/workspace"; // ui import { CustomSelect, Tooltip } from "@plane/ui"; // icons import { ChevronDown, XCircle } from "lucide-react"; // constants import { ROLE } from "constants/workspace"; type Props = { member: { id: string; memberId: string; avatar: string; first_name: string; last_name: string; email: string | undefined; display_name: string; role: 5 | 10 | 15 | 20; status: boolean; member: boolean; accountCreated: boolean; }; }; // services const workspaceService = new WorkspaceService(); export const WorkspaceMembersListItem: React.FC = (props) => { const { member } = props; const [removeMemberModal, setRemoveMemberModal] = useState(false); const router = useRouter(); const { workspaceSlug } = router.query; const { setToastAlert } = useToast(); const { workspace: workspaceStore, user: userStore } = useMobxStore(); const user = userStore.workspaceMemberInfo; const isAdmin = userStore.workspaceMemberInfo?.role === 20; const handleRemoveMember = async () => { if (!workspaceSlug) return; if (member.member) await workspaceStore.removeMember(workspaceSlug.toString(), member.id).catch((err) => { const error = err?.error; setToastAlert({ type: "error", title: "Error", message: error || "Something went wrong", }); }); else await workspaceService .deleteWorkspaceInvitations(workspaceSlug.toString(), member.id) .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", }); }); }; if (!user) return null; return ( <> setRemoveMemberModal(false)} data={member} onSubmit={handleRemoveMember} />
{member.avatar && member.avatar !== "" ? ( {member.display_name ) : ( {(member.email ?? member.display_name ?? "?")[0]} )}
{member.member ? ( {member.first_name} {member.last_name} ) : (

{member.display_name || member.email}

)}

{member.email ?? member.display_name}

{!member?.status && (

Pending

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

Account not created

)} {ROLE[member.role as keyof typeof ROLE]} {member.memberId !== user.member && ( )}
} value={member.role} onChange={(value: 5 | 10 | 15 | 20 | undefined) => { if (!workspaceSlug) return; workspaceStore .updateMember(workspaceSlug.toString(), member.id, { role: value, }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "An error occurred while updating member role. Please try again.", }); }); }} disabled={ member.memberId === user.member || !member.status || (user.role !== 20 && user.role < member.role) } placement="bottom-end" > {Object.keys(ROLE).map((key) => { if (user.role !== 20 && user.role < parseInt(key)) return null; return ( <>{ROLE[parseInt(key) as keyof typeof ROLE]} ); })} {isAdmin && ( )}
); };