commerce/lib/cart.js

import { useState, useCallback } from "react";
import useSWR, { mutate } from "swr";

async function getText(res) {
  try {
    return (await res.text()) || res.statusText;
  } catch (error) {
    return res.statusText;
  }
}

async function getError(res) {
  if (res.headers.get("Content-Type")?.includes("application/json")) {
    const data = await res.json();
    return data.errors[0];
  }
  return { message: await getText(res) };
}

async function fetcher(url) {
  const res = await fetch(url);

  if (res.status === 200) {
    return res.json();
  }
  throw await getError(res);
}

export function useCart() {
  return useSWR("/api/cart", fetcher);
}

export function useAddToCart() {
  const [{ addingToCart, error }, setStatus] = useState({
    addingToCart: false,
  });
  const addToCart = useCallback(async ({ product }) => {
    setStatus({ addingToCart: true });

    const res = await fetch("/api/cart", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ product }),
    });

    // Product added as expected
    if (res.status === 200) {
      setStatus({ addingToCart: false });
      return mutate("/api/cart");
    }

    const error = await getError(res);

    console.error("Adding product to cart failed with:", res.status, error);
    setStatus({ addingToCart: false, error });
  }, []);

  return { addToCart, addingToCart, error };
}

export function useUpdateCart() {
  const [{ updatingCart, error }, setStatus] = useState({
    updatingCart: false,
  });
  const updateCart = useCallback(async ({ product, item }) => {
    setStatus({ updatingCart: true });

    const res = await fetch(
      `/api/cart?itemId=${item.id}`,
      product.quantity < 1
        ? { method: "DELETE" }
        : {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ product }),
          }
    );

    // Product updated as expected
    if (res.status === 200) {
      setStatus({ updatingCart: false });
      return mutate("/api/cart");
    }

    const error = await getError(res);

    console.error("Update to cart failed with:", res.status, error);
    setStatus({ updatingCart: false, error });
  }, []);

  return { updateCart, updatingCart, error };
}

export function useRemoveFromCart() {
  const { updateCart, updatingCart, error } = useUpdateCart();
  const removeFromCart = async ({ item }) => {
    updateCart({ item, product: { quantity: 0 } });
  };

  return { removeFromCart, removingFromCart: updatingCart, error };
}