pipe data into poster component

src/App.tsx

@@ -1,7 +1,21 @@
 import './App.css'
+import { MovieWall } from './objects/movie-wall'
+import { useState, useEffect } from 'react'
+import tmdb from './objects/tmdb'
+
+export type Config = {
+  language: string,
+  region: string
+}
 
 function App() {
-
+  const [config, setConfig] = useState<Config>({
+    language: "es",
+    region: "spain"
+  })
+  const [popularMovies, setPopularMovies] = useState([])
+  useEffect(() => { tmdb.getPopular(config, setPopularMovies) }, [])
+  useEffect(() => { console.log(popularMovies) }, [popularMovies])
   return (
     <>
       <header>
@@ -9,7 +23,9 @@ function App() {
       </header>
       <main>
         Let's explore!
+        <MovieWall movies={popularMovies} />
       </main>
+
     </>
   )
 }

src/objects/movie-wall.tsx

@@ -0,0 +1,56 @@
+import { FC } from "react"
+
+type Movie = {
+  id: string
+  poster_path: string
+  title: string
+  overview: string
+}
+
+const sampleData = {
+  adult: false,
+  backdrop_path: "/jnE1GA7cGEfv5DJBoU2t4bZHaP4.jpg",
+  genre_ids: [28, 878],
+  id: 1094844,
+  original_language: "en",
+  original_title: "Ape vs. Mecha Ape",
+  overview: "Recognizing the destructive power of its captive giant Ape, the military makes its own battle-ready A.I., Mecha Ape. But its first practical test goes horribly wrong, leaving the military no choice but to release the imprisoned giant ape to stop the colossal robot before it destroys downtown Chicago.",
+  popularity: 2157.099,
+  poster_path: "/dJaIw8OgACelojyV6YuVsOhtTLO.jpg",
+  release_date: "2023-03-24",
+  title: "Ape vs. Mecha Ape",
+  video: false,
+  vote_average: 5.538,
+  vote_count: 52
+}
+
+
+export const MovieWall: FC<{ movies: Array<Movie> }> = (props) => {
+  const movies = props.movies
+
+
+
+  const posters = []
+  for (let i = 0; i < movies.length; i++) {
+    const movie = movies[i]
+    posters.push(
+      <Poster movie={movie} />
+    )
+  }
+  return <>
+    {posters}
+  </>
+}
+
+type PosterProps = {
+  movie: Movie;
+}
+
+function Poster({ movie }: PosterProps) {
+  return <a href={"https://www.themoviedb.org/movie/" + movie.id}>
+    <h1>{movie.title}</h1>
+    <p>{movie.overview}</p>
+    <img src={"https://image.tmdb.org/t/p/w500/" + movie.poster_path} />
+  </a>
+}
+

src/objects/popular.tsx

@@ -1,8 +0,0 @@
-import * as tmdb from 'tmdb-js-wrapper';
-
-export default function() {
-
-}
-
-
-

src/objects/tmdb.tsx

@@ -0,0 +1,24 @@
+import axios from 'axios'
+import * as auth from '../auth.json';
+import { Config } from '../App';
+
+const tmdb = axios.create({
+  baseURL: `https://api.themoviedb.org/3/movie`,
+  headers: {
+    Authorization: 'Bearer ' + auth.token,
+    'Content-Type': 'application/json',
+  }
+})
+export default {
+  getPopular: async function({ language, region }: Config, callback: Function) {
+    let res = await tmdb.get('/popular?language=en-US&page=1',
+      {
+        params: {
+          language,
+          region
+        }
+      })
+    res = res.data.results
+    callback(res)
+  }
+}