begin redo

src/App.css

@@ -1,6 +1,6 @@
 :root {
 
-  --poster-width: 10rem;
+  --poster-width: 15rem;
   --posters-wide: 10;
 }
 
@@ -11,35 +11,24 @@
 
 main {
   display: flex;
-  justify-content: center;
-
-  height: 100%;
   background-size: cover;
-
 }
 
-h1 {
-  margin: 0;
-}
 
-.flow-container {
+#movie-wall-container {
   display: inline-flex;
   flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  flex-basis: calc(var(--poster-width)*var(--posters-wide));
+  flex-basis: calc(var(--poster-width)*var(--posters-wide))
 }
 
 #sidebar {
-  flex: 0 0 10rem;
+  flex-basis: calc(var(--poster-width)*2)
 }
 
 .poster {
-  font-size: 2rem;
-  background-size: cover;
   width: var(--poster-width);
-  aspect-ratio: 3/4.5;
-  flex: 0 0 auto;
+  aspect-ratio: 2/3;
+  background-size: cover;
 }
 
 

src/App.tsx

@@ -4,12 +4,21 @@ import { MovieWall } from './objects/movie-wall'
 import { useState, useEffect } from 'react'
 import tmdb from './objects/tmdb'
 import { Sidebar } from './objects/sidebar'
+import { makeImgUrl } from './functions'
+import { Movie } from './objects/movie-wall'
 
 export type Config = {
   language: string,
   region: string,
   page: number,
 }
+class MovieClass implements Movie {
+  id = null
+  poster_path = null
+  backdrop_path = null
+  title = null
+  overview = null
+}
 
 function App() {
   const [config, setConfig] = useState<Config>({
@@ -17,12 +26,14 @@ function App() {
     region: "spain",
     page: 1
   })
-  const [movies, setMovies] = useState([])
+  const [movies, setMovies] = useState([new MovieClass()])
   const [backdrop, setBackdrop] = useState("")
+  const [chosenMovie, setChosenMovie] = useState(new MovieClass())
+
   useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
   useEffect(() => {
-    if (movies?.[0]) {
-      tmdb.getBackdrop(movies[0], setBackdrop)
+    if (movies[0].backdrop_path) {
+      setBackdrop(makeImgUrl(movies[0].backdrop_path))
     }
   }, [movies])
   return (
@@ -31,10 +42,10 @@ function App() {
         <h1>Movie Explorer</h1>
       </header>
       <main style={{ backgroundImage: backdrop }}>
-        <div className='flow-container'>
+        <div id="movie-wall-container">
           <MovieWall movies={movies} setMovies={setMovies} config={config} />
         </div>
-        <Sidebar movie={movies?.[0]} />
+        <Sidebar movie={chosenMovie} />
       </main>
 
     </>

src/index.css

@@ -25,6 +25,7 @@ a:hover {
 
 body {
   margin: 0;
+  display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;

src/objects/movie-wall.tsx

@@ -3,13 +3,15 @@ import { Config } from "../App"
 import tmdb from "./tmdb"
 import { makeImgUrl } from "../functions"
 
-export type Movie = {
-  id: number
-  poster_path: string
-  title: string
-  overview: string
+export interface Movie {
+  id: number | null
+  poster_path: string | null
+  backdrop_path: string | null
+  title: string | null
+  overview: string | null
 }
 
+
 const sampleData = {
   adult: false,
   backdrop_path: "/jnE1GA7cGEfv5DJBoU2t4bZHaP4.jpg",
@@ -57,10 +59,7 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
 
 function Poster({ movie, config, listSimilar, setMovies }: PosterProps) {
   const style = {
-    backgroundImage: makeImgUrl(movie.poster_path),
-    backgroundSize: "cover",
-    // alignSelf: "auto",
-    color: "inherit"
+    backgroundImage: makeImgUrl(movie.poster_path)
   }
   return <div className="poster" style={style}>
     <div className="overlay" onClick={() => { listSimilar(config, movie, setMovies) }}>

src/objects/sidebar.tsx

@@ -5,8 +5,7 @@ export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
 }
 export function Sidebar({ movie }: SidebarProps) {
   const style = {
-    backgroundImage: "url(https://image.tmdb.org/t/p/w500/" + movie?.poster_path + ")",
-    backgroundSize: "cover",
+
   }
   return <div id="sidebar" style={style}>
     <h1>{movie?.title ?? "loading"}</h1>

src/objects/tmdb.tsx

@@ -48,7 +48,10 @@ export default {
     console.log(res)
     if (res.status === 200) {
       const array: Array<Movie> = res.data.results
-      array.splice(18)
+        .filter((e: Movie) => {
+          return e.poster_path
+        })
+      array.splice(19)
       array.unshift(movie)
       callback(array)
       return true