gear-orders/flask/vite/src/SubOrderSets.tsx

import {
  Container,
  Title,
  Card,
  Text,
  Button,
  Flex,
  Badge,
} from "@mantine/core";
import { TimeValue } from "@mantine/dates";
import { IconPencil, IconPlus, IconTrash } from "@tabler/icons-react";
import React from "react";
import { Params, useLoaderData, useParams, useFetcher } from "react-router";
import { ConfirmDialogButton } from "./ConfirmDialogButton";
import { NavigateButton } from "./NavigateButton";

export const subOrderSetsLoader = async ({
  params: { username },
}: {
  params: Params<string>;
}) => fetch(`/api/subs/${username}/sets`).then((response) => response.json());

export const SubOrderSets: React.FC = () => {
  const fetcher = useFetcher();
  const { username: sub_username } = useParams();
  const orderSets = useLoaderData<
    (Pick<
      OrderSet,
      "id" | "name" | "scheduled" | "time" | "weekends" | "weekdays" | "orders"
    > & {
      orders: Pick<OrderSetOrder, "id" | "name">[];
    })[]
  >();

  const handleDelete = React.useCallback(
    (id: number) => {
      fetcher.submit(null, {
        action: `/dashboard/subs/${sub_username}/${id}`,
        method: "DELETE",
      });
    },
    [fetcher],
  );

  return (
    <Container>
      <Title order={1} mb="lg">
        Order Sets for {sub_username}
      </Title>
      <Flex gap="md" wrap="wrap">
        {orderSets
          ? orderSets.map(
              ({ id, name, scheduled, orders, time, weekdays, weekends }) => (
                <Card
                  key={id}
                  shadow="sm"
                  padding="lg"
                  radius="md"
                  withBorder
                  bg="gray.2"
                  w="400px"
                >
                  <Flex direction="column" gap="md">
                    <Title order={4}>{name}</Title>
                    {scheduled ? (
                      <Flex gap="md" align="center">
                        <Text>
                          Scheduled: <TimeValue value={time} format="12h" />
                        </Text>
                        {weekdays ? <Badge color="blue">Weekdays</Badge> : null}
                        {weekends ? <Badge color="blue">Weekends</Badge> : null}
                      </Flex>
                    ) : null}
                    <Text mb="md">Orders: {orders.length}</Text>
                  </Flex>
                  <Flex gap="md" justify="end">
                    <ConfirmDialogButton
                      buttonColor="red"
                      buttonText="Delete"
                      text={`Are you sure you want to delete ${name}?`}
                      onConfirm={() => handleDelete(id)}
                    >
                      <IconTrash />
                    </ConfirmDialogButton>
                    <NavigateButton
                      to={`/dashboard/subs/${sub_username}/${id}`}
                    >
                      <IconPencil style={{ marginRight: "0.5rem" }} />
                      Edit
                    </NavigateButton>
                  </Flex>
                </Card>
              ),
            )
          : null}
      </Flex>
      <NavigateButton to={`/dashboard/subs/${sub_username}/new`}>
        <IconPlus style={{ marginRight: "0.5rem" }} />
        New
      </NavigateButton>
    </Container>
  );
};