From 2ddd644065adb6f3584be4fb9344b29ea9c6ea21 Mon Sep 17 00:00:00 2001
From: lmachens <leon@machens.koeln>
Date: Thu, 25 Mar 2021 15:24:09 +0100
Subject: [PATCH 1/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Add=20Cart=20as=20chil?=
 =?UTF-8?q?dren?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AppHeader.tsx | 11 ++++-------
 pages/_app.tsx           |  5 ++++-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/AppHeader.tsx b/components/AppHeader.tsx
index 12ee0b1..415eaf8 100644
--- a/components/AppHeader.tsx
+++ b/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>
   );
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index c00266f..207e1db 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,7 @@
 import type { AppProps } from "next/app";
 import { useState } from "react";
 import AppHeader from "../components/AppHeader";
+import Cart from "../components/Cart";
 import "../styles/globals.css";
 import { Item } from "../utils/types";
 
@@ -9,7 +10,9 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <>
-      <AppHeader items={items} onItemsClear={() => setItems([])} />
+      <AppHeader>
+        <Cart items={items} onClear={() => setItems([])} />
+      </AppHeader>
 
       <Component
         onItemAdd={(item: Item) => setItems((items) => [...items, item])}

From dff012f8634123d1ac055eb03ce0591c7b972b36 Mon Sep 17 00:00:00 2001
From: lmachens <leon@machens.koeln>
Date: Thu, 25 Mar 2021 16:01:08 +0100
Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=A8=20Add=20CartContext?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Cart.tsx      | 12 +++++-------
 contexts/CartContext.tsx |  8 ++++++++
 pages/_app.tsx           | 15 ++++++++++++---
 3 files changed, 25 insertions(+), 10 deletions(-)
 create mode 100644 contexts/CartContext.tsx

diff --git a/components/Cart.tsx b/components/Cart.tsx
index ba710d7..c917977 100644
--- a/components/Cart.tsx
+++ b/components/Cart.tsx
@@ -1,11 +1,9 @@
-import React from "react";
-import type { Item } from "../utils/types";
+import React, { useContext } from "react";
+import { CartContext } from "../contexts/CartContext";
+
+function Cart() {
+  const { items, onClear } = useContext(CartContext);
 
-type CartProps = {
-  items: Item[];
-  onClear(): void;
-};
-function Cart({ items, onClear }: CartProps) {
   const totalPrice = items.reduce<number>((prev, item) => prev + item.price, 0);
 
   return (
diff --git a/contexts/CartContext.tsx b/contexts/CartContext.tsx
new file mode 100644
index 0000000..28a4b3e
--- /dev/null
+++ b/contexts/CartContext.tsx
@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import type { Item } from "../utils/types";
+
+type CartContextType = {
+  items: Item[];
+  onClear(): void;
+};
+export const CartContext = createContext<CartContextType>(null);
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 207e1db..7b26038 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,23 +2,32 @@ import type { AppProps } from "next/app";
 import { useState } from "react";
 import AppHeader from "../components/AppHeader";
 import Cart from "../components/Cart";
+import { CartContext } from "../contexts/CartContext";
 import "../styles/globals.css";
 import { Item } from "../utils/types";
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [items, setItems] = useState<Item[]>([]);
 
+  function onClear() {
+    setItems([]);
+  }
   return (
-    <>
+    <CartContext.Provider
+      value={{
+        items,
+        onClear,
+      }}
+    >
       <AppHeader>
-        <Cart items={items} onClear={() => setItems([])} />
+        <Cart />
       </AppHeader>
 
       <Component
         onItemAdd={(item: Item) => setItems((items) => [...items, item])}
         {...pageProps}
       />
-    </>
+    </CartContext.Provider>
   );
 }
 

From a195472a6846750d3d7ad591933ef32624ae3592 Mon Sep 17 00:00:00 2001
From: lmachens <leon@machens.koeln>
Date: Thu, 25 Mar 2021 16:38:40 +0100
Subject: [PATCH 3/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Outsource=20CartContex?=
 =?UTF-8?q?tProvider?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ItemDetails.tsx | 10 ++++++----
 contexts/CartContext.tsx   | 30 +++++++++++++++++++++++++++++-
 pages/[name].tsx           |  7 ++-----
 pages/_app.tsx             | 23 ++++-------------------
 4 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/components/ItemDetails.tsx b/components/ItemDetails.tsx
index 4f3fa91..a051ad2 100644
--- a/components/ItemDetails.tsx
+++ b/components/ItemDetails.tsx
@@ -1,15 +1,17 @@
-import React from "react";
+import React, { useContext } from "react";
+import { CartContext } 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 } = useContext(CartContext);
+
   return (
     <>
       {item.name} <b>${item.price}</b>
-      <button onClick={onAdd}>Add to cart</button>
+      <button onClick={() => onItemAdd(item)}>Add to cart</button>
     </>
   );
 }
diff --git a/contexts/CartContext.tsx b/contexts/CartContext.tsx
index 28a4b3e..b8ff4c8 100644
--- a/contexts/CartContext.tsx
+++ b/contexts/CartContext.tsx
@@ -1,8 +1,36 @@
-import { createContext } from "react";
+import { createContext, ReactNode, 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>
+  );
+}
diff --git a/pages/[name].tsx b/pages/[name].tsx
index 6e2036d..0a9669a 100644
--- a/pages/[name].tsx
+++ b/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>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7b26038..633417b 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,33 +1,18 @@
 import type { AppProps } from "next/app";
