Periklis K

src/App.jsx

@@ -1,31 +1,28 @@
 import './styles/reset.css'
 import './styles/index.css'
+import { useState } from 'react'
+
+// import initialStoreItems from './store-items'
+
+import Store from './Components/Store'
+import Cart from './Components/Cart'
+import Total from './Components/Total'
+
+export default function App() {  
+  const [cartProds, setCartProds] = useState([])
 
-import initialStoreItems from './store-items'
 
-export default function App() {
   return (
     <>
       <header id="store">
         <h1>Greengrocers</h1>
-        <ul className="item-list store--item-list">
-        </ul>
+        <Store  cartProds={cartProds} setCartProds={setCartProds} />
       </header>
       <main id="cart">
-        <h2>Your Cart</h2>
-        <div className="cart--item-list-container">
-          <ul className="item-list cart--item-list">
-          </ul>
-        </div>
-        <div className="total-section">
-          <div>
-            <h3>Total</h3>
-          </div>
-          <div>
-            <span className="total-number">£0.00</span>
-          </div>
-        </div>
+        <Cart cartProds={cartProds} setCartProds={setCartProds} />
+        <Total cartProds={cartProds} />
       </main>
+
       <div>
         Icons made by
         <a

src/Components/AddToCart.jsx

@@ -0,0 +1,20 @@
+export default function AddToCart({ setCartProds, cartProds, product}) {
+
+    function handleAddToCart() {
+        const inCart = cartProds.find(p => p.id === product.id);
+
+        if (inCart) {
+        inCart.qty++;
+        setCartProds([...cartProds]);
+        } else {
+        const addProduct = { ...product, qty: 1 };
+        setCartProds([...cartProds, addProduct]);
+        }
+    }
+
+    return (
+        <button style={{ marginTop: '10px' }}
+            onClick={() => handleAddToCart(product)} >
+            Add to Cart</button>
+    )
+}

src/Components/Cart.jsx

@@ -0,0 +1,13 @@
+import CartProducts from "./CartProducts"
+export default function Cart({ cartProds, setCartProds }) {
+    return (
+        <>
+        <h2>Your Cart</h2>
+        <div className="cart--item-list-container">
+          <ul className="item-list cart--item-list">
+            <CartProducts cartProds={cartProds} setCartProds={setCartProds} />
+          </ul>
+        </div>
+        </>
+    )
+}

src/Components/CartProducts.jsx

@@ -0,0 +1,31 @@
+export default function CartProducts({ cartProds, setCartProds }) {
+
+    function handleClick(e, prod) {
+        if (e.target.innerText === '+') {
+            prod.qty++
+        }
+        if (e.target.innerText === '-' && prod.qty > 0) {
+            prod.qty--
+        }
+        setCartProds([...cartProds])
+    }
+
+    return (
+        cartProds.map((prod, index) => {
+            if (prod.qty) {
+                return (
+                    <li key={index}>
+                        <img
+                            className="cart--item-icon"
+                            src={`/assets/icons/${prod.id}.svg`} alt={prod.name}     
+                        />
+                        <p>{prod.name}</p>
+                        <button className="quantity-btn remove-btn center" onClick={(e) => handleClick(e, prod)} >-</button>
+                                <span className="quantity-text center">{prod.qty}</span>
+                        <button className="quantity-btn add-btn center" onClick={(e) => handleClick(e, prod)}>+</button>
+                    </li>
+                )
+            }
+        })
+    )
+}

src/Components/Store.jsx

@@ -0,0 +1,12 @@
+import { useState } from 'react'
+import initialStoreItems from '../store-items'
+import StoreItem from "./StoreItem"
+
+export default function Store({  cartProds, setCartProds }) {
+  const [products, setProducts] = useState(initialStoreItems)
+    return (
+        <ul className="item-list store--item-list">
+          <StoreItem products={products} cartProds={cartProds} setCartProds={setCartProds} />
+        </ul>
+    )
+}

src/Components/StoreItem.jsx

@@ -0,0 +1,21 @@
+import AddToCart from "./AddToCart"
+
+export default function StoreItem({ products, cartProds, setCartProds }) {
+
+
+    return (
+        products.map(product => (
+        <li key={product.id}>
+            <div className="store--item-icon">
+                <img width={94} src={`/assets/icons/${product.id}.svg`} alt={product.name} />
+            </div>
+            <div className="store--item-details">
+
+                <p>Price: ${product.price}</p>
+                <button style={{marginTop: '10px' }}>Product Info</button>
+                <AddToCart product={product} cartProds={cartProds} setCartProds={setCartProds} />
+            </div>
+        </li>
+        ))
+    )
+}

src/Components/Total.jsx

@@ -0,0 +1,15 @@
+export default function Total({ cartProds }) {
+
+    const total = cartProds.reduce((total, prod) => (total += prod.price * prod.qty),0)
+
+    return (
+        <div className="total-section">
+          <div>
+            <h3>Total</h3>
+          </div>
+          <div>
+            <span className="total-number">£{total.toFixed(2)}</span>
+          </div>
+        </div>
+    )
+}