src/*.d.ts

@@ -1 +0,0 @@
-declare module 'react-crossfade-image';

src/App.tsx

@@ -2,13 +2,12 @@ import './defaults.css'
 import './App.css'
 import './spinner.css'
 import { MovieWall } from './objects/movie-wall'
-import { HamburgerMenu } from './objects/HamburgerMenu'
-import { useState, useEffect } from 'react'
+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'
-import { WatchProviders } from './objects/whereToWatch'
 
 export type Config = {
   language: string,
@@ -25,15 +24,6 @@ class MovieClass implements Movie {
   vote_average = 0
 }
 
-class WatchProvidersClass implements WatchProviders {
-  flatrate = [];
-  rent = [];
-  buy = [];
-  link = "";
-}
-
-export interface Movies { Array<Movie>};
-
 function App() {
   const [config, setConfig] = useState<Config>({
     language: "es",
@@ -45,7 +35,7 @@ function App() {
   const [backdrop, setBackdrop] = useState("")
   const [chosenMovie, setChosenMovie] = useState(new MovieClass())
   const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true)
-  const [watchProviders, setWatchProviders] = useState(new WatchProvidersClass())
+  const [watchProviders, setWatchProviders] = useState({})
   useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
   useEffect(() => {
     const bgString = chosenMovie.backdrop_path ?
@@ -73,7 +63,7 @@ function App() {
         <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
       </div>
       <main >
-        <HamburgerMenu setConfig={setConfig} />
+        <HamburgerMenu config={config} setConfig={setConfig} />
         <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
         <div id="movie-wall-container">
           <MovieWall movies={movies}

src/objects/HamburgerMenu.tsx

@@ -1,9 +1,11 @@
+import { Config } from "../App"
 import React from "react"
 export interface HamburgerMenuProps extends React.ComponentPropsWithRef<"div"> {
+  config: Config;
   setConfig: Function;
 }
 
-export function HamburgerMenu({ setConfig }: HamburgerMenuProps) {
+export function HamburgerMenu({ config, setConfig }: HamburgerMenuProps) {
   const languages = [
     {
       value: "es",
@@ -14,33 +16,33 @@ export function HamburgerMenu({ setConfig }: HamburgerMenuProps) {
       label: "English"
     }
   ]
-  // const regions = [
-  //   {
-  //     value: "spain",
-  //     label: "España"
-  //   },
-  //   {
-  //     value: "UK",
-  //     label: "United Kingdom"
-  //   }
-  // ]
+  const regions = [
+    {
+      value: "spain",
+      label: "España"
+    },
+    {
+      value: "UK",
+      label: "United Kingdom"
+    }
+  ]
 
-  function handleLangChange(event: any) {
-    setConfig((prev: any) => {
+  function handleLangChange(event) {
+    setConfig(prev => {
       return {
         ...prev,
         language: event.target.value
       }
     })
   }
-  // function handleRegionChange(event:any) {
-  //   setConfig(( prev:any ) => {
-  //     return {
-  //       ...prev,
-  //       region: event.target.value
-  //     }
-  //   })
-  // }
+  function handleRegionChange(event) {
+    setConfig(prev => {
+      return {
+        ...prev,
+        region: event.target.value
+      }
+    })
+  }
   return <div id="hamburger">
     <select onChange={handleLangChange}>
       {languages.map((language) => <option value={language.value} key={language.value}>{language.label}</option>)}

src/objects/movie-wall.tsx

@@ -12,22 +12,22 @@ export interface Movie {
 }
 
 
-// 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
-// }
+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
+}
 
 interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
   movies: Array<Movie>;
@@ -44,7 +44,8 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
     const movie = movies[i]
     const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false
     posters.push(
-      <Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} setChosenMovie={setChosenMovie} setSimilarMoviesAvailable={setSimilarMoviesAvailable} />
+      <Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} setChosenMovie={setChosenMovie} setSimilarMoviesAvailable={setSimilarMoviesAvailable}
+      />
     )
   }
   return <>
@@ -75,7 +76,7 @@ function Poster({ movie, config, listSimilar, setMovies, setChosenMovie, setSimi
     "poster",
     isHighlighted ? "highlighted" : ""
   ].join(" ")
-  return <><div className={classes} >
+  return <div className={classes} >
     {isLoading ?
       <div className="spinner-container">
         <div className="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
@@ -89,6 +90,5 @@ function Poster({ movie, config, listSimilar, setMovies, setChosenMovie, setSimi
       onError={() => setHasError(true)}
     />
   </div>
-  </>
 }
 

src/objects/sidebar.tsx

@@ -1,14 +1,13 @@
 import React from "react";
 import { Movie } from "./movie-wall";
 import tmdb from "./tmdb";
-import { WatchProviders, WhereToWatch } from "./whereToWatch";
+import { WhereToWatch } from "./whereToWatch";
 import CrossfadeImage from 'react-crossfade-image'
 import { Config } from "../App";
-
 export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
   movie: Movie;
   similarMoviesAvailable: boolean;
-  watchProviders: WatchProviders;
+  watchProviders: {};
   config: Config;
 }
 export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config }: SidebarProps) {

src/objects/whereToWatch.tsx

@@ -2,61 +2,59 @@ import React from "react"
 import tmdb from "./tmdb"
 import { Config } from "../App"
 
-export interface WatchProviders {
-  flatrate: Array<{}>;
-  rent: Array<{}>;
-  buy: Array<{}>;
-  link: string;
-}
 interface WhereToWatchProps extends React.ComponentPropsWithRef<"div"> {
-  watchProviders: WatchProviders;
-  config: Config;
+  watchProviders: {
+    flatrate: Array<{}>;
+    rent: Array<{}>;
+    buy: Array<{}>;
+    link: string;
+  };
+}
+const sampleData = {
+  link: "https://www.themoviedb.org/movie/872585-oppenheimer/watch?locale=ES",
+  rent: [{
+    logo_path: "/7K6rVbpWXB6ByDI0PRzGGRXRBSY.jpg",
+    provider_id: 149,
+    provider_name: "Movistar Plus",
+    display_priority: 12
+  }],
+  buy: [{
+    logo_path: "/9ghgSC0MA082EL6HLCW3GalykFD.jpg",
+    provider_id: 2,
+    provider_name: "Apple TV",
+    display_priority: 4
+  },
+  {
+    logo_path: "/bZvc9dXrXNly7cA0V4D9pR8yJwm.jpg",
+    provider_id: 35,
+    provider_name: "Rakuten TV",
+    display_priority: 13
+  },
+  {
+    logo_path: "/8z7rC8uIDaTM91X0ZfkRf04ydj2.jpg",
+    provider_id: 3,
+    provider_name: "Google Play Movies",
+    display_priority: 15
+  },
+  {
+    logo_path: "/5vfrJQgNe9UnHVgVNAwZTy0Jo9o.jpg",
+    provider_id: 68,
+    provider_name: "Microsoft Store",
+    display_priority: 16
+  },
+  {
+    logo_path: "/seGSXajazLMCKGB5hnRCidtjay1.jpg",
+    provider_id: 10,
+    provider_name: "Amazon Video",
+    display_priority: 36
+  }],
+  flatrate: [{
+    logo_path: "/gQbqEYd0C9uprYxEUqTM589qn8g.jpg",
+    provider_id: 1773,
+    provider_name: "SkyShowtime",
+    display_priority: 9
+  }]
 }
-// const sampleData = {
-//   link: "https://www.themoviedb.org/movie/872585-oppenheimer/watch?locale=ES",
-//   rent: [{
-//     logo_path: "/7K6rVbpWXB6ByDI0PRzGGRXRBSY.jpg",
-//     provider_id: 149,
-//     provider_name: "Movistar Plus",
-//     display_priority: 12
-//   }],
-//   buy: [{
-//     logo_path: "/9ghgSC0MA082EL6HLCW3GalykFD.jpg",
-//     provider_id: 2,
-//     provider_name: "Apple TV",
-//     display_priority: 4
-//   },
-//   {
-//     logo_path: "/bZvc9dXrXNly7cA0V4D9pR8yJwm.jpg",
-//     provider_id: 35,
-//     provider_name: "Rakuten TV",
-//     display_priority: 13
-//   },
-//   {
-//     logo_path: "/8z7rC8uIDaTM91X0ZfkRf04ydj2.jpg",
-//     provider_id: 3,
-//     provider_name: "Google Play Movies",
-//     display_priority: 15
-//   },
-//   {
-//     logo_path: "/5vfrJQgNe9UnHVgVNAwZTy0Jo9o.jpg",
-//     provider_id: 68,
-//     provider_name: "Microsoft Store",
-//     display_priority: 16
-//   },
-//   {
-//     logo_path: "/seGSXajazLMCKGB5hnRCidtjay1.jpg",
-//     provider_id: 10,
-//     provider_name: "Amazon Video",
-//     display_priority: 36
-//   }],
-//   flatrate: [{
-//     logo_path: "/gQbqEYd0C9uprYxEUqTM589qn8g.jpg",
-//     provider_id: 1773,
-//     provider_name: "SkyShowtime",
-//     display_priority: 9
-//   }]
-// }
 interface ProviderIconsProps extends React.ComponentPropsWithRef<"div"> {
   providerList: Array<{}>;
   link: string;