inactivities.tsx

import {
  Button,
  Container,
  Heading,
  ListItem,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Table,
  TableCaption,
  TableContainer,
  Tbody,
  Td,
  Th,
  Thead,
  Tr,
  UnorderedList,
  useDisclosure,
  useToast,
} from "@chakra-ui/react";
import { useLoaderData } from "@remix-run/react";
import { useState } from "react";

export async function loader({ context }: { context: RequestContext }) {
  const { current_user: currentUser } = context.data;

  if (!currentUser)
    throw new Response(null, {
      status: 401,
    });

  const permissionGroups = {
    DM: [1 << 11],
    ET: [1 << 4, 1 << 12],
    FM: [1 << 7],
    WM: [1 << 11],
  };

  const searchDepartments = [];

  for (const department of Object.keys(permissionGroups)) {
    if (currentUser.permissions & (1 << 0)) searchDepartments.push(department);
    else if (
      permissionGroups[department as "DM" | "ET" | "FM" | "WM"].find(
        (p) => currentUser.permissions & p,
      )
    )
      searchDepartments.push(department);
  }

  if (!searchDepartments.length)
    throw new Response(null, {
      status: 403,
    });

  const today = new Date().toISOString().split("T").at(0);
  const { results } = await context.env.D1.prepare(
    "SELECT decisions, departments, end, hiatus, id, start, user FROM inactivity_notices WHERE start <= ?1 AND end >= date(?1, '-1 month') ORDER BY end;",
  )
    .bind(today)
    .all();

  for (let i = 0; i < results.length; i++) {
    results[i].decisions = JSON.parse(results[i].decisions as string);
    results[i].departments = JSON.parse(results[i].departments as string);
    results[i].user = JSON.parse(results[i].user as string);
  }

  return {
    can_delete: currentUser.permissions & (1 << 0),
    results: results.filter((row) => {
      const decisionValues = Object.values(
        row.decisions as { [k: string]: boolean },
      );

      return decisionValues.find((d) => d);
    }) as unknown as {
      decisions: { [k: string]: boolean };
      end: string;
      id: string;
      start: string;
      user: { email?: string; id: string; username: string };
    }[],
  };
}

export default function () {
  const data = useLoaderData<typeof loader>();
  const [currentInactivity, setInactivity] = useState(
    {} as { [k: string]: any },
  );
  const { isOpen, onClose, onOpen } = useDisclosure();
  const toast = useToast();

  async function getInactivity(id: string) {
    const inactivityResponse = await fetch(`/api/inactivity/${id}`);

    if (!inactivityResponse.ok) {
      let msg = "Unknown error";

      try {
        msg = ((await inactivityResponse.json()) as { error: string }).error;
      } catch {}

      toast({
        description: msg,
        status: "error",
        title: "Failed to fetch inactivity",
      });

      return;
    }

    setInactivity(await inactivityResponse.json());
    onOpen();
  }

  async function deleteInactivity(id: string) {
    const response = await fetch(`/api/inactivity/${id}`, {
      method: "DELETE",
    });

    if (response.ok) {
      onClose();
      setInactivity({});
      toast({
        status: "success",
        title: "Notice Deleted",
      });

      return;
    }

    let msg = "Unknown error";

    try {
      msg = ((await response.json()) as { error: string }).error;
    } catch {}

    toast({
      description: msg,
      status: "error",
      title: "Failed to Delete",
    });
  }

  return (
    <Container maxW="container.lg">
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Inactivity Details</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <UnorderedList spacing={2}>
              <ListItem>Username: {currentInactivity.user?.username}</ListItem>
              <ListItem>User ID: {currentInactivity.user?.id}</ListItem>
              <ListItem>Start Date: {currentInactivity.start}</ListItem>
              <ListItem>End Date: {currentInactivity.end}</ListItem>
              <ListItem>
                Is Hiatus: {currentInactivity.hiatus ? "Yes" : "No"}
              </ListItem>
              <ListItem>Reason: {currentInactivity.reason}</ListItem>
              <ListItem>
                Decisions:
                <br />
                Approved:
                {Object.keys(currentInactivity.decisions ?? {}).filter(
                  (d) => currentInactivity.decisions[d],
                )}
                <br />
                Denied:
                {Object.keys(currentInactivity.decisions ?? {}).filter(
                  (d) => !currentInactivity.decisions[d],
                )}
                <br />
                Pending:
                {currentInactivity.departments?.filter(
                  (d: "DM" | "ET" | "FM" | "WM") =>
                    typeof currentInactivity.decisions[d] === "undefined",
                )}
              </ListItem>
            </UnorderedList>
          </ModalBody>
          {data.can_delete ? (
            <ModalFooter>
              <Button colorScheme="red">Delete</Button>
            </ModalFooter>
          ) : null}
        </ModalContent>
      </Modal>
      <Heading pb="32px">Current Inactivity Notices</Heading>
      <TableContainer>
        <Table variant="simple">
          <TableCaption>
            All recent inactivity notices (current and ended in last month)
          </TableCaption>
          <Thead>
            <Tr>
              <Th>Name</Th>
              <Th>User ID</Th>
              <Th>Start Date</Th>
              <Th>End Date</Th>
              <Th>View More</Th>
            </Tr>
          </Thead>
          <Tbody>
            {data.results.map((row) => (
              <Tr key={row.id}>
                <Td>{row.user.username}</Td>
                <Td>{row.user.id}</Td>
                <Td>{row.start}</Td>
                <Td>{row.end}</Td>
                <Td>
                  <Button onClick={async () => await getInactivity(row.id)}>
                    View More
                  </Button>
                </Td>
              </Tr>
            ))}
          </Tbody>
        </Table>
      </TableContainer>
    </Container>
  );
}