reservation livres

my-library/src/pages/BookDetail.jsx

@@ -1,34 +1,26 @@
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { getBookById, reserveBook } from '../api/books';
+import { getBookById } from '../api/books';
 import { useAuth } from '../context/AuthContext';
+import { useReservations } from '../context/ReservationContext';
 
 export default function BookDetail() {
   const { user } = useAuth();
+  const { addReservation } = useReservations();
   const { bookId } = useParams();
   const [book, setBook] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [phoneNumber, setPhoneNumber] = useState('');
   const [reservationStatus, setReservationStatus] = useState(null);
-  const [reserving, setReserving] = useState(false);
 
   useEffect(() => { getBookById(bookId).then((response) => setBook(response.data)).catch((err) => { console.error(err); setError('Livre introuvable.'); }).finally(() => setLoading(false)); }, [bookId]);
 
   function handleReservation(e) {
     e.preventDefault();
-    setReserving(true);
-    setReservationStatus(null);
-    reserveBook(bookId, { phoneNumber })
-      .then(() => {
-        setReservationStatus({ success: true, message: 'Réservation effectuée avec succès !' });
-        setPhoneNumber('');
-      })
-      .catch((err) => {
-        const msg = err.response?.data || 'Erreur lors de la réservation.';
-        setReservationStatus({ success: false, message: msg });
-      })
-      .finally(() => setReserving(false));
+    addReservation(book, phoneNumber);
+    setReservationStatus({ success: true, message: 'Réservation effectuée avec succès !' });
+    setPhoneNumber('');
   }
 
   if (loading) return <main><p>Chargement…</p></main>;
@@ -61,9 +53,7 @@ export default function BookDetail() {
               required
             />
           </label>
-          <button type="submit" disabled={reserving}>
-            {reserving ? 'Réservation…' : 'Réserver'}
-          </button>
+          <button type="submit">Réserver</button>
         </form>
         {reservationStatus && (
           <p style={{ color: reservationStatus.success ? 'green' : 'red' }}>

my-library/src/pages/Reservations.jsx

@@ -0,0 +1,37 @@
+import { useReservations } from '../context/ReservationContext';
+import { Link } from 'react-router-dom';
+
+export default function Reservations() {
+  const { reservations, cancelReservation } = useReservations();
+
+  if (reservations.length === 0) {
+    return (
+      <main>
+        <h1>Mes réservations</h1>
+        <p>Aucune réservation pour le moment.</p>
+        <Link to="/books">← Retour au catalogue</Link>
+      </main>
+    );
+  }
+
+  return (
+    <main>
+      <h1>Mes réservations</h1>
+      <ul>
+        {reservations.map(r => (
+          <li key={r.reservationId}>
+            <strong>{r.bookTitle}</strong> — {r.bookAuthor}
+            <br />
+            Téléphone : {r.phoneNumber}
+            <br />
+            Réservé le : {new Date(r.reservedAt).toLocaleDateString('fr-FR')}
+            <br />
+            Statut : {r.status}
+            <br />
+            <button onClick={() => cancelReservation(r.reservationId)}>Annuler</button>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}