feat(presence): add user presence events (#583)

---------

Co-authored-by: Carolina Gonzalez <[email protected]>

Author: ryanbonial

apps/kitchensink-react/src/AppRoutes.tsx

@@ -11,6 +11,7 @@ import {DocumentProjectionRoute} from './DocumentCollection/DocumentProjectionRo
 import {MultiResourceRoute} from './DocumentCollection/MultiResourceRoute'
 import {OrgDocumentExplorerRoute} from './DocumentCollection/OrgDocumentExplorerRoute'
 import {SearchRoute} from './DocumentCollection/SearchRoute'
+import {PresenceRoute} from './Presence/PresenceRoute'
 import {ProjectAuthHome} from './ProjectAuthentication/ProjectAuthHome'
 import {ProtectedRoute} from './ProtectedRoute'
 import {DashboardContextRoute} from './routes/DashboardContextRoute'
@@ -65,6 +66,10 @@ const documentCollectionRoutes = [
     path: 'experimental-resource-client',
     element: <ExperimentalResourceClientRoute />,
   },
+  {
+    path: 'presence',
+    element: <PresenceRoute />,
+  },
 ]
 
 const dashboardInteractionRoutes = [

apps/kitchensink-react/src/Presence/PresenceRoute.tsx

@@ -0,0 +1,38 @@
+import {ResourceProvider, usePresence, useProject} from '@sanity/sdk-react'
+import {JSX} from 'react'
+
+import {devConfigs} from '../sanityConfigs'
+import {PresenceSecondProject} from './PresenceSecondProject'
+
+export function PresenceRoute(): JSX.Element {
+  const project = useProject()
+  const {locations} = usePresence()
+
+  return (
+    <div>
+      <h1>Presence for {project?.id}</h1>
+      <p>
+        <a href={`https://test-studio.sanity.build/test/structure/`} target={project?.id}>
+          View in Studio →
+        </a>
+      </p>
+      <pre>{JSON.stringify(locations, null, 2)}</pre>
+      <h1>Second Project Presence for {devConfigs[1].projectId}</h1>
+      <p>
+        <a
+          href={`https://sdk-presence-example.sanity.studio/${devConfigs[2].dataset}/structure/`}
+          target={devConfigs[2].dataset}
+        >
+          View in Studio →
+        </a>
+      </p>
+      <ResourceProvider
+        projectId={devConfigs[2].projectId}
+        dataset={devConfigs[2].dataset}
+        fallback={<p>Loading...</p>}
+      >
+        <PresenceSecondProject />
+      </ResourceProvider>
+    </div>
+  )
+}

apps/kitchensink-react/src/Presence/PresenceSecondProject.tsx

@@ -0,0 +1,14 @@
+import {usePresence, useProject} from '@sanity/sdk-react'
+import {JSX} from 'react'
+
+export function PresenceSecondProject(): JSX.Element {
+  const project = useProject()
+  const {locations} = usePresence()
+
+  return (
+    <div>
+      <p>Project: {project?.id}</p>
+      <pre>{JSON.stringify(locations, null, 2)}</pre>
+    </div>
+  )
+}

apps/kitchensink-react/src/sanityConfigs.ts

@@ -9,6 +9,10 @@ export const devConfigs: SanityConfig[] = [
     projectId: 'd45jg133',
     dataset: 'production',
   },
+  {
+    projectId: 'v28v5k8m',
+    dataset: 'production',
+  },
 ]
 
 export const e2eConfigs: SanityConfig[] = [

packages/core/src/_exports/index.ts

@@ -104,6 +104,15 @@ export {type JsonMatch} from '../document/patchOperations'
 export {type DocumentPermissionsResult, type PermissionDeniedReason} from '../document/permissions'
 export type {FavoriteStatusResponse} from '../favorites/favorites'
 export {getFavoritesState, resolveFavoritesState} from '../favorites/favorites'
+export {getPresence} from '../presence/presenceStore'
+export type {
+  DisconnectEvent,
+  PresenceLocation,
+  RollCallEvent,
+  StateEvent,
+  TransportEvent,
+  UserPresence,
+} from '../presence/types'
 export {getPreviewState, type GetPreviewStateOptions} from '../preview/getPreviewState'
 export type {PreviewStoreState, PreviewValue, ValuePending} from '../preview/previewStore'
 export {resolvePreview, type ResolvePreviewOptions} from '../preview/resolvePreview'

packages/core/src/presence/bifurTransport.ts

@@ -1,7 +1,7 @@
 import {type BifurClient, fromUrl} from '@sanity/bifur-client'
 import {type SanityClient} from '@sanity/client'
-import {EMPTY, type Observable} from 'rxjs'
-import {map, share} from 'rxjs/operators'
+import {EMPTY, fromEvent, type Observable} from 'rxjs'
+import {map, share, switchMap} from 'rxjs/operators'
 
 import {
   type BifurTransportOptions,
@@ -98,5 +98,11 @@ export const createBifurTransport = (options: BifurTransportOptions): PresenceTr
     }
   }
 
