Create first version of report card

components/ReportCard.tsx

@@ -0,0 +1,100 @@
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Heading,
+  Radio,
+  RadioGroup,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
+import { useState } from "react";
+
+export default function (props: {
+  attachment: string;
+  attachment_loading?: boolean;
+  reporter?: { [k: string]: any };
+  target_ids: number[];
+  target_usernames: string[];
+}) {
+  const targetMap: { [k: number]: string } = {};
+  const [attachmentReady, setAttachmentReady] = useState(
+    !props.attachment_loading
+  );
+  const actionMap: { [k: number]: number } = {};
+
+  for (let i = 0; i < props.target_ids.length; i++)
+    Object.defineProperty(targetMap, props.target_ids[i], {
+      value: props.target_usernames[i],
+    });
+
+  async function recheckAttachment() {
+    const attachmentCheck = await fetch(`/api/uploads/${props.attachment}`, {
+      method: "HEAD",
+    });
+
+    setAttachmentReady(attachmentCheck.ok);
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <Heading size="lg">
+          Report for {props.target_usernames.toString()}
+        </Heading>
+        <Text fontSize="xs">ID(s): {props.target_ids.toString()}</Text>
+      </CardHeader>
+      <CardBody>
+        {attachmentReady ? (
+          <Text>Attachment processing...</Text>
+        ) : (
+          <video src={`/api/uploads/${props.attachment}`} width="100%" />
+        )}
+      </CardBody>
+      <CardFooter>
+        {props.attachment_loading ? (
+          <Button
+            colorScheme="blue"
+            onClick={async () => await recheckAttachment()}
+          >
+            Reload Attachment
+          </Button>
+        ) : (
+          <Stack direction="column">
+            {Object.entries(targetMap).map(([id, username]) => {
+              return (
+                <RadioGroup
+                  name={id}
+                  onChange={(val) =>
+                    Object.defineProperty(actionMap, parseInt(id), {
+                      value: parseInt(val),
+                    })
+                  }
+                >
+                  <Stack direction="row">
+                    <Text>{username}</Text>
+                    <Radio key={0} value="0">
+                      Ignore
+                    </Radio>
+                    <Radio key={1} value="1">
+                      Hide from Leaderboards
+                    </Radio>
+                    <Radio key={2} value="2">
+                      Ban
+                    </Radio>
+                  </Stack>
+                </RadioGroup>
+              );
+            })}
+            <Box pt="16px">
+              <Button colorScheme="blue">Submit</Button>
+            </Box>
+          </Stack>
+        )}
+      </CardFooter>
+    </Card>
+  );
+}