Shopping Cart
@@ -28,8 +30,6 @@ function Cart({ cartItems, handleRemove, handleChange, ...props }) {
img={item.img}
quantity={item.quantity}
unitsInStock={item.unitsInStock}
- handleRemove={handleRemove}
- handleChange={handleChange}
/>
))
) : (
diff --git a/src/components/ItemCard/ItemCard.js b/src/components/ItemCard/ItemCard.js
index 37124eb8..9bd6a595 100644
--- a/src/components/ItemCard/ItemCard.js
+++ b/src/components/ItemCard/ItemCard.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
import FavoriteIconButton from "../FavoriteIconButton";
import IconButton from "../IconButton";
@@ -6,6 +6,7 @@ import Button from "../Button";
import { ThumbDown, ThumbUp } from "../SVGIcons";
import "./ItemCard.scss";
+import HomeContext from "../../context/HomeContext";
function Divider() {
return
;
@@ -34,11 +35,13 @@ function ItemCard({
isFavorite,
upVotes,
downVotes,
- handleDownVote,
- handleUpVote,
- handleSetFavorite,
- handleAddToCart,
}) {
+ const {
+ handleDownVote,
+ handleUpVote,
+ handleSetFavorite,
+ handleAddToCart,
+ } = useContext(HomeContext);
function onDownVote() {
handleDownVote(id);
}
diff --git a/src/components/NewProductForm/NewProductForm.js b/src/components/NewProductForm/NewProductForm.js
index cc0f0956..6db06394 100644
--- a/src/components/NewProductForm/NewProductForm.js
+++ b/src/components/NewProductForm/NewProductForm.js
@@ -7,6 +7,8 @@ import Input from "../Input";
import Button from "../Button";
import productSchema from "./product-schema";
+import NewProductContext from "../../context/NewProductContext";
+import { useContext } from "react";
function addProductDetails(product) {
return {
@@ -33,7 +35,8 @@ function addProductDetails(product) {
};
}
-function NewProductForm({ saveNewProduct }) {
+function NewProductForm() {
+ const { saveNewProduct } = useContext(NewProductContext);
const [hasSubmitted, setHasSubmitted] = useState(false);
const formik = useFormik({
@@ -51,6 +54,8 @@ function NewProductForm({ saveNewProduct }) {
validationSchema: productSchema,
onSubmit: (values, { setSubmitting }) => {
const newProduct = addProductDetails(values);
+ console.log(saveNewProduct);
+
saveNewProduct(newProduct);
setSubmitting(true);
diff --git a/src/components/ProductsListing/ProductsListing.js b/src/components/ProductsListing/ProductsListing.js
index d40e52b3..c49c16b9 100644
--- a/src/components/ProductsListing/ProductsListing.js
+++ b/src/components/ProductsListing/ProductsListing.js
@@ -1,17 +1,12 @@
-import React from "react";
+import React, { useContext } from "react";
+import HomeContext from "../../context/HomeContext";
import ItemCard from "../ItemCard";
-function ProductsListing({
- products,
- handleDownVote,
- handleUpVote,
- handleSetFavorite,
- handleAddToCart,
- ...props
-}) {
+function ProductsListing() {
+ const { products } = useContext(HomeContext);
return (
-
+
{products.map((product) => (
))}
diff --git a/src/components/ShoppingCartItem/ShoppingCartItem.js b/src/components/ShoppingCartItem/ShoppingCartItem.js
index 14a17600..0bc2c09e 100644
--- a/src/components/ShoppingCartItem/ShoppingCartItem.js
+++ b/src/components/ShoppingCartItem/ShoppingCartItem.js
@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useContext } from "react";
import "./ShoppingCartItem.scss";
import Button from "../Button";
+import HomeContext from "../../context/HomeContext";
function buildSelectOptions(unitsInStock) {
return Array.from({ length: unitsInStock }, (_value, index) => {
@@ -15,16 +16,8 @@ function buildSelectOptions(unitsInStock) {
});
}
-function ShoppingCartItem({
- id,
- img,
- title,
- price,
- quantity,
- unitsInStock,
- handleChange,
- handleRemove,
-}) {
+function ShoppingCartItem({ id, img, title, price, quantity, unitsInStock }) {
+ const { handleRemove, handleChange } = useContext(HomeContext);
function onHandleChange(event) {
handleChange(event, id);
}
diff --git a/src/context/HomeContext.js b/src/context/HomeContext.js
new file mode 100644
index 00000000..990b9fef
--- /dev/null
+++ b/src/context/HomeContext.js
@@ -0,0 +1,19 @@
+import { createContext } from "react";
+
+const initValues = {
+ fullWidth: null,
+ cartItems: [],
+ products: [],
+ isLoading: false,
+ hasError: false,
+ loadingError: null,
+ handleDownVote: () => {},
+ handleUpVote: () => {},
+ handleSetFavorite: () => {},
+ handleAddToCart: () => {},
+ handleRemove: () => {},
+ handleChange: () => {},
+};
+
+const HomeContext = createContext(initValues);
+export default HomeContext;
diff --git a/src/context/NewProductContext.js b/src/context/NewProductContext.js
new file mode 100644
index 00000000..a4091057
--- /dev/null
+++ b/src/context/NewProductContext.js
@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+const initValues = {
+ saveNewProduct: () => {},
+};
+
+const NewProductContext = createContext(initValues);
+
+export default NewProductContext;
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index ad32c0aa..c8fc2cea 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -1,22 +1,12 @@
-import React from "react";
+import React, { useContext } from "react";
import ProductsListing from "../../components/ProductsListing";
import Cart from "../../components/Cart";
import withLayout from "../../hoc/withLayout";
+import HomeContext from "../../context/HomeContext";
-function Home({
- products,
- cartItems,
- isLoading,
- hasError,
- loadingError,
- handleDownVote,
- handleUpVote,
- handleSetFavorite,
- handleAddToCart,
- handleRemove,
- handleChange,
-}) {
+function Home() {
+ const { isLoading, hasError, loadingError } = useContext(HomeContext);
return (
@@ -46,24 +36,13 @@ function Home({
)}
{!isLoading && !hasError && (
)}
-
+
);
}
diff --git a/src/pages/NewProduct/NewProduct.js b/src/pages/NewProduct/NewProduct.js
index 04b86d24..0ff83ef6 100644
--- a/src/pages/NewProduct/NewProduct.js
+++ b/src/pages/NewProduct/NewProduct.js
@@ -3,7 +3,7 @@ import React from "react";
import NewProductForm from "../../components/NewProductForm";
import withLayout from "../../hoc/withLayout";
-function NewProduct({ saveNewProduct }) {
+function NewProduct() {
return (