♻️ Add Cart as children

components/AppHeader.tsx

@@ -1,16 +1,13 @@
-import React from "react";
-import { Item } from "../utils/types";
-import Cart from "./Cart";
+import React, { ReactNode } from "react";
 
 type AppHeaderProps = {
-  items: Item[];
-  onItemsClear(): void;
+  children: ReactNode;
 };
-function AppHeader({ items, onItemsClear }: AppHeaderProps) {
+function AppHeader({ children }: AppHeaderProps) {
   return (
     <header>
       <h1>MyShopping24</h1>
-      <Cart items={items} onClear={onItemsClear} />
+      {children}
     </header>
   );
 }

components/Cart.tsx

@@ -1,11 +1,9 @@
 import React from "react";
-import type { Item } from "../utils/types";
+import { useCartContext } from "../contexts/CartContext";
+
+function Cart() {
+  const { items, onClear } = useCartContext();
 
-type CartProps = {
-  items: Item[];
-  onClear(): void;
-};
-function Cart({ items, onClear }: CartProps) {
   const totalPrice = items.reduce<number>((prev, item) => prev + item.price, 0);
 
   return (

components/ItemDetails.tsx

@@ -1,15 +1,17 @@
 import React from "react";
+import { useCartContext } from "../contexts/CartContext";
 import { Item } from "../utils/types";
 
 type ItemDetailsProps = {
   item: Item;
-  onAdd(): void;
 };
-function ItemDetails({ item, onAdd }: ItemDetailsProps) {
+function ItemDetails({ item }: ItemDetailsProps) {
+  const { onItemAdd } = useCartContext();
+
   return (
     <>
       {item.name} <b>${item.price}</b>
-      <button onClick={onAdd}>Add to cart</button>
+      <button onClick={() => onItemAdd(item)}>Add to cart</button>
     </>
   );
 }

contexts/CartContext.tsx

@@ -0,0 +1,44 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+import type { Item } from "../utils/types";
+
+type CartContextType = {
+  items: Item[];
+  onClear(): void;
+  onItemAdd(item: Item): void;
+};
+export const CartContext = createContext<CartContextType>(null);
+
+type CartContextProviderProps = {
+  children: ReactNode;
+};
+export function CartContextProvider({ children }: CartContextProviderProps) {
+  const [items, setItems] = useState<Item[]>([]);
+
+  function onClear() {
+    setItems([]);
+  }
+
+  function onItemAdd(item: Item) {
+    setItems((items) => [...items, item]);
+  }
+
+  return (
+    <CartContext.Provider
+      value={{
+        items,
+        onClear,
+        onItemAdd,
+      }}
+    >
+      {children}
+    </CartContext.Provider>
+  );
+}
+
+export function useCartContext() {
+  return useContext(CartContext);
+}
+
+export function useItems() {
+  return useCartContext().items;
+}

pages/[name].tsx

@@ -7,10 +7,7 @@ import styles from "../styles/Home.module.css";
 import Link from "next/link";
 import ItemDetails from "../components/ItemDetails";
 
-type ItemPageProps = {
-  onItemAdd(item: Item): void;
-};
-export default function ItemPage({ onItemAdd }: ItemPageProps) {
+export default function ItemPage() {
   const router = useRouter();
   const { name } = router.query;
 
@@ -27,7 +24,7 @@ export default function ItemPage({ onItemAdd }: ItemPageProps) {
       </Head>
 
       <main className={styles.main}>
-        <ItemDetails item={item} onAdd={() => onItemAdd(item)} />
+        <ItemDetails item={item} />
         <Link href="/">
           <a>Back</a>
         </Link>

pages/_app.tsx

@@ -1,21 +1,18 @@
 import type { AppProps } from "next/app";
-import { useState } from "react";
 import AppHeader from "../components/AppHeader";
+import Cart from "../components/Cart";
+import { CartContextProvider } from "../contexts/CartContext";
 import "../styles/globals.css";
-import { Item } from "../utils/types";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  const [items, setItems] = useState<Item[]>([]);
-
   return (
-    <>
-      <AppHeader items={items} onItemsClear={() => setItems([])} />
+    <CartContextProvider>
+      <AppHeader>
+        <Cart />
+      </AppHeader>
 
-      <Component
-        onItemAdd={(item: Item) => setItems((items) => [...items, item])}
-        {...pageProps}
-      />
-    </>
+      <Component {...pageProps} />
+    </CartContextProvider>
   );
 }