BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix/mobile breakouts: Clicking one user would select another user (#21351)

Browse Source
This commit is contained in:
André Castro 2024-10-21 14:51:43 -03:00 committed by GitHub
parent a9e0e872b1
commit 5c85b0a4d4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
bigbluebutton-html5/imports/ui/components/breakout-room/create-breakout-room/breakout-room-user-assignment-mobile/room-user-list/component.tsx
View File

@ -18,10 +18,10 @@ interface RoomUserListProps {
confirm: () => void;
selectedRoom: number;
rooms: {
[key:number]: {
id: number;
name: string;
users: BreakoutUser[];
[key: number]: {
id: number;
name: string;
users: BreakoutUser[];
}
}
moveUser: (userId: string, fromRoomId: number, toRoomId: number) => void;
@ -34,47 +34,36 @@ const RoomUserList: React.FC<RoomUserListProps> = ({
confirm,
}) => {
const intl = useIntl();
const users = useMemo(() => {
const userElements = Object.values(rooms).sort((a, b) => {
if (a.id === selectedRoom) {
return -1; // Move itemToMove to the front
}
if (b.id === selectedRoom) {
return 1; // Move itemToMove to the front
}
return 0;
}).map((room) => {
return room.users.map((user) => {
return (
<Styled.SelectUserContainer id={user.userId} key={`breakout-user-${user.userId}`}>
<Styled.Round>
<input
type="checkbox"
id={`itemId${room.id}`}
defaultChecked={selectedRoom === room.id}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.checked) {
moveUser(user.userId, room.id, selectedRoom);
} else {
moveUser(user.userId, room.id, 0);
}
}}
/>
{/* eslint-disable-next-line */}
<label htmlFor={`itemId${room.id}`}>
<input type="hidden" id={`itemId${room.id}`} />
</label>
</Styled.Round>
<Styled.TextName>
{user.name}
{((room.id !== selectedRoom) && room.id !== 0) ? `\t[${room.id}]` : ''}
</Styled.TextName>
</Styled.SelectUserContainer>
);
});
return Object.values(rooms).map((room) => {
return room.users.map((user) => (
<Styled.SelectUserContainer id={user.userId} key={`breakout-user-${user.userId}`}>
<Styled.Round>
<input
type="checkbox"
id={`user-${user.userId}-room-${room.id}`}
checked={selectedRoom === room.id}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.checked) {
moveUser(user.userId, room.id, selectedRoom);
} else {
moveUser(user.userId, room.id, 0);
}
}}
/>
{/* eslint-disable-next-line */}
<label htmlFor={`user-${user.userId}-room-${room.id}`} />
</Styled.Round>
<Styled.TextName>
{user.name}
{room.id !== 0 && room.id !== selectedRoom ? `\t[${room.id}]` : ''}
</Styled.TextName>
</Styled.SelectUserContainer>
));
}).flat();
return userElements;
}, [rooms, selectedRoom]);
}, [rooms, selectedRoom, moveUser]);
return (
<Styled.SelectUserScreen>
<Styled.Header>