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

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

import { ConfirmDialogButton } from "./ConfirmDialogButton";
import { NavigateButton } from "./NavigateButton";
import { useFetcher } from "react-router";

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

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

  return (
    <>
      <Box mb="lg">
        <Title order={1}>Order Sets for {username}</Title>
        {linkBack ? linkBack : null}
      </Box>
      <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" h="100%">
                    <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" flex={1}>
                      Orders: {orders.length}
                    </Text>
                    <Flex gap="md" justify="end">
                      <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>
              ),
            )
          : null}
      </Flex>
      <NavigateButton to={`/orders/${username}/new`}>
        <IconPlus style={{ marginRight: "0.5rem" }} />
        New
      </NavigateButton>
      <Box mb="lg"></Box>
    </>
  );
};