Develop Reference

How can I toggle one icon which triggers the disabling of another icon in React?

I am developing an app with react and redux toolkit. I am using an API. the part that I would like help with is this:
I have a favorite Icon. this icon takes a copy of the movie and displays it in the favorite section. There is another icon which is for watched movies. so the idea is that if I click on watched it should disable only the favorite icon of the movie card I clicked. however, it disables all favorite icons for all movie cards. The watched icon is referred to as Eye the favorite icon is referred to as star
This is the eye component (Watched)
import { useState } from "react";
import { BsEyeSlash, BsEyeFill } from "react-icons/bs";
import { useDispatch, useSelector } from "react-redux";
import {
add_watched,
remove_watched,
add_occupied,
remove_occupied,
} from "../features/animeSlice";
const Eye = ({ anime, type }) => {
const [active_eye, setActive_eye] = useState(false);
const dispatch = useDispatch();
const toggle_eye = () => {
if (!active_eye) {
setActive_eye((prev) => {
return !prev;
});
dispatch(add_watched(anime));
dispatch(add_occupied(type));
} else {
setActive_eye((prev) => {
return !prev;
});
dispatch(remove_watched(anime?.mal_id));
dispatch(remove_occupied());
}
};
return (
<div>
{!active_eye ? (
<BsEyeSlash
className="text-xl text-green-500 icons_1"
onClick={toggle_eye}
/>
) : (
<BsEyeFill
className={"text-xl text-red-500 icons_1"}
onClick={toggle_eye}
/>
)}
</div>
);
};
export default Eye;
This is the Star Component (Favorite)
import { useState } from "react";
import { AiOutlineStar, AiFillStar } from "react-icons/ai";
import { add_favourite, remove_favourite } from "../features/animeSlice";
import { useDispatch, useSelector } from "react-redux";
const Star = ({ anime }) => {
const { value} = useSelector((state) => state.anime);
const [active_star, setActive_star] = useState(false);
const dispatch = useDispatch();
const toggle_star = () => {
if (!active_star) {
setActive_star((prev) => {
return !prev;
});
dispatch(add_favourite(anime));
} else {
setActive_star((prev) => {
return !prev;
});
dispatch(remove_favourite(anime?.mal_id));
}
};
return (
<div>
{!active_star ? (
<AiOutlineStar
className={
value === "occupied"
? "text-xl text-gray-300 pointer-events-none"
: "text-xl text-yellow-500 icon_1"
}
onClick={toggle_star}
/>
) : (
<AiFillStar
className={
value === "occupied"
? "text-xl text-gray-300 pointer-events-none"
: "text-xl text-yellow-500 icon_1"
}
onClick={toggle_star}
/>
)}
</div>
);
};
export default Star;
this is the redux toolkit slice
import { createSlice } from "#reduxjs/toolkit";
const initialState = {
favourite: [],
watched: [],
value: "",
page:""
};
const animeSlice = createSlice({
name: "anime",
initialState,
reducers: {
add_favourite(state, { payload }) {
state.favourite.push(payload);
},
remove_favourite(state, { payload }) {
state.favourite = state.favourite.filter(
(anime) => anime?.mal_id !== payload
);
},
add_watched(state, { payload }) {
state.watched.push(payload);
},
remove_watched(state, { payload }) {
state.watched = state.watched.filter((anime) => anime?.mal_id !== payload);
},
add_occupied(state, { payload }) {
state.value = payload;
},
remove_occupied(state) {
state.value = "";
},
pageNumber(state, { payload }) {
state.page = payload
}
},
});
export const {
add_favourite,
remove_favourite,
add_watched,
remove_watched,
add_occupied,
remove_occupied,
pageNumber
} = animeSlice.actions;
export default animeSlice.reducer;
This is the component that holds the component of eye and star
import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Eye from "./Eye";
import Star from "./Star";
const TopAnime = ({ anime }) => {
//pagination
//
//
let colorYear = (year) => {
if (year === "N/A") {
return "text-violet-500";
} else {
return "";
}
};
return (
<section className="grand px-4 pt-2 pb-5 w-64 bg-white/5 bg-opacity-80 backdrop-blur-sm rounded-lg cursor-pointer font-poppins animate-slideup">
<div className="pb-1 wrapper_icons">
<div className="wrapper_hover">
<Eye anime={anime} type="occupied" />
<Star anime={anime} />
</div>
</div>
<Link to={`/anime/${anime?.mal_id}`}>
<div className="wrapper_1 flex flex-col items-center justify-center">
<div className="h-[313px] w-[219px]">
<img
src={anime?.images?.jpg?.large_image_url}
alt={anime?.title}
className="h-full w-full"
/>
</div>
</div>
<div className="flex flex-col mt-3">
<p className="text-sm text-white truncate mx-1">
{anime?.title_english ? anime?.title_english : anime?.title}
</p>
<div className="flex justify-between items-center text-sm text-yellow-500 mx-1">
<p className={colorYear(anime?.year ? anime?.year : "N/A")}>
{anime?.year ? anime?.year : "N/A"}
</p>
<p
className={
anime?.score <= 7
? "text-cyan-500"
: anime?.score <= 5
? "text-red-600"
: "text-green-500"
}
>
{anime?.score}
</p>
</div>
</div>
</Link>
</section>
);
};
export default TopAnime;
This is where TopAnime is rendered
import { useGetAnimeQuery } from "../features/API";
import { useDispatch, useSelector } from "react-redux";
import { useState, useEffect } from "react";
import TopAnime from "../components/TopAnime";
import Spinner from "../components/Spinner";
import { NavLink, Link } from "react-router-dom";
import Paginator from "../components/Paginator";
//import ReactPaginate from "react-paginate";
import Pagination from "#mui/material/Pagination";
const Home = () => {
const [page, setPage] = useState(1);
const {
data: manga = [],
isLoading,
isFetching,
error,
} = useGetAnimeQuery(page);
const { data, pagination } = manga;
//destructuring objects
//const { data, pagination } = manga;
//const top_anime = data;
const total = Math.ceil(pagination?.items?.total / 24)
//const current_page = pagination?.current_page;
//const per_page = pagination?.items?.per_page;
//const { items: pages } = total;
/* let fetchData = async (page = 1) => {
let res = await fetch(
`https://api.jikan.moe/v4/top/anime?page=${page}&limit=24`
);
let query = await res.json();
const { data, pagination } = query;
let totalPages = Math.ceil(pagination?.items.total / 24);
setPageCount(totalPages);
setData(data);
};
useEffect(() => {
fetchData();
}, []);
*/
import { useGetAnimeQuery } from "../features/API";
import { useDispatch, useSelector } from "react-redux";
import { useState, useEffect } from "react";
import TopAnime from "../components/TopAnime";
import Spinner from "../components/Spinner";
import { NavLink, Link } from "react-router-dom";
import Paginator from "../components/Paginator";
//import ReactPaginate from "react-paginate";
import Pagination from "#mui/material/Pagination";
const Home = () => {
const [page, setPage] = useState(1);
const {
data: manga = [],
isLoading,
isFetching,
error,
} = useGetAnimeQuery(page);
const { data, pagination } = manga;
//destructuring objects
//const { data, pagination } = manga;
//const top_anime = data;
const total = Math.ceil(pagination?.items?.total / 24)
//const current_page = pagination?.current_page;
//const per_page = pagination?.items?.per_page;
//const { items: pages } = total;
/* let fetchData = async (page = 1) => {
let res = await fetch(
`https://api.jikan.moe/v4/top/anime?page=${page}&limit=24`
);
let query = await res.json();
const { data, pagination } = query;
let totalPages = Math.ceil(pagination?.items.total / 24);
setPageCount(totalPages);
setData(data);
};
useEffect(() => {
fetchData();
}, []);
*/
const handleChange = (event, value) => {
setPage(value);
};
const display = data?.map((anime) => (
<TopAnime anime={anime} key={anime.mal_id} />
));
//const pageCount = Math.ceil(pagination?.items?.total / 24);
if (isLoading) {
return <Spinner color_1={"#141e30"} color_2={"#243b55"} />;
} else if (isFetching) {
return <Spinner color_1={"#141e30"} color_2={"#243b55"} />;
} else if (error) {
console.log("ERROR =>", error.message);
}
return (
<section className="bg-gradient-to-r from-[#141e30] to-[#243b55]">
<div className="container font-poppins">
<div className="grid grid-cols-4 gap-3 place-items-center px-20">
{/* {top_anime &&
top_anime?.map((anime) => (
<TopAnime anime={anime} key={anime.mal_id} />
))} */}
{display}
</div>
<div className="button text-yellow-500 flex items-center justify-center mt-2 pb-2 cursor-pointer">
{/* <Paginator paginated={paginated} NumP={pagination?.last_visible_page} /> */}
{/* <ReactPaginate
previousLabel={"Previous"}
nextLabel={"Next"}
onPageChange={(page) => fetchData(page.selected + 1)}
pageCount={pageCount}
className="flex space-x-2"
activeClassName="active"
/> */}
<Pagination count={total} page={page} onChange={handleChange} defaultPage={1} boundaryCount={3} color="secondary" sx={{button:{color:'#ffffff'}}} />
</div>
</div>
</section>
);
};
export default Home;

Issue
The issue with the code/current implementation is that there is only one state.anime.value and one "occupied" value. Each time a movie's "watched" status is toggled the Redux state sets/unsets the single state.anime.value state. In other words, you can toggle N movies "watched" and the state.anime.value value is "occupied", but then toggling just 1 movie back to "unwatched" and state.anime.value is reset back to "". All the Star components read this single state value and this is why the stars all toggle together.
Solution
If you want a specific movie to toggle the Star component when the Eye icon is toggled then I think the solution is a bit simpler than you are making it out to be in your code.
The "eye" and "star" components effectively duplicate your Redux state and don't synchronize well with it. It's often considered a React anti-pattern to duplicate state. The state.anime.favourite and state.anime.watched arrays are all the app needs to know what has been marked "watched" and what has been favourited.
Update the animeSlice to store the anime.mal_id properties in objects instead of arrays to provide O(1) lookup in the UI. Remove the anime.value state as it's unnecessary.
animeSlice.js
import { createSlice } from "#reduxjs/toolkit";
const initialState = {
favourite: {},
watched: {},
page: ""
};
const animeSlice = createSlice({
name: "anime",
initialState,
reducers: {
add_favourite(state, { payload }) {
state.favourite[payload] = true;
},
remove_favourite(state, { payload }) {
delete state.favourite[payload];
},
add_watched(state, { payload }) {
state.watched[payload] = true;
delete state.favourite[payload]; // un-star when adding as watched
},
remove_watched(state, { payload }) {
delete state.watched[payload];
},
pageNumber(state, { payload }) {
state.page = payload;
}
}
});
export const {
add_favourite,
remove_favourite,
add_watched,
remove_watched,
pageNumber
} = animeSlice.actions;
export default animeSlice.reducer;
Update the Eye and Star components to read the true state from the store. These components should pass anime.mal_id to the dispatched actions and use anime.mal_id to check the watched/favourites map objects.
Eye
import { BsEyeSlash, BsEyeFill } from "react-icons/bs";
import { useDispatch, useSelector } from "react-redux";
import { add_watched, remove_watched } from "../features/animeSlice";
const Eye = ({ anime }) => {
const dispatch = useDispatch();
const { watched } = useSelector((state) => state.anime);
const isWatched = watched[anime.mal_id];
const toggle_eye = () => {
dispatch((isWatched ? remove_watched : add_watched)(anime.mal_id));
};
const Eye = isWatched ? BsEyeFill : BsEyeSlash;
const className = [
"text-xl icons_1",
isWatched ? "text-green-500" : "text-red-500"
].join(" ");
return (
<div>
<Eye className={className} onClick={toggle_eye} />
</div>
);
};
export default Eye;
Star
import { AiOutlineStar, AiFillStar } from "react-icons/ai";
import { add_favourite, remove_favourite } from "../features/animeSlice";
import { useDispatch, useSelector } from "react-redux";
const Star = ({ anime }) => {
const { favourite, watched } = useSelector((state) => state.anime);
const dispatch = useDispatch();
const isFavorited = favourite[anime.mal_id];
const isWatched = watched[anime.mal_id];
const toggle_star = () => {
dispatch((isFavorited ? remove_favourite : add_favourite)(anime.mal_id));
};
const Star = isFavorited ? AiFillStar : AiOutlineStar;
const className = [
"text-xl",
isWatched ? "text-gray-300 pointer-events-none" : "text-yellow-500 icon_1"
].join(" ");
return (
<div>
<Star className={className} onClick={toggle_star} />
</div>
);
};
export default Star;

“\n\n” not being recognized from Array

I currently have a <textarea/> field that when you press enter it submits and makes a new item on the array. When you press shift + enter it creates a new line in the <textarea/> input field.
However, when you actually press shift and enter to make a new break and submit it; it does not recognize the break in the line. I have attached images below.
As you can see above, its like the array does not recognize there is a break in the input.
Todobox.jsx:
import React, { createContext } from 'react';
import Item from './Item';
import { useState, useContext } from 'react';
import '../App.css';
import trash from '../trash_can.png'
import { ElementContext } from '../ElementContext';
export const ItemContext = createContext();
export const ItemContextProvider = ({ children }) => {
const [items, setItems] = useState([]);
const [itemId, setItemId] = useState(1);
const [itemData, setItemData] = useState();
const [refDict, setRefDict] = useState({});
const newItemId = (items) =>{
setItemId(itemId + 1);
console.log(itemId)
}
const newItem = (itemChange, boxid) => {
newItemId();
if (!refDict[itemId]) {
setItems(prev => [...prev, { itemboxid: boxid, itemdata: itemChange, itemid: itemId }]);
setRefDict((prev) => ({...prev, [itemId]: true}));
}
console.log(items);
};
const value = {
items,
setItems,
newItem,
itemId
};
return(
<ItemContext.Provider value={value}>
{children}
</ItemContext.Provider>
)
};
export default function Todobox({ boxtitle, boxid }){
const { elements, setElements, newTitle } = useContext(ElementContext);
const { items, setItems, newItem } = useContext(ItemContext);
const [boxheader, setBoxHeader] = useState('');
const [itemChange, setItemChange] = useState('');
const handleChange = (e) => {
setBoxHeader(e.target.value);
}
const handleKeydown = (e) => {
if(e.keyCode == 13 && e.shiftKey == false){
setElements(elements.map(element => {
if (element.boxid === boxid) {
setBoxHeader(e.target.value)
return { ...element, boxtitle: boxheader };
} else {
return element;
}
}))
e.preventDefault();
alert('Title has been set to: ' + boxheader);
}
}
const handleDelete = (e) => {
setElements(elements.filter(element => element.boxid !== boxid))
}
const handleItemChange = (e) =>{
setItemChange(e.target.value);
}
const handleNewItem = (e) =>{
if(e.keyCode == 13 && e.shiftKey == false){
newItem(itemChange, boxid)
e.preventDefault();
e.target.value = '';
}
}
return(
<>
<div className='element-box'>
<img src={trash} className='element-box-trash' onClick={handleDelete}></img>
<textarea className='element-title-input' placeholder='Add title...' onChange={handleChange} onKeyDown={handleKeydown} value={boxheader}></textarea>
{items.map(item => {
if(item.itemboxid === boxid){
return <Item key={item.itemid} itemid={item.itemid} itemdata={item.itemdata}/>;
} else if(item.itemboxid !== boxid){
return null;
}
})}
<textarea
className='element-input'
type='text'
placeholder={`Add item... ${boxid}`}
onChange={handleItemChange}
onKeyDown={handleNewItem}
onClick={() => {console.log(boxid)}}
/>
</div>
</>
)
}
Item.jsx:
import React, { useContext } from 'react';
import '../App.css';
import { ElementContext } from '../ElementContext';
import { ItemContext } from './Todobox';
export default function Item({ itemid, itemdata }){
const { setHideModal, modals, setModals } = useContext(ElementContext);
const handleNewModal = () => {
setHideModal(false)
setModals(prev => [...prev, { modalItemId: itemid, modalId: '1', modalData: itemdata }]);
console.log(modals);
};
return(
<div className='item-container' onClick={handleNewModal}>
<a className='item-text'>{itemdata}</a>
</div>
)
}
Item-input css:
.item-text {
padding: 2px;
opacity: 1;
word-wrap: break-word;
}
Any help would be appreciated, thank you in advanced! :)

