Untitled
unknown
plain_text
2 years ago
2.6 kB
3
Indexable
import React, { useEffect, useState } from 'react'; import Genres from './Genres'; function Movie() { const [movies, setMovies] = useState([]); const [genres, setGenres] = useState([]); /* fetch('https://api.themoviedb.org/3/discover/movie?api_key=e16d67854e21827198d7598e0fb0b0fd') .then(res => res.json()) .then(json => setMovies(json.results)) */ const options = { method: 'GET', headers: { accept: 'application/json', Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJlMTZkNjc4NTRlMjE4MjcxOThkNzU5OGUwZmIwYjBmZCIsInN1YiI6IjY1MTZhZmJmYTE5OWE2MDEzOGI4MWU0NyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.JcDppgMNSax-FO2JJLKXhXghF3eSv4E0ulOCtWDdhhg' } }; const getMovie = () => { Promise.all([ fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1?api_key=e16d67854e21827198d7598e0fb0b0fd', options), fetch('https://api.themoviedb.org/3/genre/movie/list?language=en', options) ]) .then(([resMovies, resGenres]) => Promise.all([resMovies.json(), resGenres.json()]) ) .then(([dataMovie, dataGenres]) => { setMovies(dataMovie.results); setGenres(dataGenres.genres) }) /* .then(response => setMovies(response.results)) */ .catch(err => console.error(err)); } useEffect(() => { getMovie() }, []) console.log(movies); console.log(genres); const idToGenre = {}; for (const genre of genres) { idToGenre[genre.id] = genre.name; } console.log(idToGenre); return ( <div> <h1>Top Rated Movies</h1> {movies.map((movie) => ( <div key={movie.id}> <img style={ { width: 'auto', height: '500px', marginLeft: '10px', marginTop: '10px' }} src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} alt='movie poster' /> <p>{movie.original_title}</p> <p>{movie.genre_ids}</p> <p>{movie.release_date}</p> <p>Ocjena: {movie.vote_average}/10 </p> </div> )) } <Genres /> </div> ) } export default Movie;
Editor is loading...