@sanity/sdk-react 0.0.0-alpha.12 → 0.0.0-alpha.14

package/src/hooks/users/useUsers.test.ts

@@ -0,0 +1,163 @@
+import {createUsersStore, type ResourceType, type SanityUser} from '@sanity/sdk'
+import {act, renderHook} from '@testing-library/react'
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+import {useUsers} from './useUsers'
+
+vi.mock('@sanity/sdk')
+vi.mock('../context/useSanityInstance')
+
+describe('useUsers', () => {
+  const mockInstance = {}
+  const mockUser: SanityUser = {
+    profile: {
+      id: 'user1',
+      displayName: 'Test User',
+      email: 'test@test.com',
+      provider: 'test',
+      createdAt: '2021-01-01',
+    },
+    sanityUserId: 'user1',
+    memberships: [],
+  }
+
+  const getCurrent = vi.fn().mockReturnValue({
+    users: [],
+    totalCount: 0,
+    nextCursor: null,
+    hasMore: false,
+    initialFetchCompleted: false,
+    options: {
+      resourceType: '' as ResourceType,
+      resourceId: '',
+      limit: 100,
+    },
+  })
+  const unsubscribe = vi.fn()
+  const subscribe = vi.fn().mockReturnValue(unsubscribe)
+  const dispose = vi.fn()
+
+  const mockUsersStore: ReturnType<typeof createUsersStore> = {
+    setOptions: vi.fn(),
+    loadMore: vi.fn(),
+    resolveUsers: vi.fn(),
+    getState: vi.fn().mockReturnValue({getCurrent, subscribe}),
+    dispose,
+  }
+
+  beforeEach(() => {
+    vi.mocked(useSanityInstance).mockReturnValue(
+      mockInstance as unknown as ReturnType<typeof useSanityInstance>,
+    )
+    vi.mocked(createUsersStore).mockReturnValue(
+      mockUsersStore as unknown as ReturnType<typeof createUsersStore>,
+    )
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should initialize with given params', () => {
+    renderHook(() =>
+      useUsers({
+        resourceType: 'project',
+        resourceId: 'proj1',
+      }),
+    )
+
+    expect(createUsersStore).toHaveBeenCalledWith(mockInstance)
+    expect(mockUsersStore.setOptions).toHaveBeenCalledWith({
+      resourceType: 'project',
+      resourceId: 'proj1',
+    })
+  })
+
+  it('should subscribe to users store changes', () => {
+    renderHook(() =>
+      useUsers({
+        resourceType: 'organization',
+        resourceId: 'org1',
+      }),
+    )
+    expect(subscribe).toHaveBeenCalledTimes(1)
+  })
+
+  it('should return current users state', () => {
+    const mockState = {users: [mockUser], hasMore: true}
+    getCurrent.mockReturnValue(mockState)
+
+    const {result} = renderHook(() =>
+      useUsers({
+        resourceType: 'project',
+        resourceId: 'proj1',
+      }),
+    )
+    expect(result.current).toMatchObject(mockState)
+  })
+
+  it('should call loadMore when loadMore is invoked', () => {
+    const {result} = renderHook(() =>
+      useUsers({
+        resourceType: 'project',
+        resourceId: 'proj1',
+      }),
+    )
+
+    act(() => {
+      result.current.loadMore()
+    })
+
+    expect(mockUsersStore.loadMore).toHaveBeenCalled()
+  })
+
+  it('should update options when params change', () => {
+    const initialParams = {resourceType: 'project' as ResourceType, resourceId: 'proj1'}
+    const {rerender} = renderHook(({params}) => useUsers(params), {
+      initialProps: {params: initialParams},
+    })
+
+    const newParams = {resourceType: 'organization' as ResourceType, resourceId: 'org1'}
+    rerender({params: newParams})
+
+    expect(mockUsersStore.setOptions).toHaveBeenCalledWith(newParams)
+  })
+
+  it('should resolve users if initial fetch not completed', () => {
+    getCurrent.mockReturnValue({initialFetchCompleted: false})
+
+    renderHook(() =>
+      useUsers({
+        resourceType: 'project',
+        resourceId: 'proj1',
+      }),
+    )
+    expect(mockUsersStore.resolveUsers).toHaveBeenCalled()
+  })
+
+  it('should not resolve users if initial fetch already completed', () => {
+    getCurrent.mockReturnValue({initialFetchCompleted: true})
+
+    renderHook(() =>
+      useUsers({
+        resourceType: 'project',
+        resourceId: 'proj1',
+      }),
+    )
+    expect(mockUsersStore.resolveUsers).not.toHaveBeenCalled()
+  })
+
+  it('should clean up store on unmount', () => {
+    const {unmount} = renderHook(() =>
+      useUsers({
+        resourceType: 'project',
+        resourceId: 'proj1',
+      }),
+    )
+
+    unmount()
+    expect(mockUsersStore.dispose).toHaveBeenCalled()
+    expect(unsubscribe).toHaveBeenCalled()
+  })
+})

