From 1f9a1e9af81a8fb0c9b83f8b5e08b798f8ef7ffd Mon Sep 17 00:00:00 2001
From: dick <adrien.dick@etu.u-pec.fr>
Date: Thu, 11 Jun 2026 05:52:26 -0400
Subject: [PATCH] :sparkles: Voir le detail d'un livre

---
 my-library/src/App.jsx              |  2 ++
 my-library/src/api/books.jsx        |  4 ++++
 my-library/src/pages/BookDetail.jsx | 31 +++++++++++++++++++++++++++++
 my-library/src/pages/Books.jsx      |  4 +++-
 4 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 my-library/src/pages/BookDetail.jsx

diff --git a/my-library/src/App.jsx b/my-library/src/App.jsx
index 4873915..0b72acb 100644
--- a/my-library/src/App.jsx
+++ b/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>
   );
diff --git a/my-library/src/api/books.jsx b/my-library/src/api/books.jsx
index c9ba492..643d63f 100644
--- a/my-library/src/api/books.jsx
+++ b/my-library/src/api/books.jsx
@@ -6,4 +6,8 @@ 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}`);
 }
\ No newline at end of file
diff --git a/my-library/src/pages/BookDetail.jsx b/my-library/src/pages/BookDetail.jsx
new file mode 100644
index 0000000..68194d6
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/my-library/src/pages/Books.jsx b/my-library/src/pages/Books.jsx
index 393db4e..0c283e5 100644
--- a/my-library/src/pages/Books.jsx
+++ b/my-library/src/pages/Books.jsx
@@ -32,7 +32,9 @@ export default function Books() {
       <ul>
         {books.map((book) => (
           <li key={book.isbn}>
-            <strong>{book.title}</strong> - {book.author}
+            <Link to={`/books/${book.isbn}`}>
+              <strong>{book.title}</strong> - {book.author}
+            </Link>
           </li>
         ))}
       </ul>