✨ Get api/books pour la page catalogue
This commit is contained in:
@@ -1,3 +1,39 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getBooks } from '../api/books';
|
||||
|
||||
export default function Books() {
|
||||
return <main><h1>Catalogue</h1></main>;
|
||||
const [books, setBooks] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
getBooks()
|
||||
.then((response) => {
|
||||
console.log(response.data);
|
||||
setBooks(response.data.content);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setError("Impossible de charger les livres.");
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (loading) return <main><p>Chargement…</p></main>;
|
||||
if (error) return <main><p>{error}</p></main>;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<h1>Catalogue</h1>
|
||||
<ul>
|
||||
{books.map((book) => (
|
||||
<li key={book.isbn}>
|
||||
<strong>{book.title}</strong> - {book.author}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user