✨ Voir le detail d'un livre

my-library/src/App.jsx

@@ -6,6 +6,7 @@ import Orders from './pages/Orders';
 import Profile from './pages/Profile';
 import NotFound from './pages/NotFound';
 import AddBook from './pages/AddBook';
+import BookDetail from './pages/BookDetail';
 
 export default function App() {
   return (
@@ -17,6 +18,7 @@ export default function App() {
         <Route path="profile" element={<Profile />} />
         <Route path="*" element={<NotFound />} />
         <Route path="books/new" element={<AddBook />} />
+        <Route path="books/:bookId" element={<BookDetail />} />
       </Route>
     </Routes>
   );

my-library/src/api/books.jsx

@@ -7,3 +7,7 @@ export function getBooks(page = 0, size = 20) {
 export function registerBook(book) {
   return client.post('/api/books', book);
 }
+
+export function getBookById(id) {
+  return client.get(`/api/books/${id}`);
+}

my-library/src/pages/BookDetail.jsx

@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { getBookById } from '../api/books';
+
+export default function BookDetail() {
+  const { bookId } = useParams();  
+  const [book, setBook] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {getBookById(bookId).then((response) => setBook(response.data)).catch((err) => {console.error(err);setError('Livre introuvable.');}).finally(() => setLoading(false));}, [bookId]);             
+
+  if (loading) return <main><p>Chargement…</p></main>;
+  if (error) return <main><p>{error}</p><Link to="/books">← Retour au catalogue</Link></main>;
+
+  return (
+    <main>
+      <Link to="/books">← Retour au catalogue</Link>
+      <h1>{book.title}</h1>
+      <p>Auteur : {book.author}</p>
+      <p>ISBN : {book.isbn}</p>
+      <p>Éditeur : {book.publisher}</p>
+      <p>Publié le : {book.publicationDate}</p>
+      <p>Prix : {book.price} €</p>
+      <p>Stock : {book.quantity}</p>
+      <p>Langue : {book.language}</p>
+      <p>Catégories : {book.categories?.join(', ')}</p>
+      {book.description && <p>{book.description}</p>}
+    </main>
+  );
+}

my-library/src/pages/Books.jsx

@@ -32,7 +32,9 @@ export default function Books() {
       <ul>
         {books.map((book) => (
           <li key={book.isbn}>
+            <Link to={`/books/${book.isbn}`}>
               <strong>{book.title}</strong> - {book.author}
+            </Link>
           </li>
         ))}
       </ul>