From a62e2eadc099bfcd3698e6e3319fa9c38a75d6ab Mon Sep 17 00:00:00 2001
From: robin-dc <robindelacruz725@gmail.com>
Date: Tue, 19 Sep 2023 09:19:07 +0800
Subject: [PATCH] removed product detail slice

---
 src/components/Cart/CartItem.jsx              | 12 +++++++++---
 .../ProductDetails/ProductDetails.jsx         |  9 +++++----
 .../ProductSlider/ProductSlider.jsx           |  3 +--
 src/components/Products/ProductItem.jsx       | 12 ++++--------
 src/features/products/productDetailSlice.js   | 19 -------------------
 src/features/store.js                         |  2 --
 6 files changed, 19 insertions(+), 38 deletions(-)
 delete mode 100644 src/features/products/productDetailSlice.js

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 (
         <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>
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}}) => (
                 <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]"/>
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(<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>
 
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)
 })