list similar to clicked movie

src/App.tsx

@@ -6,7 +6,8 @@ import tmdb from './objects/tmdb'
 
 export type Config = {
   language: string,
-  region: string
+  region: string,
+  page: number,
 }
 
 function App() {
@@ -26,7 +27,7 @@ function App() {
       <main>
         Let's explore!
         <div className='flow-container'>
-          <MovieWall movies={movies} setMovies={setMovies} />
+          <MovieWall movies={movies} setMovies={setMovies} config={config} />
         </div>
       </main>
 

src/objects/movie-wall.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from "react"
 import { relocateArrayItem } from "../functions"
+import { Config } from "../App"
+import tmdb from "./tmdb"
 
-type Movie = {
-  id: string
+export type Movie = {
+  id: number
   poster_path: string
   title: string
   overview: string
@@ -28,24 +30,15 @@ const sampleData = {
 interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
   movies: Array<Movie>;
   setMovies: Function;
+  config: Config;
 }
 
-export function MovieWall({ movies, setMovies }: MovieWallProps) {
-
-  function moveMovieToFront(index: number) {
-    setMovies((prev: Array<Movie>) => { return relocateArrayItem(prev, index, 0) })
-  }
-
-  function listSimilarMovies(movie: Movie) {
-
-
-  }
+export function MovieWall({ movies, setMovies, config }: MovieWallProps) {
 
   const posters: Array<React.Component> = []
   for (let i = 0; i < movies.length; i++) {
-    const movie = movies[i]
     posters.push(
-      <Poster movie={movie} key={movie.id} index={i} moveMovieToFront={moveMovieToFront} />
+      <Poster movie={movies[i]} key={movies[i].id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} />
     )
   }
   return <>
@@ -55,12 +48,14 @@ export function MovieWall({ movies, setMovies }: MovieWallProps) {
 
 interface PosterProps extends React.ComponentPropsWithRef<"div"> {
   movie: Movie;
-  moveMovieToFront: Function;
+  listSimilar: Function;
   index: number;
+  config: Config;
+  setMovies: Function;
 }
 
 
-function Poster({ movie, index, moveMovieToFront: onclick }: PosterProps) {
+function Poster({ movie, config, listSimilar, setMovies }: PosterProps) {
   const [style, setStyle] = useState({
     backgroundImage: "url(https://image.tmdb.org/t/p/w500/" + movie.poster_path + ")",
     backgroundSize: "cover",
@@ -68,7 +63,7 @@ function Poster({ movie, index, moveMovieToFront: onclick }: PosterProps) {
     color: "inherit"
   })
   return <div className="poster" style={style}>
-    <div className="overlay" onClick={() => { onclick(index) }}>
+    <div className="overlay" onClick={() => { listSimilar(config, movie, setMovies) }}>
       <h1>{movie.title}</h1>
       <p>{movie.overview}</p>
 

src/objects/tmdb.tsx

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import * as auth from '../auth.json';
+import { Movie } from './movie-wall';
 import { Config } from '../App';
 
 const tmdb = axios.create({
@@ -34,10 +35,10 @@ export default {
     }
   },
   /**
-   * Calls TMDB/similar 
+   * Calls TMDB/similar, then fires the callback with res.data.results.unshift(movie) as argument
    */
-  getSimilar: async function({ language, page }: Config, id: number, callback: Function) {
-    let res = await tmdb.get(id + '/similar', {
+  getSimilar: async function({ language, page }: Config, movie: Movie, callback: Function) {
+    let res = await tmdb.get(movie.id + '/similar', {
       params: {
         language,
         page
@@ -45,8 +46,9 @@ export default {
     })
     console.log(res)
     if (res.status === 200) {
-      res = res.data.results
-      callback(res)
+      const array: Array<Movie> = res.data.results
+      array.unshift(movie)
+      callback(array)
       return true
     } else {
       throw Error("API call failed! Response: " + JSON.stringify(res))