Leonardo Lodi

src/App.jsx

@@ -1,44 +1,27 @@
 import './styles/reset.css'
 import './styles/index.css'
 
-import initialStoreItems from './store-items'
+import Header from './Header'
+import Footer from './Footer'
+import MainContent from './MainContent'
+import { useState } from 'react'
 
 export default function App() {
+  const [cartList, setCartList] = useState([])
+
   return (
     <>
-      <header id="store">
-        <h1>Greengrocers</h1>
-        <ul className="item-list store--item-list">
-        </ul>
-      </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>
-      </main>
-      <div>
-        Icons made by
-        <a
-          href="https://www.flaticon.com/authors/icongeek26"
-          title="Icongeek26"
-        >
-          Icongeek26
-        </a>
-        from
-        <a href="https://www.flaticon.com/" title="Flaticon">
-          www.flaticon.com
-        </a>
-      </div>
+      <Header 
+        cartList={cartList}
+        setCartList={setCartList}
+      />
+
+      <MainContent
+        cartList={cartList}  
+        setCartList={setCartList}
+      />
+
+      <Footer />
     </>
   )
-}
+}

src/CartItem.jsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/prop-types */
+export default function CartItem({ cartList, setCartList }) {
+    const increment = (item) => {
+        setCartList(prevCartList => prevCartList.map(cartItem => 
+            cartItem.id === item.id ? { ...cartItem, quantity: cartItem.quantity + 1 } : cartItem
+        ))
+    }
+
+    const decrement = (item) => {
+        if (item.quantity > 1) {
+            setCartList(prevCartList => prevCartList.map(cartItem => 
+                cartItem.id === item.id ? { ...cartItem, quantity: cartItem.quantity - 1 } : cartItem
+            ))
+        } else {
+            setCartList(prevCartList => prevCartList.filter(cartItem => cartItem.id !== item.id))
+        }
+    }
+
+    return (
+        <div className="cart--item-list-container">
+            {cartList.map((item) => (
+                <ul key={item.id} className="item-list cart--item-list">
+                    <li>
+                        <img
+                            className="cart--item-icon"
+                            src={`/assets/icons/${item.id}.svg`}
+                            alt={item.name}
+                        />
+                        <p>{item.name}</p>
+                        <button onClick={() => decrement(item)} className="quantity-btn remove-btn center">-</button>
+                        <span className="quantity-text center">{item.quantity}</span>
+                        <button onClick={() => increment(item)} className="quantity-btn add-btn center">+</button>
+                    </li>
+                </ul>
+            ))}
+        </div>
+    )
+}

src/Footer.jsx

@@ -0,0 +1,20 @@
+export default function Footer() {
+    return (
+        <div>
+            Icons made by
+            <a
+                href="https://www.flaticon.com/authors/icongeek26"
+                title="Icongeek26"
+            >
+                Icongeek26
+            </a>
+            from
+            <a 
+                href="https://www.flaticon.com/"
+                title="Flaticon"
+            >
+                www.flaticon.com
+            </a>
+        </div>
+    )
+}

src/Header.jsx

@@ -0,0 +1,15 @@
+import StoreItem from "./StoreItem";
+
+// eslint-disable-next-line react/prop-types
+export default function Header({ cartList, setCartList }) {
+    return (
+        <header id="store">
+            <h1>Greengrocers</h1>
+
+            <StoreItem 
+                cartList={cartList} 
+                setCartList={setCartList}
+            />
+        </header>
+    )
+}

src/MainContent.jsx

@@ -0,0 +1,18 @@
+/* eslint-disable react/prop-types */
+import CartItem from "./CartItem";
+import Price from "./Price";
+
+export default function MainContent({ cartList, setCartList }) {
+    return (
+        <main id="cart">
+            <h2>Your Cart</h2>
+
+            <CartItem
+                cartList={cartList}
+                setCartList={setCartList}
+            />
+
+            <Price cartList={cartList} />
+        </main>
+    )
+}

src/Price.jsx

@@ -0,0 +1,16 @@
+/* eslint-disable react/prop-types */
+export default function Price({ cartList }) {
+    const totalPrice = cartList.reduce((total, item) => total + (item.quantity * item.price), 0)
+
+    return (
+        <div className="total-section">
+            <div>
+                <h3>Total</h3>
+            </div>
+
+            <div>
+                <span className="total-number">{`£${totalPrice.toFixed(2)}`}</span>
+            </div>
+        </div>
+    )
+}

src/StoreItem.jsx

@@ -0,0 +1,31 @@
+import initialStoreItems from './store-items'
+
+/* eslint-disable react/prop-types */
+export default function StoreItem({ cartList, setCartList }) {
+    const handleClick = (item) => {        
+        if (cartList.find(cartItem => cartItem.id === item.id)) {
+            setCartList(prevCartList => prevCartList.map(cartItem => 
+                cartItem.id === item.id ? { ...cartItem, quantity: cartItem.quantity + 1 } : cartItem
+            ))
+        } else {
+            setCartList(prevCartList => [...prevCartList, { ...item, quantity: 1 }])
+        }
+    }
+
+    return (
+        <ul className="item-list store--item-list">
+            {initialStoreItems.map((item) => (
+                <li key={item.id}>
+                    <div className="store--item-icon">
+                        <img 
+                        src={`/assets/icons/${item.id}.svg`}
+                        alt={item.name} 
+                        />
+                    </div>
+
+                    <button onClick={() => handleClick(item)}>Add to cart</button>
+                </li>
+            ))}
+        </ul>
+    )
+}