Add user table to game ban modal

components/NewGameBan.tsx

@@ -1,6 +1,8 @@
 import {
   Button,
+  HStack,
   Input,
+  Link,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -10,14 +12,72 @@ import {
   ModalOverlay,
   Radio,
   RadioGroup,
+  Table,
+  TableContainer,
+  Tbody,
   Text,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useToast,
 } from "@chakra-ui/react";
+import { useState } from "react";
 
 export default function (props: { isOpen: boolean; onClose: () => void }) {
+  const actionMap: { [k: string]: number } = {};
+  const [rows, setRows] = useState([] as JSX.Element[]);
+
+  function addUser(user: string) {
+    const newRows = [...rows];
+    newRows.push(
+      <Tr key={user}>
+        <Td>{user}</Td>
+        <Td>
+          <RadioGroup
+            onChange={(val) =>
+              Object.defineProperty(actionMap, user, {
+                value: parseInt(val),
+              })
+            }
+          >
+            <HStack>
+              <Radio value="0">Do Nothing</Radio>
+              <Radio value="1">Hide from Leaderboards</Radio>
+              <Radio value="2">Ban</Radio>
+            </HStack>
+          </RadioGroup>
+        </Td>
+        <Td>
+          <Link onClick={() => removeUser(user)}>Remove</Link>
+        </Td>
+      </Tr>
+    );
+  }
+
+  function removeUser(user: string) {
+    const newRows = [...rows];
+    const el = newRows.find((el) => el.key === user);
+
+    if (!el) return;
+
+    const elIdx = newRows.indexOf(el);
+
+    if (elIdx === -1) return;
+
+    newRows.splice(elIdx, 1);
+    setRows(newRows);
+
+    delete actionMap[user];
+  }
+
   function reset() {
     (document.getElementById("username") as HTMLInputElement).value = "";
     (document.getElementById("evidence") as HTMLInputElement).value = "";
 
+    setRows([]);
+    Object.keys(actionMap).forEach((k) => delete actionMap[k]);
+
     props.onClose();
   }
 
@@ -29,9 +89,59 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
         <ModalCloseButton />
         <ModalBody>
           <Text>Username(s)</Text>
-          <Input id="username" placeholder="builderman" />
+          <Input id="username" mb="8px" placeholder="builderman" />
+          <Button
+            onClick={function () {
+              const user = (
+                document.getElementById("username") as HTMLInputElement
+              ).value;
+
+              if (
+                !user ||
+                user.length > 3 ||
+                user.length < 20 ||
+                user.match(/_/g)?.length ||
+                0 > 1 ||
+                user.match(/\W/)
+              ) {
+                useToast()({
+                  description: "Check the username and try again",
+                  duration: 5000,
+                  isClosable: true,
+                  status: "error",
+                  title: "Invalid Username",
+                });
+                return;
+              }
+
+              addUser(user);
+            }}
+          >
+            Add
+          </Button>
           <br />
           <br />
+          <TableContainer>
+            <Table variant="simple">
+              <Thead>
+                <Tr>
+                  <Th>Username</Th>
+                  <Th>Punishment</Th>
+                  <Th>Remove</Th>
+                </Tr>
+              </Thead>
+              <Tbody>{rows}</Tbody>
+            </Table>
+          </TableContainer>
+          <br />
+          <br />
+          <Text>Evidence</Text>
+          <Button
+            mr="8px"
+            onClick={() => document.getElementById("evidence")?.click()}
+          >
+            Select Files
+          </Button>
           <input id="evidence" type="file" />
         </ModalBody>
       </ModalContent>