♻️(frontend) refactor useMuteParticipant hook

Fix unreachable code when notifying participants that they were
muted.

Prevent unnecessary function re-creations when props remain
unchanged.

Also guard against missing tokens by logging an error and
returning early when the token is undefined.

src/frontend/src/features/rooms/api/muteParticipant.ts

@@ -8,59 +8,72 @@ import {
 import { fetchApi } from '@/api/fetchApi'
 import { useIsAdminOrOwner } from '../livekit/hooks/useIsAdminOrOwner'
 
+import { useCallback } from 'react'
+
 export const useMuteParticipant = () => {
   const apiRoomData = useRoomData()
   const { notifyParticipants } = useNotifyParticipants()
   const isAdminOrOwner = useIsAdminOrOwner()
 
-  const muteParticipant = async (participant: Participant) => {
+  const muteParticipant = useCallback(
-    if (!apiRoomData?.livekit?.room) {
+    async (participant: Participant) => {
-      throw new Error('Room id is not available')
+      if (!apiRoomData?.livekit?.room) {
-    }
+        throw new Error('Room id is not available')
-    const trackSid = participant.getTrackPublication(
+      }
-      Source.Microphone
-    )?.trackSid
 
-    if (!trackSid) {
+      const trackSid = participant.getTrackPublication(
-      return
+        Source.Microphone
-    }
+      )?.trackSid
 
-    const headers = !isAdminOrOwner
+      if (!trackSid) {
-      ? {
+        return
-          Authorization: `Bearer ${apiRoomData?.livekit?.token}`,
+      }
-        }
+
-      : undefined
+      // Guard against undefined token for non-admin users
+      if (!isAdminOrOwner && !apiRoomData.livekit.token) {
+        console.error('Cannot mute participant: missing auth token')
+        return
+      }
+
+      const headers = !isAdminOrOwner
+        ? { Authorization: `Bearer ${apiRoomData.livekit.token}` }
+        : undefined
+
+      let response
+      try {
+        response = await fetchApi(
+          `rooms/${apiRoomData.livekit.room}/mute-participant/`,
+          {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+              participant_identity: participant.identity,
+              track_sid: trackSid,
+            }),
+          }
+        )
+      } catch (error) {
+        console.error(
+          `Failed to mute participant ${participant.identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
+        )
+        return
+      }
+
+      try {
+        await notifyParticipants({
+          type: NotificationType.ParticipantMuted,
+          destinationIdentities: [participant.identity],
+        })
+      } catch (e) {
+        console.error(
+          `Failed to notify muted participant ${participant.identity}: ${e}`
+        )
+      }
 
-    try {
-      const response = fetchApi(
-        `rooms/${apiRoomData?.livekit?.room}/mute-participant/`,
-        {
-          method: 'POST',
-          headers,
-          body: JSON.stringify({
-            participant_identity: participant.identity,
-            track_sid: trackSid,
-          }),
-        }
-      )
       return response
-    } catch (error) {
+    },
-      console.error(
+    [apiRoomData, isAdminOrOwner, notifyParticipants]
-        `Failed to mute participant ${participant.identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
+  )
-      )
-      return
-    }
 
-    try {
-      await notifyParticipants({
-        type: NotificationType.ParticipantMuted,
-        destinationIdentities: [participant.identity],
-      })
-    } catch (e) {
-      console.error(
-        `Failed to notify muted participant ${participant.identity}: ${e}`
-      )
-    }
-  }
   return { muteParticipant }
 }