Wishlist Functionality using Redux Toolkit in React

// Wishlist/index.jsx

import { useSelector } 
	from "react-redux"
import RenderwishlistItems 
	from "./RenderWishlistItems"

export default function Wishlist() {
	const {total, totalItems} = 
		useSelector((state) => state.wishlist) 
	return (
		<div >
			<h1>Your wishlist</h1>
			<p >{totalItems} Items in wishlist</p>
			{
				total>0 
				? (
					<div >
						<RenderwishlistItems /> 
					</div>
				)
				: (
					<p>Your wishlist is empty</p>
				)
			}
		</div>
	)
}

// Wishlist/RenderWishlistItems.jsx

import React from 'react'
import { useDispatch, useSelector } 
	from 'react-redux'
import {RiDeleteBin6Line} 
	from "react-icons/ri"
import { removeFromWishlist } from '../Slices/WishlistSlice'

export default function RenderWishlistItems() {
	const {wishlist} = useSelector((state) => state.wishlist)
	const dispatch = useDispatch(); 

return (
	<div> 
		{
			wishlist.map((dataObj, index) => (
				<div 
					key={index} 
					className=
						{
							`flex w-full flex-wrap 
							items-start justify-between gap-6 
						${index !== wishlist.length - 1 && 
							"border-b border-b-richblack-400 pb-6"} 
						${index !== 0 && "mt-6"} `
					}>
					<div>
						<div>
							{dataObj.title}
						</div>
						<img src={dataObj.image} 
							width={200} height={150}
							alt="" />
						<p>
							{dataObj.description}
						</p>
					</div>

					<div>
						<button 
							onClick={
								() => 
									dispatch(removeFromWishlist(dataObj._id))
							}>
							Remove from wishlist 
							<RiDeleteBin6Line size={20}/> 
						</button> 
					</div>
				</div>
			))
		}
	</div>
)
}

// Components/Product_card.jsx

import React from 'react'
import { addToWishlist } 
	from '../Slices/WishlistSlice';
import { useDispatch } from 'react-redux'; 
import { CiHeart } from "react-icons/ci";

const Product_card = ({ dataObj }) => {
	const dispatch = useDispatch();

	const handleAddToWishlist = 
	() => {
		console.log("dispatching add to Wishlist")
		dispatch(addToWishlist(dataObj)); 
		return;
	}

	return (
		<div
			style={{
				display: 'flex',
				flexWrap: 'wrap',
				gap: '70px',
				justifyContent: 'space-around',
				marginTop: '70px'
			}}>
			<div
				style={{
					width: "15em",
					backgroundColor: "#35D841",
					padding: 2,
					borderRadius: 10,
					marginBlock: 10,
				}}>
				<p style={{ fontSize: 20, color: 'black' }}>
					{dataObj.title}
				</p>
				<img src={dataObj.image} alt=""
					height={200} width={200} 
					style={{
						borderRadius: "15px",
					}}/>
				<p>{dataObj.description}</p>
					
				<CiHeart 
					onClick={handleAddToWishlist} 
					size={35} color='white'/>
					
			</div>
		</div>
	)
}

export default Product_card

// Pages/Home.jsx

import React, 
{ useEffect, useState } from 'react'
import { FaHeart } 
	from "react-icons/fa";
import { Link } 
	from 'react-router-dom';
import Product_card 
	from '../Components/Product_card';

const items = [
	{
	"id": 1,
	"title": "GeeksForGeeks bag",
	"price": 109.95,
	"description": "Your perfect pack for everyday use and walks in the forest.",
	"category": "bag",
	"image": 
"https://practice.geeksforgeeks.org/_next/image?url=https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fmedia.geeksforgeeks.org%2Fimg-practice%2FMaskGroup31-1651641966.png&w=640&q=75",
	"rating": {
		"rate": 3.9,
		"count": 120
	}
	},
	{
	"id": 2,
	"title": "GeeksForGeeks tshirt",
	"price": 22.3,
	"description": "Slim-fitting style,black tshirt. From geeksforgeeks",
	"category": "men's clothing",
	"image": 
"https://practice.geeksforgeeks.org/_next/image?url=https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fmedia.geeksforgeeks.org%2Fimg-practice%2FGroup7895-1651644285.png&w=640&q=75",
	"rating": {
		"rate": 4.1,
		"count": 259
	}, 
	},
	{
		"id": 3,
		"title": "GeeksForGeeks bag",
		"price": 109.95,
		"description": "Your perfect pack for everyday use and walks in the forest.",
		"category": "bag",
		"image": 
"https://practice.geeksforgeeks.org/_next/image?url=https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fmedia.geeksforgeeks.org%2Fimg-practice%2FMaskGroup31-1651641966.png&w=640&q=75",
		"rating": {
		"rate": 3.9,
		"count": 120
		}
	},
]

