movie-explorer/src/App.tsx

import './defaults.css'
import './App.css'
import './spinner.css'
import { MovieWall } from './objects/movie-wall'
import { HamburgerMenu, HamburgerMenuProps } from './objects/HamburgerMenu'
import React, { useState, useEffect } from 'react'
import tmdb from './objects/tmdb'
import { Sidebar } from './objects/sidebar'
import { Movie } from './objects/movie-wall'
import CrossfadeImage from 'react-crossfade-image'

export type Config = {
  language: string,
  region: string,
  page: number,
  locale: string
}
class MovieClass implements Movie {
  id = 0
  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,
    locale: "ES"
  })
  const [movies, setMovies] = useState([new MovieClass()])
  const [backdrop, setBackdrop] = useState("")
  const [chosenMovie, setChosenMovie] = useState(new MovieClass())
  const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true)
  const [watchProviders, setWatchProviders] = useState({})
  useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
  useEffect(() => {
    const bgString = chosenMovie.backdrop_path ?
      tmdb.makeBgImgUrl(chosenMovie.backdrop_path)
      : tmdb.makeBgImgUrl(movies[0]?.backdrop_path ?? "")
    setBackdrop(bgString)
  }, [movies])
  useEffect(() => {
    tmdb.getWhereToWatch(chosenMovie, setWatchProviders, config)
  }, [chosenMovie])
  //Whenever config changes, refresh data for current selection
  useEffect(() => {
    console.log("CONFIG CHANGED!!")
    tmdb.getMovie(config, chosenMovie.id, setChosenMovie)
    tmdb.getSimilar(config, chosenMovie, setMovies, setSimilarMoviesAvailable)
  }, [config])
  const crossfadeImageStyles = {
    width: "2560px",
    minHeight: "100%",
    aspectRatio: "16/9"
  }
  return (
    <>
      <div id="background">
        <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
      </div>
      <main >
        <HamburgerMenu config={config} setConfig={setConfig} />
        <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
        <div id="movie-wall-container">
          <MovieWall movies={movies}
            setMovies={setMovies}
            config={config}
            setChosenMovie={setChosenMovie}
            setSimilarMoviesAvailable={setSimilarMoviesAvailable}
          />
        </div>
      </main>
    </>
  )
}

export default App