package/src/hooks/users/useUsers.ts

@@ -0,0 +1,107 @@
+import {createUsersStore, type ResourceType, type SanityUser} from '@sanity/sdk'
+import {useCallback, useEffect, useState, useSyncExternalStore} from 'react'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+
+/**
+ * @public
+ * @category Users
+ */
+export interface UseUsersParams {
+  /**
+   * The type of resource to fetch users for.
+   */
+  resourceType: ResourceType
+  /**
+   * The ID of the resource to fetch users for.
+   */
+  resourceId: string
+  /**
+   * The limit of users to fetch.
+   */
+  limit?: number
+}
+
+/**
+ * @public
+ * @category Users
+ */
+export interface UseUsersResult {
+  /**
+   * The users fetched.
+   */
+  users: SanityUser[]
+  /**
+   * Whether there are more users to fetch.
+   */
+  hasMore: boolean
+  /**
+   * Load more users.
+   */
+  loadMore: () => void
+}
+
+/**
+ *
+ * @public
+ *
+ * Retrieves the users for a given resource (either a project or an organization).
+ *
+ * @category Users
+ * @param params - The resource type and its ID, and the limit of users to fetch
+ * @returns A list of users, a boolean indicating whether there are more users to fetch, and a function to load more users
+ *
+ * @example
+ * ```
+ * const { users, hasMore, loadMore } = useUsers({
+ *   resourceType: 'organization',
+ *   resourceId: 'my-org-id',
+ *   limit: 10,
+ * })
+ *
+ * return (
+ *   <div>
+ *     {users.map(user => (
+ *       <figure key={user.sanityUserId}>
+ *         <img src={user.profile.imageUrl} alt='' />
+ *         <figcaption>{user.profile.displayName}</figcaption>
+ *         <address>{user.profile.email}</address>
+ *       </figure>
+ *     ))}
+ *     {hasMore && <button onClick={loadMore}>Load More</button>}
+ *   </div>
+ * )
+ * ```
+ */
+export function useUsers(params: UseUsersParams): UseUsersResult {
+  const instance = useSanityInstance()
+  const [store] = useState(() => createUsersStore(instance))
+
+  useEffect(() => {
+    store.setOptions({
+      resourceType: params.resourceType,
+      resourceId: params.resourceId,
+    })
+  }, [params.resourceType, params.resourceId, store])
+
+  const subscribe = useCallback(
+    (onStoreChanged: () => void) => {
+      if (store.getState().getCurrent().initialFetchCompleted === false) {
+        store.resolveUsers()
+      }
+      const unsubscribe = store.getState().subscribe(onStoreChanged)
+
+      return () => {
+        unsubscribe()
+        store.dispose()
+      }
+    },
+    [store],
+  )
+
+  const getSnapshot = useCallback(() => store.getState().getCurrent(), [store])
+
+  const {users, hasMore} = useSyncExternalStore(subscribe, getSnapshot) || {}
+
+  return {users, hasMore, loadMore: store.loadMore}
+}

package/src/hooks/client/useClient.test.tsx