const Home = () => { 
	return (
		<div>
			<Link to={"/wishlist"}>
				<FaHeart size={40} color="#35D841" />
			</Link>
			<div
				style={{
					display: 'Flex',
					justifyContent: 'space-around',
				}}>
				{items.map((dataObj, index) => {
					return (
						<Product_card dataObj={dataObj} />
					)
				})}
			</div>
		</div>
	)
}

export default Home

// Reducer/index.jsx

import { combineReducers } from "@reduxjs/toolkit";
import wishlistReducer from "../Slices/WishlistSlice"

const rootReducer = combineReducers({ 
	wishlist: wishlistReducer, 
})

export default rootReducer

// Slices/WishlistSlice.jsx

import { createSlice } from "@reduxjs/toolkit";
import { toast } from "react-hot-toast";

const initialState = {
	wishlist: localStorage.getItem("wishlist")
		? JSON.parse(localStorage.getItem("wishlist"))
		: [],
	total: localStorage.getItem("total")
		? JSON.parse(localStorage.getItem("total"))
		: 0,
	totalItems: localStorage.getItem("totalItems")
		? JSON.parse(localStorage.getItem("totalItems"))
		: 0,
}

const wishlistSlice = createSlice({
	name: "wishlist",
	initialState,
	reducers: { 
		addToWishlist: (state, action) => {
			const item = action.payload 
			state.wishlist.push(item) 
			state.totalItems++
			state.total += item.price 
			localStorage
				.setItem("wishlist", JSON.stringify(state.wishlist))
			localStorage
				.setItem("total", JSON.stringify(state.total))
			localStorage
				.setItem("totalItems", JSON.stringify(state.totalItems)) 
			toast.success("Item added to wishlist")
		},
		
		removeFromWishlist: (state, action) => {
			const itemId = action.payload
			const index = 
				state.wishlist
					.findIndex(
						(item) => item._id === itemId)

			if (index >= 0) {
				
				state.totalItems--
				state.total -= state.wishlist[index].price
				state.wishlist.splice(index, 1) 
				localStorage
					.setItem("wishlist", JSON.stringify(state.wishlist))
				localStorage
					.setItem("total", JSON.stringify(state.total))
				localStorage
					.setItem("totalItems", JSON.stringify(state.totalItems)) 
				toast
					.success("Item removed from wishlist")
			}
		},
	}
})

export const 
{ 
addToWishlist, resetWishlist, 
removeFromWishlist 
} = wishlistSlice.actions
export default wishlistSlice.reducer;

// App.js

import './App.css'; 
import { Route, Routes } 
	from "react-router-dom";
import Wishlist from "./Wishlist/index"
import Home from "./Pages/Home";

function App() { 
return (
	<div className="App">
	<Routes>
		<Route path="/wishlist"
			element={<Wishlist />} />
		<Route path="/" element={<Home />} />
	</Routes>
	</div>
);
}

export default App;

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import rootReducer from './Reducer';
import { Provider } from "react-redux";
import {configureStore} from "@reduxjs/toolkit"
import { BrowserRouter } from 'react-router-dom';
import { Toaster } from 'react-hot-toast';

const store = configureStore({
reducer: rootReducer,
})

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
	<Provider store={store}> 
	<BrowserRouter>
		<App />
		<Toaster/>
	</BrowserRouter> 
	</Provider>
</React.StrictMode>
);

reportWebVitals();