gear-orders/web/vite/src/OrderSets.tsx

import React from "react";
import {
  Title,
  Card,
  Text,
  Flex,
  Badge,
  Box,
  RingProgress,
  Alert,
  Grid,
} from "@mantine/core";
import { IconAlertTriangle } from "@tabler/icons-react";
import { TimeValue } from "@mantine/dates";
import { IconPencil, IconPlus, IconTrash } from "@tabler/icons-react";

import { ConfirmDialogButton } from "./ConfirmDialogButton";
import { NavigateButton } from "./NavigateButton";
import { Link, useFetcher } from "react-router";
import { useUserContext } from "./UserContext";
import { DonutChart } from "@mantine/charts";

const COLORS_ROTATION = [
  "teal",
  "pink",
  "lime",
  "violet",
  "orange",
  "blue",
  "yellow",
  "grape",
  "green",
  "red",
  "cyan",
  "gray",
];

export interface OrderSetProps {
  orderSets: (Pick<
    OrderSet,
    | "id"
    | "name"
    | "scheduled"
    | "time"
    | "weekends"
    | "weekdays"
    | "orders"
    | "probability"
  > & {
    orders: Pick<OrderSetOrder, "id" | "name" | "weight">;
    punishment_pool_name: string;
  })[];
  username: string;
  linkBack?: React.ReactNode;
}

export const OrderSets: React.FC<OrderSetProps> = ({
  orderSets,
  username,
  linkBack,
}) => {
  const { username: current_user } = useUserContext();
  const fetcher = useFetcher();
  const handleDelete = React.useCallback(
    (id: number) => {
      fetcher.submit(null, {
        action: `/orders/${username}/${id}`,
        method: "DELETE",
      });
    },
    [fetcher],
  );

  const [isMastodonSet, setIsMastodonSet] = React.useState(true);
  React.useEffect(() => {
    if (username) {
      fetch(`/api/subs/${username}`)
        .then((response) => response.json())
        .then((data) => {
          if (!data.mastodon_server || !data.mastodon_username) {
            setIsMastodonSet(false);
          }
        });
    }
  }, [username]);

  const [portalRef, setPortalRef] = React.useState<HTMLElement | null>();

  return (
    <>
      <Box mb="lg">
        <Title order={1}>Order Sets for {username}</Title>
        {linkBack ? linkBack : null}
      </Box>
      {orderSets.length > 0 && isMastodonSet ? null : (
        <Flex justify="center">
          <Alert
            variant="light"
            color="orange"
            title="Warning"
            icon={<IconAlertTriangle />}
            my="md"
            w="40rem"
          >
            <b>{username}</b> must authorize with a Mastodon account before
            orders can be issued.
            {username === current_user ? (
              <>
                <br />
                <Link to="/profile/">Edit Profile</Link>
              </>
            ) : null}
          </Alert>
        </Flex>
      )}
      <div
        ref={(node) => {
          if (portalRef == null && node != null) {
            setPortalRef(node);
          }
        }}
      >
        <Grid gutter="md">
          {orderSets
            ? orderSets.map(
                ({
                  id,
                  name,
                  scheduled,
                  orders,
                  time,
                  weekdays,
                  weekends,
                  probability,
                  punishment_pool_name,
                }) => (
                  <Grid.Col span={{ base: 12, sm: 6 }}>
                    <Card
                      key={id}
                      shadow="sm"
                      padding="lg"
                      radius="md"
                      withBorder
                      bg="gray.2"
                      mb="0"
                    >
                      <Flex direction="column" gap="md" h="100%">
                        <Title order={4}>{name}</Title>
                        {scheduled ? (
                          <>
                            <Flex gap="xs">
                              <Text>
                                <b>Scheduled:</b>
                              </Text>
                              {time.split(",").map((time) => (
                                <div key={time}>
                                  <TimeValue
                                    key={time}
                                    value={time}
                                    format="12h"
                                  />
                                </div>
                              ))}
                            </Flex>
                            <Flex gap="md" align="center">
                              {weekdays ? (
                                <Badge color="blue">Weekdays</Badge>
                              ) : null}
                              {weekends ? (
                                <Badge color="blue">Weekends</Badge>
                              ) : null}
                              <RingProgress
                                size={30}
                                thickness={5}
                                label={
                                  <Text size="xs" ml="lg">
                                    {probability * 100}%
                                  </Text>
                                }
                                sections={[
                                  { color: "cyan", value: probability * 100 },
                                ]}
                              />
                            </Flex>
                          </>
                        ) : null}
                        {punishment_pool_name ? (
                          <Text flex={1}>
                            <b>Punishments:</b> {punishment_pool_name}
                          </Text>
                        ) : null}
                        <Flex justify="end" align="flex-end" gap="md">
                          {orders.length > 0 ? (
                            <DonutChart
                              flex={1}
                              size={130}
                              thickness={30}
                              data={orders.map(({ name, weight }, idx) => ({
                                name,
                                value: weight,
                                color:
                                  COLORS_ROTATION[idx % COLORS_ROTATION.length],
                              }))}
                              tooltipDataSource="segment"
                            />
                          ) : null}
                          <ConfirmDialogButton
                            buttonColor="red.8"
                            buttonText="Delete"
                            text={`Are you sure you want to delete ${name}?`}
                            onConfirm={() => handleDelete(id)}
                          >
                            <IconTrash />
                          </ConfirmDialogButton>
                          <NavigateButton to={`/orders/${username}/${id}`}>
                            <IconPencil style={{ marginRight: "0.5rem" }} />
                            Edit
                          </NavigateButton>
                        </Flex>
                      </Flex>
                    </Card>
                  </Grid.Col>
                ),
              )
            : null}
        </Grid>
      </div>
      <Box my="lg">
        <NavigateButton to={`/orders/${username}/new`}>
          <IconPlus style={{ marginRight: "0.5rem" }} />
          New
        </NavigateButton>
      </Box>
    </>
  );
};