Joan Nabuuma

src/App.jsx

@@ -1,31 +1,139 @@
-import './styles/reset.css'
-import './styles/index.css'
+import "./styles/reset.css";
+import "./styles/index.css";
 
-import initialStoreItems from './store-items'
+import initialStoreItems from "./store-items";
+
+import Store from "./components/Store";
+import { useState } from "react";
+import Cart from "./components/Cart";
+
+import Filter from "./components/Filter";
+import Sorter from "./components/Sorter";
+
+import Detail from "./components/Detail";
 
 export default function App() {
+  const [storeFruits, setStoreFruits] = useState(initialStoreItems);
+  const [cartFruits, setCartFruits] = useState([]);
+  const [detailFruit, setDetailFruit] = useState(null);
+
+  const handleAddToCart = (id) => {
+    const index = cartFruits.findIndex((fruit) => fruit.id === id);
+    let updatedCartFruits = [];
+    let fruit = {};
+    if (index === -1) {
+      fruit = storeFruits.find((fruit) => fruit.id === id);
+      fruit = { ...fruit, quantity: 1 };
+      cartFruits.push(fruit);
+    } else {
+      fruit = cartFruits.find((fruit) => fruit.id === id);
+      fruit.quantity++;
+    }
+    updatedCartFruits = cartFruits.map((fruit) => fruit);
+    setCartFruits(updatedCartFruits);
+  };
+
+  const handleQuantityIncrement = (id) => {
+    const updatedCartFruits = cartFruits.map((fruit) => {
+      if (fruit.id === id) {
+        fruit.quantity++;
+      }
+      return fruit;
+    });
+    setCartFruits(updatedCartFruits);
+  };
+
+  const handleQuantityDecrement = (id) => {
+    const updatedFruit = cartFruits.find((fruit) => fruit.id === id);
+    updatedFruit.quantity--;
+    const updatedCartFruits = cartFruits.filter((fruit) => fruit.quantity > 0);
+    setCartFruits(updatedCartFruits);
+  };
+
+  const calculateTotal = () => {
+    let total = 0;
+    for (let i = 0; i < cartFruits.length; i++) {
+      total += cartFruits[i].quantity * cartFruits[i].price;
+    }
+    return total;
+  };
+
+  const handleFilter = (event) => {
+    let filter = event.target.value;
+    if (filter === "all") {
+      setStoreFruits(initialStoreItems);
+      return;
+    }
+    let filteredStoreFruits = initialStoreItems.filter(
+      (fruit) => fruit.type === filter
+    );
+    setStoreFruits(filteredStoreFruits);
+  };
+
+  const handleSorter = (event) => {
+    let sortby = event.target.value;
+    console.log(sortby);
+    switch (sortby) {
+      case "price-asc":
+        storeFruits.sort((a, b) => a.price - b.price);
+        break;
+      case "price-desc":
+        storeFruits.sort((a, b) => b.price - a.price);
+        break;
+      case "alpha":
+        storeFruits.sort((a, b) => a.name.localeCompare(b.name));
+        break;
+    }
+    let sortedStoreFruits = storeFruits.map((fruit) => fruit);
+    setStoreFruits(sortedStoreFruits);
+  };
+
+  const handleShowDetails = (fruit) => {
+    setDetailFruit(fruit);
+  };
+
+  const handleDismiss = () => {
+    setDetailFruit(null);
+  };
+
   return (
     <>
       <header id="store">
         <h1>Greengrocers</h1>
+
+        <Filter onChangeFilter={handleFilter} />
+
+        <Sorter onChangeSort={handleSorter} />
+
         <ul className="item-list store--item-list">
+          <Store
+            fruits={storeFruits}
+            addToCart={handleAddToCart}
+            showDetails={handleShowDetails}
+          />
         </ul>
       </header>
       <main id="cart">
         <h2>Your Cart</h2>
         <div className="cart--item-list-container">
           <ul className="item-list cart--item-list">
+            <Cart
+              fruits={cartFruits}
+              incrementQuantity={handleQuantityIncrement}
+              decrementQuantity={handleQuantityDecrement}
+            />
           </ul>
         </div>
         <div className="total-section">
           <div>
             <h3>Total</h3>
           </div>
           <div>
-            <span className="total-number">£0.00</span>
+            <span className="total-number">£ {calculateTotal()}</span>
           </div>
         </div>
       </main>
+      <Detail fruit={detailFruit} dismiss={handleDismiss} />
       <div>
         Icons made by
         <a
@@ -40,5 +148,5 @@ export default function App() {
         </a>
       </div>
     </>
-  )
+  );
 }

