import React, { useState } from "react"; // next import type { NextPage } from "next"; import Image from "next/image"; // swr import useSWR from "swr"; // headless ui import { Menu } from "@headlessui/react"; // hooks import useUser from "lib/hooks/useUser"; // services import workspaceService from "lib/services/workspace.service"; // constants import { WORKSPACE_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys"; // hoc import withAuthWrapper from "lib/hoc/withAuthWrapper"; // layouts import AdminLayout from "layouts/AdminLayout"; // components import SendWorkspaceInvitationModal from "components/workspace/SendWorkspaceInvitationModal"; // 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"; // types const ROLE = { 5: "Guest", 10: "Viewer", 15: "Member", 20: "Admin", }; const WorkspaceInvite: NextPage = () => { const [isOpen, setIsOpen] = useState(false); const { activeWorkspace } = useUser(); const { data: workspaceMembers, mutate: mutateMembers } = useSWR( activeWorkspace ? WORKSPACE_MEMBERS : 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 ( {!workspaceMembers || !workspaceInvitations ? (
) : (

Invite Members

setIsOpen(true)} />
{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."} {ROLE[member.role as keyof typeof ROLE] ?? "None"} {member?.member ? ( Accepted ) : member.status ? ( Accepted ) : ( Pending )}
)}
)}
); }; export default withAuthWrapper(WorkspaceInvite);