Building a Seamless Movie Discovery Experience With Live Data

MovieDetails.jsx

24// Movie details fetching function
25const fetchMovieDetails = async () => {
26  setLoading(true);
27  setError(null); 
28  try {
29    // Compare this snippet from src/components/home/main/Trending.jsx:
30    const movieResponse = await axios.get(`${BASE_URL}/movie/${movieId}`, {
31      params: {
32        api_key: API_KEY,
33      },
34    });
35
36    setMovieDetails(movieResponse.data); // movie details update
37
38    // FavBtn
39    const savedFavorites =
40      JSON.parse(localStorage.getItem("favorites")) || [];
41    setIsFavorite(savedFavorites.includes(movieId));
42
43    // Same Genre Movies
44    const genreIds = movieResponse.data.genres.map((genre) => genre.id);
45    if (genreIds.length > 0) {
46      const relatedResponse = await axios.get(`${BASE_URL}/discover/movie`, {
47        params: {
48          api_key: API_KEY,
49          with_genres: genreIds.join(","), // Join genre IDs with commas
50        },
51      });
52
53      setRelatedMovies(relatedResponse.data.results); // Update related movies state
54    } else {
55      setRelatedMovies([]); // If no genres, set related movies to empty array
56    }
57
58    // cast
59    const castResponse = await axios.get(
60      `${BASE_URL}/movie/${movieId}/credits`,
61      {
62        params: {
63          api_key: API_KEY,
64        },
65      }
66    );
67    setCast(castResponse.data.cast); // cast update
68  } catch (error) {
69    setError(error);
70  } finally {
71    setLoading(false);
72  }
73};
74...
75