From 31fb50c66d4d6ff7c6b5853aaed6f92b098a3cc2 Mon Sep 17 00:00:00 2001
From: Zainab Choudhry <zainabchoudhry05@gmail.com>
Date: Wed, 26 Jun 2024 17:57:31 +0100
Subject: [PATCH 1/3] Completed core + extension 1

---
 src/App.jsx        | 63 ++++++++++++++++-----------------------
 src/Filter.jsx     | 25 ++++++++++++++++
 src/Footer.jsx     | 17 +++++++++++
 src/Header.jsx     | 58 ++++++++++++++++++++++++++++++++++++
 src/MainCart.jsx   | 74 ++++++++++++++++++++++++++++++++++++++++++++++
 src/Sort.jsx       | 25 ++++++++++++++++
 src/store-items.js | 10 +++----
 7 files changed, 230 insertions(+), 42 deletions(-)
 create mode 100644 src/Filter.jsx
 create mode 100644 src/Footer.jsx
 create mode 100644 src/Header.jsx
 create mode 100644 src/MainCart.jsx
 create mode 100644 src/Sort.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 03e658b..0e18fa2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,44 +1,33 @@
-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);
+
+  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}
+      />
+      <MainCart cart={cart} setCart={setCart} />
+      <Footer />
     </>
-  )
+  );
 }
diff --git a/src/Filter.jsx b/src/Filter.jsx
new file mode 100644
index 0000000..79f5389
--- /dev/null
+++ b/src/Filter.jsx
@@ -0,0 +1,25 @@
+export default function Filter({ storeItems, setFilteredItems }) {
+  //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>
+  );
+}
diff --git a/src/Footer.jsx b/src/Footer.jsx
new file mode 100644
index 0000000..14371c0
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file
diff --git a/src/Header.jsx b/src/Header.jsx
new file mode 100644
index 0000000..18802ec
--- /dev/null
+++ b/src/Header.jsx
@@ -0,0 +1,58 @@
+import Filter from "./Filter";
+import Sort from "./Sort";
+
+export default function Header({ storeItems, cart, setCart, setFilteredItems, filteredItems }) {
+    //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}
+      />
+      <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>
+  );
+}
diff --git a/src/MainCart.jsx b/src/MainCart.jsx
new file mode 100644
index 0000000..57a82ba
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/Sort.jsx b/src/Sort.jsx
new file mode 100644
index 0000000..df00994
--- /dev/null
+++ b/src/Sort.jsx
@@ -0,0 +1,25 @@
+export default function Sort({ storeItems, filteredItems, setFilteredItems }) {
+  //Adding sort function:
+  function sortStoreItems(event) {
+    if (event.target.value === "alphabet") {
+      filteredItems.sort((a, b) => a.name.localeCompare(b.name));
+      setFilteredItems([...filteredItems]);
+    } else if (event.target.value === "price") {
+      filteredItems.sort((a, b) => a.price - b.price);
+      setFilteredItems([...filteredItems]);
+    } else {
+      console.log("no sortig needed");
+    }
+  }
+
+  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>
+  );
+}
diff --git a/src/store-items.js b/src/store-items.js
index 96dd2ea..d352eea 100644
--- a/src/store-items.js
+++ b/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"
   },

From 92dd50b50138021bcab749ddd2302aacc9bb76d3 Mon Sep 17 00:00:00 2001
From: Zainab Choudhry <zainabchoudhry05@gmail.com>
Date: Mon, 1 Jul 2024 13:59:05 +0100
Subject: [PATCH 2/3] Improved sort function

---
 src/App.jsx    |  4 ++++
 src/Filter.jsx |  6 +++++-
 src/Header.jsx |  4 +++-
 src/Sort.jsx   | 13 ++++++++-----
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 0e18fa2..0d773d7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,6 +13,8 @@ export default function App() {
   const [storeItems, setStoreItems] = useState(initialStoreItems);
   const [cart, setCart] = useState([]);
   const [filteredItems, setFilteredItems] = useState(storeItems);
+  const [sortItems, setSortItems] = useState("")
+
 
   console.log("updated cart", cart);
 
@@ -25,6 +27,8 @@ export default function App() {
         setCart={setCart}
         filteredItems={filteredItems}
         setFilteredItems={setFilteredItems}
+        sortItems={sortItems}
+        setSortItems={setSortItems}
       />
       <MainCart cart={cart} setCart={setCart} />
       <Footer />
diff --git a/src/Filter.jsx b/src/Filter.jsx
index 79f5389..b0f15ea 100644
--- a/src/Filter.jsx
+++ b/src/Filter.jsx
@@ -1,4 +1,8 @@
-export default function Filter({ storeItems, setFilteredItems }) {
+export default function Filter({
+  storeItems,
+  setFilteredItems,
+  filteredItems,
+}) {
   //function to filter items in store:
   function FilterStoreItems(event) {
     console.log("filter event", event.target.value);
diff --git a/src/Header.jsx b/src/Header.jsx
index 18802ec..2c61765 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -1,7 +1,7 @@
 import Filter from "./Filter";
 import Sort from "./Sort";
 
-export default function Header({ storeItems, cart, setCart, setFilteredItems, filteredItems }) {
+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);
@@ -36,6 +36,8 @@ export default function Header({ storeItems, cart, setCart, setFilteredItems, fi
         storeItems={storeItems}
         filteredItems={filteredItems}
         setFilteredItems={setFilteredItems}
+        sortItems= {sortItems}
+        setSortItems = {setSortItems}
       />
       <ul className="item-list store--item-list">
         {filteredItems.map((item, index) => (
diff --git a/src/Sort.jsx b/src/Sort.jsx
index df00994..86f4774 100644
--- a/src/Sort.jsx
+++ b/src/Sort.jsx
@@ -2,13 +2,16 @@ export default function Sort({ storeItems, filteredItems, setFilteredItems }) {
   //Adding sort function:
   function sortStoreItems(event) {
     if (event.target.value === "alphabet") {
-      filteredItems.sort((a, b) => a.name.localeCompare(b.name));
-      setFilteredItems([...filteredItems]);
+      const alphabetArray = [...filteredItems];
+      alphabetArray.sort((a, b) => a.name.localeCompare(b.name));
+      setFilteredItems(alphabetArray);
     } else if (event.target.value === "price") {
-      filteredItems.sort((a, b) => a.price - b.price);
-      setFilteredItems([...filteredItems]);
+      const priceArray = [...filteredItems];
+      priceArray.sort((a, b) => a.price - b.price);
+      setFilteredItems(priceArray);
     } else {
-      console.log("no sortig needed");
+      console.log("no sorting needed");
+      setFilteredItems(storeItems);
     }
   }
 

From e8fbc887dc8ef872ec6fe5e016051a21fdf7e591 Mon Sep 17 00:00:00 2001
From: Zainab Choudhry <zainabchoudhry05@gmail.com>
Date: Tue, 5 Nov 2024 16:42:12 +0000
Subject: [PATCH 3/3] Edited comments

---
 src/Filter.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Filter.jsx b/src/Filter.jsx
index b0f15ea..8ff9e88 100644
--- a/src/Filter.jsx
+++ b/src/Filter.jsx
@@ -3,7 +3,7 @@ export default function Filter({
   setFilteredItems,
   filteredItems,
 }) {
-  //function to filter items in store:
+  //Function to filter items in store:
   function FilterStoreItems(event) {
     console.log("filter event", event.target.value);