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

import { Container, Title } from "@mantine/core";
import React from "react";
import { Link, Params, useLoaderData, useParams } from "react-router";

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

export const SubOrderSets: React.FC = () => {
  const { username: sub_username } = useParams();
  const orders = useLoaderData<
    {
      id: number;
      name: string;
      orders: Pick<OrderSet, "id" | "name">[];
    }[]
  >();

  return (
    <Container>
      <Title order={1} mb="lg">
        Orders for {sub_username}
      </Title>
      {orders
        ? orders.map(({ id, name }) => (
            <Link key={id} to={`/dashboard/subs/${sub_username}/${id}`}>
              {name}
            </Link>
          ))
        : null}
    </Container>
  );
};