+  if (typeof window !== 'undefined') {
+    fromEvent(window, 'beforeunload')
+      .pipe(switchMap(() => dispatchMessage({type: 'disconnect'})))
+      .subscribe()
+  }
+
   return [incomingEvents$.pipe(share()), dispatchMessage]
 }

packages/core/src/presence/presenceStore.test.ts

@@ -0,0 +1,247 @@
+import {type SanityClient} from '@sanity/client'
+import {delay, firstValueFrom, of, Subject} from 'rxjs'
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {getTokenState} from '../auth/authStore'
+import {getClient} from '../client/clientStore'
+import {createSanityInstance, type SanityInstance} from '../store/createSanityInstance'
+import {type SanityUser} from '../users/types'
+import {getUserState} from '../users/usersStore'
+import {createBifurTransport} from './bifurTransport'
+import {getPresence} from './presenceStore'
+import {type PresenceLocation, type TransportEvent} from './types'
+
+vi.mock('../auth/authStore')
+vi.mock('../client/clientStore')
+vi.mock('../users/usersStore')
+vi.mock('./bifurTransport')
+
+describe('presenceStore', () => {
+  let instance: SanityInstance
+  let mockClient: SanityClient
+  let mockTokenState: Subject<string | null>
+  let mockIncomingEvents: Subject<TransportEvent>
+  let mockDispatchMessage: ReturnType<typeof vi.fn>
+  let mockGetUserState: ReturnType<typeof vi.fn>
+
+  const mockUser: SanityUser = {
+    sanityUserId: 'u123',
+    profile: {
+      id: 'user-1',
+      displayName: 'Test User',
+      email: '[email protected]',
+      provider: 'google',
+      createdAt: '2023-01-01T00:00:00Z',
+    },
+    memberships: [],
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Mock crypto.randomUUID
+    Object.defineProperty(global, 'crypto', {
+      value: {
+        randomUUID: vi.fn(() => 'test-session-id'),
+      },
+    })
+
+    mockClient = {
+      withConfig: vi.fn().mockReturnThis(),
+    } as unknown as SanityClient
+
+    mockTokenState = new Subject<string | null>()
+    mockIncomingEvents = new Subject<TransportEvent>()
+    mockDispatchMessage = vi.fn(() => of(undefined))
+
+    vi.mocked(getClient).mockReturnValue(mockClient)
+    vi.mocked(getTokenState).mockReturnValue({
+      observable: mockTokenState.asObservable(),
+      getCurrent: vi.fn(),
+      subscribe: vi.fn(),
+    })
+
+    vi.mocked(createBifurTransport).mockReturnValue([
+      mockIncomingEvents.asObservable(),
+      mockDispatchMessage,
+    ])
+
+    mockGetUserState = vi.fn(() => of(mockUser))
+    vi.mocked(getUserState).mockImplementation(mockGetUserState)
+
+    instance = createSanityInstance({projectId: 'test-project', dataset: 'test-dataset'})
+  })
+
+  afterEach(() => {
+    instance.dispose()
+  })
+
+  describe('getPresence', () => {
+    it('creates bifur transport with correct parameters', () => {
+      getPresence(instance)
+
+      expect(createBifurTransport).toHaveBeenCalledWith({
+        client: mockClient,
+        token$: expect.any(Object),
+        sessionId: 'test-session-id',
+      })
+    })
+
+    it('sends rollCall message on initialization', () => {
+      getPresence(instance)
+
+      expect(mockDispatchMessage).toHaveBeenCalledWith({type: 'rollCall'})
+    })
+
+    it('returns empty array when no users present', () => {
+      const source = getPresence(instance)
+      expect(source.getCurrent()).toEqual([])
+    })
+
+    it('handles state events from other users', async () => {
+      const source = getPresence(instance)
+
+      // Subscribe to initialize the store
+      const unsubscribe = source.subscribe(() => {})
+
+      // Wait a bit for initialization
+      await firstValueFrom(of(null).pipe(delay(10)))
+
+      const locations: PresenceLocation[] = [
+        {
+          type: 'document',
+          documentId: 'doc-1',
+          path: ['title'],
+          lastActiveAt: '2023-01-01T12:00:00Z',
+        },
+      ]
+
+      mockIncomingEvents.next({
+        type: 'state',
+        userId: 'user-1',
+        sessionId: 'other-session',
+        timestamp: '2023-01-01T12:00:00Z',
+        locations,
+      })
+
+      // Wait for processing
+      await firstValueFrom(of(null).pipe(delay(20)))
+
+      const presence = source.getCurrent()
+      expect(presence).toHaveLength(1)
+      expect(presence[0].sessionId).toBe('other-session')
+      expect(presence[0].locations).toEqual(locations)
+
+      unsubscribe()
+    })
+
+    it('ignores events from own session', async () => {
+      const source = getPresence(instance)
+      const unsubscribe = source.subscribe(() => {})
+
+      await firstValueFrom(of(null).pipe(delay(10)))
+
+      mockIncomingEvents.next({
+        type: 'state',
+        userId: 'user-1',
+        sessionId: 'test-session-id', // Same as our session
+        timestamp: '2023-01-01T12:00:00Z',
+        locations: [],
+      })
+
+      await firstValueFrom(of(null).pipe(delay(20)))
+
+      const presence = source.getCurrent()
+      expect(presence).toHaveLength(0)
+
+      unsubscribe()
+    })
+
+    it('handles disconnect events', async () => {
+      const source = getPresence(instance)
+      const unsubscribe = source.subscribe(() => {})
+
+      await firstValueFrom(of(null).pipe(delay(10)))
+
+      // First add a user
+      mockIncomingEvents.next({
+        type: 'state',
+        userId: 'user-1',
+        sessionId: 'other-session',
+        timestamp: '2023-01-01T12:00:00Z',
+        locations: [],
+      })
+
+      await firstValueFrom(of(null).pipe(delay(20)))
+      expect(source.getCurrent()).toHaveLength(1)
+
+      // Then disconnect them
+      mockIncomingEvents.next({
+        type: 'disconnect',
+        userId: 'user-1',
+        sessionId: 'other-session',
+        timestamp: '2023-01-01T12:01:00Z',
+      })
+
+      await firstValueFrom(of(null).pipe(delay(20)))
+      expect(source.getCurrent()).toHaveLength(0)
+
+      unsubscribe()
+    })
+
+    it('fetches user data for present users', async () => {
+      const source = getPresence(instance)
+      const unsubscribe = source.subscribe(() => {})
+
+      await firstValueFrom(of(null).pipe(delay(10)))
+
+      mockIncomingEvents.next({
+        type: 'state',
+        userId: 'user-1',
+        sessionId: 'other-session',
+        timestamp: '2023-01-01T12:00:00Z',
+        locations: [
+          {
+            type: 'document',
+            documentId: 'doc-1',
+            path: ['title'],
+            lastActiveAt: '2023-01-01T12:00:00Z',
+          },
+        ],
+      })
+
+      await firstValueFrom(of(null).pipe(delay(50)))
+
+      expect(getUserState).toHaveBeenCalledWith(instance, {
+        userId: 'user-1',
+        resourceType: 'project',
+        projectId: 'test-project',
+      })
+
+      unsubscribe()
+    })
+
+    it('handles presence events correctly', async () => {
+      const source = getPresence(instance)
+      const unsubscribe = source.subscribe(() => {})
+
+      await firstValueFrom(of(null).pipe(delay(10)))
+
+      mockIncomingEvents.next({
+        type: 'state',
+        userId: 'test-user',
+        sessionId: 'other-session',
+        timestamp: '2023-01-01T12:00:00Z',
+        locations: [],
+      })
+
+      await firstValueFrom(of(null).pipe(delay(50)))
+
+      const presence = source.getCurrent()
+      expect(presence).toHaveLength(1)
+      expect(presence[0].sessionId).toBe('other-session')
+
+      unsubscribe()
+    })
+  })
+})