diff --git a/src/App.jsx b/src/App.jsx
index 03e658b..0d773d7 100644
--- a/src/App.jsx
+++ b/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:
<>
-
-
- Your Cart
-
-
-
-
Total
-
-
- £0.00
-
-
-
+
+
+ Filter:
+
+ Select Type
+ Vegetable
+ Fruit
+
+
+ );
+}
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 (
+
+ );
+}
\ No newline at end of file
diff --git a/src/Header.jsx b/src/Header.jsx
new file mode 100644
index 0000000..2c61765
--- /dev/null
+++ b/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:
+
+ Greengrocers
+
+ {filteredItems.map((item, index) => (
+
+
+
+
{
+ addToCart(item);
+ }}
+ >
+ Add to cart
+
+
+ ))}
+
+
+ );
+}
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 (
+
+ Your Cart
+
+
+ {cart.map((cartItem, index) => (
+
+ {cartItem.name}
+ {
+ decreaseQuantity(cartItem, index);
+ }}
+ >
+ -
+
+ {cartItem.quantity}
+ {
+ increaseQuantity(cartItem);
+ }}
+ >
+ +
+
+
+ ))}
+
+
+
+
Total
+
+
+ {total}
+
+
+ );
+}
diff --git a/src/Sort.jsx b/src/Sort.jsx
new file mode 100644
index 0000000..86f4774
--- /dev/null
+++ b/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 (
+
+ Sort By:
+
+ Select Type
+ Alphabet
+ Price
+
+
+ );
+}
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"
},
+
+ ))}
+