#caTS answered my question in a comment.
I had to add white-space: pre-wrap to my CSS.

Error in Cart Page while updating product quantity

Please help me with my REACT problem. On the cart page, while I try to increase the quantity or decrease the number of quantity products, I get this type of error. I have attached the error in the Image. Please see the Image.
Here's My Code:
Cart.js. Trying to update the product quantity on the cart page. But getting errors as you see in the picture.
import React, { Fragment } from 'react';
import "./Cart.css";
import CartItemCard from "./CartItemCard";
import { useSelector, useDispatch } from 'react-redux'
import { addItemsToCart } from '../../action/cartAction';
const Cart = () => {
const dispatch = useDispatch();
const { cartItems } = useSelector((state) => state.cart);
const increaseQuantity = (id, quantity, stock) => {
const newQty = quantity + 1 ;
if(stock <= quantity) {
return;
}
dispatch(addItemsToCart(id, newQty));
};
const decreaseQuantity = (id, quantity) => {
const newQty = quantity - 1 ;
if (1 >= quantity) {
return;
}
dispatch(addItemsToCart(id, newQty));
};
return (
<Fragment>
<div className="cartPage">
<div className="cartHeader">
<p>Product</p>
<p>Quantity</p>
<p>Subtotal</p>
</div>
{cartItems && cartItems.map((item) => (
<div className="cartContainer" key={item.product} >
<CartItemCard item={item} />
<div className="cartInput">
<button onClick={() => decreaseQuantity(item.product, item.quantity)} > - </button>
<input type="number" readOnly value={item.quantity} />
<button onClick={() => increaseQuantity(item.product, item.quantity, item.stock)} > + </button>
</div>
<p className="cartSubtotal">{`$${item.price*item.quantity}`}</p>
</div>
))}
<div className="cartGrossTotal">
<div></div>
<div className="cartGrossTotalBox">
<p>Gross Total</p>
<p>{`$600`}</p>
</div>
<div></div>
<div className="checkOutBtn">
<button>Check Out</button>
</div>
</div>
</div>
</Fragment>
);
};
export default Cart;
Here's the Action:
cartAction.js
import {ADD_TO_CART} from "../constants/cartConstants";
import axios from "axios";
export const addItemsToCart = (id, quantity) => async (dispatch,getState) => {
const { data } = await axios.get(`/api/v1/product/${id}`);
dispatch({
type: ADD_TO_CART,
payload: {
product: data.product._id,
name: data.product.name,
price: data.product.price,
image: data.product.images[0].url,
stock: data.product.Stock,
quantity,
},
});
localStorage.setItem("cartItems",JSON.stringify(getState().cart.cartItems));
};
Cart Reducer Code.
CartReducer:
import {ADD_TO_CART} from "../constants/cartConstants";
export const cartReducer = (state = { cartItems: [] }, action ) => {
switch (action.type) {
case ADD_TO_CART:
const item = action.payload;
const isItemExist = state.cartItems.find(
(i) => i.product === item.product
);
if(isItemExist) {
return {
...state,
cartItems: state.cartItems.map((i) =>
i.product === isItemExist.product ? true : i
),
};
} else {
return{
...state,
cartItems: [...state.cartItems, item],
};
}
default:
return state;
}
};
React Store.
Store:
import { createStore,combineReducers,applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "#redux-devtools/extension";
import { productDetailsReducer, producReducer } from "./reducers/productReducer";
import { forgotPasswordReducer, profileReducer, userReducer } from "./reducers/userReducer";
import { cartReducer } from "./reducers/cartReducer";
const reducer = combineReducers({
products: producReducer,
productDetails: productDetailsReducer,
user: userReducer,
profile: profileReducer,
forgotPassword: forgotPasswordReducer,
cart: cartReducer,
});
let initialState = {
cart: {
cartItems: localStorage.getItem("cartItems")
? JSON.parse(localStorage.getItem("cartItems"))
: [],
}
};
const middleware = [thunk]
const store = createStore(
reducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware)
));
export default store;

