fix(shared): Re-use common type for infinite Pagination params (clerk#2759)

Author: panteliselef

.changeset/orange-eyes-nail.md

@@ -0,0 +1,2 @@
+---
+---

packages/shared/src/react/hooks/useOrganization.tsx

@@ -17,35 +17,14 @@ import {
   useOrganizationContext,
   useSessionContext,
 } from '../contexts';
-import type { PaginatedResources, PaginatedResourcesWithDefault } from '../types';
+import type { PaginatedHookConfig, PaginatedResources, PaginatedResourcesWithDefault } from '../types';
 import { usePagesOrInfinite, useWithSafeValues } from './usePagesOrInfinite';
 
 type UseOrganizationParams = {
-  domains?:
-    | true
-    | (GetDomainsParams & {
-        infinite?: boolean;
-        keepPreviousData?: boolean;
-      });
-  membershipRequests?:
-    | true
-    | (GetMembershipRequestParams & {
-        infinite?: boolean;
-        keepPreviousData?: boolean;
-      });
-  memberships?:
-    | true
-    | (GetMembersParams & {
-        infinite?: boolean;
-        keepPreviousData?: boolean;
-      });
-
-  invitations?:
-    | true
-    | (GetInvitationsParams & {
-        infinite?: boolean;
-        keepPreviousData?: boolean;
-      });
+  domains?: true | PaginatedHookConfig<GetDomainsParams>;
+  membershipRequests?: true | PaginatedHookConfig<GetMembershipRequestParams>;
+  memberships?: true | PaginatedHookConfig<GetMembersParams>;
+  invitations?: true | PaginatedHookConfig<GetInvitationsParams>;
 };
 
 type UseOrganization = <T extends UseOrganizationParams>(

packages/shared/src/react/hooks/useOrganizationList.tsx

@@ -12,28 +12,13 @@ import type {
 } from '@clerk/types';
 
 import { useAssertWrappedByClerkProvider, useClerkInstanceContext, useUserContext } from '../contexts';
-import type { PaginatedResources, PaginatedResourcesWithDefault } from '../types';
+import type { PaginatedHookConfig, PaginatedResources, PaginatedResourcesWithDefault } from '../types';
 import { usePagesOrInfinite, useWithSafeValues } from './usePagesOrInfinite';
 
 type UseOrganizationListParams = {
-  userMemberships?:
-    | true
-    | (GetUserOrganizationMembershipParams & {
-        infinite?: boolean;
-        keepPreviousData?: boolean;
-      });
-  userInvitations?:
-    | true
-    | (GetUserOrganizationInvitationsParams & {
-        infinite?: boolean;
-        keepPreviousData?: boolean;
-      });
-  userSuggestions?:
-    | true
-    | (GetUserOrganizationSuggestionsParams & {
-        infinite?: boolean;
-        keepPreviousData?: boolean;
-      });
+  userMemberships?: true | PaginatedHookConfig<GetUserOrganizationMembershipParams>;
+  userInvitations?: true | PaginatedHookConfig<GetUserOrganizationInvitationsParams>;
+  userSuggestions?: true | PaginatedHookConfig<GetUserOrganizationSuggestionsParams>;
 };
 
 const undefinedPaginatedResource = {

packages/shared/src/react/hooks/usePagesOrInfinite.ts

@@ -3,7 +3,13 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 
 import { useSWR, useSWRInfinite } from '../clerk-swr';
-import type { CacheSetter, PaginatedResources, ValueOrSetter } from '../types';
+import type {
+  CacheSetter,
+  PagesOrInfiniteConfig,
+  PagesOrInfiniteOptions,
+  PaginatedResources,
+  ValueOrSetter,
+} from '../types';
 
 function getDifferentKeys(obj1: Record<string, unknown>, obj2: Record<string, unknown>): Record<string, unknown> {
   const keysSet = new Set(Object.keys(obj2));
@@ -18,17 +24,6 @@ function getDifferentKeys(obj1: Record<string, unknown>, obj2: Record<string, un
   return differentKeysObject;
 }
 
-type PagesOrInfiniteOptions = {
-  /**
-   * This the starting point for your fetched results. The initial value persists between re-renders
-   */
-  initialPage?: number;
-  /**
-   * Maximum number of items returned per request. The initial value persists between re-renders
-   */
-  pageSize?: number;
-};
-
 export const useWithSafeValues = <T extends PagesOrInfiniteOptions>(params: T | true | undefined, defaultValues: T) => {
   const shouldUseDefaults = typeof params === 'boolean' && params;
 
@@ -59,26 +54,11 @@ const cachingSWROptions = {
 type ArrayType<DataArray> = DataArray extends Array<infer ElementType> ? ElementType : never;
 type ExtractData<Type> = Type extends { data: infer Data } ? ArrayType<Data> : Type;
 
-type DefaultOptions = {
-  /**
-   * Persists the previous pages with new ones in the same array
-   */
-  infinite?: boolean;
-  /**
-   * Return the previous key's data until the new data has been loaded
-   */
-  keepPreviousData?: boolean;
-  /**
-   * Should a request be triggered
-   */
-  enabled?: boolean;
-};
-
 type UsePagesOrInfinite = <
   Params extends PagesOrInfiniteOptions,
   FetcherReturnData extends Record<string, any>,
   CacheKeys = Record<string, unknown>,
-  TOptions extends DefaultOptions = DefaultOptions,
+  TConfig extends PagesOrInfiniteConfig = PagesOrInfiniteConfig,
 >(
   /**
    * The parameters will be passed to the fetcher
@@ -91,20 +71,20 @@ type UsePagesOrInfinite = <
   /**
    * Internal configuration of the hook
    */
-  options: TOptions,
+  config: TConfig,
   cacheKeys: CacheKeys,
-) => PaginatedResources<ExtractData<FetcherReturnData>, TOptions['infinite']>;
+) => PaginatedResources<ExtractData<FetcherReturnData>, TConfig['infinite']>;
 
-export const usePagesOrInfinite: UsePagesOrInfinite = (params, fetcher, options, cacheKeys) => {
+export const usePagesOrInfinite: UsePagesOrInfinite = (params, fetcher, config, cacheKeys) => {
   const [paginatedPage, setPaginatedPage] = useState(params.initialPage ?? 1);
 
   // Cache initialPage and initialPageSize until unmount
   const initialPageRef = useRef(params.initialPage ?? 1);
   const pageSizeRef = useRef(params.pageSize ?? 10);
 
-  const enabled = options.enabled ?? true;
-  const triggerInfinite = options.infinite ?? false;
-  const keepPreviousData = options.keepPreviousData ?? false;
+  const enabled = config.enabled ?? true;
+  const triggerInfinite = config.infinite ?? false;
+  const keepPreviousData = config.keepPreviousData ?? false;
 
   const pagesCacheKey = {
     ...cacheKeys,

packages/shared/src/react/types.ts

@@ -31,3 +31,32 @@ export type PaginatedResources<T = unknown, Infinite = false> = {
 export type PaginatedResourcesWithDefault<T> = {
   [K in keyof PaginatedResources<T>]: PaginatedResources<T>[K] extends boolean ? false : undefined;
 };
+
+export type PaginatedHookConfig<T> = T & {
+  /**
+   * Persists the previous pages with new ones in the same array
+   */
+  infinite?: boolean;
+  /**
+   * Return the previous key's data until the new data has been loaded
+   */
+  keepPreviousData?: boolean;
+};
+
+export type PagesOrInfiniteConfig = PaginatedHookConfig<{
+  /**
+   * Should a request be triggered
+   */
+  enabled?: boolean;
+}>;
+
+export type PagesOrInfiniteOptions = {
+  /**
+   * This the starting point for your fetched results. The initial value persists between re-renders
+   */
+  initialPage?: number;
+  /**
+   * Maximum number of items returned per request. The initial value persists between re-renders
+   */
+  pageSize?: number;
+};