basic functionality complete

shopping-cart/src/components/navbar.jsx

@@ -3,11 +3,20 @@ import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 
 export default function Navbar({ cartItems }) {
+  const sumCartItems = Object.keys(cartItems).length;
+
   return (
     <nav className={styles.nav}>
       <h1>Smig.Tech</h1>
       <Nav />
-      {cartItems ? <h1>{cartItems}</h1> : <button>I&apos;m Ready</button>}
+      {sumCartItems > 0 ? (
+        <Link to="bag">
+          {" "}
+          <h1>{sumCartItems}</h1>
+        </Link>
+      ) : (
+        <button>I&apos;m Ready</button>
+      )}
     </nav>
   );
 }
@@ -26,5 +35,5 @@ function Nav() {
 }
 
 Navbar.propTypes = {
-  cartItems: PropTypes.number,
+  cartItems: PropTypes.object,
 };

shopping-cart/src/components/productCollection.jsx

@@ -1,12 +1,16 @@
 import Product from "./products";
 import PropTypes from "prop-types";
 
-export default function ProductCollection({ loading, items }) {
+import styles from "./productCollection.module.css";
+
+export default function ProductCollection({ loading, items, cart, setCart }) {
   return (
-    <div>
+    <div className={styles.container}>
       {!loading
         ? items.map((item, index) => {
-            return <Product item={item} key={index} />;
+            return (
+              <Product item={item} key={index} cart={cart} setCart={setCart} />
+            );
           })
         : null}
     </div>
@@ -16,4 +20,6 @@ export default function ProductCollection({ loading, items }) {
 ProductCollection.propTypes = {
   loading: PropTypes.bool,
   items: PropTypes.array,
+  cart: PropTypes.object,
+  setCart: PropTypes.func,
 };

shopping-cart/src/components/products.jsx

@@ -2,16 +2,33 @@ import PropTypes from "prop-types";
 
 import styles from "./products.module.css";
 
-export default function Product({ item }) {
+export default function Product({ 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>
+      <button
+        onClick={() => {
+          let obj = { ...cart };
+          if (obj[item.id]) {
+            obj[item.id].qty += 1;
+          } else {
+            obj[item.id] = item;
+            obj[item.id].qty = 1;
+          }
+
+          setCart(obj);
+        }}
+      >
+        Add to Cart
+      </button>
     </div>
   );
 }
 
 Product.propTypes = {
   item: PropTypes.object,
+  cart: PropTypes.object,
+  setCart: PropTypes.func,
 };

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

@@ -1,11 +1,15 @@
 .card {
   display: flex;
   flex-direction: column;
-  max-width: 350px;
-  justify-content: center;
-  align-items: center;
+  max-width: calc(100% / 5);
+  justify-content: end;
+  /*flex: 1;*/
+  padding: 1.5rem;
+  margin: 1.5rem;
 }
 
 .img {
-  max-width: 250px;
+  width: 100%;
+  height: auto;
+  vertical-align: middle;
 }