ReportCard.tsx

import {
  Box,
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Heading,
  Radio,
  RadioGroup,
  Stack,
  Text,
} from "@chakra-ui/react";
import { useState } from "react";

export default function (props: ReportCardProps) {
  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 w="100%">
      <CardHeader>
        <Heading size="lg">
          Report for {props.target_usernames.toString()}
        </Heading>
        <Text fontSize="xs">ID(s): {props.target_ids.toString()}</Text>
      </CardHeader>
      <CardBody>
        {attachmentReady ? (
          <video src={`/api/uploads/${props.attachment}`} width="100%" />
        ) : (
          <Text>Attachment processing...</Text>
        )}
      </CardBody>
      <CardFooter>
        {props.attachment_loading ? (
          <Button
            colorScheme="blue"
            onClick={async () => await recheckAttachment()}
          >
            Reload Attachment
          </Button>
        ) : (
          <Stack direction="column">
            {(function () {
              const radioGroups = [];
              for (let i = 0; i < props.target_ids.length; i++) {
                radioGroups.push(
                  <RadioGroup
                    name={props.target_ids[i].toString()}
                    onChange={(val) => {
                      Object.defineProperty(actionMap, props.target_ids[i], {
                        value: parseInt(val),
                      });
                    }}
                  >
                    <Stack direction="row">
                      <Text>{props.target_usernames[i]}</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>
                );
              }

              return radioGroups;
            })()}
            <Box pt="16px">
              <Button colorScheme="blue">Submit</Button>
            </Box>
          </Stack>
        )}
      </CardFooter>
    </Card>
  );
}