fix(breakouts): user list not updating

Change user query to subscription so the user list is updated when users join/leave after the creation modal is open.
Removed some order by fields.

Author: germanocaumo

bigbluebutton-html5/imports/ui/components/breakout-room/create-breakout-room/component.tsx

@@ -11,8 +11,7 @@ import {
   getBreakoutsResponse,
   getMeetingGroup,
   getMeetingGroupResponse,
-  getUser,
-  getUserResponse,
+  getUsersSubscription,
 } from './queries';
 import { PRESENTATIONS_SUBSCRIPTION, PresentationsSubscriptionResponse } from '/imports/ui/components/whiteboard/queries';
 import logger from '/imports/startup/client/logger';
@@ -28,6 +27,7 @@ import {
   RoomPresentations,
 } from './room-managment-state/types';
 import { BREAKOUT_ROOM_CREATE, BREAKOUT_ROOM_MOVE_USER } from '../mutations';
+import createUseSubscription from '/imports/ui/core/hooks/createUseSubscription';
 import useDeduplicatedSubscription from '/imports/ui/core/hooks/useDeduplicatedSubscription';
 import { ACTIONS, PANELS } from '/imports/ui/components/layout/enums';
 import { layoutDispatch } from '/imports/ui/components/layout/context';
@@ -287,8 +287,8 @@ const CreateBreakoutRoom: React.FC<CreateBreakoutRoomProps> = ({
 
   const roomsRef = React.useRef<Rooms>({});
   const moveRegisterRef = React.useRef<moveUserRegistery>({});
-  const randomlyAssignFunction = React.useRef<() => void>(() => {});
-  const resetAssignmentsFunction = React.useRef<() => void>(() => {});
+  const randomlyAssignFunction = React.useRef<() => void>(() => { });
+  const resetAssignmentsFunction = React.useRef<() => void>(() => { });
 
   const setRoomsRef = (rooms: Rooms) => {
     roomsRef.current = rooms;
@@ -717,13 +717,17 @@ const CreateBreakoutRoomContainer: React.FC<CreateBreakoutRoomContainerProps> =
     createdTime: m.createdTime,
   }));
 
+  const useUsersSubscription = createUseSubscription(
+    getUsersSubscription,
+    {},
+    true,
+  );
+
   const {
     data: usersData,
     loading: usersLoading,
-    error: usersError,
-  } = useQuery<getUserResponse>(getUser, {
-    fetchPolicy: 'network-only',
-  });
+    errors: usersError,
+  } = useUsersSubscription();
 
   const [
     loadBreakouts,
@@ -780,7 +784,7 @@ const CreateBreakoutRoomContainer: React.FC<CreateBreakoutRoomContainerProps> =
       isUpdate={isUpdate}
       setUpdateUsersWhileRunning={setUpdateUsersWhileRunning}
       isBreakoutRecordable={currentMeeting?.breakoutPolicies?.record ?? true}
-      users={usersData?.user ?? []}
+      users={(usersData ?? []) as BreakoutUser[]}
       runningRooms={breakoutsData?.breakoutRoom ?? []}
       presentations={presentations}
       currentPresentation={currentPresentation}

bigbluebutton-html5/imports/ui/components/breakout-room/create-breakout-room/queries.ts

@@ -1,9 +1,4 @@
 import { gql } from '@apollo/client';
-import { BreakoutUser } from './room-managment-state/types';
-
-export interface getUserResponse {
-  user: Array<BreakoutUser>;
-}
 
 export interface breakoutRoom {
   sequence: number;
@@ -47,16 +42,11 @@ export interface getMeetingGroupResponse {
   }[];
 }
 
-export const getUser = gql`
-  query getUser {
+export const getUsersSubscription = gql`
+  subscription users {
     user(
       where: { bot: {_eq: false } }
       order_by: [
-        {presenter: desc},
-        {role: asc},
-        {raiseHandTime: asc_nulls_last},
-        {isDialIn: desc},
-        {whiteboardWriteAccess: desc},
         {nameSortable: asc},
         {registeredAt: asc},
         {userId: asc}
@@ -116,7 +106,7 @@ export const getMeetingGroup = gql`
 `;
 
 export default {
-  getUser,
+  getUsersSubscription,
   getBreakouts,
   getLastBreakouts,
   getMeetingGroup,

bigbluebutton-html5/imports/ui/components/breakout-room/create-breakout-room/room-managment-state/component.tsx

@@ -185,14 +185,27 @@ const RoomManagmentState: React.FC<RoomManagmentStateProps> = ({
   });
 
   useEffect(() => {
-    if (users.length > 0 && Object.keys(userAssignedRooms).length === 0) {
-      setUserAssignedRooms(
-        users.reduce((acc: { [key: string]: number[] }, user) => {
-          const { userId } = user;
-          acc[userId] = [];
-          return acc;
-        }, {}),
-      );
+    if (users.length > 0) {
+      setUserAssignedRooms((prev) => {
+        const updated = { ...prev };
+
+        // Add new users that don't exist in the state
+        users.forEach((user) => {
+          if (!updated[user.userId]) {
+            updated[user.userId] = [];
+          }
+        });
+
+        // Remove users that are no longer in the users list
+        const currentUserIds = new Set(users.map((u) => u.userId));
+        Object.keys(updated).forEach((userId) => {
+          if (!currentUserIds.has(userId)) {
+            delete updated[userId];
+          }
+        });
+
+        return updated;
+      });
     }
   }, [users]);