Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update #2

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

update #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
189 changes: 147 additions & 42 deletions src/pages/PropDrillingExercise.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import React, { useState } from "react";
import { Container, Button, Typography, Box, Grid } from "@mui/material"
import { Container, Button, Typography, Box, Grid } from "@mui/material";
import productOne from "../images/product1.gif";
import productTwo from "../images/product2.gif";
import ReactJson from "react-json-view";
import WrapperBox from "../components/WrapperBox"


import WrapperBox from "../components/WrapperBox";

const RootComponent = (props) => {
// eslint-disable-next-line
Expand All @@ -28,21 +26,48 @@ const RootComponent = (props) => {
// Write a function called addProductToCart() that takes a product object as an argument
// Example newProduct = { id: "p1", title: "Product 1", price: 1999 }
// The function will add one new product into the cart

const addProductToCart = (newProduct) => {
const newProductList = cart.products.map((cartProduct) => {
if (cartProduct.id === newProduct.id) {
cartProduct.qty += 1;
cartProduct.price += newProduct.price;
}
return cartProduct;
});
const newTotalPrice = cart.totalPrice + newProduct.price;
setCart({ products: newProductList, totalPrice: newTotalPrice });
};

// Step 2
// Write a function called removeProductFromCart() that takes a product object as an argument
// Example removedProduct = { id: "p1", title: "Product 1", price: 1999 }
// The function will remove one product from the cart. The min value of quantity is 0

const removeProductFromCart = (removeProduct) => {
let newTotalPrice = cart.totalPrice;
const newProductList = cart.products.map((cartProduct) => {
if (cartProduct.id === removeProduct.id && cartProduct.qty > 0) {
cartProduct.qty -= 1;
cartProduct.price -= removeProduct.price;
newTotalPrice -= removeProduct.price;
}
return cartProduct;
});
setCart({ products: newProductList, totalPrice: newTotalPrice });
};
// Step 3
// Pass the functions to the product components to handle the click event of the Add/Remove buttons

return (
<WrapperBox>
<Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
<Typography
p="0.5rem"
variant="h5"
sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
>
RootComponent {`({`}
<Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
<Box component="span" sx={{ color: "warning.main" }}>
{Object.keys(props).join(", ")}
</Box>
{`})`}
</Typography>
<Box sx={{ textAlign: "start" }}>
Expand All @@ -57,7 +82,11 @@ const RootComponent = (props) => {
</Box>
<Grid container spacing={2} p="1rem">
<Grid item md={6}>
<ProductPage products={products} />
<ProductPage
products={products}
addProduct={addProductToCart}
removeProduct={removeProductFromCart}
/>
</Grid>
<Grid item md={6}>
<CartPage cart={cart} />
Expand All @@ -70,18 +99,31 @@ const RootComponent = (props) => {
const ProductPage = (props) => {
return (
<WrapperBox>
<Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>

<Typography
p="0.5rem"
variant="h5"
sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
>
Product Page {`({`}
<Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
<Box component="span" sx={{ color: "warning.main" }}>
{Object.keys(props).join(", ")}
</Box>
{`})`}
</Typography>
<Grid container spacing={2} p="1rem">
<Grid item sm={6}>
<ProductOne product={props.products[0]} />
<ProductOne
product={props.products[0]}
addProduct={props.addProduct}
removeProduct={props.removeProduct}
/>
</Grid>
<Grid item sm={6}>
<ProductTwo product={props.products[1]} />
<ProductTwo
product={props.products[1]}
addProduct={props.addProduct}
removeProduct={props.removeProduct}
/>
</Grid>
</Grid>
</WrapperBox>
Expand All @@ -91,9 +133,15 @@ const ProductPage = (props) => {
const CartPage = (props) => {
return (
<WrapperBox>
<Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
<Typography
p="0.5rem"
variant="h5"
sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
>
Cart Page {`({`}
<Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
<Box component="span" sx={{ color: "warning.main" }}>
{Object.keys(props).join(", ")}
</Box>
{`})`}
</Typography>
<Grid container spacing={2} p="1rem">
Expand All @@ -104,7 +152,9 @@ const CartPage = (props) => {
<CartProductTwo product={props.cart.products[1]} />
</Grid>
<Grid item md={12}>
<Typography p="0.5rem" variant="h5">Total Price: 💵 {props.cart.totalPrice}</Typography>
<Typography p="0.5rem" variant="h5">
Total Price: 💵 {props.cart.totalPrice}
</Typography>
</Grid>
</Grid>
</WrapperBox>
Expand All @@ -114,22 +164,38 @@ const CartPage = (props) => {
const ProductOne = (props) => {
return (
<WrapperBox>
<Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
<Typography
p="0.5rem"
variant="h5"
sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
>
{props.product.title} {`({`}
<Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
<Box component="span" sx={{ color: "warning.main" }}>
{Object.keys(props).join(", ")}
</Box>
{`})`}
</Typography >
</Typography>
<Grid container justifyContent="center">
<Grid item xs={8}>
<img src={productOne} alt="Product One" width="100%" />
<Typography p="0.5rem" variant="h6" sx={{ color: "success.main" }}>💵 {props.product.price}</Typography>
<Typography p="0.5rem" variant="h6" sx={{ color: "success.main" }}>
💵 {props.product.price}
</Typography>
</Grid>
<Grid item xs={8} >
<Grid item xs={8}>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<Button variant="success" sx={{ width: "5rem" }} >
<Button
variant="success"
sx={{ width: "5rem" }}
onClick={() => props.addProduct(props.product)}
>
Add
</Button>
<Button variant="error" sx={{ width: "5rem" }}>
<Button
variant="error"
sx={{ width: "5rem" }}
onClick={() => props.removeProduct(props.product)}
>
Remove
</Button>
</div>
Expand All @@ -140,25 +206,42 @@ const ProductOne = (props) => {
};

const ProductTwo = (props) => {

return (
<WrapperBox>
<Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
<Typography
p="0.5rem"
variant="h5"
sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
>
{props.product.title} {`({`}
<Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
<Box component="span" sx={{ color: "warning.main" }}>
{Object.keys(props).join(", ")}
</Box>
{`})`}
</Typography>
<Grid container justifyContent="center">
<Grid item xs={8}>
<img src={productTwo} alt="Product Two" width="100%" />
<Typography p="0.5rem" variant="h5" sx={{ color: "success.main" }}>💵 {props.product.price}</Typography>
<Typography p="0.5rem" variant="h5" sx={{ color: "success.main" }}>
💵 {props.product.price}
</Typography>
</Grid>
<Grid item xs={8} >
<Grid item xs={8}>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<Button variant="success" size="sm" style={{ width: "5rem" }}>
<Button
variant="success"
size="sm"
style={{ width: "5rem" }}
onClick={() => props.addProduct(props.product)}
>
Add
</Button>
<Button variant="error" size="sm" style={{ width: "5rem" }}>
<Button
variant="error"
size="sm"
style={{ width: "5rem" }}
onClick={() => props.removeProduct(props.product)}
>
Remove
</Button>
</div>
Expand All @@ -171,14 +254,24 @@ const ProductTwo = (props) => {
const CartProductOne = (props) => {
return (
<WrapperBox>
<Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
<Typography
p="0.5rem"
variant="h5"
sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
>
CartProduct 1 {`({`}
<Box component="span" sx={{ color: "warning.main" }} >{Object.keys(props).join(", ")}</Box>
<Box component="span" sx={{ color: "warning.main" }}>
{Object.keys(props).join(", ")}
</Box>
{`})`}
</Typography>
<Box >
<Typography p="0.5rem" variant="h6">Quantity: {props.product.qty}</Typography>
<Typography p="0.5rem" variant="h6">Price: 💵 {props.product.price}</Typography>
<Box>
<Typography p="0.5rem" variant="h6">
Quantity: {props.product.qty}
</Typography>
<Typography p="0.5rem" variant="h6">
Price: 💵 {props.product.price}
</Typography>
</Box>
</WrapperBox>
);
Expand All @@ -187,14 +280,24 @@ const CartProductOne = (props) => {
const CartProductTwo = (props) => {
return (
<WrapperBox>
<Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
<Typography
p="0.5rem"
variant="h5"
sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
>
CartProduct 2 {`({`}
<Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
<Box component="span" sx={{ color: "warning.main" }}>
{Object.keys(props).join(", ")}
</Box>
{`})`}
</Typography >
</Typography>
<Box>
<Typography p="0.5rem" variant="h6">Quantity: {props.product.qty}</Typography>
<Typography p="0.5rem" variant="h6">Price: 💵 {props.product.price}</Typography>
<Typography p="0.5rem" variant="h6">
Quantity: {props.product.qty}
</Typography>
<Typography p="0.5rem" variant="h6">
Price: 💵 {props.product.price}
</Typography>
</Box>
</WrapperBox>
);
Expand All @@ -204,7 +307,9 @@ const PropDrillingExercise = () => {
return (
<Container>
<br />
<Typography p="0.5rem" variant="h6">How to add products to the cart?</Typography>
<Typography p="0.5rem" variant="h6">
How to add products to the cart?
</Typography>
<br />
<RootComponent />
</Container>
Expand Down
Loading