progress...

src/App.css

@@ -2,6 +2,7 @@
 
   --poster-width: 15rem;
   --posters-wide: 10;
+  --posters-gap: 1rem;
 }
 
 #root {
@@ -12,13 +13,15 @@
 main {
   display: flex;
   background-size: cover;
+  justify-content: center;
 }
 
 
 #movie-wall-container {
   display: inline-flex;
   flex-wrap: wrap;
-  flex-basis: calc(var(--poster-width)*var(--posters-wide))
+  flex-basis: 60%;
+  gap: 1em;
 }
 
 #sidebar {
@@ -29,6 +32,16 @@ main {
   width: var(--poster-width);
   aspect-ratio: 2/3;
   background-size: cover;
+  display: grid;
+
+  img {
+    height: 100%;
+    aspect-ratio: 2/3;
+  }
+}
+
+.poster>* {
+  grid-area: 1/1;
 }
 
 
@@ -38,8 +51,9 @@ main {
   height: 100%;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.5);
-  opacity: 0;
   cursor: pointer;
+  z-index: 2;
+  opacity: 0;
 }
 
 .overlay:hover {

src/App.tsx

@@ -4,7 +4,6 @@ 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 = {
@@ -29,11 +28,13 @@ function App() {
   const [movies, setMovies] = useState([new MovieClass()])
   const [backdrop, setBackdrop] = useState("")
   const [chosenMovie, setChosenMovie] = useState(new MovieClass())
+  const [loadedMovies, setLoadedMovies] = useState(0)
 
   useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
   useEffect(() => {
+    setLoadedMovies(movies.length)
     if (movies[0].backdrop_path) {
-      setBackdrop(makeImgUrl(movies[0].backdrop_path))
+      setBackdrop(tmdb.makeBgImgUrl(movies[0].backdrop_path))
     }
   }, [movies])
   return (
@@ -43,8 +44,14 @@ function App() {
       </header>
       <main style={{ backgroundImage: backdrop }}>
         <div id="movie-wall-container">
-          <MovieWall movies={movies} setMovies={setMovies} config={config} />
-        </div>
+          {loadedMovies === movies.length ?
+            <MovieWall movies={movies}
+              setMovies={setMovies}
+              config={config}
+              setChosenMovie={setChosenMovie}
+              setLoadedMovies={setLoadedMovies}
+            />
+            : "LOADING  " + loadedMovies} </div>
         <Sidebar movie={chosenMovie} />
       </main>
 

src/functions.tsx

@@ -19,7 +19,4 @@ export function relocateArrayItem(array: Array<any>, from: number, to: number) {
 /**
  * Returns a complete tmdb image url
  */
-export function makeImgUrl(path: string) {
-  return "url(https://image.tmdb.org/t/p/w500" + path + ")"
-}
 

src/objects/movie-wall.tsx

@@ -1,7 +1,6 @@
-import React from "react"
+import React, { useState } from "react"
 import { Config } from "../App"
 import tmdb from "./tmdb"
-import { makeImgUrl } from "../functions"
 
 export interface Movie {
   id: number | null
@@ -32,15 +31,17 @@ const sampleData = {
 interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
   movies: Array<Movie>;
   setMovies: Function;
+  setChosenMovie: Function;
+  setLoadedMovies: Function;
   config: Config;
 }
 
-export function MovieWall({ movies, setMovies, config }: MovieWallProps) {
+export function MovieWall({ movies, setMovies, config, setChosenMovie, setLoadedMovies }: MovieWallProps) {
 
   const posters: Array<React.Component> = []
   for (let i = 0; i < movies.length; i++) {
     posters.push(
-      <Poster movie={movies[i]} key={movies[i].id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} />
+      <Poster movie={movies[i]} key={movies[i].id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} setChosenMovie={setChosenMovie} setLoadedMovies={setLoadedMovies} />
     )
   }
   return <>
@@ -54,17 +55,26 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
   index: number;
   config: Config;
   setMovies: Function;
+  setChosenMovie: Function;
+  setLoadedMovies: Function;
 }
 
 
-function Poster({ movie, config, listSimilar, setMovies }: PosterProps) {
+function Poster({ movie, config, listSimilar, setMovies, setChosenMovie, setLoadedMovies }: PosterProps) {
+  function clickHandler() {
+    setChosenMovie(movie)
+    listSimilar(config, movie, setMovies)
+  }
   const style = {
-    backgroundImage: makeImgUrl(movie.poster_path)
+    // backgroundImage: img.src
   }
   return <div className="poster" style={style}>
-    <div className="overlay" onClick={() => { listSimilar(config, movie, setMovies) }}>
-
+    <div className="overlay" onClick={() => clickHandler()}>
     </div>
+    <img
+      src={tmdb.makeImgUrl(movie.poster_path ?? "")}
+      onLoad={() => console.log("LOADED IMG")}
+    />
   </div>
 }
 

src/objects/sidebar.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { Movie } from "./movie-wall";
+import tmdb from "./tmdb";
 export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
   movie: Movie;
 }
 export function Sidebar({ movie }: SidebarProps) {
   const style = {
-
+    backgroundImage: tmdb.makeBgImgUrl(movie.backdrop_path ?? "")
   }
   return <div id="sidebar" style={style}>
     <h1>{movie?.title ?? "loading"}</h1>

src/objects/tmdb.tsx

@@ -2,7 +2,6 @@ import axios from 'axios'
 import * as auth from '../auth.json';
 import { Movie } from './movie-wall';
 import { Config } from '../App';
-import { makeImgUrl } from '../functions';
 
 const tmdb = axios.create({
   baseURL: `https://api.themoviedb.org/3/movie`,
@@ -70,7 +69,7 @@ export default {
     if (res.status === 200) {
       const file_path = res.data.backdrops[0].file_path
       console.log("file_path:" + file_path)
-      const imgUrl = makeImgUrl(file_path)
+      const imgUrl = this.makeBgImgUrl(file_path)
       console.log("imgUrl: " + imgUrl)
       setBackdrop(imgUrl)
     } else {
@@ -78,6 +77,19 @@ export default {
     }
 
 
+  },
+  makeBgImgUrl:
+    /**
+     * Returns a complete tmdb image url formatted for css
+     */
+    function(path: string) {
+      return "url(https://image.tmdb.org/t/p/w500" + path + ")"
+    },
+  makeImgUrl:
+    /**
+    * Returns a complete tmdb img url
+    */
+    function(path: string) {
+      return "https://image.tmdb.org/t/p/w500" + path
     }
-
 }