feat: add useDashboardOrganizationId hook (#339)

Author: ryanbonial

apps/kitchensink-react/src/AppRoutes.tsx

@@ -16,6 +16,7 @@ import Home from './Home'
 import {ProjectAuthHome} from './ProjectAuthentication/ProjectAuthHome'
 import {ProjectInstanceWrapper} from './ProjectAuthentication/ProjectInstanceWrapper'
 import {ProtectedRoute} from './ProtectedRoute'
+import {DashboardContextRoute} from './routes/DashboardContextRoute'
 import {UsersRoute} from './routes/UsersRoute'
 import {UnauthenticatedHome} from './Unauthenticated/UnauthenticatedHome'
 import {UnauthenticatedInstanceWrapper} from './Unauthenticated/UnauthenticatedInstanceWrapper'
@@ -53,6 +54,10 @@ const documentCollectionRoutes = [
     path: 'document-core-interactions',
     element: <DocumentCoreInteractionsRoute />,
   },
+  {
+    path: 'dashboard-context',
+    element: <DashboardContextRoute />,
+  },
 ]
 
 const frameRoutes = [1, 2, 3].map((frameNum) => ({

apps/kitchensink-react/src/routes/DashboardContextRoute.tsx

@@ -0,0 +1,18 @@
+import {useDashboardOrganizationId} from '@sanity/sdk-react'
+import {Box, Heading, Text} from '@sanity/ui'
+import {type JSX} from 'react'
+
+export function DashboardContextRoute(): JSX.Element {
+  const orgId = useDashboardOrganizationId()
+
+  return (
+    <Box padding={4}>
+      <Heading as="h1" size={5}>
+        Dashboard Context
+      </Heading>
+      <Box paddingY={5}>
+        <Text>Organization ID: {orgId}</Text>
+      </Box>
+    </Box>
+  )
+}

packages/core/src/_exports/index.ts

@@ -15,6 +15,7 @@ export {
   type ErrorAuthState,
   getAuthState,
   getCurrentUserState,
+  getDashboardOrganizationId,
   getLoginUrlsState,
   getTokenState,
   type LoggedInAuthState,

packages/core/src/auth/authStore.ts

@@ -131,7 +131,7 @@ export interface AuthConfig {
 export interface DashboardContext {
   mode?: string
   env?: string
-  orgId?: string | object
+  orgId?: string
 }
 
 let tokenRefresherRunning = false

packages/react/src/_exports/index.ts

@@ -6,6 +6,7 @@ export {SanityProvider} from '../context/SanityProvider'
 export {useAuthState} from '../hooks/auth/useAuthState'
 export {useAuthToken} from '../hooks/auth/useAuthToken'
 export {useCurrentUser} from '../hooks/auth/useCurrentUser'
+export {useDashboardOrganizationId} from '../hooks/auth/useDashboardOrganizationId'
 export {useHandleCallback} from '../hooks/auth/useHandleCallback'
 export {useLoginUrls} from '../hooks/auth/useLoginUrls'
 export {useLogOut} from '../hooks/auth/useLogOut'

packages/react/src/hooks/auth/useDashboardOrganizationId.test.tsx

@@ -0,0 +1,42 @@
+import {createSanityInstance, getDashboardOrganizationId} from '@sanity/sdk'
+import {renderHook} from '@testing-library/react'
+import {throwError} from 'rxjs'
+import {describe, expect, it, vi} from 'vitest'
+
+import {useDashboardOrganizationId} from './useDashboardOrganizationId'
+
+vi.mock('../context/useSanityInstance', () => ({
+  useSanityInstance: vi.fn().mockReturnValue(createSanityInstance({projectId: 'p', dataset: 'd'})),
+}))
+
+vi.mock('@sanity/sdk', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {...(actual || {}), getDashboardOrganizationId: vi.fn()}
+})
+
+describe('useDashboardOrganizationId', () => {
+  it('should return undefined when no organization ID is set', () => {
+    const subscribe = vi.fn()
+    vi.mocked(getDashboardOrganizationId).mockReturnValue({
+      getCurrent: () => undefined,
+      subscribe,
+      observable: throwError(() => new Error('Unexpected usage of observable')),
+    })
+
+    const {result} = renderHook(() => useDashboardOrganizationId())
+    expect(result.current).toBeUndefined()
+  })
+
+  it('should return organization ID when one is set', () => {
+    const subscribe = vi.fn()
+    const mockOrgId = 'team_123'
+    vi.mocked(getDashboardOrganizationId).mockReturnValue({
+      getCurrent: () => mockOrgId,
+      subscribe,
+      observable: throwError(() => new Error('Unexpected usage of observable')),
+    })
+
+    const {result} = renderHook(() => useDashboardOrganizationId())
+    expect(result.current).toBe(mockOrgId)
+  })
+})

packages/react/src/hooks/auth/useDashboardOrganizationId.tsx

@@ -0,0 +1,29 @@
+import {getDashboardOrganizationId} from '@sanity/sdk'
+import {useMemo, useSyncExternalStore} from 'react'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+
+/**
+ * @remarks
+ * A React hook that retrieves the dashboard organization ID that is currently selected in the Sanity Dashboard.
+ *
+ * @example
+ * ```tsx
+ * function DashboardComponent() {
+ *   const orgId = useDashboardOrganizationId()
+ *
+ *   if (!orgId) return null
+ *
+ *   return <div>Organization ID: {String(orgId)}</div>
+ * }
+ * ```
+ *
+ * @returns The dashboard organization ID (string | undefined)
+ * @public
+ */
+export function useDashboardOrganizationId(): string | undefined {
+  const instance = useSanityInstance()
+  const {subscribe, getCurrent} = useMemo(() => getDashboardOrganizationId(instance), [instance])
+
+  return useSyncExternalStore(subscribe, getCurrent)
+}