Exercise 27 joins the 27 club

src/App.js

@@ -1,25 +1,20 @@
 import logo from './logo.svg';
-import './App.css';
+import React from 'react';
+import { ShoppingCartProvider } from './context/ShoppingCartContext';
+import Cart from './components/Cart';
+import AddToCartButton from './components/AddToCartButton';
+import CartItem from './components/CartItem';
 
-function App() {
+const App = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <ShoppingCartProvider>
+      <div>
+        <Cart />
+        <AddToCartButton item={{ id: 1, name: 'Product 1', quantity: 1 }} />
+        <CartItem item={{ id: 1, name: 'Product 1', quantity: 1 }} />
+      </div>
+    </ShoppingCartProvider>
   );
-}
+};
 
 export default App;

src/components/AddToCartButton.js

@@ -0,0 +1,35 @@
+import React, { useContext, useState } from 'react';
+import { ShoppingCartContext, ShoppingCartProvider } from '../context/ShoppingCartContext';
+
+const AddToCartButton = ({ item }) => {
+  const { addItem } = useContext(ShoppingCartContext);
+const { updateQuantity } = useContext(ShoppingCartContext);
+const [quantity, setQuantity] = useState(item.quantity);
+
+  const handleQuantityChange = (event) => {
+    const newQuantity = parseInt(event.target.value);
+    setQuantity(newQuantity);
+    updateQuantity(item.id, newQuantity);
+  };
+
+
+  const handleAddToCart = () => {
+    addItem({ ...item, quantity });
+};
+
+  return (
+    <div>
+      <span>{item.name} - Quantity:</span>
+      <input
+        type="number"
+        min="1"
+        value={quantity}
+        onChange={handleQuantityChange}
+      />
+      <button onClick= {handleAddToCart}>Add to Cart</button>
+    </div>
+
+  );
+};
+
+export default AddToCartButton;

src/components/Cart.js

@@ -0,0 +1,24 @@
+// Cart.js
+import React, { useContext } from 'react';
+import { ShoppingCartContext, ShoppingCartProvider } from '../context/ShoppingCartContext';
+
+const Cart = () => {
+  const { cartItems } = useContext(ShoppingCartContext);
+
+  if (!cartItems) {
+    return <div>Loading...</div>; // You can replace this with a loading indicator or any other message
+  }
+
+  return (
+    <div>
+      <h2>Shopping Cart</h2>
+      <ul>
+        {cartItems.map((item) => (
+          <li key={item.id}>{item.name} - Quantity: {item.quantity}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Cart;

src/components/CartItem.js

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { useShoppingCart } from '../context/ShoppingCartContext';
+
+const CartItem = ({ item }) => {
+  const { removeItem, updateQuantity} = useShoppingCart();
+  const [quantity, setQuantity] = useState(item.quantity);
+
+  const handleQuantityChange = (e) => {
+    const newQuantity = parseInt(e.target.value);
+    setQuantity(newQuantity);
+    updateQuantity(item.id, newQuantity);
+  };
+
+  const handleRemoveItem = () => {
+    removeItem(item.id);
+  };
+
+  return (
+    <div>
+      <span>{item.name} - Quantity:</span>
+      <input
+        type="number"
+        min="1"
+        value={quantity}
+        onChange={handleQuantityChange}
+      />
+      <button onClick={handleRemoveItem}>
+        Remove
+      </button>
+    </div>
+  );
+};
+
+export default CartItem;

src/context/ShoppingCartContext.js

@@ -0,0 +1,44 @@
+import React, { createContext, useContext, useState } from "react";
+
+const ShoppingCartContext = createContext({
+    cartItems: [],
+    addItem: () => {},
+    removeItem: () => {},
+    updateQuantity: () => {},
+});
+
+const ShoppingCartProvider = ({ children }) => {
+    const [cartItems, setCartItems] = useState([]);
+
+    const addItem = (item) => {
+        setCartItems([...cartItems, item]);
+
+    };
+    const removeItem = (id) => {
+        setCartItems(cartItems.filter((i) => i.id !== id));
+
+    };
+    const updateQuantity = (id, quantity) => {        
+        setCartItems(cartItems.map((i) => i.id === id ? { ...i, quantity } : i));
+
+    };
+
+
+    return (
+        <ShoppingCartContext.Provider
+            value={{
+                cartItems,
+                addItem,
+                removeItem,
+                updateQuantity,
+            }}
+        >
+            {children}
+        </ShoppingCartContext.Provider>
+    );
+}
+
+const useShoppingCart = () =>  useContext(ShoppingCartContext)
+
+
+export  {ShoppingCartContext, ShoppingCartProvider, useShoppingCart};