Olaoluwa Oyebode_Pull Request

src/App.jsx

@@ -1,31 +1,95 @@
-import './styles/reset.css'
-import './styles/index.css'
-
-import initialStoreItems from './store-items'
+import React, { useState } from "react";
+import "./styles/reset.css";
+import "./styles/index.css";
+import initialStoreItems from "./store-items";
+import Header from "./Header.jsx";
+import CartContainer from "./CartContainer.jsx";
+import Cart from "./Cart.jsx";
+import Filter from "./Filter.jsx";
+import Sort from "./Sort.jsx";
+import Detail from "./Detail.jsx";
+import ItemList from "./ItemList.jsx";
 
 export default function App() {
+  const [storeItems, setStoreItems] = useState(initialStoreItems);
+  const [cartItems, setCartItems] = useState([]);
+  const [totalPrice, setTotalPrice] = useState(0);
+  const [filter, setFilter] = useState("");
+  const [sort, setSort] = useState("");
+  const [selectedItem, setSelectedItem] = useState(null);
+
+  const addToCart = (item) => {
+    const existingItem = cartItems.find((cartItem) => cartItem.id === item.id);
+    if (existingItem) {
+      setCartItems(
+        cartItems.map((cartItem) =>
+          cartItem.id === item.id
+            ? { ...cartItem, quantity: cartItem.quantity + 1 }
+            : cartItem
+        )
+      );
+    } else {
+      setCartItems([...cartItems, { ...item, quantity: 1 }]);
+    }
+    setTotalPrice(totalPrice + item.price);
+  };
+
+  const removeFromCart = (item) => {
+    const existingItem = cartItems.find((cartItem) => cartItem.id === item.id);
+    if (existingItem.quantity === 1) {
+      setCartItems(cartItems.filter((cartItem) => cartItem.id !== item.id));
+    } else {
+      setCartItems(
+        cartItems.map((cartItem) =>
+          cartItem.id === item.id
+            ? { ...cartItem, quantity: cartItem.quantity - 1 }
+            : cartItem
+        )
+      );
+    }
+    setTotalPrice(totalPrice - item.price);
+  };
+
+  const filterItems = (items) => {
+    if (filter === "") return items;
+    return items.filter((item) => item.type === filter);
+  };
+
+  const sortItems = (items) => {
+    if (sort === "price") {
+      return items.sort((a, b) => a.price - b.price);
+    }
+    if (sort === "alphabetical") {
+      return items.sort((a, b) => a.name.localeCompare(b.name));
+    }
+    return items;
+  };
+
+  const handleItemClick = (item) => {
+    setSelectedItem(item.id === selectedItem?.id ? null : item);
+  };
+
+  const filteredAndSortedItems = sortItems(filterItems([...storeItems]));
+
   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>
+      <Header />
+      <Filter setFilter={setFilter} />
+      <Sort setSort={setSort} />
+      <ItemList
+        items={filteredAndSortedItems}
+        addToCart={addToCart}
+        onItemClick={handleItemClick}
+      />
+      {selectedItem && <Detail item={selectedItem} />}
+      <CartContainer>
+        <Cart
+          items={cartItems}
+          removeFromCart={removeFromCart}
+          addToCart={addToCart}
+          totalPrice={totalPrice}
+        />
+      </CartContainer>
       <div>
         Icons made by
         <a
@@ -40,5 +104,5 @@ export default function App() {
         </a>
       </div>
     </>
-  )
+  );
 }

src/Cart.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import CartItemList from "./CartItemList";
+import Total from "./Total";
+
+export default function Cart({ items, removeFromCart, addToCart, totalPrice }) {
+  return (
+    <div>
+      <h2>Your Cart</h2>
+      <div className="cart--item-list-container">
+        <CartItemList
+          items={items}
+          removeFromCart={removeFromCart}
+          addToCart={addToCart}
+        />
+      </div>
+      <Total totalPrice={totalPrice} />
+    </div>
+  );
+}

src/CartContainer.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function CartContainer({ children }) {
+  return <main id="cart">{children}</main>;
+}

src/CartItem.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export default function CartItem(props) {
+  return (
+    <li>
+      <img
+        className="cart--item-icon"
+        src={props.item.image}
+        alt={props.item.name}
+      />
+      <p>{props.item.name}</p>
+      <button
+        className="quantity-btn remove-btn center"
+        onClick={() => props.removeFromCart(props.item)}
+      >
+        -
+      </button>
+      <span className="quantity-text center">{props.item.quantity}</span>
+      <button
+        className="quantity-btn add-btn center"
+        onClick={() => props.addToCart(props.item)}
+      >
+        +
+      </button>
+    </li>
+  );
+}

src/CartItemList.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import CartItem from "./CartItem";
+
+export default function CartItemList({ items, removeFromCart, addToCart }) {
+  return (
+    <ul className="item-list cart--item-list">
+      {items.map((item) => (
+        <CartItem
+          key={item.id}
+          item={item}
+          removeFromCart={removeFromCart}
+          addToCart={addToCart}
+        />
+      ))}
+    </ul>
+  );
+}

src/Detail.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default function Detail(props) {
+  return (
+    <div className="item-detail">
+      <h2>{props.item.name}</h2>
+      <img src={props.item.image} alt={props.item.name} />
+      <p>Type: {props.item.type}</p>
+      <p>Price: £{props.item.price.toFixed(2)}</p>
+      <p>Description: {props.item.description}</p>
+    </div>
+  );
+}

src/Filter.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function Filter(props) {
+  return (
+    <div className="filter">
+      <button onClick={() => props.setFilter("")}>All</button>
+      <button onClick={() => props.setFilter("vegetable")}>Vegetables</button>
+      <button onClick={() => props.setFilter("fruit")}>Fruits</button>
+    </div>
+  );
+}

src/Header.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function Header() {
+  return (
+    <header id="store">
+      <h1>Greengrocers</h1>
+      <ul className="item-list store--item-list"></ul>
+    </header>
+  );
+}

src/Item.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export default function Item(props) {
+  return (
+    <li onClick={() => props.onItemClick(props.item)}>
+      <div className="store--item-icon">
+        <img src={props.item.image} alt={props.item.name} />
+      </div>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          props.addToCart(props.item);
+        }}
+      >
+        Add to cart
+      </button>
+    </li>
+  );
+}

src/ItemList.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Item from "./Item";
+
+export default function ItemList(props) {
+  return (
+    <ul className="item-list store--item-list">
+      {props.items.map((item) => (
+        <Item
+          key={item.id}
+          item={item}
+          addToCart={props.addToCart}
+          onItemClick={props.onItemClick}
+        />
+      ))}
+    </ul>
+  );
+}

src/Sort.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function Sort(props) {
+  return (
+    <div className="sort">
+      <button onClick={() => props.setSort("price")}>Sort by Price</button>
+      <button onClick={() => props.setSort("alphabetical")}>
+        Sort Alphabetically
+      </button>
+    </div>
+  );
+}

src/Total.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export default function Total({ totalPrice }) {
+  return (
+    <div className="total-section">
+      <div>
+        <h3>Total</h3>
+      </div>
+      <div>
+        <span className="total-number">£{totalPrice.toFixed(2)}</span>
+      </div>
+    </div>
+  );
+}