basic features

shopping-cart/src/Cart.jsx

@@ -1,51 +1,106 @@
 import PropTypes from "prop-types";
 import styles from "./css/cart.module.css";
 import { useOutletContext } from "react-router-dom";
+import { currencyFormat } from "./utils/currency";
 
 const Cart = () => {
-  const [cart, setCart, items, SetItems] = useOutletContext();
+  const [cart, setCart] = useOutletContext();
 
-  const cartItems = Object.keys(cart);
+  const cartKeys = Object.keys(cart);
 
   return (
-    <>
-      <div>
-        {cart ? (
-          <div>
-            <h2>Cart</h2>
-            {cartItems.map((item, index) => (
-              <CartItem item={cart[item]} key={index} />
-            ))}
-          </div>
-        ) : (
-          <h2>Your cart is empty</h2>
-        )}
-      </div>
-    </>
+    <div>
+      <h2>Cart</h2>
+      <Bag cartKeys={cartKeys} cart={cart} setCart={setCart} />
+    </div>
   );
 };
 
-function CartItem({ item }) {
+function Bag({ cartKeys, cart, setCart }) {
+  return (
+    <>
+      {cartKeys.length > 0 ? (
+        <div>
+          {cartKeys.map((key, index) => (
+            <CartItem
+              item={cart[key]}
+              cart={cart}
+              setCart={setCart}
+              key={index}
+            />
+          ))}
+        </div>
+      ) : (
+        <h2>Your cart is empty</h2>
+      )}
+    </>
+  );
+}
+
+function CartItem({ item, cart, setCart }) {
   const { title, price, image, qty } = item;
 
   return (
     <div className={styles.container}>
       <img src={image} alt={title} />
-      <h3>{title}</h3>
-      <p>Qty: {qty}</p>
-      <p>Price: {price}</p>
-      <p>Total: {price * qty}</p>
-      <p>{item.id}</p>
+      <div>
+        <h3>{title}</h3>
+        <p>Price: ${currencyFormat(price)}</p>
+        <p>Qty: {qty}</p>
+      </div>
+      <div>
+        <button onClick={() => decreaseQty(item, cart, setCart)}>
+          Decrease
+        </button>
+        <p>{qty}</p>
+        <button onClick={() => increaseQty(item, cart, setCart)}>
+          Increase
+        </button>
+      </div>
+      <div>
+        <p>Total: {currencyFormat(qty * price)}</p>
+        <button onClick={() => removeFromCart(item, cart, setCart)}>
+          Delete
+        </button>
+      </div>
     </div>
   );
 }
 
+function increaseQty(item, cart, setCart) {
+  if (cart[item.id]) {
+    let obj = { ...cart };
+    obj[item.id].qty += 1;
+    setCart(obj);
+  }
+}
+
+function decreaseQty(item, cart, setCart) {
+  if (cart[item.id]) {
+    let obj = { ...cart };
+    if (obj[item.id].qty > 1) obj[item.id].qty -= 1;
+    setCart(obj);
+  }
+}
+
+function removeFromCart(item, cart, setCart) {
+  if (cart[item.id]) {
+    let obj = { ...cart };
+    delete obj[item.id];
+    setCart(obj);
+  }
+}
+
 CartItem.propTypes = {
   item: PropTypes.object,
+  cart: PropTypes.object,
+  setCart: PropTypes.func,
 };
 
-Cart.propTypes = {
-  cart: PropTypes.array,
+Bag.propTypes = {
+  cartKeys: PropTypes.array,
+  cart: PropTypes.object,
+  setCart: PropTypes.func,
 };
 
 export default Cart;

shopping-cart/src/Store.jsx

@@ -10,7 +10,7 @@ export default function Store() {
 
   return (
     <div>
-      <h1>Smig.Tech Coaching Store</h1>
+      <h1>Smig.Tech Store</h1>
       <ProductCollection
         loading={loading}
         items={items}
@@ -28,7 +28,9 @@ function useFakeStoreAPIData(items, setItems, loading, setLoading) {
       return;
     }
 
-    fetch("https://fakestoreapi.com/products?limit=5", { mode: "cors" })
+    fetch("https://fakestoreapi.com/products/category/electronics", {
+      mode: "cors",
+    })
       .then((response) => {
         if (response.status >= 400) {
           throw new Error("unable to fetch items");
@@ -40,7 +42,7 @@ function useFakeStoreAPIData(items, setItems, loading, setLoading) {
         response.forEach((item) => {
           arr.push({
             title: item.title,
-            price: item.price,
+            price: item.price * 100,
             image: item.image,
             id: crypto.randomUUID(),
           });

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;
 }

shopping-cart/src/utils/currency.js

@@ -0,0 +1,3 @@
+export function currencyFormat(str) {
+  return (str / 100).toFixed(2);
+}