97 lines
3.7 KiB
TypeScript
97 lines
3.7 KiB
TypeScript
import React, { useState } from "react"
|
||
import { Config } from "../App"
|
||
import tmdb from "./tmdb"
|
||
|
||
export interface Movie {
|
||
id: number | null
|
||
poster_path: string | null
|
||
backdrop_path: string | null
|
||
title: string | null
|
||
overview: string | null
|
||
vote_average: number | null
|
||
}
|
||
|
||
|
||
// const sampleData = {
|
||
// adult: false,
|
||
// backdrop_path: "/jnE1GA7cGEfv5DJBoU2t4bZHaP4.jpg",
|
||
// genre_ids: [28, 878],
|
||
// id: 1094844,
|
||
// original_language: "en",
|
||
// original_title: "Ape vs. Mecha Ape",
|
||
// overview: "Recognizing the destructive power of its captive giant Ape, the military makes its own battle-ready A.I., Mecha Ape. But its first practical test goes horribly wrong, leaving the military no choice but to release the imprisoned giant ape to stop the colossal robot before it destroys downtown Chicago.",
|
||
// popularity: 2157.099,
|
||
// poster_path: "/dJaIw8OgACelojyV6YuVsOhtTLO.jpg",
|
||
// release_date: "2023-03-24",
|
||
// title: "Ape vs. Mecha Ape",
|
||
// video: false,
|
||
// vote_average: 5.538,
|
||
// vote_count: 52
|
||
// }
|
||
|
||
interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
|
||
movies: Array<Movie>;
|
||
setMovies: React.Dispatch<React.SetStateAction<any>>;
|
||
setChosenMovie: React.Dispatch<React.SetStateAction<any>>;
|
||
setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>;
|
||
config: Config;
|
||
className: string
|
||
}
|
||
|
||
export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimilarMoviesAvailable, className }: MovieWallProps) {
|
||
|
||
const posters: React.ReactElement[] = []
|
||
for (let i = 0; i < movies.length; i++) {
|
||
const movie = movies[i]
|
||
const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false
|
||
posters.push(
|
||
<Poster className="w-36 h-58 rounded-xl overflow-hidden flex justify-center relative" isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
|
||
listSimilar={tmdb.getSimilar}
|
||
config={config}
|
||
setMovies={setMovies}
|
||
setChosenMovie={setChosenMovie}
|
||
setSimilarMoviesAvailable={setSimilarMoviesAvailable} />
|
||
)
|
||
}
|
||
return <div className={className}>
|
||
{posters}
|
||
</div>
|
||
}
|
||
|
||
interface PosterProps extends React.ComponentPropsWithRef<"div"> {
|
||
movie: Movie;
|
||
listSimilar: (config: Config, movie: Movie, setMovies: React.Dispatch<React.SetStateAction<Array<Movie>>>, setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>) => Promise<boolean>;
|
||
index: number;
|
||
config: Config;
|
||
setMovies: React.Dispatch<React.SetStateAction<Array<Movie>>>;
|
||
setChosenMovie: React.Dispatch<React.SetStateAction<Movie>>;
|
||
setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>;
|
||
isHighlighted: boolean;
|
||
className: string
|
||
}
|
||
|
||
|
||
function Poster({ className, movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) {
|
||
function clickHandler() {
|
||
setChosenMovie(movie)
|
||
listSimilar(config, movie, setMovies, setSimilarMoviesAvailable)
|
||
}
|
||
const [isLoading, setIsLoading] = useState(true)
|
||
const [hasError, setHasError] = useState(false)
|
||
return <><div className={className} >
|
||
{isLoading ?
|
||
<div className="m-auto text-center h-full w-full fixed">
|
||
<div className="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
|
||
: <div className="z-10 h-full w-full absolute cursor-pointer" onClick={() => clickHandler()}></div>
|
||
}
|
||
{hasError ?? <div className="m-auto text-center">⚠️</div>}
|
||
<img
|
||
src={tmdb.makeImgUrl(movie.poster_path ?? "")}
|
||
onLoad={() => setIsLoading(false)}
|
||
onError={() => setHasError(true)}
|
||
/>
|
||
</div >
|
||
</>
|
||
}
|
||
|