From 3dfce91ca6e444585d9e1589594350047909a104 Mon Sep 17 00:00:00 2001
From: MIGHTY1o1 <shubhagarwalcse@gmail.com>
Date: Thu, 10 Oct 2024 16:49:20 +0530
Subject: [PATCH] revamped coursel movie cards

---
 .../components/custom/MovieCard/Carousel.tsx  |  80 +++---
 .../components/custom/MovieCard/MovieCard.tsx | 252 +++++++++---------
 2 files changed, 181 insertions(+), 151 deletions(-)

diff --git a/client/src/components/custom/MovieCard/Carousel.tsx b/client/src/components/custom/MovieCard/Carousel.tsx
index c776cc74..aa4caf59 100644
--- a/client/src/components/custom/MovieCard/Carousel.tsx
+++ b/client/src/components/custom/MovieCard/Carousel.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState, useRef } from "react"
 import MovieCard from "./MovieCard"
 import { MovieListType, useMovieList } from "@/services/movieService"
 import { useJournal } from "@/services/journalService"
@@ -6,6 +6,8 @@ import { calculateTopGenres, genreMap } from "@/lib/stats"
 import { useAuth } from "@/hooks/useAuth"
 import { getUserData } from "@/services/userService"
 import { SimpleMovie } from "@/Types/Movie"
