File size: 2,442 Bytes
03769d0 0879a03 03769d0 1a805b3 03769d0 3529dfb 03769d0 1a805b3 03769d0 1a805b3 03769d0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
'use client';
import { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import apiClient from '@/api/apiClient';
import MovieCard from '@/components/MovieCard';
import { useFilmContext } from '@/context/FilmContext';
import './filmsPage.css';
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
import Link from 'next/link';
const FILMS_PER_PAGE = 2;
export default function FilmsPage() {
const { films, setFilms } = useFilmContext();
const [currentPage, setCurrentPage] = useState(1);
useEffect(() => {
if (films.length === 0) {
apiClient.getAllMovies()
.then(response => {
setFilms(response.map(film => film.replace('films/', '')));
})
.catch(error => {
console.error('Failed to get all films:', error);
});
}
}, [films, setFilms]);
const startIndex = (currentPage - 1) * FILMS_PER_PAGE;
const currentFilms = films.slice(startIndex, startIndex + FILMS_PER_PAGE);
const handleNextPage = () => {
setCurrentPage(prevPage => prevPage + 1);
};
const handlePrevPage = () => {
setCurrentPage(prevPage => Math.max(prevPage - 1, 1));
};
const totalPages = Math.ceil(films.length / FILMS_PER_PAGE);
const isPrevButtonEnabled = currentPage > 1;
const isNextButtonEnabled = currentPage < totalPages;
return (
<div className="films-page-container">
<div className="films-page">
{currentFilms.map((title, index) => (
<Link key={index} href={`/movie/${title}`}>
<MovieCard title={title} />
</Link>
))}
</div>
<div className="pagination-controls">
<button
onClick={handlePrevPage}
disabled={!isPrevButtonEnabled}
className={`pagination-button ${isPrevButtonEnabled ? 'enabled' : 'disabled'}`}
>
<FontAwesomeIcon
icon={faChevronLeft}
size="xl"
/>
</button>
<span className="page-info">
{currentPage} of {totalPages}
</span>
<button
onClick={handleNextPage}
disabled={!isNextButtonEnabled}
className={`pagination-button ${isNextButtonEnabled ? 'enabled' : 'disabled'}`}
>
<FontAwesomeIcon
icon={faChevronRight}
size="xl"
/>
</button>
</div>
</div>
);
}
|