revamped coursel movie cards

daccotta-org · Oct 10, 2024 · 3dfce91 · 3dfce91
1 parent 22877b2
commit 3dfce91
Show file tree

Hide file tree

Showing 2 changed files with 181 additions and 151 deletions.
diff --git a/client/src/components/custom/MovieCard/Carousel.tsx b/client/src/components/custom/MovieCard/Carousel.tsx
@@ -1,11 +1,13 @@
-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"
 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