Solution: Arantza Beitia

README.md

@@ -323,3 +323,8 @@ Thanks goes to these wonderful people
 This project follows the
 [all-contributors](https://github.com/all-contributors/all-contributors)
 specification. Contributions of any kind welcome!
+
+
+## Repository
+
+All the process is included in this repository: [Workflow repository](https://github.com/AranBeitia/react-Shopping-components)

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/assets/styles/base/base.scss

@@ -0,0 +1,8 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+p {
+  margin: 0;
+}

src/assets/styles/base/index.scss

@@ -0,0 +1 @@
+@forward 'base';

src/assets/styles/index.scss

@@ -0,0 +1 @@
+@use 'base';

src/components/Button/Button.js

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

src/components/ItemCard/ItemCard.js

@@ -1,31 +1,78 @@
 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 Divider() {
+  return <hr className="ItemCard__divider" />;
+}
+
+function ItemCard({
+  id,
+  img,
+  title,
+  shortDescription,
+  isFavourite,
+  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="item-card col col-12 col-md-6 col-lg-4">
+      <header className="position-relative">
+        <img src={img} className="item-card__image" alt={title} />
+        <FavoriteIconButton
+          className="item-card__fav-icon"
+          handleSetFavorite={onSetFavorite}
+          isFavourite={isFavourite}
+        />
+        <h2>{title}</h2>
+      </header>
 
-  return <article className="ItemCard col col-12 col-md-6 col-lg-4" />;
+      <Divider />
+      <p>{shortDescription}</p>
+      <Divider />
+      <footer className="d-flex justify-content-between">
+        <div className="d-flex justify-content-start">
+          <div className="d-flex align-items-center">
+            <IconButton aria-label="down vote product" handleClick={onDownVote}>
+              <ThumbDown />
+            </IconButton>
+            <p className="mx-1">{downVotes.currentValue}</p>
+          </div>
+          <div className="d-flex align-items-center">
+            <IconButton aria-label="up vote product" handleClick={onUpVote}>
+              <ThumbUp />
+            </IconButton>
+            <p className="mx-1">{upVotes.currentValue}</p>
+          </div>
+        </div>
+        <Button name="add to cart" onClick={onAddToCart}>
+          Add to cart
+        </Button>
+      </footer>
+    </article>
+  );
 }
 
 export default ItemCard;

src/components/ItemCard/ItemCard.scss

@@ -1,2 +1,8 @@
-.ItemCard {
+.item-card {
+  padding: 1rem;
+
+  &__image {
+    width: 100%;
+    border-radius: 5px;
+  }
 }

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,33 @@
 import React from "react";
 
-// import ItemCard from "../ItemCard";
+import ItemCard from "../ItemCard";
 
-function ProductsListing() {
+function ProductsListing({
+  products,
+  handleDownVote,
+  handleUpVote,
+  handleSetFavourite,
+  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={product.handleUpVote}
+          downVotes={product.votes.downVotes}
+          handleDownVote={product.handleDownVote}
+          isFavourite={product.isFavourite}
+          handleSetFavorite={product.handleSetFavorite}
+          handleAddToCart={product.handleAddToCart}
+        />
+      ))}
     </section>
   );
 }

src/components/ProductsListing/index.js

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

src/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 
 import "bootstrap/dist/css/bootstrap.min.css";
+import "./assets/styles/index.scss";
 
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";

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 />
     </>