Resume
/
movie-explorer
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

quote out unneccessary variables

This commit is contained in:
andrzej 2024-05-23 15:54:06 +02:00
parent fc5ab51168
commit b0f24624ba
5 changed files with 110 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.tsx
View File

@ -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}

44
src/objects/HamburgerMenu.tsx
View File

@ -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>)}

38
src/objects/movie-wall.tsx
View File

@ -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>
</>
}

5
src/objects/sidebar.tsx
View File

@ -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) {

104
src/objects/whereToWatch.tsx
View File

@ -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;