From 5d6eaee4bac3c7888639a5b34f5c1956bdf65aac Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Thu, 2 May 2024 22:47:28 +0200
Subject: [PATCH] pipe data into poster component

---
 src/App.tsx                | 18 +++++++++++-
 src/objects/Poster.tsx     |  0
 src/objects/movie-wall.tsx | 56 ++++++++++++++++++++++++++++++++++++++
 src/objects/popular.tsx    |  8 ------
 src/objects/tmdb.tsx       | 24 ++++++++++++++++
 5 files changed, 97 insertions(+), 9 deletions(-)
 create mode 100644 src/objects/Poster.tsx
 create mode 100644 src/objects/movie-wall.tsx
 delete mode 100644 src/objects/popular.tsx
 create mode 100644 src/objects/tmdb.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 969d177..5c4fef2 100644
--- a/src/App.tsx
+++ b/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>
+
     </>
   )
 }
diff --git a/src/objects/Poster.tsx b/src/objects/Poster.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/objects/movie-wall.tsx b/src/objects/movie-wall.tsx
new file mode 100644
index 0000000..6667161
--- /dev/null
+++ b/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>
+}
+
diff --git a/src/objects/popular.tsx b/src/objects/popular.tsx
deleted file mode 100644
index 5ab8d5e..0000000
--- a/src/objects/popular.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as tmdb from 'tmdb-js-wrapper';
-
-export default function() {
-
-}
-
-
-
diff --git a/src/objects/tmdb.tsx b/src/objects/tmdb.tsx
new file mode 100644
index 0000000..8aaa9d6
--- /dev/null
+++ b/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)
+  }
+}