// MovieList.jsx
import "./movieList.scss";
import axios from "axios";
import { useEffect, useState } from "react";
import Card from "../card/Card";
function MovieList({ savedMovies, setSavedMovies }) {
const [movieList, setMovieList] = useState(() => {
const storedMovieList = JSON.parse(localStorage.getItem("movieList"));
return storedMovieList || [];
});
useEffect(() => {
if (!movieList.length) {
fetchMovieList();
}
}, []); // Fetch movie list only on component mount if movieList is not available
useEffect(() => {
localStorage.setItem("movieList", JSON.stringify(movieList));
}, [movieList]); // Update local storage whenever movieList changes
const fetchMovieList = () => {
axios
.get(
`https://api.themoviedb.org/3/discover/movie?api_key=${import.meta.env.VITE_API_KEY}`
)
.then((res) => {
setMovieList(res.data.results);
})
.catch((err) => {
console.log(err);
});
};
const addToMovieList = (movieId) => {
// Find the movie to add from savedMovies
const movieToAdd = savedMovies.find(movie => movie.id === movieId);
// Check if the movie to add exists
if (movieToAdd) {
// Update movieList state by adding the movie
setMovieList(prevMovieList => [...prevMovieList, movieToAdd]);
}
};
const removeFromMovieList = (movieId) => {
setMovieList((prevMovieList) =>
prevMovieList.filter((movie) => movie.id !== movieId)
);
};
return (
<div className="movieList">
<Card
movieList={movieList}
savedMovies={savedMovies}
setSavedMovies={setSavedMovies}
removeFromMovieList={removeFromMovieList}
addToMovieList={addToMovieList}
/>
</div>
);
}
export default MovieList;
// Card.jsx code
import { useState, useEffect } from "react";
import "./card.scss";
function Card({ movieList, savedMovies, setSavedMovies, source, removeFromMovieList, addToMovieList }) {
const [saved, setSaved] = useState(null);
const handleButtonClick = (movie) => {
const isSaved = savedMovies.find((savedMovie) => savedMovie.id === movie.id);
if (isSaved) {
// If the movie is already saved, remove it
const updatedSavedMovies = savedMovies.filter((savedMovie) => savedMovie.id !== movie.id);
setSavedMovies(updatedSavedMovies);
// Add the movie back to the movieList
addToMovieList(movie.id); // Add the movie back to movieList
} else {
// If the movie is not saved, add it to savedMovies
setSavedMovies((prevSavedMovies) => [...prevSavedMovies, movie]);
// Remove the movie from the movieList
removeFromMovieList(movie.id);
}
// Toggle the saved state of the movie
setSaved((prevSaved) => (prevSaved === movie.id ? null : movie.id));
};
useEffect(() => {
localStorage.setItem("savedMovies", JSON.stringify(savedMovies));
}, [savedMovies]);
return (
<div className="cardContainer">
{(source === "saved" ? savedMovies : movieList).map((movie) => (
<div className="card" key={movie.id}>
<div className="save">
<button
onClick={() => {
handleButtonClick(movie);
}}
className={`button ${saved === movie.id ? "saved" : ""}`}
>
{saved === movie.id ? (
<img src="/trash.png" alt="Remove from saved" />
) : (
<img src="/star.png" alt="Add to saved" />
)}
</button>
</div>
<img
src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
alt=""
/>
<p>{movie.title}</p>
</div>
))}
</div>
);
}
export default Card;
Please help me with this. I want to have my button add the selected movie back to the original movieList local storage. My local storage has the original movie list to display on one tab, and a savedMovies array to display on a different tab. I’m trying to call the addToMovieList function in the card component to add the movie back to my original movie list array when I click on the button, however I’m getting the TypeError. How come my removeFromMovieList works fine but not addToMovieList?