import React, { useEffect, useState } from "react";
import axios from "axios";
import styles from "../../stylesheets/AllBook.module.css"; // Use CSS Module
function AllBook() {
const [books, setBooks] = useState([]);
const [page, setPage] = useState(1);
const pageSize = 10;
const [totalCount, setTotalCount] = useState(0);
const totalPages = Math.ceil(totalCount / pageSize);
const fetchBooks = async () => {
try {
const res = await axios.get(
`http://localhost:8080/api/books/all?page=${page}&pageSize=${pageSize}`
);
setBooks(res.data.books);
setTotalCount(res.data.totalCount);
} catch (err) {
console.error("Error fetching books:", err);
}
};
useEffect(() => {
fetchBooks();
}, [page]);
return (
<div className={styles.container}>
<h2>
All Books (Page {page} of {totalPages})
</h2>
<div className={styles.bookGrid}>
{books.map((book) => (
<div key={book.bookId} className={styles.bookCard}>
<div>
<img src={book.bookCoverPath} alt={book.title} />
</div>
<div>
<p>4.3*</p>
<h3>{book.title}</h3>
<p>by {book.author}</p>
<p>₹{book.price}</p>
{/* <p>{book.description}</p> */}
{/* <p className={styles.genre}>Genres: {book.genre}</p> */}
</div>
<div className="add-to-cart">
<button>Add to Cart</button>
</div>
</div>
))}
</div>
<div className={styles.pagination}>
<button
onClick={() => setPage((p) => Math.max(p - 1, 1))}
disabled={page === 1}
>
« Prev
</button>
{[...Array(totalPages)].map((_, i) => (
<button
key={i + 1}
onClick={() => setPage(i + 1)}
className={page === i + 1 ? styles.active : ""}
>
{i + 1}
</button>
))}
<button
onClick={() => setPage((p) => Math.min(p + 1, totalPages))}
disabled={page === totalPages}
>
Next »
</button>
</div>
</div>
);
}
export default AllBook;
