Favorite Listing Page doesnt show the Favorite Movies

[ma-mani]

Hello Team,
I am currently working on my Favorite Listing Page. I allready refactor the list of Movies into a Component called MovieList.

I have committed and pushed my current status. It is accessible at this link.The branch called "favorite-button".

I import the MovieList in HomePage and it works perfectly fine. i create a new folder in pages pages/favorites and import MovieList in the FavoritePages.I create a dummy Link to go to the favorites page.

After I click on a favorite button, I expect it to show me on the favorites page.
For some reason i dont see any list of favorite movies.
I check the data from favorite movies with console.log and i believe it is correct.

Thank you for your help!

[doemser]

Please provide the console.log(favorites) result, but also all the other console.logs you currently have running.

I think you should change find to some, this could be responsible for your issue, but I am not 100% sure.

 const favorites = movies?.results?.filter((movie) =>
    movieInfo.some((item) => item.id === movie.id && item.isFavorite)
  );

[F-Kirchhoff]

Next to Dominiks suggestion, there is one problem with your logic, namely that you only filter the array of the searched movies for your favorites. All favorite movies that are not in the current search results array will not be displayed. One solution is to fetch a specific list of movies from the TMDB Api, namely all movies that are stored in your moviesInfo with isFavorite set to true. For that:

• you need to create a new API endpoint for fetching multiple movies by ID
• pass the list of all favorite movie ids to that endpoint
• in that endpoint do a fetch from the API for each id (you can use Promise.all() for that)
• when all movies are found, return the list of the found movies back to the frontend.

Hope that helped!

[grasipacheco]

Hey Felix, we don't use the API for the favorite list.
On the favorite page, we will display only the movies we have favorited ourselves using the isFavorite state.

[ma-mani]

I solved the problem. MovieList expect a data in this order movies.result.map..., but my favorites has only movies without results. Because of optional chaining i dont get undefined. So i have to figure out how can i pass conditionally.

const MovieList = ({ movies, movieInfo, onToggleFavorite }) => {
  const movieResults = movies?.results || movies;
  return (
    <>
      <Ul>
        {movieResults?.map((movie) => (
          <Li key={movie.id}>
            <Link href={"./movies/" + movie.id} key={movie.id}>
              <MovieCard
                title={movie.title}
                release={movie.release_date}
                image={movie.poster_path}
                onToggleFavorite={() => onToggleFavorite(movie.id)}
                movieInfo={movieInfo}
                id={movie.id}
              />
            </Link>
          </Li>
        ))}
      </Ul>
    </>
  );
};

now it works!
Thanks for helping me!