Gerer un avis

my-library/src/App.jsx

@@ -1,4 +1,4 @@
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
 import Layout from './components/Layout';
 import Home from './pages/Home';
 import Books from './pages/Books';
@@ -8,19 +8,36 @@ import NotFound from './pages/NotFound';
 import AddBook from './pages/AddBook';
 import BookDetail from './pages/BookDetail';
 import Customers from './pages/Customers';
+import Login from './pages/Login';
+import Reservations from './pages/Reservations';
+import { useAuth } from './context/AuthContext';
+
+function RequireAuth({ children }) {
+  const { user } = useAuth();
+  return user ? children : <Navigate to="/login" replace />;
+}
+
+function RequireAdmin({ children }) {
+  const { user } = useAuth();
+  if (!user) return <Navigate to="/login" replace />;
+  if (user.role !== 'admin') return <Navigate to="/" replace />;
+  return children;
+}
 
 export default function App() {
   return (
     <Routes>
+      <Route path="/login" element={<Login />} />
       <Route path="/" element={<Layout />}>
         <Route index element={<Home />} />
         <Route path="books" element={<Books />} />
-        <Route path="orders" element={<Orders />} />
+        <Route path="books/:bookId" element={<RequireAuth><BookDetail /></RequireAuth>} />
-        <Route path="profile" element={<Profile />} />
+        <Route path="books/new" element={<RequireAdmin><AddBook /></RequireAdmin>} />
+        <Route path="orders" element={<RequireAuth><Orders /></RequireAuth>} />
+        <Route path="reservations" element={<RequireAuth><Reservations /></RequireAuth>} />
+        <Route path="profile" element={<RequireAuth><Profile /></RequireAuth>} />
+        <Route path="customers" element={<RequireAdmin><Customers /></RequireAdmin>} />
         <Route path="*" element={<NotFound />} />
-        <Route path="books/new" element={<AddBook />} />
-        <Route path="books/:bookId" element={<BookDetail />} />
-        <Route path="customers" element={<Customers />} />
       </Route>
     </Routes>
   );

my-library/src/api/books.js

@@ -11,3 +11,7 @@ export function registerBook(book) {
 export function getBookById(id) {
   return client.get(`/api/books/${id}`);
 }
+
+export function reserveBook(bookId, reservation) {
+  return client.post(`/api/books/${bookId}/reservations`, reservation);
+}

my-library/src/components/Navbar.jsx

@@ -1,7 +1,16 @@
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
 import '../styles/navbar.css';
 
 export default function Navbar() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  function handleLogout() {
+    logout();
+    navigate('/login');
+  }
+
   return (
     <nav className="navbar">
       <Link to="/" className="navbar__logo">Biblio</Link>
@@ -9,13 +18,21 @@ export default function Navbar() {
       <ul className="navbar__links">
         <li><Link to="/">Accueil</Link></li>
         <li><Link to="/books">Catalogue</Link></li>
-        <li><Link to="/orders">Commandes</Link></li>
+        {user && <li><Link to="/orders">Commandes</Link></li>}
-        <li><Link to="/profile">Mon compte</Link></li>
+        {user?.role === 'user' && <li><Link to="/reservations">Mes réservations</Link></li>}
+        {user && <li><Link to="/profile">Mon compte</Link></li>}
+        {user?.role === 'admin' && <li><Link to="/customers">Clients</Link></li>}
       </ul>
 
       <div className="navbar__actions">
-        <button className="btn-ghost">Connexion</button>
+        {user ? (
-        <button className="btn-cta">S'inscrire</button>
+          <>
+            <span>{user.username} ({user.role})</span>
+            <button onClick={handleLogout}>Déconnexion</button>
+          </>
+        ) : (
+          <Link to="/login"><button>Connexion</button></Link>
+        )}
       </div>
     </nav>
   );

my-library/src/context/AuthContext.js

@@ -0,0 +1,39 @@
+import { createContext, useContext, useState } from 'react';
+
+const USERS = [
+  { username: 'admin', password: 'admin', role: 'admin' },
+  { username: 'alice', password: 'bob', role: 'user' },
+];
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(() => {
+    const saved = localStorage.getItem('auth');
+    return saved ? JSON.parse(saved) : null;
+  });
+
+  function login(username, password) {
+    const found = USERS.find(u => u.username === username && u.password === password);
+    if (!found) return false;
+    const { password: _, ...safe } = found;
+    setUser(safe);
+    localStorage.setItem('auth', JSON.stringify(safe));
+    return true;
+  }
+
+  function logout() {
+    setUser(null);
+    localStorage.removeItem('auth');
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}

my-library/src/context/ReservationContext.js

@@ -0,0 +1,42 @@
+import { createContext, useContext, useState } from 'react';
+
+const ReservationContext = createContext(null);
+
+export function ReservationProvider({ children }) {
+  const [reservations, setReservations] = useState(() => {
+    const saved = localStorage.getItem('reservations');
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  function addReservation(book, phoneNumber) {
+    const reservation = {
+      reservationId: crypto.randomUUID(),
+      bookId: book.isbn,
+      bookTitle: book.title,
+      bookAuthor: book.author,
+      phoneNumber,
+      status: 'CONFIRMED',
+      reservedAt: new Date().toISOString(),
+    };
+    const updated = [...reservations, reservation];
+    setReservations(updated);
+    localStorage.setItem('reservations', JSON.stringify(updated));
+    return reservation;
+  }
+
+  function cancelReservation(reservationId) {
+    const updated = reservations.filter(r => r.reservationId !== reservationId);
+    setReservations(updated);
+    localStorage.setItem('reservations', JSON.stringify(updated));
+  }
+
+  return (
+    <ReservationContext.Provider value={{ reservations, addReservation, cancelReservation }}>
+      {children}
+    </ReservationContext.Provider>
+  );
+}
+
+export function useReservations() {
+  return useContext(ReservationContext);
+}

my-library/src/context/ReviewContext.js

@@ -0,0 +1,40 @@
+import { createContext, useContext, useState } from 'react';
+
+const ReviewContext = createContext(null);
+
+export function ReviewProvider({ children }) {
+  const [reviews, setReviews] = useState(() => {
+    const saved = localStorage.getItem('reviews');
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  function addReview(bookId, bookTitle, username, rating, comment) {
+    const review = {
+      reviewId: crypto.randomUUID(),
+      bookId,
+      bookTitle,
+      username,
+      rating,
+      comment,
+      createdAt: new Date().toISOString(),
+    };
+    const updated = [...reviews, review];
+    setReviews(updated);
+    localStorage.setItem('reviews', JSON.stringify(updated));
+    return review;
+  }
+
+  function getReviewsByBook(bookId) {
+    return reviews.filter(r => String(r.bookId) === String(bookId));
+  }
+
+  return (
+    <ReviewContext.Provider value={{ reviews, addReview, getReviewsByBook }}>
+      {children}
+    </ReviewContext.Provider>
+  );
+}
+
+export function useReviews() {
+  return useContext(ReviewContext);
+}

my-library/src/index.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from './context/AuthContext';
+import { ReservationProvider } from './context/ReservationContext';
+import { ReviewProvider } from './context/ReviewContext';
 import App from './App';
 import './styles/global.css';
 
@@ -8,7 +11,13 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
+      <AuthProvider>
+        <ReservationProvider>
+          <ReviewProvider>
             <App />
+          </ReviewProvider>
+        </ReservationProvider>
+      </AuthProvider>
     </BrowserRouter>
   </React.StrictMode>
 );

my-library/src/pages/BookDetail.jsx

@@ -1,15 +1,41 @@
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import { getBookById } from '../api/books';
+import { useAuth } from '../context/AuthContext';
+import { useReservations } from '../context/ReservationContext';
+import { useReviews } from '../context/ReviewContext';
 
 export default function BookDetail() {
+  const { user } = useAuth();
+  const { addReservation } = useReservations();
+  const { addReview, getReviewsByBook } = useReviews();
+  const [rating, setRating] = useState(5);
+  const [comment, setComment] = useState('');
+  const [reviewStatus, setReviewStatus] = useState(null);
   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);
 
   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();
+    addReservation(book, phoneNumber);
+    setReservationStatus({ success: true, message: 'Réservation effectuée avec succès !' });
+    setPhoneNumber('');
+  }
+
+  function handleReview(e) {
+    e.preventDefault();
+    addReview(book.isbn, book.title, user.username, Number(rating), comment);
+    setReviewStatus({ success: true, message: 'Avis publié avec succès !' });
+    setComment('');
+    setRating(5);
+  }
+
   if (loading) return <main><p>Chargement…</p></main>;
   if (error) return <main><p>{error}</p><Link to="/books">← Retour au catalogue</Link></main>;
 
@@ -26,6 +52,72 @@ export default function BookDetail() {
       <p>Langue : {book.language}</p>
       <p>Catégories : {book.categories?.join(', ')}</p>
       {book.description && <p>{book.description}</p>}
+
+      <section>
+        <h2>Avis des lecteurs</h2>
+        {getReviewsByBook(book.isbn).length === 0 ? (
+          <p>Aucun avis pour le moment.</p>
+        ) : (
+          <ul>
+            {getReviewsByBook(book.isbn).map(r => (
+              <li key={r.reviewId}>
+                <strong>{r.username}</strong> — {'*'.repeat(r.rating)}
+                <br />
+                {r.comment}
+                <br />
+                <small>{new Date(r.createdAt).toLocaleDateString('fr-FR')}</small>
+              </li>
+            ))}
+          </ul>
+        )}
+        {user?.role === 'user' && (
+          <form onSubmit={handleReview}>
+            <h3>Laisser un avis</h3>
+            <label>
+              Note :
+              <select value={rating} onChange={e => setRating(e.target.value)}>
+                <option value={1}>*</option>
+                <option value={2}>**</option>
+                <option value={3}>***</option>
+                <option value={4}>****</option>
+                <option value={5}>*****</option>
+              </select>
+            </label>
+            <label>
+              Commentaire :
+              <textarea value={comment} onChange={e => setComment(e.target.value)} required />
+            </label>
+            <button type="submit">Publier l'avis</button>
+          </form>
+        )}
+        {reviewStatus && (
+          <p style={{ color: reviewStatus.success ? 'green' : 'red' }}>
+            {reviewStatus.message}
+          </p>
+        )}
+      </section>
+
+      {user?.role === 'user' && <section>
+        <h2>Réserver ce livre</h2>
+        <form onSubmit={handleReservation}>
+          <label>
+            Numéro de téléphone :
+            <input
+              type="tel"
+              value={phoneNumber}
+              onChange={(e) => setPhoneNumber(e.target.value)}
+              placeholder="0612345678"
+              required
+            />
+          </label>
+          <button type="submit">Réserver</button>
+        </form>
+        {reservationStatus && (
+          <p style={{ color: reservationStatus.success ? 'green' : 'red' }}>
+            {reservationStatus.message}
+          </p>
+        )}
+      </section>}
     </main>
   );
 }

my-library/src/pages/Books.jsx

@@ -1,8 +1,10 @@
 import { useState, useEffect } from 'react';
 import { getBooks } from '../api/books';
 import { Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
 
 export default function Books() {
+  const { user } = useAuth();
   const [books, setBooks] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -28,7 +30,7 @@ export default function Books() {
   return (
     <main>
       <h1>Catalogue</h1>
-      <Link to="/books/new">+ Ajouter un livre</Link>
+      {user?.role === 'admin' && <Link to="/books/new">+ Ajouter un livre</Link>}
       <ul>
         {books.map((book) => (
           <li key={book.isbn}>

my-library/src/pages/Login.jsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export default function Login() {
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const [form, setForm] = useState({ username: '', password: '' });
+  const [error, setError] = useState(null);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const ok = login(form.username, form.password);
+    if (ok) {
+      navigate('/');
+    } else {
+      setError('Identifiants incorrects.');
+    }
+  }
+
+  return (
+    <main>
+      <h1>Connexion</h1>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label>
+            Nom d'utilisateur :
+            <input
+              type="text"
+              value={form.username}
+              onChange={e => setForm(f => ({ ...f, username: e.target.value }))}
+              required
+            />
+          </label>
+        </div>
+        <div>
+          <label>
+            Mot de passe :
+            <input
+              type="password"
+              value={form.password}
+              onChange={e => setForm(f => ({ ...f, password: e.target.value }))}
+              required
+            />
+          </label>
+        </div>
+        <button type="submit">Se connecter</button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
+      </form>
+      <p>Comptes disponibles :</p>
+      <ul>
+        <li><strong>admin</strong> / admin (administrateur)</li>
+        <li><strong>alice (utilisateur)</strong> / bob (utilisateur)</li>
+      </ul>
+    </main>
+  );
+}

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