import { FC } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import useSWR from "swr"; // hooks import { useMember } from "hooks/store"; // components import { WorkspaceInvitationsListItem, WorkspaceMembersListItem } from "components/workspace"; // ui import { MembersSettingsLoader } from "components/ui"; export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer((props) => { const { searchQuery } = props; // router const router = useRouter(); const { workspaceSlug } = router.query; // store hooks const { workspace: { fetchWorkspaceMemberInvitations, workspaceMemberIds, getSearchedWorkspaceMemberIds, workspaceMemberInvitationIds, getSearchedWorkspaceInvitationIds, }, } = useMember(); // fetching workspace invitations useSWR( workspaceSlug ? `WORKSPACE_INVITATIONS_${workspaceSlug.toString()}` : null, workspaceSlug ? () => fetchWorkspaceMemberInvitations(workspaceSlug.toString()) : null ); if (!workspaceMemberIds && !workspaceMemberInvitationIds) return ; // derived values const searchedMemberIds = getSearchedWorkspaceMemberIds(searchQuery); const searchedInvitationsIds = getSearchedWorkspaceInvitationIds(searchQuery); return (
{searchedInvitationsIds && searchedInvitationsIds.length > 0 ? searchedInvitationsIds?.map((invitationId) => ( )) : null} {searchedMemberIds && searchedMemberIds.length > 0 ? searchedMemberIds?.map((memberId) => ) : null} {searchedInvitationsIds?.length === 0 && searchedMemberIds?.length === 0 && (

No matching members

)}
); });