Thanks, everyone for your comments and view.
I got the solution. Here's in the CartReducer code I added true instead of the item. this is the solution. Thank you.
if(isItemExist) {
return {
...state,
cartItems: state.cartItems.map((i) =>
i.product === isItemExist.product ? item : i
),
}
};

Issue with Increment and Decrement Component

I'm pretty new to react, and I am trying to make an Increment and decrement component in in my cart screen. The issue that I'm having is that I'm struggling to get it to work and to only add as many items as are contained within the countInStock stored in my database.
Below, I have included what i have so far. I would really appreciate any help or advice on how to do this.
Note: The handlers associated with the increment and decrement component are removeItemFromCart and addToCart
CartScreen.js
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { addToCart, removeFromCart, removeItemFromCart } from '../actions/cartActions';
import MessageBox from '../components/MessageBox';
export default function CartScreen(props) {
const productId = props.match.params.id;
const qty = props.location.search
? Number(props.location.search.split('=')[1])
: 1;
const cart = useSelector((state) => state.cart);
const { cartItems } = cart;
const dispatch = useDispatch();
const addToCartHandler = (productId, qty) =>{
useEffect(() => {
if (productId && countInStock > qty) {
dispatch(addToCart(productId, qty));
}
}, [dispatch, productId, qty]);
}
const removeItemFromCartHandler = (id) => {
dispatch(removeItemFromCart(id));
};
const removeFromCartHandler = (id) => {
// delete action
dispatch(removeFromCart(id));
};
const checkoutHandler = () => {
props.history.push('/signin?redirect=shipping');
};
return (
<div className="row top">
<div className="col-2">
<h1>Shopping Cart</h1>
{cartItems.length === 0 ? (
<MessageBox>
Cart is empty. <Link to="/body">Go Shopping</Link>
</MessageBox>
) : (
<ul>
{cartItems.map((item) => (
<li key={item.product}>
<div className="row">
<div className="min-30">
<Link to={`/product/${item.product}`}>{item.name}</Link>
</div>
<div>
<button
onClick={() =>
addToCartHandler(item, item.qty - 1)
}
variant="light"
disabled={item.qty === 1}
>
<i className="fas fa-minus-circle"></i>
</button>{' '}
<span>{item.qty}</span>{' '}
<button
variant="light"
onClick={() =>
removeItemFromCartHandler(item, item.qty + 1)
}
disabled={item.qty === item.countInStock}
>
<i className="fas fa-plus-circle"></i>
</button>
</div>
<div>
<button
type="button"
onClick={() => removeFromCartHandler(item.product)}
>
Delete
</button>
</div>
</div>
</li>
))}
</ul>
)}
</div>
</div>
);
}
CartActions.js
import Axios from 'axios';
import {
CART_ADD_ITEM,
CART_REMOVE_ITEM,
CART_REMOVER_ITEM,
CART_SAVE_SHIPPING_ADDRESS,
CART_SAVE_PAYMENT_METHOD,
} from '../constants/cartConstants';
export const addToCart = (productId, qty) => async (dispatch, getState) => {
const { data } = await Axios.get(`/api/products/${productId}`);
dispatch({
type: CART_ADD_ITEM,
payload: {
name: data.name,
image: data.image,
price: data.price,
profit: data.profit,
countInStock: data.countInStock,
product: data._id,
seller: data.seller,
qty,
},
});
localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems));
};
export const removeItemFromCart = (productId) => (dispatch, getState) => {
dispatch({ type: CART_REMOVER_ITEM, payload: productId });
localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems));
};
CartReducers.js
import {
CART_ADD_ITEM,
CART_EMPTY,
CART_REMOVE_ITEM,
CART_REMOVER_ITEM,
CART_SAVE_PAYMENT_METHOD,
CART_SAVE_SHIPPING_ADDRESS,
} from '../constants/cartConstants';
export const cartReducer = (state = { cartItems: [] }, action) => {
switch (action.type) {
case CART_ADD_ITEM:
const item = action.payload;
const existItem = state.cartItems.find((x) => x.product === item.product);
if (existItem) {
return {
...state,
cartItems: state.cartItems.map((x) =>
x.product === existItem.product ? item : x
),
};
} else {
return { ...state, cartItems: [...state.cartItems, item] };
}
case CART_REMOVE_ITEM:
return {
...state,
cartItems: state.cartItems.filter((x) => x.product !== action.payload),
};
case CART_REMOVER_ITEM:
return {
...state,
cartItems: state.cartItems.filter((x) => x.product !== action.payload),
};
case CART_SAVE_SHIPPING_ADDRESS:
return { ...state, shippingAddress: action.payload };
case CART_SAVE_PAYMENT_METHOD:
return { ...state, paymentMethod: action.payload };
case CART_EMPTY:
return { ...state, cartItems: [] };
default:
return state;
}
};

