Project: The Orders Pages

A page that loads data from the API is always in one of three states: the answer hasn't arrived yet, it arrived empty, or it arrived with data. A good page shows something useful in each: a loading line, a friendly empty message with a way on, and the list itself.

Start the state as null, which means "not here yet", and check it before anything else. An empty array [] means "here, and there's nothing": its length is 0. For example, a page of categories could start like this:

if (categories === null) {
  return <p>Loading the categories…</p>;
}

The order matters: with null, reading categories.length would crash, so the null check comes first. Each order in your list links to its own page at /orders/<id>. OrderPage.jsx, both routes in App.jsx and the Orders link in the header are given.

The check opens /orders in a new shop, places an order for a Mug, and comes back:

> open /orders
  request: GET /api/orders ...
  screen while waiting:
      text: Loading your orders…
  answer: GET /api/orders -> 200
    +   text: You have no orders yet.
    +   link: See the products -> /
> click "Orders"            (after ordering a Mug)
    +   section "Orders"
    +     heading 2: Your orders
    +     list
    +       item: Order 1001 $12
    +         link: Details -> /orders/1001
> click "Details" in "Order 1001"
    +     heading 2: Order 1001
> the address bar
  /orders/1001
> press the browser's Back button
  request: GET /api/orders -> 200
    +       item: Order 1001 $12

Your task: in src/OrdersPage.jsx, keep the orders in state starting as null, load them once with an effect and getOrders(), show Loading your orders… while waiting and You have no orders yet. with a link home when the list is empty, and draw one OrderItem per order with a Details link to /orders/<id>.

Assignment
Follow the Coding Tutorial to build the Orders page: the state and the effect that loads the orders, the loading and empty screens, and the list with a Details link for each order.

Hint
Write the two ifs in this order: orders === null first, then orders.length === 0. Each returns early, so the list at the bottom only draws when there are orders.