basic features

shopping-cart/src/components/productCollection.module.css

@@ -8,7 +8,7 @@
 .card {
   display: flex;
   flex-direction: column;
-  max-width: calc(100% / 4);
+  max-width: calc(100% / 5);
   justify-content: end;
   /*flex: 1;*/
   padding: 1.5rem;

shopping-cart/src/components/productDetails.jsx

@@ -1,47 +1,62 @@
-import { useParams, useOutletContext } from "react-router-dom";
+import { useParams, useOutletContext, Link } from "react-router-dom";
 import Products from "./products";
-import PropTypes from "prop-types";
 
-import styles from "./productCollection.module.css";
+import styles from "./productDetails.module.css";
 
 export default function ProductDetails() {
-  const [cart, setCart, items, setItems] = useOutletContext();
+  const [cart, setCart, items] = useOutletContext();
 
   const { id } = useParams();
-  const item = items.filter((item) => item.id === id)[0];
+
+  if (!items) return <HandleInvalidItem />;
+  const item = items.find((item) => item.id === id);
 
   return (
     <div className={styles.container}>
       {item ? (
         <div className={styles.card}>
+          <Link to="/store">Back</Link>
           <Products item={item} cart={cart} setCart={setCart} />
           <button
             onClick={() => {
-              addToCart(item, cart, setCart);
+              cart[item.id]
+                ? removeFromCart(item, cart, setCart)
+                : addToCart(item, cart, setCart);
             }}
           >
-            Add to Cart
+            {cart[item.id] ? "Remove from Cart" : "Add to Cart"}
           </button>
+          <Link to="/bag">View Cart</Link>
         </div>
-      ) : null}
+      ) : (
+        <HandleInvalidItem />
+      )}
+    </div>
+  );
+}
+
+function HandleInvalidItem() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h1>Product Does Not Exist!</h1>
+        <Link to="/store">Return to Store</Link>
+      </div>
     </div>
   );
 }
 
 function addToCart(item, cart, setCart) {
   let obj = { ...cart };
-  if (obj[item.id]) {
-    obj[item.id].qty += 1;
-  } else {
-    obj[item.id] = item;
-    obj[item.id].qty = 1;
-  }
-
+  obj[item.id] = item;
+  obj[item.id].qty = 1;
   setCart(obj);
 }
 
-ProductDetails.propTypes = {
-  item: PropTypes.object,
-  cart: PropTypes.object,
-  setCart: PropTypes.func,
-};
+function removeFromCart(item, cart, setCart) {
+  if (cart[item.id]) {
+    let obj = { ...cart };
+    delete obj[item.id];
+    setCart(obj);
+  }
+}

shopping-cart/src/components/productDetails.module.css

@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100% / 5);
+  justify-content: end;
+  /*flex: 1;*/
+  padding: 1.5rem;
+  margin: 1.5rem;
+}

shopping-cart/src/components/products.jsx

@@ -2,13 +2,15 @@ import PropTypes from "prop-types";
 
 import styles from "./products.module.css";
 
+import { currencyFormat } from "../utils/currency";
+
 export default function Products({ item, cart, setCart }) {
   return (
-    <div className={styles.card}>
+    <>
       <img src={item.image} alt={item.title} className={styles.img} />
       <p>{item.title}</p>
-      <p>${item.price}</p>
-    </div>
+      <p>${currencyFormat(item.price)}</p>
+    </>
   );
 }
 

shopping-cart/src/components/products.module.css

@@ -2,4 +2,6 @@
   width: 100%;
   height: auto;
   vertical-align: middle;
+  object-fit: cover;
+  float: left;
 }