Zainab's PR

src/App.jsx

@@ -1,44 +1,37 @@
-import './styles/reset.css'
-import './styles/index.css'
+import "./styles/reset.css";
+import "./styles/index.css";
+import { useState } from "react";
+import initialStoreItems from "./store-items";
+import Header from "./Header";
+import MainCart from "./MainCart";
+import Footer from "./Footer";
 
-import initialStoreItems from './store-items'
+console.log("Initial store item", initialStoreItems);
 
 export default function App() {
+  //Items in state:
+  const [storeItems, setStoreItems] = useState(initialStoreItems);
+  const [cart, setCart] = useState([]);
+  const [filteredItems, setFilteredItems] = useState(storeItems);
+  const [sortItems, setSortItems] = useState("")
+
+
+  console.log("updated cart", cart);
+
   return (
+    //Breaking down components:
     <>
-      <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
+        storeItems={storeItems}
+        cart={cart}
+        setCart={setCart}
+        filteredItems={filteredItems}
+        setFilteredItems={setFilteredItems}
+        sortItems={sortItems}
+        setSortItems={setSortItems}
+      />
+      <MainCart cart={cart} setCart={setCart} />
+      <Footer />
     </>
-  )
+  );
 }

src/Filter.jsx

@@ -0,0 +1,29 @@
+export default function Filter({
+  storeItems,
+  setFilteredItems,
+  filteredItems,
+}) {
+  //Function to filter items in store:
+  function FilterStoreItems(event) {
+    console.log("filter event", event.target.value);
+
+    if (event.target.value === "vegetable" || event.target.value === "fruit") {
+      setFilteredItems(
+        storeItems.filter((item) => item.type === event.target.value)
+      );
+    } else {
+      setFilteredItems(storeItems);
+    }
+  }
+
+  return (
+    <div>
+      <label htmlFor="filter">Filter: </label>
+      <select name="filter" id="filter" onChange={FilterStoreItems}>
+        <option value="default">Select Type</option>
+        <option value="vegetable">Vegetable</option>
+        <option value="fruit">Fruit</option>
+      </select>
+    </div>
+  );
+}

src/Footer.jsx

@@ -0,0 +1,17 @@
+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,60 @@
+import Filter from "./Filter";
+import Sort from "./Sort";
+
+export default function Header({ storeItems, cart, setCart, setFilteredItems, filteredItems, sortItems, setSortItems}) {
+    //function which updates cart whenever a user clicks "Add to Basket":
+  function addToCart(item) {
+    console.log("selected item", item);
+
+    //if item is already in cart, just update the items quantity. Else add item to cart:
+    const itemInCart = cart.find((cartItem) => cartItem.id === item.id);
+
+    if (itemInCart) {
+      itemInCart.quantity = itemInCart.quantity + 1;
+      setCart([...cart]);
+    } else {
+      setCart([
+        ...cart,
+        {
+          id: item.id,
+          name: item.name,
+          price: item.price,
+          quantity: 1,
+          description: item.description,
+          type: item.type,
+        },
+      ]);
+    }
+  }
+
+  return (
+    //Displaying store items list:
+    <header id="store">
+      <h1>Greengrocers</h1>
+      <Filter storeItems={storeItems} setFilteredItems={setFilteredItems} />
+      <Sort
+        storeItems={storeItems}
+        filteredItems={filteredItems}
+        setFilteredItems={setFilteredItems}
+        sortItems= {sortItems}
+        setSortItems = {setSortItems}
+      />
+      <ul className="item-list store--item-list">
+        {filteredItems.map((item, index) => (
+          <li key={index}>
+            <div className="store--item-icon">
+              <img src={"assets/icons/" + item.id + ".svg"} alt={item.name} />
+            </div>
+            <button
+              onClick={() => {
+                addToCart(item);
+              }}
+            >
+              Add to cart
+            </button>
+          </li>
+        ))}
+      </ul>
+    </header>
+  );
+}

src/MainCart.jsx