@@ -1,130 +0,0 @@
-import {type SanityClient} from '@sanity/client'
-import {act} from '@testing-library/react'
-import {type Subscribable, type Subscriber} from 'rxjs'
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {renderHook} from '../../../test/test-utils'
-import {useClient} from './useClient'
-
-vi.mock(import('@sanity/sdk'), async (importOriginal) => {
-  const actual = await importOriginal()
-  return {
-    ...actual,
-    getClient: vi.fn(),
-    getSubscribableClient: vi.fn(),
-  }
-})
-
-const {getClient, getSubscribableClient} = await import('@sanity/sdk')
-
-describe('useClient', () => {
-  let subscribers: {next: (client: SanityClient) => void}[] = []
-  let currentClient: SanityClient
-
-  beforeEach(() => {
-    subscribers = []
-
-    currentClient = {
-      config: () => ({token: undefined, apiVersion: 'v2024-11-12'}),
-    } as unknown as SanityClient
-
-    // Create a subscribable interface directly
-    const createSubscribable = (): Subscribable<SanityClient> => ({
-      subscribe: (subscriber: {next: (client: SanityClient) => void}) => {
-        subscribers.push(subscriber)
-        subscriber.next(currentClient)
-        return {
-          unsubscribe: () => {
-            const index = subscribers.indexOf(subscriber)
-            if (index > -1) subscribers.splice(index, 1)
-          },
-        }
-      },
-    })
-
-    vi.mocked(getClient).mockReturnValue(currentClient)
-    vi.mocked(getSubscribableClient).mockImplementation(() => createSubscribable())
-  })
-  it('should return initial client', () => {
-    const {result} = renderHook(() => useClient({apiVersion: 'v2024-11-12'}))
-
-    expect(result.current.config().token).toBeUndefined()
-    expect(result.current.config().apiVersion).toBe('v2024-11-12')
-  })
-
-  it('should handle client update through authentication changes', async () => {
-    let clientSubscriber: Subscriber<SanityClient> | undefined
-
-    // Create a subscribable that can simulate updates
-    vi.mocked(getSubscribableClient).mockImplementation(() => ({
-      subscribe: (subscriber: Subscriber<SanityClient>) => {
-        clientSubscriber = subscriber
-        // Send initial client
-        subscriber.next(currentClient)
-        return {
-          unsubscribe: vi.fn(),
-        }
-      },
-    }))
-
-    const {result} = renderHook(() => useClient({apiVersion: 'v2024-11-12'}))
-
-    // Verify initial state
-    expect(result.current.config().token).toBeUndefined()
-    expect(clientSubscriber).toBeDefined()
-
-    // Create authenticated client
-    const authenticatedClient = {
-      config: () => ({token: 'auth-token', apiVersion: 'v2024-11-12'}),
-    } as unknown as SanityClient
-
-    // Update getClient to return the new client
-    vi.mocked(getClient).mockReturnValue(authenticatedClient)
-
-    // Simulate the client update that would happen after auth change
-    await act(async () => {
-      clientSubscriber!.next(authenticatedClient)
-    })
-
-    // Verify the client was updated with the new token
-    expect(result.current.config().token).toBe('auth-token')
-  })
-
-  it('should unsubscribe on unmount', () => {
-    const unsubscribeSpy = vi.fn()
-    vi.mocked(getSubscribableClient).mockImplementation(() => ({
-      subscribe: () => ({
-        unsubscribe: unsubscribeSpy,
-      }),
-    }))
-
-    const {unmount} = renderHook(() => useClient({apiVersion: 'v2024-11-12'}))
-
-    unmount()
-    expect(unsubscribeSpy).toHaveBeenCalled()
-  })
-
-  it('should handle subscription errors', () => {
-    vi.spyOn(console, 'error').mockImplementation(() => {})
-
-    const testError = new Error('Subscription error')
-    let errorSubscriber: Subscriber<SanityClient> | undefined
-
-    // Mock getSubscribableClient to create a subscription that will error
-    vi.mocked(getSubscribableClient).mockImplementation(() => ({
-      subscribe: (subscriber: Subscriber<SanityClient>) => {
-        errorSubscriber = subscriber
-        return {
-          unsubscribe: vi.fn(),
-        }
-      },
-    }))
-
-    renderHook(() => useClient({apiVersion: 'v2024-11-12'}))
-
-    errorSubscriber!.error(testError)
-
-    // eslint-disable-next-line no-console
-    expect(console.error).toHaveBeenCalledWith('Error in useClient subscription:', testError)
-  })
-})