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'

export type Config = {
  language: string,
  region: string,
  page: number,
}

function App() {
  const [config, setConfig] = useState<Config>({
    language: "es",
    region: "spain",
    page: 1
  })
  const [movies, setMovies] = useState([])
  const [backdrop, setBackdrop] = useState("")
  useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
  useEffect(() => {
    if (movies?.[0]) {
      tmdb.getBackdrop(movies[0], setBackdrop)
    }
  }, [movies])
  return (
    <>
      <header>
        <h1>Movie Explorer</h1>
      </header>
      <main style={{ backgroundImage: backdrop }}>
        <div className='flow-container'>
          <MovieWall movies={movies} setMovies={setMovies} config={config} />
        </div>
        <Sidebar movie={movies?.[0]} />
      </main>

    </>
  )
}

export default App