@@ -0,0 +1,74 @@
+export default function MainCart({ cart, setCart }) {
+  //function to update total everytime an item is added to cart:
+  let total = cart
+    .reduce((total, cartItem) => {
+      return (total += cartItem.quantity * cartItem.price);
+    }, 0)
+    .toFixed(2);
+
+  console.log("total", total);
+
+  //function to decrease items quantity/remove it from cart if quantity reaches 0:
+  function decreaseQuantity(cartItem, index) {
+    if (cartItem.quantity === 1) {
+      cart.splice(index, 1);
+      console.log("spliced cart", cart);
+      setCart([...cart]);
+    } else {
+      cartItem.quantity--;
+      setCart([...cart]);
+    }
+  }
+
+  //funciton to increase quantity per click:
+  function increaseQuantity(cartItem) {
+    console.log("You clicked the add button on", cartItem);
+    cartItem.quantity++;
+    setCart([...cart]);
+  }
+
+  return (
+    <main id="cart">
+      <h2>Your Cart</h2>
+      <div className="cart--item-list-container">
+        <ul className="item-list cart--item-list">
+          {cart.map((cartItem, index) => (
+            <li key={index}>
+              <img
+                className="cart--item-icon"
+                src={"assets/icons/" + cartItem.id + ".svg"}
+                alt={cartItem.name}
+              />
+              <p>{cartItem.name}</p>
+              <button
+                className="quantity-btn remove-btn center"
+                onClick={() => {
+                  decreaseQuantity(cartItem, index);
+                }}
+              >
+                -
+              </button>
+              <span className="quantity-text center">{cartItem.quantity}</span>
+              <button
+                className="quantity-btn add-btn center"
+                onClick={() => {
+                  increaseQuantity(cartItem);
+                }}
+              >
+                +
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="total-section">
+        <div>
+          <h3>Total</h3>
+        </div>
+        <div>
+          <span className="total-number">{total}</span>
+        </div>
+      </div>
+    </main>
+  );
+}

src/Sort.jsx

@@ -0,0 +1,28 @@
+export default function Sort({ storeItems, filteredItems, setFilteredItems }) {
+  //Adding sort function:
+  function sortStoreItems(event) {
+    if (event.target.value === "alphabet") {
+      const alphabetArray = [...filteredItems];
+      alphabetArray.sort((a, b) => a.name.localeCompare(b.name));
+      setFilteredItems(alphabetArray);
+    } else if (event.target.value === "price") {
+      const priceArray = [...filteredItems];
+      priceArray.sort((a, b) => a.price - b.price);
+      setFilteredItems(priceArray);
+    } else {
+      console.log("no sorting needed");
+      setFilteredItems(storeItems);
+    }
+  }
+
+  return (
+    <div>
+      <label htmlFor="sort">Sort By: </label>
+      <select name="sort" id="sort" onChange={sortStoreItems}>
+        <option value="default">Select Type</option>
+        <option value="alphabet">Alphabet</option>
+        <option value="price">Price</option>
+      </select>
+    </div>
+  );
+}

src/store-items.js

@@ -10,7 +10,7 @@ const storeItems =  [
   {
     id: "002-carrot",
     name: "carrot",
-    price: 0.35,
+    price: 0.36,
     description: "The carrot is a root vegetable, typically orange in color, though heirloom variants including purple, black, red, white, and yellow cultivars exist, all of which are domesticated forms of the wild carrot, Daucus carota, native to Europe and Southwestern Asia.",
     type: "vegetable"
   },
@@ -24,21 +24,21 @@ const storeItems =  [
   {
     id: "004-apricot",
     name: "apricot",
-    price: 0.35,
+    price: 0.40,
     description: "An apricot is a fruit, or the tree that bears the fruit, of several species in the genus Prunus.",
     type: "fruit"
   },
   {
     id: "005-avocado",
     name: "avocado",
-    price: 0.35,
+    price: 1.35,
     description: "The avocado, alligator pear or avocado pear (Persea americana) is a medium-sized, evergreen tree in the laurel family (Lauraceae).",
     type: "fruit"
   },
   {
     id: "006-bananas",
     name: "bananas",
-    price: 0.35,
+    price: 0.50,
     description: "A banana is an elongated, edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa.",
     type: "fruit"
   },
@@ -52,7 +52,7 @@ const storeItems =  [
   {
     id: "008-berry",
     name: "berry",
-    price: 0.35,
+    price: 0.25,
     description: "A berry is a small, pulpy, and often edible fruit. Typically, berries are juicy, rounded, brightly colored, sweet, sour or tart, and do not have a stone or pit, although many pips or seeds may be present.",
     type: "fruit"
   },