Solution: Armando Vieira

.eslintrc.js

@@ -49,7 +49,12 @@ module.exports = {
     },
   ],
   rules: {
-    "prettier/prettier": "error",
+    "prettier/prettier": [
+      "error",
+      {
+        endOfLine: "auto",
+      },
+    ],
     "react/jsx-filename-extension": "off",
     "import/prefer-default-export": "off",
     "prefer-destructuring": "off",

package.json

@@ -22,7 +22,8 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "sass": "^1.32.11",
-    "web-vitals": "^1.1.1"
+    "web-vitals": "^1.1.1",
+    "webpack": "^4.44.2"
   },
   "devDependencies": {
     "@babel/core": "^7.13.16",

src/App.js

@@ -1,5 +1,9 @@
+import React from "react";
+
+import Home from "./pages/Home";
+
 function App() {
-  return null;
+  return <Home />;
 }
 
 export default App;

src/components/Button/Button.js

@@ -1,10 +1,15 @@
 import React from "react";
 
-function Button({ submitButton, children }) {
+function Button({ submitButton, children, disabled = false, ...props }) {
   return (
-    <div className="btn btn-primary" type={submitButton ? "submit" : "button"}>
+    <button
+      className="btn btn-primary"
+      type={submitButton ? "submit" : "button"}
+      disabled={disabled}
+      {...props}
+    >
       {children}
-    </div>
+    </button>
   );
 }
 

src/components/ItemCard/ItemCard.js

@@ -1,31 +1,74 @@
 import React from "react";
 
-// import FavoriteIconButton from "../FavoriteIconButton";
-// import IconButton from "../IconButton";
-// import Button from "../Button";
-// import { ThumbDown, ThumbUp } from "../SVGIcons";
+import FavoriteIconButton from "../FavoriteIconButton";
+import IconButton from "../IconButton";
+import Button from "../Button";
+import { ThumbDown, ThumbUp } from "../SVGIcons";
 
 import "./ItemCard.scss";
 
-// function Divider() {
-//   return <hr className="ItemCard__divider" />;
-// }
+function ItemCard({
+  id,
+  img,
+  title,
+  shortDescription,
+  isFavorite,
+  upVotes,
+  downVotes,
+  handleDownVote,
+  handleUpVote,
+  handleSetFavorite,
+  handleAddToCart,
+}) {
+  function onDownVote() {
+    handleDownVote(id);
+  }
+  function onUpVote() {
+    handleUpVote(id);
+  }
+  function onSetFavorite() {
+    handleSetFavorite(id);
+  }
+  function onAddToCart() {
+    handleAddToCart(id);
+  }
 
-function ItemCard() {
-  // function onDownVote() {
-  //   handleDownVote(id);
-  // }
-  // function onUpVote() {
-  //   handleUpVote(id);
-  // }
-  // function onSetFavorite() {
-  //   handleSetFavorite(id);
-  // }
-  // function onAddToCart() {
-  //   handleAddToCart(id);
-  // }
-
-  return <article className="ItemCard col col-12 col-md-6 col-lg-4" />;
+  return (
+    <article className="ItemCard col col-12 col-md-6 col-lg-4">
+      <header>
+        <div className="ItemCard__image-wrapper">
+          <img src={img} className="ItemCard__image" alt={title} />
+          <FavoriteIconButton
+            handleSetFavorite={onSetFavorite}
+            isFavorite={isFavorite}
+          />
+        </div>
+        <h2 className="ItemCard__title">{title}</h2>
+      </header>
+      <div>
+        <p className="ItemCard__description">{shortDescription}</p>
+      </div>
+      <footer className="ItemCard__meta">
+        <div className="ItemCard__icons">
+          <div className="ItemCard__icon-row">
+            <IconButton aria-label="up vote product" handleClick={onUpVote}>
+              <ThumbDown />
+            </IconButton>
+            <p className="ItemCard__icon-txt">{downVotes.currentValue}</p>
+          </div>
+          <div className="ItemCard__icon-row">
+            <IconButton aria-label="down vote product" handleClick={onDownVote}>
+              <ThumbUp />
+            </IconButton>
+            <p className="ItemCard__icon-txt">{upVotes.currentValue}</p>
+          </div>
+        </div>
+        <div className="ItemCard__icon-row">
+          <Button onClick={onAddToCart}>Add to cart</Button>
+        </div>
+      </footer>
+    </article>
+  );
 }
 
 export default ItemCard;

src/components/ItemCard/ItemCard.scss

@@ -1,2 +1,63 @@
 .ItemCard {
-}
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 2rem;
+
+    &__title {
+        font-size: 1rem;
+        line-height: 1.25rem;
+        font-weight: bold;
+        margin: 0.75rem 0 0 0;
+    }
+
+    &__image-wrapper {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__image {
+        display: block;
+        width: 100%;
+        height: auth;
+        max-width: 32rem;
+        border-radius: 3px;
+    }
+
+    &__divider {
+        border: 1px solid hsl(200deg 10% 88%);
+        border-radius: 3px;
+        width: 100%;
+        margin: 0.5rem 0;
+    }
+
+    &__description {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        margin: 0;
+    }
+
+    &__meta {
+        margin-top: 0.5rem;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &__icons {
+        display: flex;
+    }
+
+    &__icon-row {
+        display: flex;
+        margin-right: 1rem;
+        align-items: center;
+
+        &:last-of-type {
+            margin: 0;
+        }
+    }
+
+    &__icon-txt {
+        margin: 0 0 0 0.5rem;
+    }
+}

src/components/ItemCard/index.js

@@ -0,0 +1 @@
+export { default } from "./ItemCard";

src/components/Main/Main.js

@@ -1,7 +1,7 @@
 import React from "react";
 
-function Main() {
-  return <div />;
+function Main({ children, ...props }) {
+  return <main {...props}>{children}</main>;
 }
 
 export default Main;

src/components/Main/index.js

@@ -0,0 +1 @@
+export { default } from "./Main";

src/components/ProductsListing/ProductsListing.js

@@ -1,13 +1,32 @@
 import React from "react";
+import ItemCard from "../ItemCard";
 
-// import ItemCard from "../ItemCard";
-
-function ProductsListing() {
+function ProductsListing({
+  products,
+  handleDownVote,
+  handleUpVote,
+  handleSetFavorite,
+  handleAddToCart,
+  ...props
+}) {
   return (
-    <section className="row">
-      {/* {products.map((product) => (
-        <ItemCard ... />
-      ))} */}
+    <section className="row" {...props}>
+      {products.map((product) => (
+        <ItemCard
+          key={product.id}
+          id={product.id}
+          img={product.img}
+          title={product.title}
+          shortDescription={product.shortDescription}
+          upVotes={product.votes.upVotes}
+          handleUpVote={handleUpVote}
+          downVotes={product.votes.downVotes}
+          handleDownVote={handleDownVote}
+          isFavorite={product.isFavorite}
+          handleSetFavorite={handleSetFavorite}
+          handleAddToCart={handleAddToCart}
+        />
+      ))}
     </section>
   );
 }

src/components/ProductsListing/index.js

@@ -0,0 +1 @@
+export { default } from "./ProductsListing";

src/pages/Home/Home.js

@@ -1,17 +1,17 @@
 import React from "react";
 
-// import products from "../../utils/demo-data";
+import products from "../../utils/demo-data";
 
 import AppHeader from "../../components/AppHeader";
 import Main from "../../components/Main";
 import Footer from "../../components/Footer";
-// import ProductsListing from "../../components/ProductsListing";
+import ProductsListing from "../../components/ProductsListing";
 
 function Home() {
-  // function handleDownVote() {}
-  // function handleUpVote() {}
-  // function handleSetFavorite() {}
-  // function handleAddToCart() {}
+  function handleDownVote() {}
+  function handleUpVote() {}
+  function handleSetFavorite() {}
+  function handleAddToCart() {}
 
   return (
     <>
@@ -24,7 +24,13 @@ function Home() {
           </p>
           <p className="font-weight-bold">Buy now!</p>
         </header>
-        {/* <ProductsListing /> */}
+        <ProductsListing
+          products={products}
+          handleDownVote={handleDownVote}
+          handleUpVote={handleUpVote}
+          handleSetFavorite={handleSetFavorite}
+          handleAddToCart={handleAddToCart}
+        />
       </Main>
       <Footer />
     </>