From f4c4e30610f42e098ec1701c61ebe67a1ec9c087 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Tue, 22 Nov 2022 19:02:33 -0500
Subject: [PATCH] feat(striker-ui): add ManageUsersForm

---
 .../StrikerConfig/ComplexOperationsPanel.tsx  | 15 +++--
 .../StrikerConfig/ManageUsersForm.tsx         | 55 +++++++++++++++++++
 striker-ui/types/APIUser.d.ts                 |  8 +++
 3 files changed, 70 insertions(+), 8 deletions(-)
 create mode 100644 striker-ui/components/StrikerConfig/ManageUsersForm.tsx
 create mode 100644 striker-ui/types/APIUser.d.ts

diff --git a/striker-ui/components/StrikerConfig/ComplexOperationsPanel.tsx b/striker-ui/components/StrikerConfig/ComplexOperationsPanel.tsx
index 417ba9e9..68fcbb86 100644
--- a/striker-ui/components/StrikerConfig/ComplexOperationsPanel.tsx
+++ b/striker-ui/components/StrikerConfig/ComplexOperationsPanel.tsx
@@ -1,16 +1,15 @@
 import { FC } from 'react';
 
-import FlexBox from '../FlexBox';
-import { ExpandablePanel, Panel } from '../Panels';
-import { BodyText } from '../Text';
+import ConfigPeersForm from './ConfigPeersForm';
+import ManageChangedSSHKeysForm from './ManageChangedSSHKeysForm';
+import ManageUsersForm from './ManageUsersForm';
+import { Panel } from '../Panels';
 
 const ComplexOperationsPanel: FC = () => (
   <Panel>
-    <ExpandablePanel header={<BodyText>Configure striker peers</BodyText>}>
-      <FlexBox>
-        <BodyText>Inbound connections</BodyText>
-      </FlexBox>
-    </ExpandablePanel>
+    <ConfigPeersForm />
+    <ManageChangedSSHKeysForm />
+    <ManageUsersForm />
   </Panel>
 );
 
diff --git a/striker-ui/components/StrikerConfig/ManageUsersForm.tsx b/striker-ui/components/StrikerConfig/ManageUsersForm.tsx
new file mode 100644
index 00000000..4af37416
--- /dev/null
+++ b/striker-ui/components/StrikerConfig/ManageUsersForm.tsx
@@ -0,0 +1,55 @@
+import { FC, useEffect } from 'react';
+
+import api from '../../lib/api';
+import handleAPIError from '../../lib/handleAPIError';
+import List from '../List';
+import MessageBox, { Message } from '../MessageBox';
+import { ExpandablePanel } from '../Panels';
+import { BodyText } from '../Text';
+import useProtect from '../../hooks/useProtect';
+import useProtectedState from '../../hooks/useProtectedState';
+
+const ManageUsersForm: FC = () => {
+  const { protect } = useProtect();
+
+  const [listMessage, setListMessage] = useProtectedState<Message>(
+    { children: `No users found.` },
+    protect,
+  );
+  const [users, setUsers] = useProtectedState<
+    UserOverviewMetadataList | undefined
+  >(undefined, protect);
+
+  useEffect(() => {
+    if (!users) {
+      api
+        .get<UserOverviewMetadataList>('/user')
+        .then(({ data }) => {
+          setUsers(data);
+        })
+        .catch((error) => {
+          // Initialize to prevent infinite fetch.
+          setUsers({});
+          setListMessage(handleAPIError(error));
+        });
+    }
+  }, [setListMessage, setUsers, users]);
+
+  return (
+    <ExpandablePanel
+      header={<BodyText>Manage users</BodyText>}
+      loading={!users}
+    >
+      <List
+        allowEdit={false}
+        listEmpty={<MessageBox {...listMessage} />}
+        listItems={users}
+        renderListItem={(userUUID, { userName }) => (
+          <BodyText>{userName}</BodyText>
+        )}
+      />
+    </ExpandablePanel>
+  );
+};
+
+export default ManageUsersForm;
diff --git a/striker-ui/types/APIUser.d.ts b/striker-ui/types/APIUser.d.ts
new file mode 100644
index 00000000..4f09b7ac
--- /dev/null
+++ b/striker-ui/types/APIUser.d.ts
@@ -0,0 +1,8 @@
+type UserOverviewMetadata = {
+  userName: string;
+  userUUID: string;
+};
+
+type UserOverviewMetadataList = {
+  [userUUID: string]: UserOverviewMetadata;
+};