feat(shared): Introduce invitations and deprecate invitationList from useOrganization

Author: panteliselef

.changeset/fast-books-kiss.md

@@ -0,0 +1,6 @@
+---
+'@clerk/shared': patch
+---
+
+Introduce `invitations` in useOrganization, which enables to fetch invitations as paginated lists.
+Deprecate `invitationList` in favor of the above introduction.

packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx

@@ -2,53 +2,44 @@ import type { OrganizationInvitationResource } from '@clerk/types';
 
 import { useCoreOrganization } from '../../contexts';
 import { 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, RowContainer } from './MemberListTable';
 
-const ITEMS_PER_PAGE = 10;
-
 export const InvitedMembersList = () => {
   const card = useCardState();
-  const { page, changePage } = usePagination();
-  const { organization, invitationList, ...rest } = useCoreOrganization({
-    invitationList: { offset: (page - 1) * ITEMS_PER_PAGE, limit: ITEMS_PER_PAGE },
+  const { organization, invitations } = useCoreOrganization({
+    invitations: true,
   });
 
-  const mutateSwrState = () => {
-    const unstable__mutate = (rest as any).unstable__mutate;
-    if (unstable__mutate && typeof unstable__mutate === 'function') {
-      unstable__mutate();
-    }
-  };
-
   if (!organization) {
     return null;
   }
 
   const revoke = (invitation: OrganizationInvitationResource) => () => {
     return card
-      .runAsync(invitation.revoke)
-      .then(mutateSwrState)
-      .then(() => changePage(1))
+      .runAsync(async () => {
+        await invitation.revoke();
+        await (invitations as any).unstable__mutate?.();
+      })
       .catch(err => handleError(err, [], card.setError));
   };
 
   return (
     <DataTable
-      page={page}
-      onPageChange={changePage}
-      itemCount={organization.pendingInvitationsCount}
-      itemsPerPage={ITEMS_PER_PAGE}
-      isLoading={!invitationList}
+      page={invitations?.page || 1}
+      onPageChange={invitations?.fetchPage || (() => null)}
+      itemCount={invitations?.count || 0}
+      pageCount={invitations?.pageCount || 0}
+      isLoading={invitations?.isLoading}
       emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.invitationsTab.table__emptyRow')}
       headers={[
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
         localizationKeys('organizationProfile.membersPage.invitedMembersTab.tableHeader__invited'),
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__role'),
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),
       ]}
-      rows={(invitationList || []).map(i => (
+      rows={(invitations?.data || []).map(i => (
         <InvitationRow
           key={i.id}
           invitation={i}

packages/shared/src/hooks/useOrganization.tsx

@@ -1,6 +1,7 @@
 import type {
   ClerkPaginationParams,
   GetDomainsParams,
+  GetInvitationsParams,
   GetMembershipRequestParams,
   GetMembershipsParams,
   GetPendingInvitationsParams,
@@ -14,6 +15,7 @@ import type { ClerkPaginatedResponse } from '@clerk/types';
 import type { GetMembersParams } from '@clerk/types';
 
 import { disableSWRDevtools } from './clerk-swr';
+
 disableSWRDevtools();
 import { useSWR } from './clerk-swr';
 import { useClerkInstanceContext, useOrganizationContext, useSessionContext } from './contexts';
@@ -22,7 +24,7 @@ import { usePagesOrInfinite, useWithSafeValues } from './usePagesOrInfinite';
 
 type UseOrganizationParams = {
   /**
-   * @deprecated Use invitations instead
+   * @deprecated Use `invitations` instead
    */
   invitationList?: GetPendingInvitationsParams;
   /**
@@ -50,7 +52,7 @@ type UseOrganizationParams = {
 
   invitations?:
     | true
-    | (GetMembersParams & {
+    | (GetInvitationsParams & {
         infinite?: boolean;
         keepPreviousData?: boolean;
       });
@@ -60,6 +62,9 @@ type UseOrganizationReturn =
   | {
       isLoaded: false;
       organization: undefined;
+      /**
+       * @deprecated Use `invitations` instead
+       */
       invitationList: undefined;
       /**
        * @deprecated Use `memberships` instead
@@ -69,10 +74,14 @@ type UseOrganizationReturn =
       domains: PaginatedResourcesWithDefault<OrganizationDomainResource>;
       membershipRequests: PaginatedResourcesWithDefault<OrganizationMembershipRequestResource>;
       memberships: PaginatedResourcesWithDefault<OrganizationMembershipResource>;
+      invitations: PaginatedResourcesWithDefault<OrganizationInvitationResource>;
     }
   | {
       isLoaded: true;
       organization: OrganizationResource;
+      /**
+       * @deprecated Use `invitations` instead
+       */
       invitationList: undefined;
       /**
        * @deprecated Use `memberships` instead
@@ -82,10 +91,14 @@ type UseOrganizationReturn =
       domains: PaginatedResourcesWithDefault<OrganizationDomainResource>;
       membershipRequests: PaginatedResourcesWithDefault<OrganizationMembershipRequestResource>;
       memberships: PaginatedResourcesWithDefault<OrganizationMembershipResource>;
+      invitations: PaginatedResourcesWithDefault<OrganizationInvitationResource>;
     }
   | {
       isLoaded: boolean;
       organization: OrganizationResource | null;
+      /**
+       * @deprecated Use `invitations` instead
+       */
       invitationList: OrganizationInvitationResource[] | null | undefined;
       /**
        * @deprecated Use `memberships` instead
@@ -95,6 +108,7 @@ type UseOrganizationReturn =
       domains: PaginatedResources<OrganizationDomainResource> | null;
       membershipRequests: PaginatedResources<OrganizationMembershipRequestResource> | null;
       memberships: PaginatedResources<OrganizationMembershipResource> | null;
+      invitations: PaginatedResources<OrganizationInvitationResource> | null;
     };
 
 type UseOrganization = (params?: UseOrganizationParams) => UseOrganizationReturn;
@@ -121,6 +135,7 @@ export const useOrganization: UseOrganization = params => {
     domains: domainListParams,
     membershipRequests: membershipRequestsListParams,
     memberships: membersListParams,
+    invitations: invitationsListParams,
   } = params || {};
   const { organization, lastOrganizationMember, lastOrganizationInvitation } = useOrganizationContext();
   const session = useSessionContext();
@@ -149,6 +164,14 @@ export const useOrganization: UseOrganization = params => {
     infinite: false,
   });
 
+  const invitationsSafeValues = useWithSafeValues(invitationsListParams, {
+    initialPage: 1,
+    pageSize: 10,
+    status: ['pending'],
+    keepPreviousData: false,
+    infinite: false,
+  });
+
   const clerk = useClerkInstanceContext();
 
   const shouldFetch = !!(clerk.loaded && session && organization);
@@ -180,6 +203,15 @@ export const useOrganization: UseOrganization = params => {
           role: membersSafeValues.role,
         };
 
+  const invitationsParams =
+    typeof invitationsListParams === 'undefined'
+      ? undefined
+      : {
+          initialPage: invitationsSafeValues.initialPage,
+          pageSize: invitationsSafeValues.pageSize,
+          status: invitationsSafeValues.status,
+        };
+
   const domains = usePagesOrInfinite<GetDomainsParams, ClerkPaginatedResponse<OrganizationDomainResource>>(
     {
       ...domainParams,
@@ -232,6 +264,22 @@ export const useOrganization: UseOrganization = params => {
     },
   );
 
+  const invitations = usePagesOrInfinite<GetInvitationsParams, ClerkPaginatedResponse<OrganizationInvitationResource>>(
+    {
+      ...invitationsParams,
+    },
+    organization?.getInvitations,
+    {
+      keepPreviousData: membersSafeValues.keepPreviousData,
+      infinite: membersSafeValues.infinite,
+      enabled: !!invitationsParams,
+    },
+    {
+      type: 'invitations',
+      organizationId: organization?.id,
+    },
+  );
+
   // Some gymnastics to adhere to the rules of hooks
   // We need to make sure useSWR is called on every render
   const pendingInvitations = !clerk.loaded
@@ -274,6 +322,7 @@ export const useOrganization: UseOrganization = params => {
       domains: undefinedPaginatedResource,
       membershipRequests: undefinedPaginatedResource,
       memberships: undefinedPaginatedResource,
+      invitations: undefinedPaginatedResource,
     };
   }
 
@@ -287,6 +336,7 @@ export const useOrganization: UseOrganization = params => {
       domains: null,
       membershipRequests: null,
       memberships: null,
+      invitations: null,
     };
   }
 
@@ -301,6 +351,7 @@ export const useOrganization: UseOrganization = params => {
       domains: undefinedPaginatedResource,
       membershipRequests: undefinedPaginatedResource,
       memberships: undefinedPaginatedResource,
+      invitations: undefinedPaginatedResource,
     };
   }
 
@@ -317,6 +368,7 @@ export const useOrganization: UseOrganization = params => {
     domains,
     membershipRequests,
     memberships,
+    invitations,
   };
 };