import React, { useEffect, useState } from 'react'; import './App.scss'; import RoomRow from './RoomRow'; import { SortArrow } from './SortArrow'; import { api, Room } from './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 [rooms, setRooms] = useState([]); const [orderBy, setOrderBy] = useState('name'); const [sortOrder, setSortOrder] = useState(SortOrder.ASC); const rows = rooms.sort(sortRooms(orderBy, sortOrder)).map(room => ); useEffect(() => { if (areRoomsLoaded) { return; } api.getRooms().then(rooms => { setRooms(rooms); }).catch((err) => { console.warn('Could not load rooms', err); setError(t('bbb', 'Server error')); }).then(() => { setRoomsLoaded(true); }); }, [areRoomsLoaded]); 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(); } return api.createRoom(name).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)); }); } 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 && }
); }; export default App;