From 466b03534bb20ae9e879e96da1225db2cf5f940d Mon Sep 17 00:00:00 2001 From: dharshib Date: Sun, 16 Jun 2024 18:56:27 +0530 Subject: [PATCH] utilized local storage to store cart/wishlist items --- src/Context/SavedContext.jsx | 51 ++++++++++++++++++------------------ src/Context/ShopContext.jsx | 23 +++++++++++----- 2 files changed, 42 insertions(+), 32 deletions(-) diff --git a/src/Context/SavedContext.jsx b/src/Context/SavedContext.jsx index 065418b..04a6ecb 100644 --- a/src/Context/SavedContext.jsx +++ b/src/Context/SavedContext.jsx @@ -1,13 +1,21 @@ -import react, { createContext, useState } from "react"; +import react, { createContext, useEffect, useState } from "react"; import all_products from "../assets/all_product"; export const SavedContext = createContext(null); //ContextAPI for providing state variables to components of Wishlist const defaultWishlist = () => { - let list = {}; - for (let index = 0; index < all_products.length; index++) { - list[index] = false; + + const existingItems = JSON.parse(localStorage.getItem("shopy-wishlist")); + + if (existingItems) { + return existingItems; + } else { + let list = {}; + for (let index = 0; index < all_products.length; index++) { + list[index] = false; + } + return list; + } - return list; }; const SavedContextProvider = (props) => { @@ -15,50 +23,41 @@ const SavedContextProvider = (props) => { const AddToList = (id) => { setListItem((prev) => { - - const updatedState = { ...prev, [id]: !listItem[id] }; - console.log(updatedState); + + const updatedState = { ...prev, [id]: !listItem[id] }; + console.log(updatedState); return updatedState; - - + + }); }; const RemoveFromList = (id) => { if (listItem[id]) { setListItem((prev) => { - + const updatedState = { ...prev, [id]: false }; - + console.log(updatedState); return updatedState; }); } }; - /*const getCartTotalAmount = () => { - let totalAmount = 0; - for (const item in cartItem) { - if (cartItem[item] > 0) { - let itemInfo = all_products.find( - (product) => product.id === Number(item) - ); - totalAmount += cartItem[item] * itemInfo.new_price; - } - } - return totalAmount; - };*/ - const getListQuantity = () => { let totalQuantity = 0; for (const item in listItem) { if (listItem[item]) { - totalQuantity ++; + totalQuantity++; } } return totalQuantity; }; + useEffect(() => { + localStorage.setItem("shopy-wishlist", JSON.stringify(listItem)) + }, [listItem]) + const contextValue = { all_products, listItem, diff --git a/src/Context/ShopContext.jsx b/src/Context/ShopContext.jsx index fd24422..7a27a7b 100644 --- a/src/Context/ShopContext.jsx +++ b/src/Context/ShopContext.jsx @@ -1,18 +1,25 @@ -import react, { createContext, useState } from "react"; +import react, { createContext, useEffect, useState } from "react"; import all_products from "../assets/all_product"; export const ShopContext = createContext(null); const getCartDefault = () => { - let cart = {}; - for (let index = 0; index < all_products.length; index++) { - cart[index] = 0; + + const existingItems = JSON.parse(localStorage.getItem("shopy-cart")); + if (existingItems) { + return existingItems + } else { + let cart = {}; + for (let index = 0; index < all_products.length; index++) { + cart[index] = 0; + } + return cart; } - return cart; + }; const ShopContextProvider = (props) => { const [cartItem, setCartItem] = useState(getCartDefault()); - + const AddToCart = (id) => { setCartItem((prev) => { const updatedState = { ...prev, [id]: prev[id] + 1 }; @@ -54,6 +61,10 @@ const ShopContextProvider = (props) => { return totalQuantity; }; + useEffect(() => { + localStorage.setItem("shopy-cart", JSON.stringify(cartItem)) + }, [cartItem]) + const contextValue = { all_products, cartItem,