Fix noUncheckedIndexedAccess for react-composites (#5297)

Author: JamesBurnside

change/@azure-communication-react-53fb5e2d-7cd9-4787-a9e2-8111a2247bbd.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "",
+  "comment": "Fix noUncheckedIndexedAccess for react-composites",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallComposite/CallComposite.tsx

@@ -477,7 +477,7 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
             'recordingAndTranscriptionStopped',
             'recordingStoppedStillTranscribing',
             'transcriptionStoppedStillRecording'
-          ].includes(activeNotifications[index].type)
+          ].includes(notification.type)
         ) {
           activeNotifications.splice(index, 1);
         }

packages/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.ts

@@ -355,7 +355,7 @@ const findLatestEndedCall = (calls: { [key: string]: CallState }): CallState | u
   }
   let latestCall = callStates[0];
   for (const call of callStates.slice(1)) {
-    if ((call.endTime?.getTime() ?? 0) > (latestCall.endTime?.getTime() ?? 0)) {
+    if ((call.endTime?.getTime() ?? 0) > (latestCall?.endTime?.getTime() ?? 0)) {
       latestCall = call;
     }
   }
@@ -371,7 +371,7 @@ const findLatestAcceptedTransfer = (acceptedTransfers: {
   }
   let latestAcceptedTransfer = acceptedTransferValues[0];
   for (const acceptedTransfer of acceptedTransferValues.slice(1)) {
-    if ((acceptedTransfer.timestamp?.getTime() ?? 0) > (latestAcceptedTransfer.timestamp?.getTime() ?? 0)) {
+    if ((acceptedTransfer.timestamp?.getTime() ?? 0) > (latestAcceptedTransfer?.timestamp?.getTime() ?? 0)) {
       latestAcceptedTransfer = acceptedTransfer;
     }
   }
@@ -523,36 +523,56 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | TeamsCa
 
     if (this.callAgent.kind === 'CallAgent') {
       const onCallsUpdated = (args: { added: Call[]; removed: Call[] }): void => {
-        if (this.call?.id) {
-          const removedCall = args.removed.find((call) => call.id === this.call?.id);
-          if (removedCall) {
-            const removedCallState = this.callClient.getState().callsEnded[removedCall.id];
-            const latestAcceptedTransfer = findLatestAcceptedTransfer(removedCallState.transfer.acceptedTransfers);
-            const _callAgent = callAgent as CallAgent;
-            const transferCall = _callAgent.calls.find((call: Call) => call.id === latestAcceptedTransfer?.callId);
-            if (transferCall) {
-              this.processNewCall(transferCall);
-            }
-          }
+        if (!this.call?.id) {
+          return;
         }
+
+        const removedCall = args.removed.find((call) => call.id === this.call?.id);
+        if (!removedCall) {
+          return;
+        }
+
+        const removedCallState = this.callClient.getState().callsEnded[removedCall.id];
+        if (!removedCallState) {
+          return;
+        }
+
+        const latestAcceptedTransfer = findLatestAcceptedTransfer(removedCallState.transfer.acceptedTransfers);
+        const _callAgent = callAgent as CallAgent;
+        const transferCall = _callAgent.calls.find((call: Call) => call.id === latestAcceptedTransfer?.callId);
+        if (!transferCall) {
+          return;
+        }
+
+        this.processNewCall(transferCall);
       };
       (this.callAgent as CallAgent).on('callsUpdated', onCallsUpdated);
     }
     /* @conditional-compile-remove(teams-identity-support) */
     if (this.callAgent.kind === 'TeamsCallAgent') {
       const onTeamsCallsUpdated = (args: { added: TeamsCall[]; removed: TeamsCall[] }): void => {
-        if (this.call?.id) {
-          const removedCall = args.removed.find((call) => call.id === this.call?.id);
-          if (removedCall) {
-            const removedCallState = this.callClient.getState().callsEnded[removedCall.id];
-            const latestAcceptedTransfer = findLatestAcceptedTransfer(removedCallState.transfer.acceptedTransfers);
-            const _callAgent = callAgent as TeamsCallAgent;
-            const transferCall = _callAgent.calls.find((call: TeamsCall) => call.id === latestAcceptedTransfer?.callId);
-            if (transferCall) {
-              this.processNewCall(transferCall);
-            }
-          }
+        if (!this.call?.id) {
+          return;
         }
+
+        const removedCall = args.removed.find((call) => call.id === this.call?.id);
+        if (!removedCall) {
+          return;
+        }
+
+        const removedCallState = this.callClient.getState().callsEnded[removedCall.id];
+        if (!removedCallState) {
+          return;
+        }
+
+        const latestAcceptedTransfer = findLatestAcceptedTransfer(removedCallState.transfer.acceptedTransfers);
+        const _callAgent = callAgent as TeamsCallAgent;
+        const transferCall = _callAgent.calls.find((call: TeamsCall) => call.id === latestAcceptedTransfer?.callId);
+        if (!transferCall) {
+          return;
+        }
+
+        this.processNewCall(transferCall);
       };
       (this.callAgent as TeamsCallAgent).on('callsUpdated', onTeamsCallsUpdated);
     }
@@ -1443,7 +1463,7 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | TeamsCa
   private hangupOtherBreakoutRoomCalls(currentBreakoutRoomCallId: string): void {
     // Get origin call id of breakout room call
     const breakoutRoomCallState = this.callClient.getState().calls[currentBreakoutRoomCallId];
-    const originCallId = breakoutRoomCallState.breakoutRooms?.breakoutRoomOriginCallId;
+    const originCallId = breakoutRoomCallState?.breakoutRooms?.breakoutRoomOriginCallId;
 
     // Get other breakout room calls with the same origin call
     const otherBreakoutRoomCallStates = Object.values(this.callClient.getState().calls).filter((callState) => {

packages/react-composites/src/composites/CallComposite/adapter/CallingSoundSubscriber.ts

@@ -23,12 +23,12 @@ const CALL_TRANSFER_SUBCODE = 7015;
 export class CallingSoundSubscriber {
   private call: CallCommon;
   private soundsLoaded?: CallingSoundsLoaded;
-  private callee: CommunicationIdentifier[] | undefined;
+  private callees: CommunicationIdentifier[] | undefined;
   public playingSounds: boolean = false;
 
-  constructor(call: CallCommon, callee?: CommunicationIdentifier[], sounds?: CallingSounds) {
+  constructor(call: CallCommon, callees?: CommunicationIdentifier[], sounds?: CallingSounds) {
     this.call = call;
-    this.callee = callee;
+    this.callees = callees;
     if (sounds) {
       this.soundsLoaded = this.loadSounds(sounds);
       this.subscribeCallSoundEvents();
@@ -37,12 +37,12 @@ export class CallingSoundSubscriber {
 
   private onCallStateChanged = (): void => {
     this.call.on('stateChanged', () => {
-      if (shouldPlayRinging(this.call, this.callee) && this.soundsLoaded?.callRingingSound) {
+      if (shouldPlayRinging(this.call, this.callees) && this.soundsLoaded?.callRingingSound) {
         this.soundsLoaded.callRingingSound.loop = true;
         this.playSound(this.soundsLoaded.callRingingSound);
         this.playingSounds = true;
       }
-      if (!shouldPlayRinging(this.call, this.callee) && this.soundsLoaded?.callRingingSound) {
+      if (!shouldPlayRinging(this.call, this.callees) && this.soundsLoaded?.callRingingSound) {
         this.soundsLoaded.callRingingSound.loop = false;
         this.soundsLoaded.callRingingSound.pause();
         this.playingSounds = false;
@@ -123,16 +123,15 @@ export class CallingSoundSubscriber {
  * Helper function to allow the calling sound subscriber to determine when to play the ringing
  * sound when making an outbound call.
  */
-const shouldPlayRinging = (call: CallCommon, callee?: CommunicationIdentifier[]): boolean => {
+const shouldPlayRinging = (call: CallCommon, callees?: CommunicationIdentifier[]): boolean => {
   if (
-    callee &&
-    callee.length >= 1 &&
-    !isPhoneNumberIdentifier(callee[0]) &&
+    callees &&
+    callees[0] &&
+    !isPhoneNumberIdentifier(callees[0]) &&
     (call.state === 'Ringing' || call.state === 'Connecting')
   ) {
     return true;
   } else {
     return false;
   }
-  return false;
 };

packages/react-composites/src/composites/CallComposite/adapter/OnFetchProfileCallback.ts

@@ -38,20 +38,27 @@ export const createProfileStateModifier = (
 
   return (state: CallAdapterState) => {
     const originalParticipants = state.call?.remoteParticipants;
+
     (async () => {
       let shouldNotifyUpdates = false;
-      for (const key in originalParticipants) {
+      if (!originalParticipants) {
+        return;
+      }
+
+      for (const [key, participant] of Object.entries(originalParticipants)) {
         if (cachedDisplayName[key]) {
           continue;
         }
-        const profile = await onFetchProfile(key, { displayName: originalParticipants[key].displayName });
-        if (profile?.displayName && originalParticipants[key].displayName !== profile?.displayName) {
+        const profile = await onFetchProfile(key, { displayName: participant.displayName });
+        if (profile?.displayName && participant.displayName !== profile?.displayName) {
           cachedDisplayName[key] = profile?.displayName;
           shouldNotifyUpdates = true;
         }
       }
       // notify update only when there is a change, which most likely will trigger modifier and setState again
-      shouldNotifyUpdates && notifyUpdate();
+      if (shouldNotifyUpdates) {
+        notifyUpdate();
+      }
     })();
 
     const participantsModifier = createParticipantModifier(

packages/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.tsx

@@ -62,11 +62,10 @@ const getOptionIcon = (type: iconType): JSX.Element | undefined => {
 };
 
 const onRenderTitle = (iconType: iconType, props?: IDropdownOption[]): JSX.Element => {
-  const icon = props && getOptionIcon(iconType);
   return props ? (
     <div className={dropDownTitleIconStyles}>
-      {icon}
-      <span>{props[0].text}</span>
+      {getOptionIcon(iconType)}
+      <span>{props[0]?.text}</span>
     </div>
   ) : (
     <></>
@@ -168,7 +167,12 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
           : 'deniedOrUnknown'
       }
       onChange={(event, option, index) => {
-        props.onSelectCamera(props.cameras[index ?? 0], localVideoViewOptions);
+        const camera = props.cameras[index ?? 0];
+        if (camera) {
+          props.onSelectCamera(camera, localVideoViewOptions);
+        } else {
+          console.error('No cameras available');
+        }
       }}
       onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Camera', props)}
     />
@@ -200,7 +204,12 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
             option?: IDropdownOption | undefined,
             index?: number | undefined
           ) => {
-            props.onSelectMicrophone(props.microphones[index ?? 0]);
+            const microphone = props.microphones[index ?? 0];
+            if (microphone) {
+              props.onSelectMicrophone(microphone);
+            } else {
+              console.error('No microphones available');
+            }
           }}
           onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Microphone', props)}
         />
@@ -221,7 +230,12 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
         option?: IDropdownOption | undefined,
         index?: number | undefined
       ) => {
-        props.onSelectSpeaker(props.speakers[index ?? 0]);
+        const speaker = props.speakers[index ?? 0];
+        if (speaker) {
+          props.onSelectSpeaker(speaker);
+        } else {
+          console.error('No speakers available');
+        }
       }}
       onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Speaker', props)}
     />
@@ -293,13 +307,13 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
   );
 };
 
-const defaultDeviceId = (devices: AudioDeviceInfo[]): string => {
+const defaultDeviceId = (devices: AudioDeviceInfo[]): string | undefined => {
   if (devices.length === 0) {
-    return '';
+    return undefined;
   }
   const defaultDevice = devices.find((device) => device.isSystemDefault);
   if (defaultDevice) {
     return defaultDevice.id;
   }
-  return devices[0].id;
+  return devices[0]?.id;
 };

packages/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.tsx

@@ -80,7 +80,7 @@ export const NetworkReconnectTile = (props: NetworkReconnectTileProps): JSX.Elem
           <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live={'assertive'}>
             {strings.networkReconnectMoreDetails}
           </Text>
-          {isTeamsMeeting && meetingCoordinates && meetingCoordinates.length > 0 && (
+          {isTeamsMeeting && meetingCoordinates && meetingCoordinates[0] && (
             <Stack>
               <Stack horizontal horizontalAlign="center" verticalAlign="center" className={titleContainerClassName}>
                 <Text className={titleClassName}>{localeStrings.meetingConferencePhoneInfoModalTitle}</Text>

packages/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx

@@ -180,7 +180,7 @@ export const usePeoplePane = (props: {
       /* @conditional-compile-remove(soft-mute) */
       if (onMuteParticipant && !isMe && remoteParticipants && remoteParticipants[participantId]) {
         const participant = remoteParticipants[participantId];
-        const isMuted = participant.isMuted;
+        const isMuted = !!participant?.isMuted;
         _defaultMenuItems.push({
           key: 'mute',
           text: 'Mute',

packages/react-composites/src/composites/CallComposite/pages/TransferPage.tsx

@@ -155,6 +155,9 @@ const TransferTile = (props: TransferTileProps): JSX.Element => {
 
   const observer = useRef(
     new ResizeObserver((entries): void => {
+      if (!entries[0]) {
+        return;
+      }
       const { width, height } = entries[0].contentRect;
       const personaSize = Math.min(width, height) / 2;
       setPersonaSize(Math.max(Math.min(personaSize, 150), 32));

packages/react-composites/src/composites/CallComposite/selectors/dominantRemoteParticipantSelector.ts

@@ -28,7 +28,7 @@ export const dominantRemoteParticipantSelector = reselect.createSelector(
 const findDominantRemoteParticipant = (
   remoteParticipants: { [keys: string]: RemoteParticipantState },
   dominantSpeakerIds: string[]
-): RemoteParticipantState => {
+): RemoteParticipantState | undefined => {
   let dominantRemoteParticipantId = dominantSpeakerIds[0];
 
   // Fallback to using the first remote participant if there are no dominant speaker IDs
@@ -38,5 +38,5 @@ const findDominantRemoteParticipant = (
     dominantRemoteParticipantId = remoteParticipantIds[0];
   }
 
-  return remoteParticipants[dominantRemoteParticipantId];
+  return dominantRemoteParticipantId ? remoteParticipants[dominantRemoteParticipantId] : undefined;
 };