Create appeal bans component

components/AppealBans.tsx

@@ -0,0 +1,109 @@
+import {
+  Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import NewAppealBan from "./NewAppealBan.js";
+
+export default function (props: { isOpen: boolean; onClose: () => void }) {
+  const [entries, setEntries] = useState(
+    [] as { created_at: number; created_by: string; user: string }[],
+  );
+  const toast = useToast();
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  async function removeBan(user: string) {
+    const removeResp = await fetch(`/api/appeals/${user}/ban`, {
+      method: "DELETE",
+    });
+
+    if (!removeResp.ok) {
+      let error;
+
+      try {
+        error = ((await removeResp.json()) as { error: string }).error;
+      } catch {
+        error = "Unknown error";
+      }
+
+      toast({
+        description: error,
+        isClosable: true,
+        status: "error",
+        title: "Failed to remove member",
+      });
+
+      return;
+    }
+
+    toast({
+      description: `User ${user} removed`,
+      isClosable: true,
+      status: "success",
+      title: "Success",
+    });
+
+    setEntries([...entries].filter((entry) => entry.user !== user));
+  }
+
+  useEffect(() => {}, []);
+
+  return (
+    <>
+      <Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Appeal Bans</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <TableContainer>
+              <Table variant="simple">
+                <Thead>
+                  <Tr>
+                    <Th>User</Th>
+                    <Th>Moderator</Th>
+                    <Th>Time</Th>
+                    <Th>Remove</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {entries.map((entry) => (
+                    <Tr>
+                      <Td>{entry.user}</Td>
+                      <Td>{entry.created_by}</Td>
+                      <Td>{new Date(entry.created_at).toUTCString()}</Td>
+                      <Td>
+                        <Link onClick={async () => await removeBan(entry.user)}>
+                          Remove
+                        </Link>
+                      </Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            </TableContainer>
+          </ModalBody>
+          <ModalFooter>
+            <Link onClick={onOpen}>Click here to ban someone</Link>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+      <NewAppealBan isOpen={isOpen} onClose={onClose} />
+    </>
+  );
+}