Resume
/
movie-explorer
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

set state when no similar movies available

This commit is contained in:
andrzej 2024-05-08 19:35:21 +02:00
parent a70ddebc8a
commit cacaa80d11
5 changed files with 83 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/App.css
View File

@ -32,13 +32,17 @@ body {
height: 100%;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
main {
height: 100%;
display: flex;
gap: 1em;
background-size: cover;
justify-content: center;
align-items: center;
}
@ -49,34 +53,42 @@ main {
flex-basis: 60%;
align-items: center;
gap: 1em;
height: fit-content;
}
img {
aspect-ratio: 2/3;
}
#sidebar {
flex-basis: calc(var(--poster-width)*2);
font-size: 1.6rem;
background-color: rgba(0, 0, 0, 0.5);
h1 {
font-size: 2em;
margin-bottom: 0.2em;
margin: 0;
/* line-height: 0.8em; */
font-family: RobotoBold;
padding: 0.1em 0.2em 0 0.2em;
padding: 0.1em 0.2em 0.1em 0.2em;
}
p {
font-family: Jura;
padding: 0.2em;
overflow: scroll;
height: 10em;
margin: 0.1em 0.2em 0.1em 0.2em;
}
figure {
width: 100%;
float: left;
img {
width: 90%;
aspect-ratio: 2/3;
box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5);
}
}
}
@ -84,6 +96,9 @@ img {
.poster {
width: var(--poster-width);
display: grid;
box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5);
border-radius: 1em;
overflow: hidden;
img {
height: 100%;
@ -109,3 +124,7 @@ img {
.overlay:hover {
opacity: 1;
}
.highlighted {
border: 0.1em solid gold;
}

9
src/App.tsx
View File

@ -17,6 +17,7 @@ class MovieClass implements Movie {
backdrop_path = null
title = null
overview = null
vote_average = 0
}
function App() {
@ -29,20 +30,23 @@ function App() {
const [backdrop, setBackdrop] = useState("")
const [chosenMovie, setChosenMovie] = useState(new MovieClass())
const [loadedMovies, setLoadedMovies] = useState(0)
const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true)
useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
useEffect(() => {
setLoadedMovies(movies.length)
if (movies[0].backdrop_path) {
const bgString = "linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), " + tmdb.makeBgImgUrl(movies[0].backdrop_path)
const bgString = "linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), " + tmdb.makeBgImgUrl(chosenMovie.backdrop_path ? chosenMovie.backdrop_path : movies[0].backdrop_path)
setBackdrop(bgString)
}
}, [movies])
useEffect(() => { console.log("SIMILAR AVAILABLE: " + similarMoviesAvailable) }, [similarMoviesAvailable])
return (
<>
<div id="loader"></div>
<div className='main-container' style={{ backgroundImage: backdrop }}>
<main >
<Sidebar movie={chosenMovie} />
<Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} />
<div id="movie-wall-container">
{loadedMovies === movies.length ?
<MovieWall movies={movies}
@ -50,6 +54,7 @@ function App() {
config={config}
setChosenMovie={setChosenMovie}
setLoadedMovies={setLoadedMovies}
setSimilarMoviesAvailable={setSimilarMoviesAvailable}
/>
: "LOADING " + loadedMovies} </div>
</main>

27
src/objects/movie-wall.tsx
View File

@ -8,6 +8,7 @@ export interface Movie {
backdrop_path: string | null
title: string | null
overview: string | null
vote_average: number | null
}
@ -33,15 +34,22 @@ interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
setMovies: Function;
setChosenMovie: Function;
setLoadedMovies: Function;
setSimilarMoviesAvailable: Function;
config: Config;
}
export function MovieWall({ movies, setMovies, config, setChosenMovie, setLoadedMovies }: MovieWallProps) {
export function MovieWall({ movies, setMovies, config, setChosenMovie, setLoadedMovies, setSimilarMoviesAvailable }: MovieWallProps) {
const posters: Array<React.Component> = []
for (let i = 0; i < movies.length; i++) {
const movie = movies[i]
console.log("VOTE AVG: " + movie.vote_average)
const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false
console.log("IS HIGHLIGHTED: " + isHighlighted)
posters.push(
<Poster movie={movies[i]} key={movies[i].id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} setChosenMovie={setChosenMovie} setLoadedMovies={setLoadedMovies} />
<Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} setChosenMovie={setChosenMovie} setLoadedMovies={setLoadedMovies}
setSimilarMoviesAvailable={setSimilarMoviesAvailable}
/>
)
}
return <>
@ -57,18 +65,21 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
setMovies: Function;
setChosenMovie: Function;
setLoadedMovies: Function;
setSimilarMoviesAvailable: Function;
isHighlighted: boolean;
}
function Poster({ movie, config, listSimilar, setMovies, setChosenMovie, setLoadedMovies }: PosterProps) {
function Poster({ movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) {
function clickHandler() {
setChosenMovie(movie)
listSimilar(config, movie, setMovies)
listSimilar(config, movie, setMovies, setSimilarMoviesAvailable)
}
const style = {
// backgroundImage: img.src
}
return <div className="poster" style={style}>
const classes = [
"poster",
isHighlighted ? "highlighted" : ""
].join(" ")
return <div className={classes} >
<div className="overlay" onClick={() => clickHandler()}>
</div>
<img

15
src/objects/sidebar.tsx
View File

@ -3,12 +3,23 @@ import { Movie } from "./movie-wall";
import tmdb from "./tmdb";
export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
movie: Movie;
similarMoviesAvailable: boolean;
}
export function Sidebar({ movie }: SidebarProps) {
export function Sidebar({ movie, similarMoviesAvailable }: SidebarProps) {
return <div id="sidebar">
<h1>{movie?.title ?? "loading"}</h1>
<figure>
<a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
<img src={tmdb.makeImgUrl(movie.poster_path ?? "")} />
<p>{movie?.overview ?? "loading"}</p>
</a>
<figcaption>
{similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
</figcaption>
</figure>
<p>{movie.overview === null ? "Loading"
: movie.overview === "" ? "Resumen no disponible."
: movie.overview}
</p>
</div>

20
src/objects/tmdb.tsx
View File

@ -37,7 +37,7 @@ export default {
/**
* Calls TMDB/similar, then fires the callback with res.data.results.unshift(movie) as argument
*/
getSimilar: async function({ language, page }: Config, movie: Movie, callback: Function) {
getSimilar: async function({ language, page }: Config, movie: Movie, setMovies: Function, setSimilarMoviesAvailable: Function) {
let res = await tmdb.get(movie.id + '/similar', {
params: {
language,
@ -50,9 +50,14 @@ export default {
.filter((e: Movie) => {
return e.poster_path
})
array.splice(19)
// array.unshift(movie)
callback(array)
// array.splice(19)
if (array.length > 0) {
setMovies(array)
setSimilarMoviesAvailable(true)
} else {
setSimilarMoviesAvailable(false)
console.log("SIMILAR NOT AVAILABLE")
}
return true
} else {
throw Error("API call failed! Response: " + JSON.stringify(res))
@ -91,5 +96,12 @@ export default {
*/
function(path: string) {
return "https://image.tmdb.org/t/p/w500" + path
},
makeMovieLink:
/**
*
*/
function(movie: Movie) {
return "https://www.themoviedb.org/movie/" + movie.id
}
}