You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.8 KiB
60 lines
1.8 KiB
import { PlayCircle } from '@mui/icons-material'; |
|
import { FC, useMemo, useState } from 'react'; |
|
import API_BASE_URL from '../../lib/consts/API_BASE_URL'; |
|
import periodicFetch from '../../lib/fetchers/periodicFetch'; |
|
import FlexBox from '../FlexBox'; |
|
import IconButton from '../IconButton'; |
|
import List from '../List'; |
|
import { Panel, PanelHeader } from '../Panels'; |
|
import Spinner from '../Spinner'; |
|
import { BodyText, HeaderText } from '../Text'; |
|
|
|
const ManageManifestPanel: FC = () => { |
|
const [isEditManifests, setIsEditManifests] = useState<boolean>(false); |
|
|
|
const { data: manifestOverviews, isLoading: isLoadingManifestOverviews } = |
|
periodicFetch<APIManifestOverviewList>(`${API_BASE_URL}/manifest`, { |
|
refreshInterval: 60000, |
|
}); |
|
|
|
const listElement = useMemo( |
|
() => ( |
|
<List |
|
allowEdit |
|
allowItemButton={isEditManifests} |
|
edit={isEditManifests} |
|
header |
|
listEmpty="No manifest(s) registered." |
|
listItems={manifestOverviews} |
|
onEdit={() => { |
|
setIsEditManifests((previous) => !previous); |
|
}} |
|
renderListItem={(manifestUUID, { manifestName }) => ( |
|
<FlexBox fullWidth row> |
|
<IconButton disabled={isEditManifests} variant="normal"> |
|
<PlayCircle /> |
|
</IconButton> |
|
<BodyText>{manifestName}</BodyText> |
|
</FlexBox> |
|
)} |
|
/> |
|
), |
|
[isEditManifests, manifestOverviews], |
|
); |
|
|
|
const panelContent = useMemo( |
|
() => (isLoadingManifestOverviews ? <Spinner /> : listElement), |
|
[isLoadingManifestOverviews, listElement], |
|
); |
|
|
|
return ( |
|
<Panel> |
|
<PanelHeader> |
|
<HeaderText>Manage manifests</HeaderText> |
|
</PanelHeader> |
|
{panelContent} |
|
</Panel> |
|
); |
|
}; |
|
|
|
export default ManageManifestPanel;
|
|
|