boolean-uk · gent009 · Jun 27, 2024
diff --git a/componen-hierarchy.png b/componen-hierarchy.png
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/src/App.jsx b/src/App.jsx
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import Header from "./Header";
+import Store from "./Store";
+import Cart from "./Cart";
+import TotalSection from "./TotalSection";
+import Filter from "./Filter";
+import Sort from "./Sort";
+import storeItems from "../store-items";
+import "../styles/index.css";
+
+const App = () => {
+  const [items, setItems] = useState(storeItems);
+  const [cart, setCart] = useState([]);
+  const [filter, setFilter] = useState("all");
+  const [sort, setSort] = useState("alphabetical");
+  const [selectedItem, setSelectedItem] = useState(null);
+
+  const filteredItems = items.filter(
+    (item) => filter === "all" || item.type === filter
+  );
+
+  const sortedItems = filteredItems.sort((a, b) => {
+    if (sort === "alphabetical") {
+      return a.name.localeCompare(b.name);
+    } else if (sort === "price") {
+      return a.price - b.price;
+    }
+    return 0;
+  });
+
+  return (
+    <div className="app-container">
+      <Header />
+      <div className="filter-sort-container">
+        <Filter filter={filter} setFilter={setFilter} />
+        <Sort sort={sort} setSort={setSort} />
+      </div>
+      <div className="main-content">
+        <Store
+          items={sortedItems}
+          cart={cart}
+          setCart={setCart}
+          setSelectedItem={setSelectedItem}
+        />
+        <Cart cart={cart} setCart={setCart} />
+        <TotalSection cart={cart} />
+      </div>
+      {selectedItem && (
+        <ItemDetail item={selectedItem} onClose={() => setSelectedItem(null)} />
+      )}
+    </div>
+  );
+};
+
+export default App;
diff --git a/src/components/Cart.jsx b/src/components/Cart.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+import CartItem from "./CartItem";
+
+const Cart = ({ cart, setCart }) => (
+  <div id="cart">
+    <h2>Your Cart</h2>
+    <div className="cart--item-list-container">
+      <ul className="cart--item-list">
+        {cart.map((item) => (
+          <CartItem key={item.id} item={item} cart={cart} setCart={setCart} />
+        ))}
+      </ul>
+    </div>
+  </div>
+);
+
+Cart.propTypes = {
+  cart: PropTypes.arrayOf(PropTypes.object).isRequired,
+  setCart: PropTypes.func.isRequired,
+};
+
+export default Cart;
diff --git a/src/components/CartItem.jsx b/src/components/CartItem.jsx
@@ -0,0 +1,69 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const CartItem = ({ item, cart, setCart }) => {
+  const removeFromCart = () => {
+    const updatedCart = [...cart];
+    const itemIndex = updatedCart.findIndex(
+      (cartItem) => cartItem.id === item.id
+    );
+
+    if (itemIndex > -1) {
+      updatedCart[itemIndex].quantity -= 1;
+
+      if (updatedCart[itemIndex].quantity === 0) {
+        updatedCart.splice(itemIndex, 1);
+      }
+    }
+
+    setCart(updatedCart);
+  };
+
+  const addToCart = () => {
+    const updatedCart = [...cart];
+    const itemIndex = updatedCart.findIndex(
+      (cartItem) => cartItem.id === item.id
+    );
+
+    if (itemIndex > -1) {
+      updatedCart[itemIndex].quantity += 1;
+    }
+
+    setCart(updatedCart);
+  };
+
+  return (
+    <li>
+      <img
+        className="cart--item-icon"
+        src={`assets/icons/${item.icon}.svg`}
+        alt={item.name}
+      />
+      <p>{item.name}</p>
+      <button
+        className="quantity-btn remove-btn center"
+        onClick={removeFromCart}
+      >
+        -
+      </button>
+      <span className="quantity-text center">{item.quantity}</span>
+      <button className="quantity-btn add-btn center" onClick={addToCart}>
+        +
+      </button>
+    </li>
+  );
+};
+
+CartItem.propTypes = {
+  item: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    quantity: PropTypes.number.isRequired,
+  }).isRequired,
+  cart: PropTypes.arrayOf(PropTypes.object).isRequired,
+  setCart: PropTypes.func.isRequired,
+};
+
+export default CartItem;
diff --git a/src/components/Filter.jsx b/src/components/Filter.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const Filter = ({ filter, setFilter }) => {
+  const handleFilterChange = (event) => {
+    setFilter(event.target.value);
+  };
+
+  return (
+    <div>
+      <label>Filter by type: </label>
+      <select value={filter} onChange={handleFilterChange}>
+        <option value="all">All</option>
+        <option value="vegetable">Vegetables</option>
+        <option value="fruit">Fruits</option>
+      </select>
+    </div>
+  );
+};
+
+Filter.propTypes = {
+  filter: PropTypes.string.isRequired,
+  setFilter: PropTypes.func.isRequired,
+};
+
+export default Filter;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+const Header = () => (
+  <header>
+    <h1>Greengrocers</h1>
+  </header>
+);
+
+export default Header;
diff --git a/src/components/ItemDetail.jsx b/src/components/ItemDetail.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const ItemDetail = ({ item, onClose }) => {
+  return (
+    <div className="item-detail">
+      <h2>{item.name}</h2>
+      <p>Type: {item.type}</p>
+      <p>Price: £{item.price.toFixed(2)}</p>
+      <button onClick={onClose}>Close</button>
+    </div>
+  );
+};
+
+ItemDetail.propTypes = {
+  item: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    type: PropTypes.string.isRequired,
+  }).isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default ItemDetail;
diff --git a/src/components/Sort.jsx b/src/components/Sort.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const Sort = ({ sort, setSort }) => {
+  const handleSortChange = (event) => {
+    setSort(event.target.value);
+  };
+
+  return (
+    <div>
+      <label>Sort by: </label>
+      <select value={sort} onChange={handleSortChange}>
+        <option value="alphabetical">Alphabetical</option>
+        <option value="price">Price</option>
+      </select>
+    </div>
+  );
+};
+
+Sort.propTypes = {
+  sort: PropTypes.string.isRequired,
+  setSort: PropTypes.func.isRequired,
+};
+
+export default Sort;
diff --git a/src/components/Store.jsx b/src/components/Store.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+import StoreItem from "./StoreItem";
+
+const Store = ({ items, cart, setCart, setSelectedItem }) => (
+  <ul className="store--item-list">
+    {items.map((item) => (
+      <StoreItem
+        key={item.id}
+        item={item}
+        cart={cart}
+        setCart={setCart}
+        setSelectedItem={setSelectedItem}
+      />
+    ))}
+  </ul>
+);
+
+Store.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  cart: PropTypes.arrayOf(PropTypes.object).isRequired,
+  setCart: PropTypes.func.isRequired,
+  setSelectedItem: PropTypes.func.isRequired,
+};
+
+export default Store;