Merge pull request #39 from fac25/edit-basket

Edit basket
fac25 · Oct 27, 2022 · 7cd5ff6 · 7cd5ff6
2 parents bd1bac3 + e897fa2
commit 7cd5ff6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 73 deletions.
diff --git a/pages/basket.js b/pages/basket.js
@@ -5,78 +5,46 @@ import Link from "next/link";
 const Basket = () => {
   const [currentBasket, setCurrentBasket] = useState([]);
   const [totalCost, setTotalCost] = useState(0);
-  const [currentQuantities, setQuantities] = useState(new Array(7).fill(null));
 
   useEffect(() => {
-    setCurrentBasket(JSON.parse(localStorage.getItem("basket")));
+      setCurrentBasket(JSON.parse(localStorage.getItem("basket")));
 
-    let basketArray = JSON.parse(localStorage.getItem("basket"));
-    let total = basketArray.reduce((acc, current) => {
-      return current.price * current.quantity + acc;
-    }, 0);
-    setTotalCost(total);
-
-    basketArray.forEach((item) => {
-      //set state
-      setQuantities((previousQuantities) => {
-        console.log(item.id);
-        let nextQuantities = previousQuantities;
-        nextQuantities[item.id - 1] = item.quantity;
-        return nextQuantities;
-      });
-    });
+      let basketArray = JSON.parse(localStorage.getItem("basket"));
+      let total = basketArray.reduce((acc, current) => {
+        return current.price * current.quantity + acc;
+      }, 1000);
+      setTotalCost(total);
   }, []);
 
-  function incrementItem(event) {
-    event.preventDefault();
-    //get the product name and current quantity
-    let nameWithoutPlus = event.target.id.slice(4);
-    let indexOfItemNameFirstLetter = nameWithoutPlus.search(/[a-zA-Z]/);
-    let name = nameWithoutPlus.slice(
-      indexOfItemNameFirstLetter,
-      nameWithoutPlus.length - 1
-    );
-    let preUpdatedQuantity = nameWithoutPlus.slice(
-      0,
-      indexOfItemNameFirstLetter
-    );
-    let productId = nameWithoutPlus.slice(nameWithoutPlus.length - 1);
-
-    //update state
-    let copy = [...currentQuantities];
-    console.log(copy);
-    copy[productId - 1] = parseFloat(preUpdatedQuantity) + 1;
-    setQuantities(() => {
-      return copy;
-    });
-
-    // setQuantities((previousQuantities) => {
-    //   let nextQuantities = previousQuantities;
-    //   nextQuantities[productId - 1] = parseFloat(preUpdatedQuantity) + 1;
-    //   console.log(nextQuantities);
-    //   return nextQuantities;
-    // });
-
-    //update localstorage
-  }
 
-  function decrementItem(event) {
-    //get the product name and current quantity
-    let name = event.target.id.slice(5);
-    console.log(name);
-
-    //update state and localstorage
-  }
-
-  console.log(currentQuantities);
+  const handleQuantity = (e) => {
+    let checkBasket = currentBasket
+    if (e.target.id === "plus") {
+      checkBasket.map((item) => {
+        if (e.target.value === item.name) {
+          item.quantity = Number(item.quantity) + 1;
+           setCurrentBasket(checkBasket);
+        }
+      });
+    } else if (e.target.id === "minus") {
+      checkBasket.map((item) => {
+        if (Number(item.quantity) > 0) {
+          if (e.target.value === item.name) {
+            checkBasket.quantity = Number(item.quantity) - 1;
+             setCurrentBasket(checkBasket);
+          }
+        }
+      });
+    }
+  };
 
   return (
     <div>
       <h1>Your current basket</h1>
       <ul>
         {currentBasket.map((item, index) => {
           return (
-            <li key={index}>
+            <li key={index} onClick={handleQuantity}>
               <div>
                 <Image
                   src={"/images/" + item.image} // Route of the image file
@@ -86,23 +54,16 @@ const Basket = () => {
                 />
                 <p>{item.name}</p>
                 <p>Price: £{item.price}</p>
-                <p>
+                <div>
                   Quantity:{" "}
-                  <button
-                    id={"minus" + item.quantity + item.name + item.id}
-                    onClick={decrementItem}
-                  >
+                  <button id="minus" value={item.name}>
                     &#8722;
-                  </button>{" "}
-                  {currentQuantities[item.id - 1] /*item.quantity*/}{" "}
-                  <button
-                    type="button"
-                    id={"plus" + item.quantity + item.name + item.id}
-                    onClick={incrementItem}
-                  >
+                  </button>
+                  {item.quantity}
+                  <button id="plus" value={item.name}>
                     &#43;
                   </button>
-                </p>
+                </div>
                 <p>Cost: £{item.quantity * item.price}</p>
               </div>
             </li>

diff --git a/pages/products/[id].js b/pages/products/[id].js
@@ -38,7 +38,7 @@ export default function Product({ product }) {
 
     //if product is already in basket update existing entry else push
     //if localBasket includes current product, rewrite that entry, don't add a new one
-    console.log(localBasket);
+
     if (localBasket.length === 0) {
       localBasket.push({
         id: product.id,