// TODO: remove this page import React, { useState } from "react"; import type { NextPage } from "next"; import Image from "next/image"; import { useRouter } from "next/router"; import useSWR from "swr"; import { Menu } from "@headlessui/react"; // hooks import useUser from "lib/hooks/useUser"; import useToast from "lib/hooks/useToast"; // services import workspaceService from "lib/services/workspace.service"; // constants import { ROLE } from "constants/"; import { WORKSPACE_DETAILS, WORKSPACE_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys"; // hoc import withAuthWrapper from "lib/hoc/withAuthWrapper"; // layouts import AppLayout from "layouts/app-layout"; // components import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal"; import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove"; // ui import { Spinner, CustomListbox, BreadcrumbItem, Breadcrumbs, HeaderButton } from "ui"; // icons import { PlusIcon, EllipsisHorizontalIcon } from "@heroicons/react/20/solid"; const WorkspaceInvite: NextPage = () => { const [isOpen, setIsOpen] = useState(false); const [selectedMember, setSelectedMember] = useState(null); const [selectedRemoveMember, setSelectedRemoveMember] = useState(null); const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState(null); const { query: { workspaceSlug }, } = useRouter(); 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( activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null, activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null ); const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR( activeWorkspace ? WORKSPACE_INVITATIONS : null, activeWorkspace ? () => workspaceService.workspaceInvitations(activeWorkspace.slug) : null ); const members = [ ...(workspaceMembers?.map((item) => ({ id: item.id, avatar: item.member?.avatar, first_name: item.member?.first_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, email: item.email, role: item.role, status: item.accepted, member: false, })) || []), ]; return ( } right={ setIsOpen(true)} />} > { setSelectedRemoveMember(null); setSelectedInviteRemoveMember(null); }} data={ selectedRemoveMember ? members.find((item) => item.id === selectedRemoveMember) : selectedInviteRemoveMember ? members.find((item) => item.id === selectedInviteRemoveMember) : null } handleDelete={async () => { if (!activeWorkspace) return; if (selectedRemoveMember) { await workspaceService.deleteWorkspaceMember( activeWorkspace.slug, selectedRemoveMember ); mutateMembers( (prevData) => prevData?.filter((item) => item.id !== selectedRemoveMember), false ); } if (selectedInviteRemoveMember) { await workspaceService.deleteWorkspaceInvitations( activeWorkspace.slug, selectedInviteRemoveMember ); mutateInvitations( (prevData) => prevData?.filter((item) => item.id !== selectedInviteRemoveMember), false ); } setToastAlert({ type: "success", title: "Success", message: "Member removed successfully", }); setSelectedRemoveMember(null); setSelectedInviteRemoveMember(null); }} /> {!workspaceMembers || !workspaceInvitations ? (
) : (
{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 ? ( ({ display: ROLE[parseInt(key) as keyof typeof ROLE], value: key, }))} title={ROLE[member.role as keyof typeof ROLE] ?? "None"} value={member.role} onChange={(value) => { workspaceService .updateWorkspaceMember(activeWorkspace?.slug as string, member.id, { role: value, }) .then(() => { mutateMembers( (prevData) => prevData?.map((m) => { return m.id === selectedMember ? { ...m, role: value } : m; }), false ); setToastAlert({ title: "Success", type: "success", message: "Member role updated successfully.", }); setSelectedMember(null); }) .catch(() => { setToastAlert({ title: "Error", type: "error", message: "An error occurred while updating member role.", }); }); }} /> ) : ( ROLE[member.role as keyof typeof ROLE] ?? "None" )} {member.member ? ( Active ) : ( Pending )}
)}
)}
); }; export default withAuthWrapper(WorkspaceInvite);