src/components/Cart.jsx

@@ -0,0 +1,22 @@
+/* eslint-disable react/prop-types */
+function Cart({fruits, incrementQuantity, decrementQuantity}) {
+
+    return (
+        <>
+         {fruits.map((fruit, index) => (
+                <li key={index}>
+                    <img src={`./assets/icons/${fruit.id}.svg`}></img>
+                    <p>{fruit.name}</p>
+                    <button onClick={() => decrementQuantity(fruit.id)}>
+                        -
+                    </button>
+                    <p>{fruit.quantity}</p>
+                    <button onClick={() => incrementQuantity(fruit.id)}>
+                        +
+                    </button>
+                </li>
+            ))}  
+        </>
+    )
+}
+export default Cart

src/components/Detail.jsx

@@ -0,0 +1,32 @@
+/* eslint-disable react/prop-types */
+import '../styles/modal.css'
+
+function Detail({ fruit, dismiss }) {
+
+
+    if (fruit === null) return <></>
+
+    return <>
+        <div className="modal">
+            <div className='modal-content'>
+                <span className="close" onClick={dismiss}>&times;</span>
+
+                <img
+                    className="store--item-icon "
+                    src={`./assets/icons/${fruit.id}.svg`}
+                ></img>
+
+                <div>
+                    <p>ID: {fruit.id}</p>
+                    <p>Name: {fruit.name}</p>
+                    <p>Price: ${fruit.price}</p>
+                    <p>Description: {fruit.description}</p>
+                    <p>Type: {fruit.type}</p>
+                </div>
+
+            </div>
+        </div>
+    </>
+}
+
+export default Detail

src/components/Filter.jsx

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+
+function Filter({onChangeFilter}) {
+    return <>
+        <div className="item-filter-container">
+            <p>Filter by:</p>
+            <select className="item-filter" onChange={onChangeFilter}>
+                <option value="all">All</option>
+                <option value="vegetable">Vegetables</option>
+                <option value="fruit">Fruit</option>
+                <option value="berry">Berries</option>
+            </select>
+        </div>
+    </>
+}
+
+export default Filter

src/components/Sorter.jsx

@@ -0,0 +1,15 @@
+/* eslint-disable react/prop-types */
+
+function Sorter({onChangeSort}) {
+    return <>
+        <div className="item-sort-container">
+            <p>Sort by:</p>
+            <select className="item-sort" onChange={onChangeSort}>
+                <option value="alpha">Alphabetical</option>
+                <option value="price-asc">Price low to high</option>
+                <option value="price-desc">Price high to low</option>
+            </select>
+        </div>
+    </>
+}
+export default Sorter

src/components/Store.jsx

@@ -0,0 +1,21 @@
+/* eslint-disable react/prop-types */
+
+function Store({ fruits, addToCart, showDetails }) {
+
+    return (
+      <>
+        {fruits.map((fruit, index) => (
+          <li key={index}>
+            <img
+              className="store--item-icon "
+              src={`./assets/icons/${fruit.id}.svg`}
+              onClick={() => { showDetails(fruit) }}
+            ></img>
+            <button onClick={() => addToCart(fruit.id)}>Add To Cart</button>
+          </li>
+        ))}
+      </>
+    )
+  }
+
+  export default Store

src/styles/modal.css

@@ -0,0 +1,38 @@
+.modal {
+    display: block;
+    position: fixed;
+    /* Stay in place */
+    z-index: 1;
+    /* Sit on top */
+    left: 25%;
+    top: 50%;
+    width: 50%;
+    height: fit-content;
+    overflow: auto;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 1% auto;
+    /* 1% from the top and centered */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 100%;
+    /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button */
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}