context

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import "./App.css";
 import Footer from "./Footer";
 import Header from "./Header";
@@ -16,45 +16,11 @@ function App() {
   //https://stackoverflow.com/questions/58539813/lazy-initial-state-where-to-use-it
   // and https://dmitripavlutin.com/react-usestate-hook-guide/#3-lazy-initialization-of-state
   // Or, can use https://www.npmjs.com/package/@rehooks/local-storage which syncs between tabs
-  const [cart, setCart] = useState(() => {
-    try {
-      return JSON.parse(localStorage.getItem("cart")) ?? [];
-    } catch {
-      return [];
-    }
-  });
-
-  // Persist cart in localStorage
-  useEffect(() => localStorage.setItem("cart", JSON.stringify(cart)), [cart]);
-
-  function addToCart(id, size) {
-    setCart((cart) => {
-      const alreadyInCart = cart.find((i) => i.id === id && i.size === size);
-      if (alreadyInCart) {
-        return cart.map((i) => {
-          const isMatchingItem = i.id === id && i.size === size;
-          return isMatchingItem ? { ...i, quantity: i.quantity + 1 } : i;
-        });
-      } else {
-        return [...cart, { id, size, quantity: 1 }];
-      }
-    });
-  }
-
-  function updateCart(id, size, quantity) {
-    setCart((cart) => {
-      return quantity === 0
-        ? cart.filter((i) => i.id !== id || (i.id === id && i.size !== size))
-        : cart.map((i) =>
-            i.id === id && i.size === size ? { ...i, quantity } : i
-          );
-    });
-  }
 
   return (
     <>
       <div className="content">
-        <Header cart={cart} />
+        <Header />
 
         <main>
           <Switch>
@@ -63,14 +29,12 @@ function App() {
             </Route>
 
             <Route path="/cart">
-              <Cart cart={cart} updateCart={updateCart} />
+              <Cart />
             </Route>
 
             <Route
               path="/checkout"
-              render={(reactRouterProps) => (
-                <Checkout emptyCart={() => setCart([])} {...reactRouterProps} />
-              )}
+              render={(reactRouterProps) => <Checkout {...reactRouterProps} />}
             />
 
             <Route path="/confirmation">
@@ -82,7 +46,7 @@ function App() {
             </Route>
 
             <Route path="/:category/:id">
-              <Detail cart={cart} addToCart={addToCart} />
+              <Detail />
             </Route>
           </Switch>
         </main>

src/Cart.jsx

@@ -2,8 +2,10 @@ import React from "react";
 import { Link, useHistory } from "react-router-dom";
 import useFetchAll from "./services/useFetchAll";
 import Loader from "./Loader";
+import { useCart } from "./cartContext";
 
-export default function Cart({ cart, updateCart }) {
+export default function Cart() {
+  const { cart, updateCart } = useCart();
   // Using ref since not rendered, and need to avoid re-allocating on each render.
   const uniqueIdsInCart = [...new Set(cart.map((i) => i.id))];
   const requests = uniqueIdsInCart.map((id) => ({ url: `products/${id}` }));

src/Checkout.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { useHistory } from "react-router-dom";
 import { saveShippingAddress } from "./services/shippingService";
+import { useCart } from "./cartContext";
 
 // Declare static data outside the component to avoid needless recreation on each render.
 // Challenge: Finish building out the checkout with credit card, billing address, totals.
@@ -15,7 +16,8 @@ const STATUS = {
   SUBMITTING: "SUBMITTING",
 };
 
-export default function Checkout({ emptyCart }) {
+export default function Checkout() {
+  const { emptyCart } = useCart();
   const history = useHistory();
   // Point: When to split vs unify state.
   // Tradeoff: unifying makes it easier to send to server, but slightly more work to update.

src/Detail.jsx

@@ -3,8 +3,10 @@ import { useRouteMatch, Link, useHistory } from "react-router-dom";
 import SelectSize from "./SelectSize";
 import useFetch from "./services/useFetch";
 import Loader from "./Loader";
+import { useCart } from "./cartContext";
 
-export default function Detail({ cart, addToCart }) {
+export default function Detail() {
+  const { cart, addToCart } = useCart();
   const history = useHistory();
   const [size, setSize] = useState("");
   const { params } = useRouteMatch();

src/Header.jsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { Link, NavLink } from "react-router-dom";
+import { useCart } from "./cartContext";
 
-export default function Header({ cart }) {
+export default function Header() {
+  const { cart } = useCart();
   return (
     <header>
       <nav>

src/cartContext.js

@@ -0,0 +1,72 @@
+import React, { useState, useContext, useEffect } from "react";
+
+const CartContext = React.createContext();
+
+export function CartProvider(props) {
+  const [cart, setCart] = useState(() => {
+    try {
+      return JSON.parse(localStorage.getItem("cart")) ?? [];
+    } catch {
+      return [];
+    }
+  });
+
+  // Persist cart in localStorage
+  useEffect(() => localStorage.setItem("cart", JSON.stringify(cart)), [cart]);
+
+  function addToCart(id, size) {
+    setCart((cart) => {
+      const alreadyInCart = cart.find((i) => i.id === id && i.size === size);
+      if (alreadyInCart) {
+        return cart.map((i) => {
+          const isMatchingItem = i.id === id && i.size === size;
+          return isMatchingItem
+            ? {
+                ...i,
+                quantity: i.quantity + 1,
+              }
+            : i;
+        });
+      } else {
+        return [...cart, { id, size, quantity: 1 }];
+      }
+    });
+  }
+
+  function updateCart(id, size, quantity) {
+    setCart((cart) => {
+      return quantity === 0
+        ? cart.filter((i) => i.id !== id || (i.id === id && i.size !== size))
+        : cart.map((i) =>
+            i.id === id && i.size === size ? { ...i, quantity } : i
+          );
+    });
+  }
+
+  function emptyCart() {
+    setCart([]);
+  }
+
+  const contextValue = {
+    cart,
+    addToCart,
+    updateCart,
+    emptyCart,
+  };
+
+  return (
+    <CartContext.Provider value={contextValue}>
+      {props.children}
+    </CartContext.Provider>
+  );
+}
+
+export function useCart() {
+  const context = useContext(CartContext);
+  if (context === undefined) {
+    throw new Error(
+      "useCart must be used within a CartProvider. Wrap a parent component in <CartProvider> to fix this error."
+    );
+  }
+  return context;
+}

src/index.js

@@ -3,12 +3,15 @@ import ReactDOM from "react-dom";
 import App from "./App";
 import { BrowserRouter } from "react-router-dom";
 import ErrorBoundary from "./ErrorBoundary";
+import { CartProvider } from "./cartContext";
 
 ReactDOM.render(
   <React.StrictMode>
     <ErrorBoundary>
       <BrowserRouter>
-        <App />
+        <CartProvider>
+          <App />
+        </CartProvider>
       </BrowserRouter>
     </ErrorBoundary>
   </React.StrictMode>,