set state when no similar movies available

src/App.css

@@ -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;
   }
 
-  img {
-    width: 90%;
-    aspect-ratio: 2/3;
-    box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5);
+  figure {
+    width: 100%;
+    float: left;
+
+    img {
+      aspect-ratio: 2/3;
+
+    }
   }
 
 }
@@ -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;
+}

src/App.tsx

@@ -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>

src/objects/movie-wall.tsx

@@ -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

src/objects/sidebar.tsx

@@ -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>
-    <img src={tmdb.makeImgUrl(movie.poster_path ?? "")} />
-    <p>{movie?.overview ?? "loading"}</p>
+    <figure>
+      <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
+        <img src={tmdb.makeImgUrl(movie.poster_path ?? "")} />
+      </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>
 
 

src/objects/tmdb.tsx

@@ -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
     }
 }