✨(frontend) add client for the update participant role endpoint

Add the frontend client that calls the update participant role
endpoint. Straightforward API call, no special handling.

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

@@ -30,3 +30,4 @@ export type ApiRoom = {
 }
 
 export type ParticipantRole = 'member' | 'administrator' | 'owner'
+export type AssignableParticipantRole = Exclude<ParticipantRole, 'owner'>

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

@@ -0,0 +1,32 @@
+import type { Participant } from 'livekit-client'
+import { fetchApi } from '@/api/fetchApi'
+import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import { AssignableParticipantRole } from '@/features/rooms/api/ApiRoom'
+
+export const useParticipantRole = () => {
+  const data = useRoomData()
+
+  const updateParticipantRole = async (
+    participant: Participant,
+    role: AssignableParticipantRole
+  ) => {
+    if (!data?.id) {
+      throw new Error('Room id is not available')
+    }
+
+    try {
+      return fetchApi(`rooms/${data.id}/update-participant-role/`, {
+        method: 'POST',
+        body: JSON.stringify({
+          participant_identity: participant.identity,
+          role: role,
+        }),
+      })
+    } catch (error) {
+      console.error(
+        `Failed to update participant's role ${participant.identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
+      )
+    }
+  }
+  return { updateParticipantRole }
+}