plane/web/components/workspace/settings/members-list.tsx
Anmol Singh Bhatia b1989bae1b
feat: loading states update (#3639)
* dev: implement layout skeleton loader and helper function

* chore: implemented layout loader

* chore: settings loader added

* chore: cycle, module, view, pages, notification and projects loader added

* chore: kanban loader improvement

* chore: loader utils updated
2024-02-13 19:12:10 +05:30

55 lines
2.0 KiB
TypeScript

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 <MembersSettingsLoader />;
// derived values
const searchedMemberIds = getSearchedWorkspaceMemberIds(searchQuery);
const searchedInvitationsIds = getSearchedWorkspaceInvitationIds(searchQuery);
return (
<div className="divide-y-[0.5px] divide-custom-border-100">
{searchedInvitationsIds && searchedInvitationsIds.length > 0
? searchedInvitationsIds?.map((invitationId) => (
<WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
))
: null}
{searchedMemberIds && searchedMemberIds.length > 0
? searchedMemberIds?.map((memberId) => <WorkspaceMembersListItem key={memberId} memberId={memberId} />)
: null}
{searchedInvitationsIds?.length === 0 && searchedMemberIds?.length === 0 && (
<h4 className="mt-16 text-center text-sm text-custom-text-400">No matching members</h4>
)}
</div>
);
});