Update DailyNetwork, useNetwork, and prebuilt to use new networkState and networkStateReasons

Author: mattieruth

src/DailyNetwork.tsx

@@ -5,12 +5,19 @@ import React, { useCallback, useEffect } from 'react';
 
 import { useDaily } from './hooks/useDaily';
 import { useDailyEvent } from './hooks/useDailyEvent';
+import { arraysDeepEqual } from './lib/customDeepEqual';
 import { jotaiDebugLabel } from './lib/jotai-custom';
 
 export const topologyState = atom<DailyNetworkTopology | 'none'>('none');
 topologyState.debugLabel = jotaiDebugLabel('topology');
+export const networkState = atom<DailyNetworkStats['networkState']>('unknown');
+export const networkStateReasons = atom<
+  DailyNetworkStats['networkStateReasons']
+>([]);
+// @deprecated
 export const networkQualityState = atom<DailyNetworkStats['quality']>(100);
 networkQualityState.debugLabel = jotaiDebugLabel('network-quality');
+// @deprecated
 export const networkThresholdState =
   atom<DailyNetworkStats['threshold']>('good');
 networkThresholdState.debugLabel = jotaiDebugLabel('network-threshold');
@@ -52,6 +59,22 @@ export const DailyNetwork: React.FC<React.PropsWithChildren<{}>> = ({
     'network-quality-change',
     useAtomCallback(
       useCallback((_get, set, ev) => {
+        set(
+          networkState,
+          (prevNetworkState: DailyNetworkStats['networkState']) =>
+            prevNetworkState !== ev.networkState
+              ? ev.networkState
+              : prevNetworkState
+        );
+        set(
+          networkStateReasons,
+          (prevReasons: DailyNetworkStats['networkStateReasons']) => {
+            const curReasons = ev.networkStateReasons ?? [];
+            return !arraysDeepEqual(prevReasons, curReasons)
+              ? curReasons
+              : prevReasons;
+          }
+        );
         set(networkQualityState, (prevQuality: DailyNetworkStats['quality']) =>
           prevQuality !== ev.quality ? ev.quality : prevQuality
         );
@@ -69,6 +92,8 @@ export const DailyNetwork: React.FC<React.PropsWithChildren<{}>> = ({
     useAtomCallback(
       useCallback((_get, set) => {
         set(topologyState, 'none');
+        set(networkState, 'unknown');
+        set(networkStateReasons, []);
         set(networkQualityState, 100);
         set(networkThresholdState, 'good');
       }, [])

src/hooks/useNetwork.ts

@@ -4,6 +4,8 @@ import { useCallback, useDebugValue } from 'react';
 
 import {
   networkQualityState,
+  networkState as netState,
+  networkStateReasons as netReasons,
   networkThresholdState,
   topologyState,
 } from '../DailyNetwork';
@@ -26,6 +28,8 @@ export const useNetwork = ({
   const daily = useDaily();
 
   const topology = useAtomValue(topologyState);
+  const networkState = useAtomValue(netState);
+  const networkStateReasons = useAtomValue(netReasons);
   const quality = useAtomValue(networkQualityState);
   const threshold = useAtomValue(networkThresholdState);
 
@@ -55,6 +59,8 @@ export const useNetwork = ({
 
   const result = {
     getStats,
+    networkState,
+    networkStateReasons,
     quality,
     threshold,
     topology,

test/hooks/useNetwork.test.tsx

@@ -54,22 +54,29 @@ const createWrapper =
     <DailyProvider callObject={callObject}>{children}</DailyProvider>;
 
 describe('useNetwork', () => {
-  it('returns getStats method, quality, threshold & topology with perfect defaults', () => {
+  it('returns getStats method with perfect defaults', () => {
     const { result } = renderHook(() => useNetwork(), {
       wrapper: createWrapper(),
     });
     expect(result.current).toHaveProperty('getStats');
     expect(typeof result.current.getStats).toBe('function');
     expect(result.current).toHaveProperty('quality');
     expect(result.current.quality).toBe(100);
+    expect(result.current).toHaveProperty('networkState');
+    expect(result.current.networkState).toBe('unknown');
+    expect(result.current).toHaveProperty('networkStateReasons');
+    expect(result.current.networkStateReasons).toStrictEqual([]);
     expect(result.current).toHaveProperty('threshold');
     expect(result.current.threshold).toBe('good');
     expect(result.current).toHaveProperty('topology');
     expect(result.current.topology).toBe('none');
   });
   it('getStats calls getNetworkStats internally', async () => {
     const mockStats: DailyNetworkStats = {
+      networkState: 'good',
+      networkStateReasons: [],
       quality: 99,
+      threshold: 'good',
       stats: {
         latest: {
           recvBitsPerSecond: 1000000,
@@ -102,7 +109,6 @@ describe('useNetwork', () => {
         worstAudioSendJitter: 0,
         averageNetworkRoundTripTime: 0.07171428571428572,
       },
-      threshold: 'good',
     };
     const daily = Daily.createCallObject();
     (
@@ -184,14 +190,19 @@ describe('useNetwork', () => {
     const event: DailyEvent = 'network-quality-change';
     const payload: DailyEventObjectNetworkQualityEvent = mockEvent({
       action: 'network-quality-change',
+      networkState: 'bad',
+      networkStateReasons: ['sendPacketLoss'],
       quality: 80,
       threshold: 'low',
+      stats: {},
     });
     act(() => {
       // @ts-ignore
       daily.emit(event, payload);
     });
     await waitFor(() => {
+      expect(result.current.networkState).toBe('bad');
+      expect(result.current.networkStateReasons).toEqual(['sendPacketLoss']);
       expect(result.current.quality).toBe(80);
       expect(result.current.threshold).toBe('low');
       expect(onNetworkQualityChange).toHaveBeenCalledWith(payload);