James C PR

src/App.jsx

@@ -1,28 +1,128 @@
-import './styles/reset.css'
-import './styles/index.css'
+import "./styles/reset.css";
+import "./styles/index.css";
 
-import initialStoreItems from './store-items'
+import { useState } from "react";
+import initialStoreItems from "./store-items";
+import StoreItem from "./StoreItem";
+import BasketItem from "./BasketItem";
 
 export default function App() {
+  const [storeItems, setStoreItems] = useState(initialStoreItems);
+  const [basketItems, setBasketItems] = useState([]);
+  const [sort, setSort] = useState(false);
+
+  const basketTotal = basketItems
+    .reduce((total, item) => total + item.price * item.quantity, 0)
+    .toFixed(2);
+
+  const addItem = (newItem) => {
+    const inArray = basketItems.some((item) => item.id === newItem.id);
+
+    if (inArray) {
+      const newArray = basketItems.map((item) =>
+        item.id === newItem.id ? { ...item, quantity: item.quantity + 1 } : item
+      );
+      setBasketItems(newArray);
+    } else {
+      const itemToAdd = { ...newItem, quantity: 1 };
+      setBasketItems([...basketItems, itemToAdd]);
+    }
+  };
+
+  const handleAdd = (currentItem) => {
+    const newArray = basketItems.map((item) =>
+      item.id === currentItem.id
+        ? { ...item, quantity: item.quantity + 1 }
+        : item
+    );
+    setBasketItems(newArray);
+  };
+
+  const handleMinus = (currentItem) => {
+    const newArray = basketItems.map((item) =>
+      item.id === currentItem.id
+        ? { ...item, quantity: item.quantity - 1 }
+        : item
+    );
+    const filtered = newArray.filter((item) => item.quantity > 0);
+    setBasketItems(filtered);
+  };
+
+  const filterVeg = () => {
+    if (storeItems.some((item) => item.type === "fruit")) {
+      const newArray = [...storeItems].filter(
+        (item) => item.type === "vegetable"
+      );
+      setStoreItems(newArray);
+    } else {
+      setStoreItems(initialStoreItems);
+    }
+  };
+
+  const filterFruit = () => {
+    if (storeItems.some((item) => item.type === "vegetable")) {
+      const newArray = [...storeItems].filter((item) => item.type === "fruit");
+      setStoreItems(newArray);
+    } else {
+      setStoreItems(initialStoreItems);
+    }
+  };
+
+  const sortAlphabetical = () => {
+    if (sort === false) {
+      const newArray = [...storeItems];
+      newArray.sort((a, b) => {
+        if (a.name < b.name) {
+          return -1;
+        }
+        if (a.name > b.name) {
+          return 1;
+        }
+        return 0;
+      });
+      setStoreItems(newArray);
+      setSort(true);
+    } else {
+      setStoreItems(initialStoreItems);
+      setSort(false);
+    }
+  };
+
   return (
     <>
       <header id="store">
         <h1>Greengrocers</h1>
+        <button onClick={() => filterVeg()}>Vegetables only</button>
+        <br></br>
+        <button onClick={() => filterFruit()}>Fruits only</button>
+        <br></br>
+        <button onClick={() => sortAlphabetical()}>Sort Alphabetically</button>
         <ul className="item-list store--item-list">
+          {storeItems.map((item) => (
+            <StoreItem key={item.id} item={item} addItem={addItem} />
+          ))}
         </ul>
       </header>
       <main id="cart">
         <h2>Your Cart</h2>
         <div className="cart--item-list-container">
           <ul className="item-list cart--item-list">
+            {basketItems.map((item) => (
+              <BasketItem
+                key={item.id}
+                item={item}
+                handleAdd={handleAdd}
+                handleMinus={handleMinus}
+              />
+            ))}
           </ul>
         </div>
         <div className="total-section">
           <div>
             <h3>Total</h3>
           </div>
           <div>
-            <span className="total-number">£0.00</span>
+            <span className="total-number">£{basketTotal}</span>
           </div>
         </div>
       </main>
@@ -40,5 +140,5 @@ export default function App() {
         </a>
       </div>
     </>
-  )
+  );
 }

src/BasketItem.jsx

@@ -0,0 +1,27 @@
+const BasketItem = ({ item, handleAdd, handleMinus }) => {
+  return (
+    <li>
+      <img
+        className="cart--item-icon"
+        src={`./assets/icons/${item.id}.svg`}
+        alt={item.name}
+      />
+      <p>{item.name}</p>
+      <button
+        className="quantity-btn remove-btn center"
+        onClick={() => handleMinus(item)}
+      >
+        -
+      </button>
+      <span className="quantity-text center">{item.quantity}</span>
+      <button
+        className="quantity-btn add-btn center"
+        onClick={() => handleAdd(item)}
+      >
+        +
+      </button>
+    </li>
+  );
+};
+
+export default BasketItem;

src/StoreItem.jsx

@@ -0,0 +1,12 @@
+const StoreItem = ({ item, addItem }) => {
+  return (
+    <li>
+      <div className="store--item-icon">
+        <img src={`./assets/icons/${item.id}.svg`} alt={item.name} />
+      </div>
+      <button onClick={() => addItem(item)}>Add to cart</button>
+    </li>
+  );
+};
+
+export default StoreItem;

src/plan.txt

@@ -0,0 +1,27 @@
+Greengrocers
+
+
+state:
+store initial data (storeItems)
+
+basket in state; initially empty but to be added: 
+{
+data: {object from storeItems},
+quantity: X,
+}
+
+total, made up of sum of price of basket item(s)
+
+
+Display section:
+array.map over initial data and render each item ->
+  pass relevant info as props (image, price, name) use ID as key
+
+create separate function for adding item to basket, 
+pass to item element also as prop
+
+
+basket section:
+array.map over items in basket from useState, render each in basket
+define functions for decrement/increment item
+display total from state