From f90e31ad67b3080323c54283569303f785e01341 Mon Sep 17 00:00:00 2001 From: AranBeitia Date: Fri, 17 Sep 2021 14:38:40 +0200 Subject: [PATCH 1/2] Last changes --- README.md | 5 ++ src/App.js | 6 +- src/assets/styles/base/base.scss | 8 ++ src/assets/styles/base/index.scss | 1 + src/assets/styles/index.scss | 1 + src/components/Button/Button.js | 10 ++- src/components/ItemCard/ItemCard.js | 89 ++++++++++++++----- src/components/ItemCard/ItemCard.scss | 8 +- src/components/ItemCard/index.js | 1 + src/components/Main/Main.js | 4 +- src/components/Main/index.js | 1 + .../ProductsListing/ProductsListing.js | 32 +++++-- src/components/ProductsListing/index.js | 1 + src/index.js | 1 + src/pages/Home/Home.js | 20 +++-- 15 files changed, 147 insertions(+), 41 deletions(-) create mode 100644 src/assets/styles/base/base.scss create mode 100644 src/assets/styles/base/index.scss create mode 100644 src/assets/styles/index.scss diff --git a/README.md b/README.md index 399ff82..8964edd 100644 --- a/README.md +++ b/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: \ No newline at end of file diff --git a/src/App.js b/src/App.js index b56b979..3a49c0e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,9 @@ +import React from "react"; + +import Home from "./pages/Home"; + function App() { - return null; + return ; } export default App; diff --git a/src/assets/styles/base/base.scss b/src/assets/styles/base/base.scss new file mode 100644 index 0000000..5a42d21 --- /dev/null +++ b/src/assets/styles/base/base.scss @@ -0,0 +1,8 @@ +* { + padding: 0; + margin: 0; +} + +p { + margin: 0; +} \ No newline at end of file diff --git a/src/assets/styles/base/index.scss b/src/assets/styles/base/index.scss new file mode 100644 index 0000000..68767be --- /dev/null +++ b/src/assets/styles/base/index.scss @@ -0,0 +1 @@ +@forward 'base'; \ No newline at end of file diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss new file mode 100644 index 0000000..a17da31 --- /dev/null +++ b/src/assets/styles/index.scss @@ -0,0 +1 @@ +@use 'base'; diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index 37772cb..ca6f2ac 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -1,10 +1,14 @@ import React from "react"; -function Button({ submitButton, children }) { +function Button({ submitButton, children, ...props }) { return ( -
+
+ ); } diff --git a/src/components/ItemCard/ItemCard.js b/src/components/ItemCard/ItemCard.js index 525b513..9739b12 100644 --- a/src/components/ItemCard/ItemCard.js +++ b/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
; -// } +function Divider() { + return
; +} + +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 ( +
+
+ {title} + +

{title}

+
- return
; + +

{shortDescription}

+ +
+
+
+ + + +

{downVotes.currentValue}

+
+
+ + + +

{upVotes.currentValue}

+
+
+ +
+
+ ); } export default ItemCard; diff --git a/src/components/ItemCard/ItemCard.scss b/src/components/ItemCard/ItemCard.scss index 3005341..4ea079d 100644 --- a/src/components/ItemCard/ItemCard.scss +++ b/src/components/ItemCard/ItemCard.scss @@ -1,2 +1,8 @@ -.ItemCard { +.item-card { + padding: 1rem; + + &__image { + width: 100%; + border-radius: 5px; + } } diff --git a/src/components/ItemCard/index.js b/src/components/ItemCard/index.js index e69de29..59ad792 100644 --- a/src/components/ItemCard/index.js +++ b/src/components/ItemCard/index.js @@ -0,0 +1 @@ +export { default } from "./ItemCard"; diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js index c26fa07..4fda16f 100644 --- a/src/components/Main/Main.js +++ b/src/components/Main/Main.js @@ -1,7 +1,7 @@ import React from "react"; -function Main() { - return
; +function Main({ children, ...props }) { + return
{children}
; } export default Main; diff --git a/src/components/Main/index.js b/src/components/Main/index.js index e69de29..0fdf55f 100644 --- a/src/components/Main/index.js +++ b/src/components/Main/index.js @@ -0,0 +1 @@ +export { default } from "./Main"; diff --git a/src/components/ProductsListing/ProductsListing.js b/src/components/ProductsListing/ProductsListing.js index 0af92a3..7f9c1c9 100644 --- a/src/components/ProductsListing/ProductsListing.js +++ b/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 ( -
- {/* {products.map((product) => ( - - ))} */} +
+ {products.map((product) => ( + + ))}
); } diff --git a/src/components/ProductsListing/index.js b/src/components/ProductsListing/index.js index e69de29..f2739d0 100644 --- a/src/components/ProductsListing/index.js +++ b/src/components/ProductsListing/index.js @@ -0,0 +1 @@ +export { default } from "./ProductsListing"; diff --git a/src/index.js b/src/index.js index 19bb154..4d58953 100644 --- a/src/index.js +++ b/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"; diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index e7c62c2..dced57b 100644 --- a/src/pages/Home/Home.js +++ b/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() {

Buy now!

- {/* */} +