@sanity/sdk-react 2.1.0 → 2.1.2

package/src/hooks/users/useUser.test.tsx

@@ -0,0 +1,387 @@
+import {
+  getUsersState,
+  resolveUsers,
+  type SanityUser,
+  type StateSource,
+  type UserProfile,
+} from '@sanity/sdk'
+import {act, fireEvent, render, screen} from '@testing-library/react'
+import {Suspense, useState} from 'react'
+import {type Observable, Subject} from 'rxjs'
+import {describe, expect, it, vi} from 'vitest'
+
+import {useUser} from './useUser'
+
+// Mock the functions from '@sanity/sdk'
+vi.mock('@sanity/sdk', async (importOriginal) => {
+  const original = await importOriginal<typeof import('@sanity/sdk')>()
+  return {
+    ...original,
+    getUsersState: vi.fn(),
+    resolveUsers: vi.fn(),
+  }
+})
+
+// Mock the Sanity instance hook to return a dummy instance
+vi.mock('../context/useSanityInstance', () => ({
+  useSanityInstance: vi.fn().mockReturnValue({config: {projectId: 'p'}}),
+}))
+
+describe('useUser', () => {
+  // Create mock user profiles with all required fields
+  const mockUserProfile: UserProfile = {
+    id: 'profile1',
+    displayName: 'John Doe',
+    email: 'john.doe@example.com',
+    imageUrl: 'https://example.com/john.jpg',
+    provider: 'google',
+    createdAt: '2023-01-01T00:00:00Z',
+  }
+
+  const mockUser: SanityUser = {
+    sanityUserId: 'gabc123',
+    profile: mockUserProfile,
+    memberships: [],
+  }
+
+  const mockUserProfile2: UserProfile = {
+    id: 'profile2',
+    displayName: 'Jane Smith',
+    email: 'jane.smith@example.com',
+    imageUrl: 'https://example.com/jane.jpg',
+    provider: 'github',
+    createdAt: '2023-01-02T00:00:00Z',
+  }
+
+  const mockUser2: SanityUser = {
+    sanityUserId: 'gdef456',
+    profile: mockUserProfile2,
+    memberships: [],
+  }
+
+  it('should render user data immediately when available', () => {
+    const getCurrent = vi.fn().mockReturnValue({
+      data: [mockUser],
+      hasMore: false,
+      totalCount: 1,
+    })
+
+    // Type assertion to fix the StateSource type issue
+    vi.mocked(getUsersState).mockReturnValue({
+      getCurrent,
+      subscribe: vi.fn(),
+      get observable(): Observable<unknown> {
+        throw new Error('Not implemented')
+      },
+    } as unknown as StateSource<
+      {data: SanityUser[]; totalCount: number; hasMore: boolean} | undefined
+    >)
+
+    function TestComponent() {
+      const {data, isPending} = useUser({
+        userId: 'gabc123',
+        resourceType: 'organization',
+        organizationId: 'test-org',
+      })
+      return (
+        <div data-testid="output">
+          {data ? `${data.profile.displayName} (${data.sanityUserId})` : 'No user'} -{' '}
+          {isPending ? 'pending' : 'not pending'}
+        </div>
+      )
+    }
+
+    render(<TestComponent />)
+
+    // Verify that the output contains the user data and that isPending is false
+    expect(screen.getByTestId('output').textContent).toContain('John Doe (gabc123)')
+    expect(screen.getByTestId('output').textContent).toContain('not pending')
+  })
+
+  it('should suspend rendering until user data is resolved via Suspense', async () => {
+    const ref = {
+      current: undefined as {data: SanityUser[]; totalCount: number; hasMore: boolean} | undefined,
+    }
+    const getCurrent = vi.fn(() => ref.current)
+    const storeChanged$ = new Subject<void>()
+
+    // Type assertion to fix the StateSource type issue
+    vi.mocked(getUsersState).mockReturnValue({
+      getCurrent,
+      subscribe: vi.fn((cb) => {
+        const subscription = storeChanged$.subscribe(cb)
+        return () => subscription.unsubscribe()
+      }),
+      get observable(): Observable<unknown> {
+        throw new Error('Not implemented')
+      },
+    } as unknown as StateSource<
+      {data: SanityUser[]; totalCount: number; hasMore: boolean} | undefined
+    >)
+
+    // Create a controllable promise to simulate the user resolution
+    let resolvePromise: () => void
+    // Mock resolveUsers to return our fake promise
+    vi.mocked(resolveUsers).mockReturnValue(
+      new Promise<{data: SanityUser[]; totalCount: number; hasMore: boolean}>((resolve) => {
+        resolvePromise = () => {
+          ref.current = {
+            data: [mockUser],
+            hasMore: false,
+            totalCount: 1,
+          }
+          storeChanged$.next()
+          resolve(ref.current)
+        }
+      }),
+    )
+
+    function TestComponent() {
+      const {data} = useUser({
+        userId: 'gabc123',
+        resourceType: 'organization',
+        organizationId: 'test-org',
+      })
+      return <div data-testid="output">{data?.profile.displayName || 'No user'}</div>
+    }
+
+    render(
+      <Suspense fallback={<div data-testid="fallback">Loading...</div>}>
+        <TestComponent />
+      </Suspense>,
+    )
+
+    // Initially, since storeValue is undefined, the component should suspend and fallback is shown
+    expect(screen.getByTestId('fallback')).toBeInTheDocument()
+
+    // Now simulate that data becomes available
+    await act(async () => {
+      resolvePromise()
+    })
+
+    expect(screen.getByTestId('output').textContent).toContain('John Doe')
+  })
+
+  it('should display transition pending state during options change', async () => {
+    const ref = {
+      current: undefined as {data: SanityUser[]; totalCount: number; hasMore: boolean} | undefined,
+    }
+    const getCurrent = vi.fn(() => ref.current)
+    const storeChanged$ = new Subject<void>()
+
+    // Use a more specific type for the mock implementation
+    vi.mocked(getUsersState).mockImplementation((_instance, options) => {
+      if (options?.userId === 'gabc123') {
+        return {
+          getCurrent: vi.fn().mockReturnValue({
+            data: [mockUser],
+            hasMore: false,
+            totalCount: 1,
+          }),
+          subscribe: vi.fn(),
+          get observable(): Observable<unknown> {
+            throw new Error('Not implemented')
+          },
+        } as unknown as StateSource<
+          {data: SanityUser[]; totalCount: number; hasMore: boolean} | undefined
+        >
+      }
+
+      return {
+        getCurrent,
+        subscribe: vi.fn((cb) => {
+          const subscription = storeChanged$.subscribe(cb)
+          return () => subscription.unsubscribe()
+        }),
+        get observable(): Observable<unknown> {
+          throw new Error('Not implemented')
+        },
+      } as unknown as StateSource<
+        {data: SanityUser[]; totalCount: number; hasMore: boolean} | undefined
+      >
+    })
+
+    // Create a controllable promise to simulate the user resolution
+    let resolvePromise: () => void
+    // Mock resolveUsers to return our fake promise
+    vi.mocked(resolveUsers).mockReturnValue(
+      new Promise<{data: SanityUser[]; totalCount: number; hasMore: boolean}>((resolve) => {
+        resolvePromise = () => {
+          ref.current = {
+            data: [mockUser2],
+            hasMore: false,
+            totalCount: 1,
+          }
+          storeChanged$.next()
+          resolve(ref.current)
+        }
+      }),
+    )
+
+    function WrapperComponent() {
+      const [userId, setUserId] = useState('gabc123')
+      const {data, isPending} = useUser({
+        userId,
+        resourceType: 'organization',
+        organizationId: 'test-org',
+      })
+      return (
+        <div>
+          <div data-testid="output">
+            {data?.profile.displayName || 'No user'} - {isPending ? 'pending' : 'not pending'}
+          </div>
+          <button data-testid="button" onClick={() => setUserId('gdef456')}>
+            Change User
+          </button>
+        </div>
+      )
+    }
+
+    render(<WrapperComponent />)
+
+    // Initially, should show data for first user and not pending
+    expect(screen.getByTestId('output').textContent).toContain('John Doe')
+    expect(screen.getByTestId('output').textContent).toContain('not pending')
+
+    // Change the user ID, which should trigger a transition
+    fireEvent.click(screen.getByTestId('button'))
+
+    // The isPending should become true during the transition
+    expect(screen.getByTestId('output').textContent).toContain('pending')
+
+    // Resolve the promise to complete the transition
+    await act(async () => {
+      resolvePromise()
+    })
+
+    // After transition, should show new user data and not pending
+    expect(screen.getByTestId('output').textContent).toContain('Jane Smith')
+    expect(screen.getByTestId('output').textContent).toContain('not pending')
+  })
+
+  it('should handle undefined user data gracefully', () => {
+    const getCurrent = vi.fn().mockReturnValue({
+      data: [], // Empty array means no user found
+      hasMore: false,
+      totalCount: 0,
+    })
+
+    vi.mocked(getUsersState).mockReturnValue({
+      getCurrent,
+      subscribe: vi.fn(),
+      get observable(): Observable<unknown> {
+        throw new Error('Not implemented')
+      },
+    } as unknown as StateSource<
+      {data: SanityUser[]; totalCount: number; hasMore: boolean} | undefined
+    >)
+
+    function TestComponent() {
+      const {data, isPending} = useUser({
+        userId: 'nonexistent123',
+        resourceType: 'organization',
+        organizationId: 'test-org',
+      })
+      return (
+        <div data-testid="output">
+          {data ? `Found: ${data.profile.displayName}` : 'User not found'} -{' '}
+          {isPending ? 'pending' : 'not pending'}
+        </div>
+      )
+    }
+
+    render(<TestComponent />)
+
+    expect(screen.getByTestId('output').textContent).toContain('User not found')
+    expect(screen.getByTestId('output').textContent).toContain('not pending')
+  })
+
+  it('should work with project-scoped user IDs', () => {
+    const projectUser: SanityUser = {
+      ...mockUser,
+      sanityUserId: 'p12345',
+    }
+
+    const getCurrent = vi.fn().mockReturnValue({
+      data: [projectUser],
+      hasMore: false,
+      totalCount: 1,
+    })
+
+    vi.mocked(getUsersState).mockReturnValue({
+      getCurrent,
+      subscribe: vi.fn(),
+      get observable(): Observable<unknown> {
+        throw new Error('Not implemented')
+      },
+    } as unknown as StateSource<
+      {data: SanityUser[]; totalCount: number; hasMore: boolean} | undefined
+    >)
+
+    function TestComponent() {
+      const {data} = useUser({
+        userId: 'p12345',
+        resourceType: 'project',
+        projectId: 'test-project',
+      })
+      return (
+        <div data-testid="output">
+          {data ? `${data.profile.displayName} (${data.sanityUserId})` : 'No user'}
+        </div>
+      )
+    }
+
+    render(<TestComponent />)
+
+    expect(screen.getByTestId('output').textContent).toContain('John Doe (p12345)')
+  })
+
+  it('should handle resource type changes', () => {
+    vi.mocked(getUsersState).mockImplementation((_instance, options) => {
+      const mockData = options?.resourceType === 'project' ? [mockUser] : [mockUser2]
+
+      return {
+        getCurrent: vi.fn().mockReturnValue({
+          data: mockData,
+          hasMore: false,
+          totalCount: 1,
+        }),
+        subscribe: vi.fn(),
+        get observable(): Observable<unknown> {
+          throw new Error('Not implemented')
+        },
+      } as unknown as StateSource<
+        {data: SanityUser[]; totalCount: number; hasMore: boolean} | undefined
+      >
+    })
+
+    function WrapperComponent() {
+      const [resourceType, setResourceType] = useState<'project' | 'organization'>('project')
+      const {data} = useUser({
+        userId: 'gabc123',
+        resourceType,
+        projectId: resourceType === 'project' ? 'test-project' : undefined,
+        organizationId: resourceType === 'organization' ? 'test-org' : undefined,
+      })
+      return (
+        <div>
+          <div data-testid="output">{data?.profile.displayName || 'No user'}</div>
+          <button data-testid="toggle" onClick={() => setResourceType('organization')}>
+            Switch to Organization
+          </button>
+        </div>
+      )
+    }
+
+    render(<WrapperComponent />)
+
+    // Initially should show project user
+    expect(screen.getByTestId('output').textContent).toContain('John Doe')
+
+    // Switch resource type
+    fireEvent.click(screen.getByTestId('toggle'))
+
+    // Should now show organization user
+    expect(screen.getByTestId('output').textContent).toContain('Jane Smith')
+  })
+})

