From b0f24624ba632e442f19cccee69d4d120ab19301 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Thu, 23 May 2024 15:54:06 +0200
Subject: [PATCH] quote out unneccessary variables

---
 src/App.tsx                   |  18 ++++--
 src/objects/HamburgerMenu.tsx |  44 +++++++-------
 src/objects/movie-wall.tsx    |  38 ++++++-------
 src/objects/sidebar.tsx       |   5 +-
 src/objects/whereToWatch.tsx  | 104 +++++++++++++++++-----------------
 5 files changed, 110 insertions(+), 99 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d5ea452..15d226b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,12 +2,13 @@ import './defaults.css'
 import './App.css'
 import './spinner.css'
 import { MovieWall } from './objects/movie-wall'
-import { HamburgerMenu, HamburgerMenuProps } from './objects/HamburgerMenu'
-import React, { useState, useEffect } from 'react'
+import { HamburgerMenu } from './objects/HamburgerMenu'
+import { 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,
@@ -24,6 +25,15 @@ 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",
@@ -35,7 +45,7 @@ function App() {
   const [backdrop, setBackdrop] = useState("")
   const [chosenMovie, setChosenMovie] = useState(new MovieClass())
   const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true)
-  const [watchProviders, setWatchProviders] = useState({})
+  const [watchProviders, setWatchProviders] = useState(new WatchProvidersClass())
   useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
   useEffect(() => {
     const bgString = chosenMovie.backdrop_path ?
@@ -63,7 +73,7 @@ function App() {
         <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
       </div>
       <main >
-        <HamburgerMenu config={config} setConfig={setConfig} />
+        <HamburgerMenu setConfig={setConfig} />
         <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
         <div id="movie-wall-container">
           <MovieWall movies={movies}
diff --git a/src/objects/HamburgerMenu.tsx b/src/objects/HamburgerMenu.tsx
index 25f3944..983afc6 100644
--- a/src/objects/HamburgerMenu.tsx
+++ b/src/objects/HamburgerMenu.tsx
@@ -1,11 +1,9 @@
-import { Config } from "../App"
 import React from "react"
 export interface HamburgerMenuProps extends React.ComponentPropsWithRef<"div"> {
-  config: Config;
   setConfig: Function;
 }
 
-export function HamburgerMenu({ config, setConfig }: HamburgerMenuProps) {
+export function HamburgerMenu({ setConfig }: HamburgerMenuProps) {
   const languages = [
     {
       value: "es",
@@ -16,33 +14,33 @@ export function HamburgerMenu({ config, 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) {
-    setConfig(prev => {
+  function handleLangChange(event: any) {
+    setConfig((prev: any) => {
       return {
         ...prev,
         language: event.target.value
       }
     })
   }
-  function handleRegionChange(event) {
-    setConfig(prev => {
-      return {
-        ...prev,
-        region: event.target.value
-      }
-    })
-  }
+  // function handleRegionChange(event:any) {
+  //   setConfig(( prev:any ) => {
+  //     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>)}
diff --git a/src/objects/movie-wall.tsx b/src/objects/movie-wall.tsx
index 1630667..a0eca05 100644
--- a/src/objects/movie-wall.tsx
+++ b/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,8 +44,7 @@ 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 <>
@@ -76,7 +75,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>
@@ -90,5 +89,6 @@ function Poster({ movie, config, listSimilar, setMovies, setChosenMovie, setSimi
       onError={() => setHasError(true)}
     />
   </div>
+  </>
 }
 
diff --git a/src/objects/sidebar.tsx b/src/objects/sidebar.tsx
index 9010bb3..dd7bafe 100644
--- a/src/objects/sidebar.tsx
+++ b/src/objects/sidebar.tsx
@@ -1,13 +1,14 @@
 import React from "react";
 import { Movie } from "./movie-wall";
 import tmdb from "./tmdb";
-import { WhereToWatch } from "./whereToWatch";
+import { WatchProviders, 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) {
diff --git a/src/objects/whereToWatch.tsx b/src/objects/whereToWatch.tsx
index 8e722d5..ba72d32 100644
--- a/src/objects/whereToWatch.tsx
+++ b/src/objects/whereToWatch.tsx
@@ -2,59 +2,61 @@ 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: {
-    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
-  }]
+  watchProviders: WatchProviders;
+  config: Config;
 }
+// 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;