ORG-83 userInvitations in useOrganizationList (#1520)

* feat(shared): Support infinite fetching for `userInvitations` from `useOrganizationList`

* chore(clerk-js,shared,clerk-react): Deprecate OrganizationContext and introduce OrganizationProvider

We needed to wrap <OrganizationContext.Provider/> with SWRConfig provider so that useSWR hooks can read from the correct context in tests.

* chore(repo): Add changeset

* test(clerk-js): Introduce tests for useCoreOrganizationList

* chore(repo): Update lock file

.changeset/orange-tigers-act.md

@@ -0,0 +1,11 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Introduces userInvitations from `useOrganizationList`
+
+`userInvitations` is a paginated list of data. It can be used to create Paginated tables or Infinite lists.
+

packages/clerk-js/src/core/resources/UserOrganizationInvitation.ts

@@ -8,6 +8,7 @@ import type {
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
+import { convertPageToOffset } from '../../utils/pagesToOffset';
 import { BaseResource } from './internal';
 
 export class UserOrganizationInvitation extends BaseResource implements UserOrganizationInvitationResource {
@@ -32,7 +33,7 @@ export class UserOrganizationInvitation extends BaseResource implements UserOrga
     return await BaseResource._fetch({
       path: '/me/organization_invitations',
       method: 'GET',
-      search: params as any,
+      search: convertPageToOffset(params) as any,
     })
       .then(res => {
         const { data: invites, total_count } =

packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx

@@ -3,14 +3,15 @@ import React from 'react';
 
 import { CoreClerkContext } from './CoreClerkContext';
 import { CoreClientContext } from './CoreClientContext';
-import { CoreOrganizationContext } from './CoreOrganizationContext';
+import { CoreOrganizationProvider } from './CoreOrganizationContext';
 import { CoreSessionContext } from './CoreSessionContext';
 import { CoreUserContext } from './CoreUserContext';
 import { assertClerkSingletonExists } from './utils';
 
 type CoreClerkContextWrapperProps = {
   clerk: Clerk;
   children: React.ReactNode;
+  swrConfig?: any;
 };
 
 type CoreClerkContextProviderState = Resources;
@@ -51,9 +52,12 @@ export function CoreClerkContextWrapper(props: CoreClerkContextWrapperProps): JS
     <CoreClerkContext.Provider value={clerkCtx}>
       <CoreClientContext.Provider value={clientCtx}>
         <CoreSessionContext.Provider value={sessionCtx}>
-          <CoreOrganizationContext.Provider value={organizationCtx}>
+          <CoreOrganizationProvider
+            {...organizationCtx.value}
+            swrConfig={props.swrConfig}
+          >
             <CoreUserContext.Provider value={userCtx}>{props.children}</CoreUserContext.Provider>
-          </CoreOrganizationContext.Provider>
+          </CoreOrganizationProvider>
         </CoreSessionContext.Provider>
       </CoreClientContext.Provider>
     </CoreClerkContext.Provider>

packages/clerk-js/src/ui/contexts/CoreOrganizationContext.tsx

@@ -1,6 +1,6 @@
-import { OrganizationContext, useOrganization, useOrganizationList, useOrganizations } from '@clerk/shared';
+import { OrganizationProvider, useOrganization, useOrganizationList, useOrganizations } from '@clerk/shared';
 
-export const CoreOrganizationContext = OrganizationContext;
+export const CoreOrganizationProvider = OrganizationProvider;
 export const useCoreOrganization = useOrganization;
 export const useCoreOrganizationList = useOrganizationList;
 export const useCoreOrganizations = useOrganizations;