116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
import React, { useMemo, useState } from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
import Button from '/imports/ui/components/common/button/component';
|
|
import { uniqueId } from '/imports/utils/string-utils';
|
|
import Styled from '../styles';
|
|
import RoomUserList from './room-user-list/component';
|
|
import { ChildComponentProps } from '../room-managment-state/types';
|
|
|
|
const intlMessages = defineMessages({
|
|
nextLabel: {
|
|
id: 'app.createBreakoutRoom.nextLabel',
|
|
description: 'Next label',
|
|
},
|
|
backLabel: {
|
|
id: 'app.audio.backLabel',
|
|
description: 'Back label',
|
|
},
|
|
breakoutRoomDesc: {
|
|
id: 'app.createBreakoutRoom.modalDesc',
|
|
description: 'modal description',
|
|
},
|
|
addParticipantLabel: {
|
|
id: 'app.createBreakoutRoom.addParticipantLabel',
|
|
description: 'add Participant label',
|
|
},
|
|
breakoutRoomLabel: {
|
|
id: 'app.createBreakoutRoom.breakoutRoomLabel',
|
|
description: 'breakout room label',
|
|
},
|
|
});
|
|
|
|
const BreakoutRoomUserAssignmentMobile: React.FC<ChildComponentProps> = ({
|
|
numberOfRooms,
|
|
selectedRoom,
|
|
setSelectedRoom,
|
|
moveUser,
|
|
rooms,
|
|
}) => {
|
|
const intl = useIntl();
|
|
const [layer, setLayer] = useState<1 | 2 | 3>(1);
|
|
|
|
const btnLevelId = useMemo(() => uniqueId('btn-set-level-'), []);
|
|
const levelingButton = useMemo(() => {
|
|
return (
|
|
<Button
|
|
color="primary"
|
|
size="lg"
|
|
label={layer === 1 ? intl.formatMessage(intlMessages.nextLabel)
|
|
: intl.formatMessage(intlMessages.backLabel)}
|
|
onClick={() => (layer === 1 ? setLayer(2) : setLayer(1))}
|
|
key={btnLevelId}
|
|
/>
|
|
);
|
|
}, [layer]);
|
|
|
|
const layerTwo = useMemo(() => {
|
|
if (layer === 2) {
|
|
return (
|
|
<>
|
|
<Styled.SubTitle>
|
|
{intl.formatMessage(intlMessages.breakoutRoomDesc)}
|
|
</Styled.SubTitle>
|
|
<Styled.ListContainer>
|
|
<span>
|
|
{
|
|
new Array(numberOfRooms).fill(1).map((_, idx) => (
|
|
<Styled.RoomItem>
|
|
<Styled.ItemTitle>
|
|
{intl.formatMessage(intlMessages.breakoutRoomLabel, { 0: idx + 1 })}
|
|
</Styled.ItemTitle>
|
|
<Styled.ItemButton
|
|
label={intl.formatMessage(intlMessages.addParticipantLabel)}
|
|
size="lg"
|
|
ghost
|
|
color="primary"
|
|
onClick={() => {
|
|
setLayer(3);
|
|
setSelectedRoom(idx + 1);
|
|
}}
|
|
/>
|
|
</Styled.RoomItem>
|
|
))
|
|
}
|
|
</span>
|
|
</Styled.ListContainer>
|
|
</>
|
|
);
|
|
}
|
|
return null;
|
|
}, [layer, numberOfRooms]);
|
|
|
|
const layerThree = useMemo(() => {
|
|
return (
|
|
<RoomUserList
|
|
confirm={() => setLayer(2)}
|
|
selectedRoom={selectedRoom}
|
|
rooms={rooms}
|
|
moveUser={moveUser}
|
|
/>
|
|
);
|
|
}, [selectedRoom, rooms]);
|
|
const layers = {
|
|
1: null,
|
|
2: layerTwo,
|
|
3: layerThree,
|
|
};
|
|
return (
|
|
<>
|
|
{layers[layer]}
|
|
{levelingButton}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default BreakoutRoomUserAssignmentMobile;
|