InactivityNoticeCard.tsx

import {
  Box,
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Heading,
  Icon,
  ListItem,
  Stack,
  StackDivider,
  Text,
  UnorderedList,
  useToast
} from "@chakra-ui/react";

export default function(props: InactivityNoticeProps) {
  const toast = useToast();

  async function makeDecision(accepted: boolean) {
    const decisionReq = await fetch(`/api/inactivity/${props.id}`, {
      body: JSON.stringify({ accepted }),
      headers: {
        "content-type": "application/json"
      },
      method: "POST"
    });

    if (!decisionReq.ok) {
      toast({
        description: (await decisionReq.json() as { error: string }).error,
        isClosable: true,
        status: "error",
        title: "Oops"
      });

      return;
    }

    toast({
      description: `Inactivity notice ${accepted ? "accepted" : "denied"}.`,
      isClosable: true,
      status: "success",
      title: "Success"
    });

    location.reload();
  }

  const Approved = () => <Icon fill="currentColor" height="16" viewBox="0 0 16 16" width="16">
    <path
      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
  </Icon>;

  const Denied = () => <Icon fill="currentColor" height="16" viewBox="0 0 16 16" width="16">
    <path
      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
  </Icon>;

  return (
    <Card w="100%">
      <CardHeader>
        <Heading size="md">Inactivity Notice for {props.user.username}</Heading>
        <Text fontSize="xs">ID: {props.user.id}</Text>
      </CardHeader>
      <CardBody>
        <Stack divider={<StackDivider />}>
          <Box>
            <Heading size="xs">Reason for Inactivity</Heading>
            <Text>{props.reason}</Text>
          </Box>
          <Box>
            <Heading size="xs">Start Date</Heading>
            <Text>{new Date(props.start).toLocaleDateString()}</Text>
          </Box>
          <Box>
            <Heading size="xs">End Date</Heading>
            <Text>{new Date(props.end).toLocaleDateString()}</Text>
          </Box>
          {props.decisions ? <Box>
            <Heading size="xs">Decisions</Heading>
            <UnorderedList>
              {props.decisions.map(decision => <ListItem>
                {decision.accepted ? <Approved /> : <Denied />} {decision.department}
              </ListItem>)}
            </UnorderedList>
          </Box> : null}
        </Stack>
      </CardBody>
      <CardFooter pb="4px">
        <Box>
          <Button colorScheme="red" onClick={async () => await makeDecision(false)}>Deny</Button>
          <Button colorScheme="blue" ml="8px" onClick={async () => await makeDecision(true)}>
            Accept
          </Button>
        </Box>
      </CardFooter>
    </Card>
  );
}