import React from "react";
import { Params, useLoaderData, useParams, Link } from "react-router";
import { OrderSetProps, OrderSets } from "./OrderSets";

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

export const SubOrderSets: React.FC = () => {
  const { username: sub_username } = useParams();
  const orderSets = useLoaderData<OrderSetProps["orderSets"]>();

  return (
    <OrderSets
      username={sub_username}
      orderSets={orderSets}
      linkBack={<Link to={`/dashboard/`}>Return to dashboard</Link>}
    />
  );
};