chore(clerk-js): Eliminate the usage of memberhipList (#1744)

* chore(shared): Update jsdocs for useOrganizations * chore(clerk-js): Eliminate the usage of memberhipList * chore(shared,clerk-js): Add changeset * chore(shared): Update jsdocs with code formatting
clerk · Sep 19, 2023 · 906d1d2 · 906d1d2
1 parent 01b024c
commit 906d1d2
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 40 deletions.
diff --git a/.changeset/sharp-ligers-peel.md b/.changeset/sharp-ligers-peel.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
@@ -2,27 +2,27 @@ import type { MembershipRole, OrganizationMembershipResource } from '@clerk/type
 
 import { useCoreOrganization, useCoreUser } from '../../contexts';
 import { Badge, localizationKeys, Td, Text } from '../../customizables';
-import { ThreeDotsMenu, useCardState, usePagination, UserPreview } from '../../elements';
+import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
 import { handleError, roleLocalizationKey } from '../../utils';
 import { DataTable, RoleSelect, RowContainer } from './MemberListTable';
 
-const ITEMS_PER_PAGE = 10;
-
 export const ActiveMembersList = () => {
   const card = useCardState();
-  const { page, changePage } = usePagination({ defaultPage: 1 });
   const {
     organization,
-    membershipList,
     membership: currentUserMembership,
-    memberships: adminMembers,
+    memberships,
     ...rest
   } = useCoreOrganization({
-    membershipList: { offset: (page - 1) * ITEMS_PER_PAGE, limit: ITEMS_PER_PAGE },
+    memberships: true,
+  });
+
+  const { memberships: adminMembers } = useCoreOrganization({
     memberships: {
       role: ['admin'],
     },
   });
+
   const isAdmin = currentUserMembership?.role === 'admin';
 
   const mutateSwrState = () => {
@@ -64,19 +64,19 @@ export const ActiveMembersList = () => {
 
   return (
     <DataTable
-      page={page}
-      onPageChange={changePage}
-      itemCount={organization.membersCount}
-      itemsPerPage={ITEMS_PER_PAGE}
-      isLoading={!membershipList}
+      page={memberships?.page || 1}
+      onPageChange={n => memberships?.fetchPage?.(n)}
+      itemCount={memberships?.count || 0}
+      pageCount={memberships?.pageCount || 0}
+      isLoading={memberships?.isLoading}
       emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.detailsTitle__emptyRow')}
       headers={[
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__joined'),
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__role'),
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),
       ]}
-      rows={(membershipList || []).map(m => (
+      rows={(memberships?.data || []).map(m => (
         <MemberRow
           key={m.id}
           membership={m}

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
@@ -14,14 +14,32 @@ type MembersListTableProps = {
   page: number;
   onPageChange: (page: number) => void;
   itemCount: number;
-  itemsPerPage: number;
   emptyStateLocalizationKey: LocalizationKey;
-};
+} & (
+  | {
+      itemsPerPage?: never;
+      pageCount: number;
+    }
+  | {
+      itemsPerPage: number;
+      pageCount?: never;
+    }
+);
 
 export const DataTable = (props: MembersListTableProps) => {
-  const { headers, page, onPageChange, rows, isLoading, itemCount, itemsPerPage, emptyStateLocalizationKey } = props;
+  const {
+    headers,
+    page,
+    onPageChange,
+    rows,
+    isLoading,
+    itemCount,
+    itemsPerPage,
+    pageCount: pageCountProp,
+    emptyStateLocalizationKey,
+  } = props;
 
-  const pageCount = rows.length !== 0 ? Math.ceil(itemCount / itemsPerPage) : 1;
+  const pageCount = rows.length !== 0 ? pageCountProp ?? Math.ceil(itemCount / itemsPerPage) : 1;
   const startRowIndex = (page - 1) * rows.length;
   const endRowIndex = Math.min(page * rows.length);
 

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx
@@ -95,9 +95,11 @@ const OrganizationDangerSection = () => {
   const {
     organization,
     membership,
-    membershipList: adminMembers,
+    memberships: adminMembers,
   } = useCoreOrganization({
-    membershipList: { role: ['admin'] },
+    memberships: {
+      role: ['admin'],
+    },
   });
   const { navigate } = useRouter();
 
@@ -106,7 +108,7 @@ const OrganizationDangerSection = () => {
   }
 
   const adminDeleteEnabled = organization.adminDeleteEnabled;
-  const hasMoreThanOneAdmin = (adminMembers?.length || 0) > 1;
+  const hasMoreThanOneAdmin = (adminMembers?.count || 0) > 1;
   const isAdmin = membership.role === 'admin';
 
   return (

diff --git a/...ges/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx b/...ges/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
@@ -131,12 +131,17 @@ describe('OrganizationMembers', () => {
 
     fixtures.clerk.organization?.getMemberships.mockReturnValueOnce(
       Promise.resolve({
-        data: [],
+        data: membersList,
         total_count: 2,
       }),
     );
 
-    fixtures.clerk.organization?.getMemberships.mockReturnValueOnce(Promise.resolve(membersList));
+    fixtures.clerk.organization?.getMemberships.mockReturnValueOnce(
+      Promise.resolve({
+        data: [],
+        total_count: 2,
+      }),
+    );
 
     const { queryByText, queryAllByRole } = render(<OrganizationMembers />, { wrapper });
 
@@ -183,15 +188,17 @@ describe('OrganizationMembers', () => {
       });
     });
 
+    fixtures.clerk.organization?.getMemberships.mockReturnValueOnce(
+      Promise.resolve({ data: membersList, total_count: 0 }),
+    );
+
     fixtures.clerk.organization?.getMemberships.mockReturnValueOnce(
       Promise.resolve({
         data: [],
         total_count: 0,
       }),
     );
 
-    fixtures.clerk.organization?.getMemberships.mockReturnValueOnce(Promise.resolve(membersList));
-
     const { queryByRole } = render(<OrganizationMembers />, { wrapper });
 
     await waitFor(() => {
@@ -327,7 +334,12 @@ describe('OrganizationMembers', () => {
       });
     });
 
-    fixtures.clerk.organization?.getMemberships.mockReturnValue(Promise.resolve(membersList));
+    fixtures.clerk.organization?.getMemberships.mockReturnValue(
+      Promise.resolve({
+        data: membersList,
+        total_count: 2,
+      }),
+    );
     const { findByText } = render(<OrganizationMembers />, { wrapper });
     await waitFor(() => expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled());
     expect(await findByText('You')).toBeDefined();

diff --git a/...es/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationSettings.test.tsx b/...es/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationSettings.test.tsx
@@ -20,7 +20,7 @@ describe('OrganizationSettings', () => {
       f.withUser({ email_addresses: ['[email protected]'], organization_memberships: [{ name: 'Org1', role: 'admin' }] });
     });
 
-    fixtures.clerk.organization?.getMemberships.mockReturnValue(Promise.resolve(adminsList));
+    fixtures.clerk.organization?.getMemberships.mockReturnValue(Promise.resolve({ data: adminsList, total_count: 1 }));
     fixtures.clerk.organization?.getDomains.mockReturnValue(
       Promise.resolve({
         data: domainList,
@@ -50,7 +50,7 @@ describe('OrganizationSettings', () => {
       f.withUser({ email_addresses: ['[email protected]'], organization_memberships: [{ name: 'Org1', role: 'admin' }] });
     });
 
-    fixtures.clerk.organization?.getMemberships.mockReturnValue(Promise.resolve(adminsList));
+    fixtures.clerk.organization?.getMemberships.mockReturnValue(Promise.resolve({ data: adminsList, total_count: 2 }));
     fixtures.clerk.organization?.getDomains.mockReturnValue(
       Promise.resolve({
         data: domainList,
@@ -129,7 +129,9 @@ describe('OrganizationSettings', () => {
         });
       });
 
-      fixtures.clerk.organization?.getMemberships.mockReturnValue(Promise.resolve(adminsList));
+      fixtures.clerk.organization?.getMemberships.mockReturnValue(
+        Promise.resolve({ data: adminsList, total_count: 2 }),
+      );
       const { getByText } = render(<OrganizationSettings />, { wrapper });
       await waitFor(() => {
         expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();

diff --git a/packages/shared/src/hooks/useOrganization.tsx b/packages/shared/src/hooks/useOrganization.tsx
@@ -23,7 +23,7 @@ import { usePagesOrInfinite, useWithSafeValues } from './usePagesOrInfinite';
 type UseOrganizationParams = {
   invitationList?: GetPendingInvitationsParams;
   /**
-   * @deprecated Use members instead
+   * @deprecated Use `memberships` instead
    */
   membershipList?: GetMembershipsParams;
   domains?:
@@ -52,7 +52,7 @@ type UseOrganizationReturn =
       organization: undefined;
       invitationList: undefined;
       /**
-       * @deprecated Use members instead
+       * @deprecated Use `memberships` instead
        */
       membershipList: undefined;
       membership: undefined;
@@ -65,7 +65,7 @@ type UseOrganizationReturn =
       organization: OrganizationResource;
       invitationList: undefined;
       /**
-       * @deprecated Use members instead
+       * @deprecated Use `memberships` instead
        */
       membershipList: undefined;
       membership: undefined;
@@ -78,7 +78,7 @@ type UseOrganizationReturn =
       organization: OrganizationResource | null;
       invitationList: OrganizationInvitationResource[] | null | undefined;
       /**
-       * @deprecated Use members instead
+       * @deprecated Use `memberships` instead
        */
       membershipList: OrganizationMembershipResource[] | null | undefined;
       membership: OrganizationMembershipResource | null | undefined;

diff --git a/packages/shared/src/hooks/useOrganizations.tsx b/packages/shared/src/hooks/useOrganizations.tsx
@@ -8,39 +8,39 @@ type UseOrganizationsReturn =
 
       /**
        * @deprecated Use `createOrganization` from `useOrganizationList`
-       * Example const {createOrganization} = useOrganizationList()
+       * Example: `const {createOrganization} = useOrganizationList()`
        */
       createOrganization: undefined;
 
       /**
-       * @deprecated Use `membershipList` from `useOrganization`
-       * Example const {membershipList} = useOrganization()
+       * @deprecated Use `memberships` from `useOrganization`
+       * Example: `const {memberships} = useOrganization()`
        */
       getOrganizationMemberships: undefined;
 
       /**
        * @deprecated Use `getOrganization` from `useClerk`
-       * Example const {getOrganization} = useClerk()
+       * Example: `const {getOrganization} = useClerk()`
        */
       getOrganization: undefined;
     }
   | {
       isLoaded: true;
       /**
        * @deprecated Use `createOrganization` from `useOrganizationList`
-       * Example const {createOrganization} = useOrganizationList()
+       * Example: `const {createOrganization} = useOrganizationList()`
        */
       createOrganization: (params: CreateOrganizationParams) => Promise<OrganizationResource>;
 
       /**
-       * @deprecated Use `membershipList` from `useOrganization`
-       * Example const {membershipList} = useOrganization()
+       * @deprecated Use `memberships` from `useOrganization`
+       * Example: `const {memberships} = useOrganization()`
        */
       getOrganizationMemberships: () => Promise<OrganizationMembershipResource[]>;
 
       /**
        * @deprecated Use `getOrganization` from `useClerk`
-       * Example const {getOrganization} = useClerk()
+       * Example: `const {getOrganization} = useClerk()`
        */
       getOrganization: (organizationId: string) => Promise<OrganizationResource | undefined>;
     };