File size: 3,176 Bytes
0527ba9 cb20bdc 0527ba9 cb20bdc 0527ba9 |
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 83 84 85 86 87 88 |
'use client';
import { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import apiClient from '@/api/apiClient'; // Updated for Next.js absolute import
import FilmCard from '@/components/film/card'; // Updated for Next.js absolute import
import { useFilmContext } from '@/context/FilmContext'; // Updated for Next.js absolute import
import './filmsPage.css'; // Updated for Next.js absolute import
import { faCaretLeft } from '@fortawesome/free-solid-svg-icons';
import { faCaretRight } from '@fortawesome/free-solid-svg-icons';
const FILMS_PER_PAGE = 2;
export default function FilmsPage() {
const { films, setFilms } = useFilmContext();
const [currentPage, setCurrentPage] = useState(1);
useEffect(() => {
if (films.length === 0) {
apiClient.getAllFilms()
.then(response => {
console.log('All films:', 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));
};
// Calculate total number of pages
const totalPages = Math.ceil(films.length / FILMS_PER_PAGE);
// Determine if the previous and next buttons should be enabled
const isPrevButtonEnabled = currentPage > 1;
const isNextButtonEnabled = currentPage < totalPages;
return (
<div className="films-page-container">
<div className="pagination-controls">
<button
onClick={handlePrevPage}
disabled={!isPrevButtonEnabled}
className="pagination-button"
>
<FontAwesomeIcon
icon={faCaretLeft}
size="2xl"
color='#3f5fd2'
bounce={isPrevButtonEnabled}
/>
</button>
<span className="page-info">
{currentPage} - {totalPages}
</span>
<button
onClick={handleNextPage}
disabled={!isNextButtonEnabled}
className="pagination-button"
>
<FontAwesomeIcon
icon={faCaretRight}
size="2xl"
color='#3f5fd2'
bounce={isNextButtonEnabled}
/>
</button>
</div>
<div className="films-page">
{currentFilms.map(title => (
<FilmCard key={title} title={title} />
))}
</div>
</div>
);
}
|