removed product detail slice

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 (
         <tr className="grid grid-cols-4 text-left mt-[2rem] lg:px-[1.5rem] gap-[0.5rem] lg:gap-[1rem]">
             <td className="col-span-1 lg:col-span-2">
                 <Link to={`/cart/${id}`} className='flex flex-col lg:flex-row items-center gap-[0.5rem] lg:gap-[3rem]'
-                onClick={() => dispatch(setProduct({title, id, image, category, price, description, rating: {rate, count}}))}
+                onClick={() => setItem(id)}
                 >
                     <img src={image} alt="" className="h-[4rem] w-[3rem] lg:w-[5rem] lg:h-[6rem] "/>
                     <div>

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++) {

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}}) => (
                 <SwiperSlide  className='px-[1rem] cursor-pointer' key={id}>
                     <Link to={`/products/${id}`} onClick={() => {
-                        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)
                     }}>
                         <img src={image} alt="" className="w-fit lg:w-fit mx-auto h-[7rem] lg:h-[12rem] mb-[0.5rem]"/>

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(<span key={i} className="text-[#febd69] text-[0.8rem] lg:text-[1rem]"><AiFillStar/></span>)
     }
+
+    const productItem = {title, id, image, category, price, description, rating: {rate, count}}
     return (
         <div className="p-[1rem] pt-[1.5rem] lg:p-[2rem] lg:pt-[2rem] lg:pb-[1rem] bg-white drop-shadow-2xl relative">
-            <Link to={`/products/${id}`} onClick={() => dispatch(setProduct({title, id, image, category, price, description, rating: {rate, count}}))}>
+            <Link to={`/products/${id}`} onClick={() => localStorage.setItem('activeProduct', JSON.stringify(productItem))}>
                 <img src={image} alt="" className="w-[6rem] lg:w-[10rem] mx-auto h-[7rem] lg:h-[12rem]"/>
             </Link>
             <h3 className="text-[0.8rem] lg:text-[1rem] font-semibold mt-[1rem] truncate">{title}</h3>
@@ -26,8 +23,7 @@ function ProductItem({title, id, image, category, price, description, rating: {r
                 <small className="ml-[4px] text-gray-400 text-[0.7rem] lg:text-[0.8rem]">({count})</small>
             </div>
             <div className='flex justify-end mt-[1rem]'>
-                <Link to={`/products/${id}`} className="text-[#232f3e] underline lg:no-underline font-semibold text-[0.7rem] lg:text-[0.8rem] active:scale-[0.95] hover:underline"
-            onClick={() => dispatch(setProduct({title, id, image, category, price, description, rating: {rate, count}}))}>See more
+                <Link to={`/products/${id}`} className="text-[#232f3e] underline lg:no-underline font-semibold text-[0.7rem] lg:text-[0.8rem] active:scale-[0.95] hover:underline" onClick={() => localStorage.setItem('activeProduct', JSON.stringify(productItem))}>See more
             </Link>
             </div>
 

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)
 })