-import { useState } from "react";
 import AppHeader from "../components/AppHeader";
 import Cart from "../components/Cart";
-import { CartContext } from "../contexts/CartContext";
+import { CartContextProvider } from "../contexts/CartContext";
 import "../styles/globals.css";
-import { Item } from "../utils/types";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  const [items, setItems] = useState<Item[]>([]);
-
-  function onClear() {
-    setItems([]);
-  }
   return (
-    <CartContext.Provider
-      value={{
-        items,
-        onClear,
-      }}
-    >
+    <CartContextProvider>
       <AppHeader>
         <Cart />
       </AppHeader>
 
-      <Component
-        onItemAdd={(item: Item) => setItems((items) => [...items, item])}
-        {...pageProps}
-      />
-    </CartContext.Provider>
+      <Component {...pageProps} />
+    </CartContextProvider>
   );
 }
 

From d68ed1aaaf65541c2e4c55b5d8b3cf341f3ae0bd Mon Sep 17 00:00:00 2001
From: lmachens <leon@machens.koeln>
Date: Thu, 25 Mar 2021 16:42:50 +0100
Subject: [PATCH 4/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Add=20custom=20hooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Cart.tsx        |  6 +++---
 components/ItemDetails.tsx |  6 +++---
 contexts/CartContext.tsx   | 10 +++++++++-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/Cart.tsx b/components/Cart.tsx
index c917977..6dc78f5 100644
--- a/components/Cart.tsx
+++ b/components/Cart.tsx
@@ -1,8 +1,8 @@
-import React, { useContext } from "react";
-import { CartContext } from "../contexts/CartContext";
+import React from "react";
+import { useCartContext } from "../contexts/CartContext";
 
 function Cart() {
-  const { items, onClear } = useContext(CartContext);
+  const { items, onClear } = useCartContext();
 
   const totalPrice = items.reduce<number>((prev, item) => prev + item.price, 0);
 
diff --git a/components/ItemDetails.tsx b/components/ItemDetails.tsx
index a051ad2..aa5327f 100644
--- a/components/ItemDetails.tsx
+++ b/components/ItemDetails.tsx
@@ -1,12 +1,12 @@
-import React, { useContext } from "react";
-import { CartContext } from "../contexts/CartContext";
+import React from "react";
+import { useCartContext } from "../contexts/CartContext";
 import { Item } from "../utils/types";
 
 type ItemDetailsProps = {
   item: Item;
 };
 function ItemDetails({ item }: ItemDetailsProps) {
-  const { onItemAdd } = useContext(CartContext);
+  const { onItemAdd } = useCartContext();
 
   return (
     <>
diff --git a/contexts/CartContext.tsx b/contexts/CartContext.tsx
index b8ff4c8..48d8b4d 100644
--- a/contexts/CartContext.tsx
+++ b/contexts/CartContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useState } from "react";
+import { createContext, ReactNode, useContext, useState } from "react";
 import type { Item } from "../utils/types";
 
 type CartContextType = {
@@ -34,3 +34,11 @@ export function CartContextProvider({ children }: CartContextProviderProps) {
     </CartContext.Provider>
   );
 }
+
+export function useCartContext() {
+  return useContext(CartContext);
+}
+
+export function useItems() {
+  return useCartContext().items;
+}