+import { ChevronRight } from "lucide-react"
+
 interface List {
     list_id: string
     name: string
@@ -31,15 +33,25 @@ const MovieList: React.FC<MovieListProps> = ({
 }) => {
     const { user } = useAuth()
     const { data: movies, isLoading, error } = useMovieList(type, 1)
+    const [hoveredList, setHoveredList] = useState<string | null>(null)
 
     const { useGetJournalEntries } = useJournal()
     const { data: journalEntries } = useGetJournalEntries()
     const [favGenre, setFavGenre] = useState<number | null>(null)
     const [favGenreMovies, setFavGenreMovies] = useState<SimpleMovie[]>([])
-    console.log("favegenre", favGenre)
     const { data: favoriteGenreMovies, isLoading: isFavGenreLoading } =
         useMovieList("discover", 1, favGenre || undefined)
 
+    const handleScroll = (containerId: string) => {
+        const container = document.getElementById(containerId);
+        if (container) {
+            const cardWidth = 256; // This is the lg:w-64 value
+            const gap = 16; // This is the gap-4 value
+            const scrollAmount = (cardWidth + gap) * 4; // Scroll 4 cards at a time
+            container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+        }
+    };
+
     useEffect(() => {
         const fetchFavoriteGenre = async () => {
             if (journalEntries && journalEntries.length > 0) {
@@ -56,7 +68,6 @@ const MovieList: React.FC<MovieListProps> = ({
                     topGenres[0]?.genre || ""
                 )
                 setFavGenre(topGenre)
-                console.log("topGenres", topGenres)
             } else if (user?.uid) {
                 try {
                     const userData: UserData = await getUserData(user.uid)
@@ -68,9 +79,7 @@ const MovieList: React.FC<MovieListProps> = ({
                         const genres = topMovies
                             .flatMap((movie) => movie.genre_ids)
                             .filter(Boolean)
-                        console.log("genres", genres)
 
-                        // Count the occurrences of each genre
                         const genreCounts = genres.reduce(
                             (acc, genre) => {
                                 acc[genre!] = (acc[genre!] || 0) + 1
@@ -79,19 +88,15 @@ const MovieList: React.FC<MovieListProps> = ({
                             {} as Record<number, number>
                         )
 
-                        // Find the maximum count
                         const maxCount = Math.max(...Object.values(genreCounts))
 
-                        // Filter genres with the maximum count
                         const topGenres = Object.entries(genreCounts)
                             .filter(([, count]) => count === maxCount)
                             .map(([genre]) => parseInt(genre))
 
-                        // Choose the smallest genre ID among the top genres
                         const mostCommonGenre = Math.min(...topGenres)
 
                         setFavGenre(mostCommonGenre)
-                        console.log("mostCommonGenre", mostCommonGenre)
                     }
                 } catch (error) {
                     console.error("Error fetching user data:", error)
@@ -104,9 +109,7 @@ const MovieList: React.FC<MovieListProps> = ({
 
     useEffect(() => {
         if (favoriteGenreMovies) {
-            console.log("favoriteGenreMovies 1", favoriteGenreMovies)
             setFavGenreMovies(favoriteGenreMovies)
-            console.log("favoriteGenreMovies", favoriteGenreMovies)
         }
     }, [favoriteGenreMovies])
 
@@ -119,27 +122,44 @@ const MovieList: React.FC<MovieListProps> = ({
             </div>
         )
 
-    const renderMovieList = (movieList: SimpleMovie[], title: string) => (
-        <div className="w-full flex flex-col justify-start my-6 gap-1 items-start px-4">
-            <h2 className="text-xl font-semibold mb-2">{title}</h2>
-            <div className="w-full overflow-x-auto scrollbar-hide">
-                <div className="flex flex-nowrap gap-4 pb-4">
-                    {movieList?.map((movie) => (
-                        <div key={movie.movie_id} className="flex-shrink-0">
-                        <MovieCard
-                            poster_path={movie.poster_path}
-                            movie_id={movie.movie_id}
-                            title={movie.title}
-                            backdrop_path={movie.backdrop_path}  // Added
-                            release_date={movie.release_date}    // Added
-                            genre_ids={movie.genre_ids}          // Added
-                          />
+    const renderMovieList = (movieList: SimpleMovie[], title: string) => {
+        const containerId = `movie-list-${title.replace(/\s+/g, '-').toLowerCase()}`;
+        
+        return (
+            <div className="w-full flex flex-col justify-start my-6 gap-1 items-start px-4">
+                <h2 className="text-xl font-semibold mb-2">{title}</h2>
+                <div className="w-full relative"
+                     onMouseEnter={() => setHoveredList(containerId)}
+                     onMouseLeave={() => setHoveredList(null)}>
+                    <div 
+                        id={containerId}
+                        className="w-full overflow-x-auto scrollbar-hide scroll-smooth"
+                    >
+                        <div className="flex flex-nowrap gap-4 pb-4">
+                            {movieList?.map((movie) => (
+                                <div key={movie.movie_id} className="flex-shrink-0">
+                                <MovieCard
+                                    poster_path={movie.poster_path}
+                                    movie_id={movie.movie_id}
+                                    title={movie.title}
+                                    release_date={movie.release_date}
+                                />
+                                </div>
+                            ))}
                         </div>
-                    ))}
+                    </div>
+                    {hoveredList === containerId && (
+                        <button 
+                            onClick={() => handleScroll(containerId)}
+                            className="absolute right-0 top-1/2 -translate-y-1/2 bg-black/60 p-2 rounded-l-lg hover:bg-black/80 transition-colors duration-200"
+                        >
+                            <ChevronRight className="w-6 h-6 text-white" />
+                        </button>
+                    )}
                 </div>
             </div>
-        </div>
-    )
+        )
+    }
 
     return (
         <>
@@ -155,4 +175,4 @@ const MovieList: React.FC<MovieListProps> = ({
     )
 }
 
-export default MovieList
+export default MovieList
\ No newline at end of file
diff --git a/client/src/components/custom/MovieCard/MovieCard.tsx b/client/src/components/custom/MovieCard/MovieCard.tsx
index bf31d59e..5da1a60a 100644
--- a/client/src/components/custom/MovieCard/MovieCard.tsx
+++ b/client/src/components/custom/MovieCard/MovieCard.tsx
@@ -1,150 +1,160 @@
-import React, { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import React, { useState, useEffect } from "react";
+import { motion } from "framer-motion";
 import { useNavigate } from "react-router-dom";
-import { Play, Plus, ThumbsUp } from "lucide-react";
-import LazyImage from "../LazyLoadImage/LazyImage";
+import { Heart } from "lucide-react";
+import { toast } from "react-toastify";
+import { useAuth } from "@/hooks/useAuth";
+import { addMovieToList, createList, getUserData } from "@/services/userService";
 
 const IMAGE_URL = "https://image.tmdb.org/t/p";
 
-const genreMap: { [key: number]: string } = {
-  28: "Action",
-  12: "Adventure",
-  16: "Animation",
-  35: "Comedy",
-  80: "Crime",
-  99: "Documentary",
-  18: "Drama",
-  10751: "Family",
-  14: "Fantasy",
-  36: "History",
-  27: "Horror",
-  10402: "Music",
-  9648: "Mystery",
-  10749: "Romance",
-  878: "Science Fiction",
-  10770: "TV Movie",
-  53: "Thriller",
-  10752: "War",
-  37: "Western"
-};
-
 interface MovieCardProps {
   movie_id: string;
   title: string | undefined;
   poster_path: string | undefined;
-  backdrop_path: string | undefined;
   release_date: string | undefined;
-  genre_ids: number[] | undefined;
+}
+
+interface SimpleMovie {
+  id: string;
+  movie_id: string;
+  title: string;
+  poster_path: string;
+  release_date: string;
 }
 
 const MovieCard: React.FC<MovieCardProps> = ({
   movie_id,
   title,
   poster_path,
-  backdrop_path,
   release_date,
-  genre_ids,
 }) => {
   const navigate = useNavigate();
-  const [isHovered, setIsHovered] = useState(false);
+  const [isFavourite, setIsFavourite] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const { user } = useAuth();
+
+  useEffect(() => {
+    const checkFavouriteStatus = async () => {
+      if (user?.uid) {
+        try {
+          const userData = await getUserData(user.uid);
+          const favouritesList = userData.lists.find(
+            (list: any) => list.name === "Favourites"
+          );
+          if (favouritesList) {
+            setIsFavourite(
+              favouritesList.movies.some((m: any) => m.movie_id === movie_id)
+            );
+          }
+        } catch (error) {
+          console.error("Error checking favourite status:", error);
+        }
+      }
+    };
+
+    checkFavouriteStatus();
+  }, [movie_id, user]);
 
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation(); // Prevent event from bubbling up
-    console.log("movie_id:", movie_id);
+  const handleClick = () => {
     navigate(`/movie/${movie_id}`);
   };
 
-  const genreNames = genre_ids
-    ?.map((id) => genreMap[id])
-    .filter(Boolean)
-    .slice(0, 3);
+  const handleFavouriteClick = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!user) {
+      toast.error("Please log in to add movies to your Favourites.");
+      return;
+    }
+
+    // Validate required fields before proceeding
+    if (!title || !poster_path || !release_date) {
+      toast.error("Missing required movie information.");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const userData = await getUserData(user.uid);
+      let favouritesList = userData.lists.find(
+        (list: any) => list.name === "Favourites"
+      );
+
+      if (!favouritesList) {
+        const createListData = {
+          name: "Favourites",
+          description: "My favourite movies",
+          isPublic: true,
+        };
+        favouritesList = await createList(user.uid, {
+          ...createListData,
+          list_type: "user",
+        });
+      }
+
+      // Check if the movie is already in the favourites list
+      const movieToAdd: SimpleMovie = {
+        id: movie_id,
+        movie_id: movie_id,
+        title: title,
+        poster_path: poster_path,
+        release_date: release_date,
+      };
+
+      // Only add the movie if it's not already a favourite
+      if (!isFavourite) {
+        await addMovieToList(favouritesList.list_id, movieToAdd);
+        setIsFavourite(true);
+        toast.success(`${title} has been added to your Favourites.`);
+      } else {
+        toast.info(`${title} is already in your Favourites.`);
+      }
+    } catch (error) {
+      console.error("Error adding movie to Favourites:", error);
+      toast.error("Failed to add movie. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   return (
-    <div 
-      className="relative w-48 h-72"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+    <motion.div
+      className="relative w-32 sm:w-40 md:w-48 lg:w-56 h-48 sm:h-60 md:h-72 lg:h-84 rounded-lg overflow-hidden shadow-lg cursor-pointer group"
+      onClick={handleClick}
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
     >
-      <motion.div
-        className="w-full h-full rounded-lg overflow-hidden shadow-lg cursor-pointer"
-        onClick={handleClick}
-        whileHover={{ scale: 1.05 }}
-        whileTap={{ scale: 0.95 }}
-      >
-        <LazyImage
-          src={`${IMAGE_URL}/w300${poster_path}`}
-          alt={title || "Movie Poster"}
-          className="w-full h-full object-cover"
-        />
-      </motion.div>
+      <img
+        src={`${IMAGE_URL}/w500${poster_path}`}
+        alt={title || "Movie Poster"}
+        className="w-full h-full object-cover transition-all duration-300 group-hover:blur-sm group-hover:scale-110"
+      />
       
-      <AnimatePresence>
-        {isHovered && (
-          <motion.div
-            className="fixed w-64 bg-[#141414] rounded-md shadow-lg overflow-hidden cursor-pointer"
-            style={{
-              zIndex: 40,
-              top: "50%",
-              left: "50%",
-              transform: 'translate(-50%, -50%)',
-            }}
-            initial={{ opacity: 0, scale: 0.9 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.9 }}
-            transition={{ duration: 0.2 }}
-            onClick={handleClick}
-          >
-            <LazyImage
-              src={`${IMAGE_URL}/w500${backdrop_path || poster_path}`}
-              alt={title || "Movie Backdrop"}
-              className="w-full h-40 object-cover"
-            />
-            <div className="p-4">
-              <h3 className="text-white font-bold text-lg mb-2">{title}</h3>
-              <div className="flex space-x-2 mb-2">
-                <motion.button
-                  whileHover={{ scale: 1.1 }}
-                  className="bg-white text-black rounded-full p-2"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    // Add play functionality here
-                  }}
-                >
-                  <Play size={20} />
-                </motion.button>
-                <motion.button
-                  whileHover={{ scale: 1.1 }}
-                  className="border border-gray-300 text-white rounded-full p-2"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    // Add to list functionality here
-                  }}
-                >
-                  <Plus size={20} />
-                </motion.button>
-                <motion.button
-                  whileHover={{ scale: 1.1 }}
-                  className="border border-gray-300 text-white rounded-full p-2"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    // Add like functionality here
-                  }}
-                >
-                  <ThumbsUp size={20} />
-                </motion.button>
-              </div>
-              <div className="text-white text-sm mb-2">
-                <span className="text-green-500 font-bold mr-2">97% Match</span>
-                <span>{release_date?.split('-')[0]}</span>
-              </div>
-              <div className="text-white text-sm mb-2">
-                {genreNames?.join(" • ")}
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
+      <div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+        {/* <button
+          className={`absolute top-2 right-2 p-1 rounded-full ${
+            isFavourite ? "bg-red-600 text-white" : "bg-white/50 text-black"
+          } transition-colors duration-300 ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
+          onClick={handleFavouriteClick}
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <div className="w-4 h-4 sm:w-5 sm:h-5 border-2 border-gray-300 border-t-white rounded-full animate-spin" />
+          ) : (
+            <Heart className={`w-4 h-4 sm:w-5 sm:h-5 ${isFavourite ? "fill-current" : ""}`} />
+          )}
+        </button> */}
+        
+        <div className="absolute bottom-0 left-0 right-0 p-2 sm:p-3">
+          <div className="flex items-center space-x-2 text-xs sm:text-sm mb-1">
+            <span className="text-gray-300">{release_date?.split('-')[0]}</span>
+          </div>
+          <h3 className="text-white font-bold text-sm sm:text-base md:text-lg lg:text-xl mb-1 sm:mb-2 line-clamp-2">
+            {title}
+          </h3>
+        </div>
+      </div>
+    </motion.div>
   );
 };