Add support for gme

2023-11-08 13:01:57 -05:00
parent 5c3b9c29e5
commit 513bd58602
2 changed files with 158 additions and 6 deletions
--- a/components/GameModManagementModal.tsx
+++ b/components/GameModManagementModal.tsx
@ -0,0 +1,140 @@
+import {
+  Button,
+  HStack,
+  Input,
+  Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useToast,
+} from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+
+export default function (props: { isOpen: boolean; onClose: () => void }) {
+  const [mods, setMods] = useState([]);
+  const toast = useToast();
+
+  useEffect(() => {
+    (async function () {
+      const gmeResp = await fetch("/api/gme/list");
+
+      if (!gmeResp.ok) {
+        toast({
+          description: "Failed to load GME data",
+          status: "error",
+          title: "Oops",
+        });
+
+        return;
+      }
+
+      setMods(await gmeResp.json());
+    })();
+  }, []);
+
+  async function addUser(user: string) {
+    const addResp = await fetch("/api/gme/add", {
+      body: JSON.stringify({ user }),
+      headers: {
+        "content-type": "application/json",
+      },
+      method: "POST",
+    });
+
+    if (!addResp.ok) {
+      toast({
+        description: ((await addResp.json()) as { error: string }).error,
+        status: "error",
+        title: "Oops",
+      });
+
+      return;
+    }
+
+    toast({
+      description: `User ${user} added`,
+      status: "success",
+      title: "Success",
+    });
+
+    props.onClose();
+  }
+
+  async function removeUser(user: string) {
+    const removeResp = await fetch("/api/gme/remove", {
+      body: JSON.stringify({ user }),
+      headers: {
+        "content-type": "application/json",
+      },
+      method: "POST",
+    });
+
+    if (!removeResp.ok) {
+      toast({
+        description: ((await removeResp.json()) as { error: string }).error,
+        status: "error",
+        title: "Oops",
+      });
+    } else {
+      toast({
+        description: `User ${user} removed`,
+        status: "success",
+        title: "Success",
+      });
+
+      setMods(mods.filter((mod: any) => mod.user !== user));
+    }
+  }
+
+  return (
+    <Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Game Moderators</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <TableContainer>
+            <Table variant="simple">
+              <Thead>
+                <Tr>
+                  <Th>User</Th>
+                  <Th>Added At</Th>
+                  <Th>Added By</Th>
+                  <Th>Remove</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {mods.map((mod: any) => (
+                  <Tr>
+                    <Td>{mod.user}</Td>
+                    <Td>{new Date(mod.metadata.time).toLocaleString()}</Td>
+                    <Td>{mod.metadata.user}</Td>
+                    <Td>
+                      <Link onClick={async () => await removeUser(mod.user)}>
+                        Remove
+                      </Link>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </TableContainer>
+          <HStack mt="8px">
+            <Input maxLength={19} placeholder="1234567890987654321" />
+            <Button ml="8px">Add</Button>
+          </HStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}