From 3c286e705ca47eefe2dff95c00e6ea0a0b806811 Mon Sep 17 00:00:00 2001 From: Norbert Maciaszek Date: Mon, 18 Aug 2025 01:04:59 +0200 Subject: [PATCH] feat: enhance actor details page with MovieGallery and Carousel components; implement movie conversion helper for improved movie data handling --- src/app/aktor/[id]/page.tsx | 26 +++++++++++++- src/app/film/[id]/page.tsx | 2 +- src/components/atoms/MovieCard/index.tsx | 4 ++- .../atoms/MovieCard/layouts/AuroraLayout.tsx | 2 +- src/components/molecules/ActorHero/index.tsx | 11 +----- src/components/molecules/HeroMovie/index.tsx | 34 +++++++------------ .../molecules/RecommendedMovies/index.tsx | 2 +- src/helpers/convertToMovie/index.ts | 29 ++++++++++++++++ 8 files changed, 73 insertions(+), 37 deletions(-) create mode 100644 src/helpers/convertToMovie/index.ts diff --git a/src/app/aktor/[id]/page.tsx b/src/app/aktor/[id]/page.tsx index b153a40..8a1f356 100644 --- a/src/app/aktor/[id]/page.tsx +++ b/src/app/aktor/[id]/page.tsx @@ -1,5 +1,10 @@ +import { MovieCard } from "@/components/atoms/MovieCard"; import { ActorHero } from "@/components/molecules/ActorHero"; +import { Carousel } from "@/components/molecules/Carousel"; +import { MovieGallery } from "@/components/molecules/MovieGallery"; +import { convertToMovie } from "@/helpers/convertToMovie"; import { TMDB } from "@/lib/tmdb"; +import { FaStar } from "react-icons/fa"; export default async function Page({ params, @@ -9,10 +14,29 @@ export default async function Page({ const actorId = Number((await params).id); const personDetails = await TMDB.getPersonDetails(actorId); + const images = { + backdrops: personDetails.images.profiles, + posters: [], + logos: [], + }; return ( -
+
+ +
+ } + colors="purple" + > + {personDetails.movie_credits.cast.map((movie) => { + const convertedMovie = convertToMovie(movie); + if (!convertedMovie) return null; + return ; + })} + +
); } diff --git a/src/app/film/[id]/page.tsx b/src/app/film/[id]/page.tsx index 9a66754..26ef2f1 100644 --- a/src/app/film/[id]/page.tsx +++ b/src/app/film/[id]/page.tsx @@ -9,7 +9,7 @@ export default async function Page({ params: Promise<{ id: string }>; }) { const movieId = Number((await params).id); - const movieDetails = await TMDB.getMovieDetailsRich(movieId); + const movieDetails = await TMDB.getMovieDetails(movieId); return (
diff --git a/src/components/atoms/MovieCard/index.tsx b/src/components/atoms/MovieCard/index.tsx index 74f73d0..b55ad95 100644 --- a/src/components/atoms/MovieCard/index.tsx +++ b/src/components/atoms/MovieCard/index.tsx @@ -16,7 +16,7 @@ type Props = Movie & { }; export const MovieCard: FC = ({ - layout = "minimal", + layout = "aurora", showDayCounter = true, simpleToggle = false, ...movie @@ -73,6 +73,8 @@ export const MovieCard: FC = ({ simpleToggle, buttonClass, iconSize, + favorite: alreadyInStore?.favorite || movie.favorite, + seen: alreadyInStore?.seen || movie.seen, }; switch (layout) { diff --git a/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx b/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx index fc8a1a3..b6613b5 100644 --- a/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx +++ b/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx @@ -65,7 +65,7 @@ export const AuroraLayout: FC = ({ > {title} diff --git a/src/components/molecules/ActorHero/index.tsx b/src/components/molecules/ActorHero/index.tsx index ef51540..51df2d6 100644 --- a/src/components/molecules/ActorHero/index.tsx +++ b/src/components/molecules/ActorHero/index.tsx @@ -202,6 +202,7 @@ export const ActorHero: FC = ({ personDetails }) => { ]; return ( , url: (id: string) => `https://www.imdb.com/name/${id}`, }, - tvrage_id: { - label: "TVRage", - icon: null, - url: (id: string) => `https://www.tvrage.com/people/${id}`, - }, - wikidata_id: { - label: "Wikidata", - icon: null, - url: (id: string) => `https://www.wikidata.org/wiki/${id}`, - }, }; diff --git a/src/components/molecules/HeroMovie/index.tsx b/src/components/molecules/HeroMovie/index.tsx index 1665870..6b9a86e 100644 --- a/src/components/molecules/HeroMovie/index.tsx +++ b/src/components/molecules/HeroMovie/index.tsx @@ -13,6 +13,7 @@ import { FaGlobe, FaEye, } from "react-icons/fa"; +import { convertToMovie } from "@/helpers/convertToMovie"; type Props = { movieDetails: MovieDetailsRich; @@ -33,37 +34,24 @@ export const HeroMovie: FC = ({ movieDetails }) => { return `${hours}h ${mins}m`; }; - // Convert TMDB movie to our Movie type. - const convertToMovie = () => ({ - id: movieDetails.id, - title: movieDetails.title, - adult: movieDetails.adult, - backdrop_path: movieDetails.backdrop_path || "", - genre_ids: movieDetails.genres.map((g) => g.id).join(","), - original_language: movieDetails.original_language, - original_title: movieDetails.original_title, - overview: movieDetails.overview || "", - popularity: movieDetails.popularity, - poster_path: movieDetails.poster_path || "", - release_date: movieDetails.release_date, - video: movieDetails.video, - vote_average: movieDetails.vote_average, - vote_count: movieDetails.vote_count, - favorite: false, - seen: false, - }); + const convertedMovie = convertToMovie(movieDetails); + // Convert TMDB movie to our Movie type. const handleAddToList = () => { if (isInStore) { deleteMovie(movieDetails.id); } else { - addMovie(convertToMovie()); + if (convertedMovie) { + addMovie(convertedMovie); + } } }; const handleToggleFavorite = () => { if (!isInStore) { - addMovie({ ...convertToMovie(), favorite: true }); + if (convertedMovie) { + addMovie({ ...convertedMovie, favorite: true }); + } } else { updateMovie(movieDetails.id, { favorite: !isFavorite }); } @@ -71,7 +59,9 @@ export const HeroMovie: FC = ({ movieDetails }) => { const handleToggleSeen = () => { if (!isInStore) { - addMovie({ ...convertToMovie(), seen: true }); + if (convertedMovie) { + addMovie({ ...convertedMovie, seen: true }); + } } else { updateMovie(movieDetails.id, { seen: !isSeen }); } diff --git a/src/components/molecules/RecommendedMovies/index.tsx b/src/components/molecules/RecommendedMovies/index.tsx index e7a249d..dc05985 100644 --- a/src/components/molecules/RecommendedMovies/index.tsx +++ b/src/components/molecules/RecommendedMovies/index.tsx @@ -19,7 +19,7 @@ export const RecommendedMovies: FC = ({ movies }) => { } - iconColor="bg-gradient-to-r from-yellow-500 to-orange-500" + colors="yellow" > {movies.results.map((movie) => ( +): Movie | null => { + if (!movie.id) { + return null; + } + + return { + id: movie.id, + title: movie.title, + adult: movie.adult, + backdrop_path: movie.backdrop_path || "", + genre_ids: movie.genres?.join(",") || "", + original_language: movie.original_language, + original_title: movie.original_title, + overview: movie.overview || "", + popularity: movie.popularity, + poster_path: movie.poster_path || "", + release_date: movie.release_date, + video: movie.video, + vote_average: movie.vote_average, + vote_count: movie.vote_count, + favorite: false, + seen: false, + }; +};