package/src/hooks/users/useUser.ts

@@ -0,0 +1,109 @@
+import {
+  type GetUserOptions,
+  getUsersKey,
+  getUsersState,
+  parseUsersKey,
+  resolveUsers,
+  type SanityUser,
+} from '@sanity/sdk'
+import {useEffect, useMemo, useState, useSyncExternalStore, useTransition} from 'react'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+
+/**
+ * @public
+ * @category Types
+ */
+export interface UserResult {
+  /**
+   * The user data fetched, or undefined if not found.
+   */
+  data: SanityUser | undefined
+  /**
+   * Whether a user request is currently in progress
+   */
+  isPending: boolean
+}
+
+/**
+ *
+ * @public
+ *
+ * Retrieves a single user by ID for a given resource (either a project or an organization).
+ *
+ * @category Users
+ * @param options - The user ID, resource type, project ID, or organization ID
+ * @returns The user data and loading state
+ *
+ * @example
+ * ```
+ * const { data, isPending } = useUser({
+ *   userId: 'gabc123',
+ *   resourceType: 'project',
+ *   projectId: 'my-project-id',
+ * })
+ *
+ * return (
+ *   <div>
+ *     {isPending && <p>Loading...</p>}
+ *     {data && (
+ *       <figure>
+ *         <img src={data.profile.imageUrl} alt='' />
+ *         <figcaption>{data.profile.displayName}</figcaption>
+ *         <address>{data.profile.email}</address>
+ *       </figure>
+ *     )}
+ *   </div>
+ * )
+ * ```
+ */
+export function useUser(options: GetUserOptions): UserResult {
+  const instance = useSanityInstance(options)
+  // Use React's useTransition to avoid UI jank when user options change
+  const [isPending, startTransition] = useTransition()
+
+  // Get the unique key for this user request and its options
+  const key = getUsersKey(instance, options)
+  // Use a deferred state to avoid immediate re-renders when the user request changes
+  const [deferredKey, setDeferredKey] = useState(key)
+  // Parse the deferred user key back into user options
+  const deferred = useMemo(() => parseUsersKey(deferredKey), [deferredKey])
+
+  // Create an AbortController to cancel in-flight requests when needed
+  const [ref, setRef] = useState<AbortController>(new AbortController())
+
+  // When the user request or options change, start a transition to update the request
+  useEffect(() => {
+    if (key === deferredKey) return
+
+    startTransition(() => {
+      if (!ref.signal.aborted) {
+        ref.abort()
+        setRef(new AbortController())
+      }
+
+      setDeferredKey(key)
+    })
+  }, [deferredKey, key, ref])
+
+  // Get the state source for this user request from the users store
+  // We pass the userId as part of options to getUsersState
+  const {getCurrent, subscribe} = useMemo(() => {
+    return getUsersState(instance, deferred as GetUserOptions)
+  }, [instance, deferred])
+
+  // If data isn't available yet, suspend rendering until it is
+  // This is the React Suspense integration - throwing a promise
+  // will cause React to show the nearest Suspense fallback
+  if (getCurrent() === undefined) {
+    throw resolveUsers(instance, {...(deferred as GetUserOptions), signal: ref.signal})
+  }
+
+  // Subscribe to updates and get the current data
+  // useSyncExternalStore ensures the component re-renders when the data changes
+  // Extract the first user from the users array (since we're fetching by userId, there should be only one)
+  const result = useSyncExternalStore(subscribe, getCurrent)
+  const data = result?.data[0]
+
+  return {data, isPending}
+}