A Feature in Two Halves: The Page

The server's half is done: GET /api/products/:id answers 200 with the product, or 404 with {"error": "Product not found"}. Now you write the page's half, in client/src/pages/ProductPage.jsx. The page opens at /products/3, takes the id from the URL and asks the API for that product. It shows one of three screens: loading, the product, or an error.

useParams() gives one key for each :name in the route's path. On a page whose route is /orders/:orderId, you would write:

const { orderId } = useParams();

The given api() in client/src/api.js throws an ApiError with the answer's status when the answer is not OK. Other errors, like a network that is down, have no status. So the catch checks for an ApiError with status 404 and shows "Product not found". Every other error gets one plain sentence: "Something went wrong". A loading state starts as true and shows a status line until the request is done, whether it worked or failed.

The page must show:

open /products/3   →  status: Loading the product...
                      then GET /api/products/3 → 200  →  heading 2: Lamp, Price: $29, In stock: 1
open /products/99  →  GET /api/products/99 → 404  →  alert: Product not found
open /products/5   →  GET /api/products/5 → 500 (the check breaks it)  →  alert: Something went wrong

Your task: finish ProductPage. It needs the id from useParams, a loading state and its status line, the request with api, and the two error messages. When the request is done, set loading back to false.

Assignment
Follow the Coding Tutorial to finish the product page in client/src/pages/ProductPage.jsx.

Hint
Put setLoading(false) below the try/catch. That way it runs after a success and after an error.