import * as React from "react";
import { useQuery, gql } from "@apollo/client";
import { Quantity } from "@spendcook/api-types";

const BOOKS = gql`
  query {
    shoppingList {
      quantity
      ingredient {
        title
      }
    }
  }
`;

export default function Shopping() {
  const { data } = useQuery<{
    shoppingList: Quantity[];
  }>(BOOKS);

  if (!data) {
    return null;
  }

  return (
    <>
      <h2>Список покупок</h2>
      <ul>
        {data.shoppingList.map(({ ingredient: { title }, quantity }) => {
          return (
            <li>
              {title}
              {" - "}
              {quantity}
              {" г."}
            </li>
          );
        })}
      </ul>
    </>
  );
}