movie-explorer/src/App.tsx

import './defaults.css'
import './App.css'
import { MovieWall } from './objects/movie-wall'
import { useState, useEffect } from 'react'
import tmdb from './objects/tmdb'
import { Sidebar } from './objects/sidebar'
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
  vote_average = 0
}

function App() {
  const [config, setConfig] = useState<Config>({
    language: "es",
    region: "spain",
    page: 1
  })
  const [movies, setMovies] = useState([new MovieClass()])
  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(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} similarMoviesAvailable={similarMoviesAvailable} />
          <div id="movie-wall-container">
            {loadedMovies === movies.length ?
              <MovieWall movies={movies}
                setMovies={setMovies}
                config={config}
                setChosenMovie={setChosenMovie}
                setLoadedMovies={setLoadedMovies}
                setSimilarMoviesAvailable={setSimilarMoviesAvailable}
              />
              : "LOADING  " + loadedMovies} </div>
        </main>
      </div>
    </>
  )
}

export default App