69 lines
1.9 KiB
JavaScript
69 lines
1.9 KiB
JavaScript
|
import React, { useState, useEffect } from "react";
|
||
|
|
import "./Movie.css";
|
||
|
|
|
||
|
|
function Movie({ filters }) {
|
||
|
|
const [movieList, setMovieList] = useState([]);
|
||
|
|
const [page, setPage] = useState(1);
|
||
|
|
|
||
|
|
|
||
|
|
const getMovie = (pageNumber, filters) => {
|
||
|
|
const { genre, year, rating } = filters;
|
||
|
|
let url = `https://api.themoviedb.org/3/discover/movie?api_key=59690efd14e375225c4531fcdced2901&page=${pageNumber}`;
|
||
|
|
|
||
|
|
if (genre) url += `&with_genres=${genre}`;
|
||
|
|
if (year) url += `&year=${year}`;
|
||
|
|
if (rating[0] && rating[1])
|
||
|
|
url += `&vote_average.gte=${rating[0]}&vote_average.lte=${rating[1]}`;
|
||
|
|
|
||
|
|
fetch(url)
|
||
|
|
.then((res) => res.json())
|
||
|
|
.then((json) => setMovieList(json.results));
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
getMovie(page, filters);
|
||
|
|
}, [page, filters]);
|
||
|
|
|
||
|
|
const handleNextPage = () => {
|
||
|
|
setPage((prevPage) => prevPage + 1);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handlePreviousPage = () => {
|
||
|
|
if (page > 1) {
|
||
|
|
setPage((prevPage) => prevPage - 1);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<><div className="movie-container">
|
||
|
|
{movieList.map((movie) => (
|
||
|
|
<div key={movie.id} className="movie-card">
|
||
|
|
<img
|
||
|
|
className="movie-poster"
|
||
|
|
src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
|
||
|
|
alt={movie.title} />
|
||
|
|
<div className="movie-details">
|
||
|
|
<h3 className="movie-title">{movie.title}</h3>
|
||
|
|
<p className="movie-overview">{movie.overview}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
|
||
|
|
<div className="pagination-controls">
|
||
|
|
<button
|
||
|
|
className="pagination-button"
|
||
|
|
onClick={handlePreviousPage}
|
||
|
|
disabled={page === 1}
|
||
|
|
>
|
||
|
|
Previous
|
||
|
|
</button>
|
||
|
|
<button className="pagination-button" onClick={handleNextPage}>
|
||
|
|
Next
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div></>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Movie;
|