Merge pull request #4811 from daily-co/eng-4075-uselocalparticipant-does-not-resolve

ENG-4075 Fix useLocalParticipant state initialization

Author: Regaddi

src/hooks/useLocalParticipant.ts

@@ -1,8 +1,8 @@
-import { useCallback, useEffect } from 'react';
+import { DailyEventObjectParticipant } from '@daily-co/daily-js';
+import { useEffect } from 'react';
 import { atom, useRecoilCallback, useRecoilValue } from 'recoil';
 
 import { useDaily } from './useDaily';
-import { useDailyEvent } from './useDailyEvent';
 import { useParticipant } from './useParticipant';
 
 const localIdState = atom<string>({
@@ -19,25 +19,27 @@ export const useLocalParticipant = (): ReturnType<typeof useParticipant> => {
 
   const initState = useRecoilCallback(
     ({ set }) =>
-      () => {
-        const local = daily?.participants()?.local;
-        if (!local) return;
-        set(localIdState, local.session_id);
+      (session_id: string) => {
+        if (!session_id) return;
+        set(localIdState, session_id);
       },
-    [daily]
+    []
   );
   useEffect(() => {
-    if (!daily) return;
-    initState();
-  }, [daily, initState]);
-
-  useDailyEvent(
-    'loaded',
-    useCallback(() => {
-      // Arbitrary timeout. See https://codepen.io/Regaddi/pen/zYdVBja
-      setTimeout(initState, 1000);
-    }, [initState])
-  );
+    if (!daily || localId) return;
+    if (daily.participants()?.local) {
+      initState(daily.participants().local.session_id);
+      return;
+    }
+    const handleParticipantUpdated = (ev?: DailyEventObjectParticipant) => {
+      if (!ev?.participant?.local) return;
+      initState(ev?.participant?.session_id);
+    };
+    daily.on('participant-updated', handleParticipantUpdated);
+    return () => {
+      daily.off('participant-updated', handleParticipantUpdated);
+    };
+  }, [daily, initState, localId]);
 
   return useParticipant(localId);
 };

test/hooks/useLocalParticipant.test.tsx

@@ -1,15 +1,12 @@
 /// <reference types="@types/jest" />
 
-import DailyIframe, {
-  DailyCall,
-  DailyEvent,
-  DailyEventObject,
-} from '@daily-co/daily-js';
+import DailyIframe, { DailyCall } from '@daily-co/daily-js';
 import { act, renderHook } from '@testing-library/react-hooks';
 import React from 'react';
 
 import { DailyProvider } from '../../src/DailyProvider';
 import { useLocalParticipant } from '../../src/hooks/useLocalParticipant';
+import * as useParticipantModule from '../../src/hooks/useParticipant';
 
 const createWrapper =
   (callObject: DailyCall = DailyIframe.createCallObject()): React.FC =>
@@ -30,6 +27,7 @@ describe('useLocalParticipant', () => {
     const daily = DailyIframe.createCallObject();
     (daily.participants as jest.Mock).mockImplementation(() => ({
       local: {
+        local: true,
         session_id: 'local',
         user_name: '',
       },
@@ -39,45 +37,33 @@ describe('useLocalParticipant', () => {
     });
     await waitFor(() => {
       expect(result.current).toEqual({
+        local: true,
         session_id: 'local',
         user_name: '',
       });
     });
   });
-  it('loaded event triggers a 1s timeout to init state', async () => {
-    jest.useFakeTimers();
-    const setTimeoutSpy = jest.spyOn(window, 'setTimeout');
+  it('participant-updated event inits state and calls useParticipant with session_id', async () => {
     const daily = DailyIframe.createCallObject();
-    const { result, waitFor } = renderHook(() => useLocalParticipant(), {
+    const spy = jest.spyOn(useParticipantModule, 'useParticipant');
+    const { waitFor } = renderHook(() => useLocalParticipant(), {
       wrapper: createWrapper(daily),
     });
-    const event: DailyEvent = 'loaded';
-    const payload: DailyEventObject = {
-      action: event,
-    };
-    act(() => {
-      // @ts-ignore
-      daily.emit(event, payload);
-    });
-    await waitFor(() => {
-      expect(setTimeoutSpy).toBeCalledWith(expect.any(Function), 1000);
-      expect(result.current).toBeNull();
-    });
-    (daily.participants as jest.Mock).mockImplementation(() => ({
-      local: {
+    const action = 'participant-updated';
+    const payload = {
+      action,
+      participant: {
+        local: true,
         session_id: 'local',
         user_name: '',
       },
-    }));
+    };
     act(() => {
-      jest.runAllTimers();
+      // @ts-ignore
+      daily.emit('participant-updated', payload);
     });
     await waitFor(() => {
-      expect(result.current).toEqual({
-        session_id: 'local',
-        user_name: '',
-      });
+      expect(spy).toHaveBeenCalledWith('local');
     });
-    jest.useRealTimers();
   });
 });

test/hooks/useRecording.test.tsx

@@ -12,19 +12,20 @@ import DailyIframe, {
 import { act, renderHook } from '@testing-library/react-hooks';
 import faker from 'faker';
 import React from 'react';
-import { RecoilRoot } from 'recoil';
 
 import { DailyProvider } from '../../src/DailyProvider';
 import { useRecording } from '../../src/hooks/useRecording';
 
+const localId = faker.datatype.uuid();
+
+jest.mock('../../src/hooks/useLocalParticipant', () => ({
+  useLocalParticipant: () => ({ session_id: localId }),
+}));
+
 const createWrapper =
   (callObject: DailyCall = DailyIframe.createCallObject()): React.FC =>
   ({ children }) =>
-    (
-      <DailyProvider callObject={callObject}>
-        <RecoilRoot>{children}</RecoilRoot>
-      </DailyProvider>
-    );
+    <DailyProvider callObject={callObject}>{children}</DailyProvider>;
 
 describe('useRecording', () => {
   it('returns default state and functions', async () => {
@@ -185,16 +186,12 @@ describe('useRecording', () => {
   });
   it('single-participant recording for other participant sets isLocalParticipantRecorded to false', async () => {
     const daily = DailyIframe.createCallObject();
-    const localId = faker.datatype.uuid();
-    const otherId = faker.datatype.uuid();
+    const otherId = 'other';
     (daily.participants as jest.Mock).mockImplementation(() => ({
       local: {
         session_id: localId,
       },
     }));
-    jest.mock('../../src/hooks/useLocalParticipant', () => ({
-      useLocalParticipant: () => ({ session_id: localId }),
-    }));
     const { result, waitFor } = renderHook(() => useRecording(), {
       wrapper: createWrapper(daily),
     });
@@ -207,7 +204,7 @@ describe('useRecording', () => {
       },
       local: false,
       recordingId: faker.datatype.uuid(),
-      startedBy: faker.datatype.uuid(),
+      startedBy: localId,
       type: 'cloud',
     };
     act(() => {