import React, { useEffect, useState } from 'react'; import './App.scss'; import RoomRow from './RoomRow'; import { SortArrow } from './SortArrow'; import { api, Room, Restriction, Access } from '../Common/Api'; import NewRoomForm from './NewRoomForm'; export type SortKey = 'name' | 'welcome' | 'maxParticipants' | 'record'; enum SortOrder { DESC = -1, ASC = 1 }; function sortRooms(key: SortKey, orderBy: SortOrder) { return (a: Room, b: Room) => { switch (key) { case 'name': case 'welcome': return a[key].localeCompare(b[key]) * orderBy; case 'maxParticipants': return (a.maxParticipants - b.maxParticipants) * orderBy; case 'record': if (a.record && !b.record) { return 1 * orderBy; } if (!a.record && b.record) { return -1 * orderBy; } return 0; } }; } type Props = { } const App: React.FC = () => { const [areRoomsLoaded, setRoomsLoaded] = useState(false); const [error, setError] = useState(''); const [restriction, setRestriction] = useState(); const [rooms, setRooms] = useState([]); const [orderBy, setOrderBy] = useState('name'); const [sortOrder, setSortOrder] = useState(SortOrder.ASC); const rows = rooms.sort(sortRooms(orderBy, sortOrder)).map(room => ); useEffect(() => { api.getRestriction().then(restriction => { setRestriction(restriction); }).catch(err => { console.warn('Could not load restriction', err); }); api.getRooms().then(rooms => { setRooms(rooms); }).catch((err) => { console.warn('Could not load rooms', err); setError(t('bbb', 'Server error')); }).then(() => { setRoomsLoaded(true); }); }, []); function onOrderBy(key: SortKey) { if (orderBy === key) { setSortOrder(sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC); } setOrderBy(key); } function addRoom(name: string) { if (!name) { return Promise.resolve(); } let access = Access.Public; const disabledRoomTypes = restriction?.roomTypes || []; if (disabledRoomTypes.length > 0 && disabledRoomTypes.indexOf(access) > -1) { access = Object.values(Access).filter(a => disabledRoomTypes.indexOf(a) < 0)[0] as Access; } const maxParticipants = restriction?.maxParticipants || 0; return api.createRoom(name, access, maxParticipants).then(room => { setRooms(rooms.concat([room])); }); } function updateRoom(room: Room) { return api.updateRoom(room).then(updatedRoom => { setRooms(rooms.map(room => { if (room.id === updatedRoom.id) { return updatedRoom; } return room; })); }); } function deleteRoom(id: number) { api.deleteRoom(id).then(deletedRoom => { setRooms(rooms.filter(room => room.id !== deletedRoom.id)); }); } const maxRooms = restriction?.maxRooms || 0; return (
{ /* @TODO hide edit inputs */ }}> {rows}
onOrderBy('name')}> {t('bbb', 'Name')} onOrderBy('maxParticipants')} className="bbb-shrink"> {t('bbb', 'Max')} onOrderBy('record')} className="bbb-shrink"> {t('bbb', 'Record')} {t('bbb', 'Recordings')}
{error && <> {error}} {!areRoomsLoaded && } {(maxRooms > rows.length || maxRooms < 0) ? :

{maxRooms === 0 ? t('bbb', 'You are not permitted to create a room.') : t('bbb', 'You exceeded the maximum number of rooms.') }

}
); }; export default App;