From 0ce470a034caa9fd102285861dcc9ac936e17ef7 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Thu, 9 Mar 2023 22:32:47 -0500
Subject: [PATCH] fix(striker-ui): manifest list

---
 .../ManageManifest/ManageManifestPanel.tsx    | 60 +++++++++++++++++++
 .../components/ManageManifest/index.tsx       |  3 +
 striker-ui/types/APIManifest.d.ts             |  8 +++
 3 files changed, 71 insertions(+)
 create mode 100644 striker-ui/components/ManageManifest/ManageManifestPanel.tsx
 create mode 100644 striker-ui/components/ManageManifest/index.tsx
 create mode 100644 striker-ui/types/APIManifest.d.ts

diff --git a/striker-ui/components/ManageManifest/ManageManifestPanel.tsx b/striker-ui/components/ManageManifest/ManageManifestPanel.tsx
new file mode 100644
index 00000000..f5256dfe
--- /dev/null
+++ b/striker-ui/components/ManageManifest/ManageManifestPanel.tsx
@@ -0,0 +1,60 @@
+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;
diff --git a/striker-ui/components/ManageManifest/index.tsx b/striker-ui/components/ManageManifest/index.tsx
new file mode 100644
index 00000000..815cbed8
--- /dev/null
+++ b/striker-ui/components/ManageManifest/index.tsx
@@ -0,0 +1,3 @@
+import ManageManifestPanel from './ManageManifestPanel';
+
+export default ManageManifestPanel;
diff --git a/striker-ui/types/APIManifest.d.ts b/striker-ui/types/APIManifest.d.ts
new file mode 100644
index 00000000..85a07e86
--- /dev/null
+++ b/striker-ui/types/APIManifest.d.ts
@@ -0,0 +1,8 @@
+type APIManifestOverview = {
+  manifestName: string;
+  manifestUUID: string;
+};
+
+type APIManifestOverviewList = {
+  [manifestUUID: string]: APIManifestOverview;
+};