Type-Safe Shopping Cart with useReducer, Context, and a useCart Hook

import React, { createContext, useMemo, useReducer } from "react";
import {
  CartItem,
  cartReducer,
  initialCartState,
} from "./cartReducer";

export interface CartContextValue {
  items: CartItem[];
  totalQuantity: number;
  subtotal: number;
  addItem: (item: Omit<CartItem, "quantity">, quantity?: number) => void;
  removeItem: (id: string) => void;
  setQuantity: (id: string, quantity: number) => void;
  clear: () => void;
}

export const CartContext = createContext<CartContextValue | undefined>(
  undefined
);

export function CartProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(cartReducer, initialCartState);

  const totals = useMemo(() => {
    return state.items.reduce(
      (acc, i) => ({
        totalQuantity: acc.totalQuantity + i.quantity,
        subtotal: acc.subtotal + i.price * i.quantity,
      }),
      { totalQuantity: 0, subtotal: 0 }
    );
  }, [state.items]);

  const value = useMemo<CartContextValue>(
    () => ({
      items: state.items,
      totalQuantity: totals.totalQuantity,
      subtotal: totals.subtotal,
      addItem: (item, quantity) =>
        dispatch({ type: "ADD_ITEM", item, quantity }),
      removeItem: (id) => dispatch({ type: "REMOVE_ITEM", id }),
      setQuantity: (id, quantity) =>
        dispatch({ type: "SET_QUANTITY", id, quantity }),
      clear: () => dispatch({ type: "CLEAR" }),
    }),
    [state.items, totals]
  );

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
}

import { useContext } from "react";
import { CartContext, CartContextValue } from "./CartContext";

export function useCart(): CartContextValue {
  const ctx = useContext(CartContext);
  if (ctx === undefined) {
    throw new Error("useCart must be used within a <CartProvider>");
  }
  return ctx;
}

import React from "react";
import { useCart } from "./useCart";

const money = (cents: number) => `$${(cents / 100).toFixed(2)}`;

export function CartSummary() {
  const { items, totalQuantity, subtotal, setQuantity, removeItem, clear } =
    useCart();

  if (items.length === 0) {
    return <p className="cart-empty">Your cart is empty.</p>;
  }

  return (
    <section className="cart">
      <ul>
        {items.map((item) => (
          <li key={item.id} className="cart-line">
            <span>{item.name}</span>
            <input
              type="number"
              min={0}
              value={item.quantity}
              onChange={(e) =>
                setQuantity(item.id, Number(e.target.value))
              }
            />
            <span>{money(item.price * item.quantity)}</span>
            <button onClick={() => removeItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
      <footer>
        <span>{totalQuantity} items</span>
        <strong>{money(subtotal)}</strong>
        <button onClick={clear}>Clear cart</button>
      </footer>
    </section>
  );
}