diff --git a/src/components/Cart/CartItem.jsx b/src/components/Cart/CartItem.jsx
index 24ac193..525e0af 100644
--- a/src/components/Cart/CartItem.jsx
+++ b/src/components/Cart/CartItem.jsx
@@ -1,19 +1,25 @@
import { RiArrowLeftSLine } from 'react-icons/ri'
import { RiArrowRightSLine } from 'react-icons/ri'
import { FaTimes } from 'react-icons/fa'
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
import { decrement, increment, remove } from '../../features/cart/cartSlice';
import { Link } from 'react-router-dom';
-import { setProduct } from '../../features/products/productDetailSlice';
+
function CartItem({id, title, price, image, description, count, totalprice}) {
const dispatch = useDispatch()
+ const products = useSelector(state => state.products)
+
+ function setItem(id) {
+ const state = products?.value.find(product => product.id == Number(id))
+ localStorage.setItem('activeProduct', JSON.stringify(state))
+ }
return (
dispatch(setProduct({title, id, image, category, price, description, rating: {rate, count}}))}
+ onClick={() => setItem(id)}
>
diff --git a/src/components/ProductDetails/ProductDetails.jsx b/src/components/ProductDetails/ProductDetails.jsx
index 6224525..b1a061a 100644
--- a/src/components/ProductDetails/ProductDetails.jsx
+++ b/src/components/ProductDetails/ProductDetails.jsx
@@ -16,19 +16,20 @@ const ProductDetails = () => {
const dispatch = useDispatch()
- const state = useSelector(state => state.productDetails)
+
+ const activeProduct = JSON.parse(localStorage.getItem('activeProduct'));
const products = useSelector(state => state.products)
- const filteredProducts = products.value.filter(product => product.id !== Number(id))
+ const filteredProducts = products.value.filter(product => product.id !== Number(id))
const cart = useSelector(state => state.cart.value)
const cartState = cart.cart.length
useEffect(() => {
dispatch(fetchData())
window.scrollTo(0, 0);
- }, []);
+ }, [id]);
- const {title, image, category, price, description, rating: {rate, count}} = state.value
+ const {title, image, category, price, description, rating: {rate, count}} = activeProduct
const stars = []
for(let i = 0; i < 5 ; i++) {
diff --git a/src/components/ProductSlider/ProductSlider.jsx b/src/components/ProductSlider/ProductSlider.jsx
index 6180f39..ae2c2fc 100644
--- a/src/components/ProductSlider/ProductSlider.jsx
+++ b/src/components/ProductSlider/ProductSlider.jsx
@@ -10,7 +10,6 @@ import 'swiper/css/navigation';
import 'swiper/css/scrollbar';
import './swiper.css';
import { useDispatch } from 'react-redux';
-import { setProduct } from '../../features/products/productDetailSlice';
import { Link } from 'react-router-dom';
const ProductSlider = ({products, category}) => {
@@ -62,7 +61,7 @@ const ProductSlider = ({products, category}) => {
{products.map(({title, id, image, category, price, description, rating: {rate, count}}) => (
{
- dispatch(setProduct({title, id, image, category, price, description, rating: {rate, count}}))
+ localStorage.setItem('activeProduct', JSON.stringify({title, id, image, category, price, description, rating: {rate, count}}))
window.scrollTo(0, 0)
}}>
diff --git a/src/components/Products/ProductItem.jsx b/src/components/Products/ProductItem.jsx
index 609e578..712d4e4 100644
--- a/src/components/Products/ProductItem.jsx
+++ b/src/components/Products/ProductItem.jsx
@@ -1,20 +1,17 @@
-import { IoMdCart } from 'react-icons/io';
import { AiFillStar } from 'react-icons/ai';
-import { useDispatch } from 'react-redux';
-import { addItem } from '../../features/cart/cartSlice';
import { Link } from 'react-router-dom';
-import { setProduct } from '../../features/products/productDetailSlice';
function ProductItem({title, id, image, category, price, description, rating: {rate, count}}) {
- const dispatch = useDispatch()
const stars = []
for(let i = 0; i < 5 ; i++) {
stars.push()
}
+
+ const productItem = {title, id, image, category, price, description, rating: {rate, count}}
return (
- dispatch(setProduct({title, id, image, category, price, description, rating: {rate, count}}))}>
+ localStorage.setItem('activeProduct', JSON.stringify(productItem))}>
{title}
@@ -26,8 +23,7 @@ function ProductItem({title, id, image, category, price, description, rating: {r
({count})
- dispatch(setProduct({title, id, image, category, price, description, rating: {rate, count}}))}>See more
+ localStorage.setItem('activeProduct', JSON.stringify(productItem))}>See more
diff --git a/src/features/products/productDetailSlice.js b/src/features/products/productDetailSlice.js
deleted file mode 100644
index 00e892d..0000000
--- a/src/features/products/productDetailSlice.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-
-const activeProduct = JSON.parse(localStorage.getItem('activeProduct'));
-const productsSlice = createSlice({
- name: 'products',
- initialState: {
- value: activeProduct ? activeProduct : {}
- },
- reducers: {
- setProduct: (state, action) => {
- state.value = {...action.payload}
- localStorage.setItem('activeProduct', JSON.stringify(state.value))
- },
-
- },
-})
-
-export default productsSlice.reducer
-export const {setProduct} = productsSlice.actions
diff --git a/src/features/store.js b/src/features/store.js
index 30d7a29..f30c2c4 100644
--- a/src/features/store.js
+++ b/src/features/store.js
@@ -2,13 +2,11 @@ import { configureStore } from "@reduxjs/toolkit";
import productsSlice from "./products/productsSlice";
import cartSlice from './cart/cartSlice';
import logger from "redux-logger";
-import productDetailSlice from "./products/productDetailSlice";
const store = configureStore({
reducer: {
products: productsSlice,
cart: cartSlice,
- productDetails: productDetailSlice
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger)
})
|