Cart funcionality using Context Api

I am trying to achieve cart functionality, but I want to save the cart on the refresh of the page. Anyway, the problem is this I have Context Api and cart logic (add to cart, removeitem, amount, setCartItem) so when I try to add an item to the cart, nothing happens, and when I check the cart nothing is in there. I know this question has a lot of code, and the mistake could be anywhere, if someone could help I would be really grateful.
Cart Context
import React from "react";
function getCartFromLocalStorage() {
return localStorage.getItem("cart")
? JSON.parse(localStorage.getItem("cart"))
: [];
}
const CartContext = React.createContext();
function CartProvider({ children }) {
const [cart, setCart] = React.useState(getCartFromLocalStorage());
const [total, setTotal] = React.useState(0);
const [cartItems, setCartItems] = React.useState(0);
React.useEffect(() => {
localStorage.setItem("cart", JSON.stringify(cart));
let newTotal = cart.reduce((total, cartItem) => {
return (total += cartItem.amount * cartItem.price);
}, 0);
newTotal = parseFloat(newTotal.toFixed(2));
setTotal(newTotal);
let newCartItems = cart.reduce((total, cartItem) => {
return (total += cartItem.amount);
}, 0);
setCartItems(newCartItems);
}, [cart]);
const removeItem = key => {
setCart([...cart].filter(item => item.key !== key));
};
const addToCart = book => {
const { key, image, bookName, by } = book;
const item = [...cart].find(item => item.key === key);
}
const clearCart = () => {
setCart([]);
};
return (
<CartContext.Provider
value={{
cart,
cartItems,
total,
removeItem,
addToCart,
clearCart
}}
>
{children}
</CartContext.Provider>
);
}
export { CartContext, CartProvider };
Books
import React,{useContext} from 'react'
import { CartContext } from '../../context/cart';
import HoverBooks from './HoverBooks';
import { useHistory } from "react-router-dom";
const Books = ({category}) => {
const {addToCart }= useContext(CartContext)
return (
<div className='books__main'>
{category.slice(0, 5).map((book) => {
return(
<>
<HoverBooks
key={book.key}
{...book}
/>
<div className='book__content'>
<li>{book.bookName}</li>
<h4>By{book.by}</h4>
<h4>Narreted by:{book.Narreted}</h4>
<h4>Length: {book.length}</h4>
<h4>Release Date: {book.ReleaseDate}</h4>
<h4>Language: {book.Language}</h4>
<h4>{book.rating}</h4>
</div>
<div>
<span>Regular Price: {book.RegularPrice}</span>
<button onClick={() => {
addToCart(book);
}}
>Add to cart</button>
</div>
</>
)})}
</div>
)
}
export default Books
Cart
import React from "react";
import { Link } from "react-router-dom";
import EmptyCart from "./EmptyCart";
import CartItem from './CartItem'
import { UserContext } from "../../context/user";
import { CartContext } from "../../context/cart";
import './Cart.css'
export default function Cart() {
const { cart, total } = React.useContext(CartContext);
const { user } = React.useContext(UserContext);
if (cart.length === 0) {
return <EmptyCart />;
}
return (
<div className="cart__items">
<h2>your cart</h2>
{cart.map(item => {
return <CartItem key={item.key} {...item} />;
})}
<h2>total : ${total}</h2>
{user.token ? (
<Link to="/cart" className="btn">
</Link>
) : (
<Link to="/login" className="btn">
login
</Link>
)}
</div>
);
}
Cart Item
import React, { useContext } from "react";
import { CartContext } from "../../context/cart";
export default function CartItem({ key, image,bookName, amount }) {
const {removeItem} = useContext(CartContext)
return (
<div className="cart__item">
<img src={image} />
<div>
<h4>{bookName}</h4>
<h5>${by}</h5>
<button
className="cart__removebtn"
onClick={() => {
removeItem(key);
}}
>
remove
</button>
</div>
<p className="item__amount">{amount}</p>
</div>
);
}
Cart Link
import React from "react";
import { Link } from "react-router-dom";
import {FiShoppingCart} from 'react-icons/fi'
import { CartContext } from "../../context/cart";
export default function CartLink() {
const { cartItems } = React.useContext(CartContext);
return (
<div className="cartlink__container">
<Link to="/cart">
<FiShoppingCart />
</Link>
<span className="cartlink__total">{cartItems}</span>
</div>
);
}
Home
import React,{useState, useEffect, useContext} from 'react'
import './Home.css'
import Books from './Books'
import { BookContext } from "../../context/books";
const Home = () => {
const {data, handleSelectCategory, currentSelectedCategory }
=useContext(BookContext)
return (
<div className='books__container' >
<h1 className='categories'>Categories</h1>
{Object.keys(data).map((key, index)=>{
let books = data[key];
return (
<>
<span key={key} onClick={() => handleSelectCategory(key)}
className='books__list' >
{books[0].category}
</span>
</>
);})}
<Books category={currentSelectedCategory} />
</div>
)
}
export default Home
book
import React, {useState, useEffect} from 'react'
import URL from '../utilis/URL';
const BookContext = React.createContext();
export default function BooksProvider({ children }) {
const [data, setData] = useState([])
const [currentSelectedCategory, setCurrentSelectedCategory] = useState([]);
const handleSelectCategory = (category) => {
setCurrentSelectedCategory(data[category]);
};
const fetchData = async () => {
const response = await fetch(URL);
const result = await response.json();
console.log(result)
setCurrentSelectedCategory(result[Object.keys(result)[0]]);
setData(result);
};
useEffect(()=>{
fetchData();
},[])
return (
<BookContext.Provider value={{ data, handleSelectCategory, setCurrentSelectedCategory, currentSelectedCategory }}>
{children}
</BookContext.Provider>
);
}
export {BookContext, BooksProvider}

function onUpdate() {
localStorage.setItem("cart", JSON.stringify(cart));
let newTotal = cart.reduce((total, cartItem) => {
return (total += cartItem.amount * cartItem.price);
}, 0);
newTotal = parseFloat(newTotal.toFixed(2));
setTotal(newTotal);
let newCartItems = cart.reduce((total, cartItem) => {
return (total += cartItem.amount);
}, 0);
setCartItems(newCartItems);
}
React.useEffect(onUpdate, [cart]);
const addToCart = (book) => {
const { key, image, bookName, by } = book;
let item = cart.find((item) => item.key === key);
if (item) {
item.amount++;
onUpdate();
} else {
setCart(
cart.concat({
amount: 1,
price: book.RegularPrice,
// add other cartItem attributes.
...book
})
);
}
};