[WEB-2022] fix: handled null state on members page (#5226)

* fix: handled null state on members page

* fix: skeleton loader added
This commit is contained in:
Akshita Goyal 2024-07-25 16:28:03 +05:30 committed by GitHub
parent 1c155f6cbe
commit 43103a1445
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 23 additions and 5 deletions

View file

@ -1,11 +1,13 @@
"use client";
import { FC } from "react";
import { isEmpty } from "lodash";
import { observer } from "mobx-react";
// ui
import { IWorkspaceMember } from "@plane/types";
import { TOAST_TYPE, Table, setToast } from "@plane/ui";
// components
import { MembersLayoutLoader } from "@/components/ui/loader/layouts/members-layout-loader";
import { ConfirmWorkspaceMemberRemove } from "@/components/workspace";
// constants
import { WORKSPACE_MEMBER_LEAVE } from "@/constants/event-tracker";
@ -79,8 +81,10 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
// 2. only admin or member can change role
// 3. user cannot change role of higher role
if (isEmpty(columns)) return <MembersLayoutLoader />;
return (
<>
<div className="border-t border-custom-border-100">
{removeMemberModal && (
<ConfirmWorkspaceMemberRemove
isOpen={removeMemberModal.member.id.length > 0}
@ -93,7 +97,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
/>
)}
<Table
columns={columns}
columns={columns ?? []}
data={(memberDetails?.filter((member): member is IWorkspaceMember => member !== null) ?? []) as any}
keyExtractor={(rowData) => rowData?.member.id ?? ""}
tHeadClassName="border-b border-custom-border-100"
@ -102,6 +106,6 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
tBodyTrClassName="divide-x-0"
tHeadTrClassName="divide-x-0"
/>
</>
</div>
);
});

View file

@ -13,7 +13,7 @@ import { useMember } from "@/hooks/store";
export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }> = observer((props) => {
const { searchQuery, isAdmin } = props;
const [showPendingInvites, setShowPendingInvites] = useState<boolean>(false);
const [showPendingInvites, setShowPendingInvites] = useState<boolean>(true);
// router
const { workspaceSlug } = useParams();