✨ Get api/books pour la page catalogue

my-library/src/api/books.jsx

@@ -0,0 +1,5 @@
+import client from './client';
+
+export function getBooks(page = 0, size = 20) {
+  return client.get('/api/books', { params: { page, size } });
+}

my-library/src/api/client.jsx

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const client = axios.create({
+  baseURL: 'http://localhost:8080',
+});
+
+export default client;

my-library/src/pages/Books.jsx

@@ -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>
+  );
 }