Untitled

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;