Add support for gme

app/routes/mod-queue.tsx

@@ -30,6 +30,7 @@ import { useLoaderData } from "@remix-run/react";
 import AppealBans from "../../components/AppealBans.js";
 import AppealCard from "../../components/AppealCard.js";
 import GameAppealCard from "../../components/GameAppealCard.js";
+import GameModManagementModal from "../../components/GameModManagementModal.js";
 import NewGameBan from "../../components/NewGameBan.js";
 import NewInfractionModal from "../../components/NewInfractionModal.js";
 import ReportCard from "../../components/ReportCard.js";
@@ -62,6 +63,7 @@ export async function loader({ context }: { context: RequestContext }) {
   const newItemNames: { [k: string]: string } = {
     appeal_bans: "Appeal Bans",
     game_ban: "New Game Ban",
+    gme: "Game Mod Management",
     inactivity: "New Inactivity Notice",
     infraction: "New Infraction",
     user_lookup: "User Lookup",
@@ -70,7 +72,7 @@ export async function loader({ context }: { context: RequestContext }) {
   const typePermissions = {
     appeal: [1 << 0, 1 << 1],
     gma: [1 << 5],
-    inactivity: [1 << 4, 1 << 6, 1 << 7, 1 << 11, 1 << 12],
+    inactivity: [1 << 3, 1 << 4, 1 << 6, 1 << 7, 1 << 11, 1 << 12],
     report: [1 << 5],
   };
 
@@ -81,6 +83,12 @@ export async function loader({ context }: { context: RequestContext }) {
     report: "Game Reports",
   };
 
+  const can_edit_ban_users = [
+    "165594923586945025",
+    "289372404541554689",
+    "396347223736057866",
+  ].includes(currentUser.id);
+
   const allowedNewItems = [];
   const allowedTypes = [];
 
@@ -94,17 +102,16 @@ export async function loader({ context }: { context: RequestContext }) {
       allowedTypes.push({ name: typeNames[type], value: type });
   }
 
+  if (can_edit_ban_users)
+    allowedNewItems.push({ name: "Game Mod Management", value: "gme" });
+
   if (!allowedTypes.length && !allowedNewItems.length)
     throw new Response(null, {
       status: 403,
     });
 
   return {
-    can_edit_ban_users: [
+    can_edit_ban_users,
-      "165594923586945025",
-      "289372404541554689",
-      "396347223736057866",
-    ].includes(currentUser.id),
     departments: Object.entries(departments)
       .filter((d) => d[1] & currentUser.permissions)
       .map((arr) => arr[0]),
@@ -316,6 +323,7 @@ export default function () {
   } = {
     appeal_bans: useDisclosure(),
     game_ban: useDisclosure(),
+    gme: useDisclosure(),
     inactivity: useDisclosure(),
     infraction: useDisclosure(),
     user_lookup: {
@@ -408,6 +416,10 @@ export default function () {
         isOpen={itemModals.appeal_bans.isOpen}
         onClose={itemModals.appeal_bans.onClose}
       />
+      <GameModManagementModal
+        isOpen={itemModals.gme.isOpen}
+        onClose={itemModals.gme.onClose}
+      />
       <NewGameBan
         isOpen={itemModals.game_ban.isOpen}
         onClose={itemModals.game_ban.onClose}

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>
+  );
+}