Merge pull request '✨ Faire une commande' (#7) from Commande into main

Reviewed-on: #7

my-library/src/App.jsx

@@ -10,7 +10,6 @@ import BookDetail from './pages/BookDetail';
 import Customers from './pages/Customers';
 import Login from './pages/Login';
 import Reservations from './pages/Reservations';
-import Returns from './pages/Returns';
 import { useAuth } from './context/AuthContext';
 
 function RequireAuth({ children }) {
@@ -38,7 +37,6 @@ export default function App() {
         <Route path="reservations" element={<RequireAuth><Reservations /></RequireAuth>} />
         <Route path="profile" element={<RequireAuth><Profile /></RequireAuth>} />
         <Route path="customers" element={<RequireAdmin><Customers /></RequireAdmin>} />
-        <Route path="returns" element={<RequireAdmin><Returns /></RequireAdmin>} />
         <Route path="*" element={<NotFound />} />
       </Route>
     </Routes>

my-library/src/api/orders.js

@@ -0,0 +1,5 @@
+import client from './client';
+
+export function createOrder(order) {
+  return client.post('/api/orders', order);
+}

my-library/src/components/Navbar.jsx

@@ -22,7 +22,6 @@ export default function Navbar() {
         {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>}
-        {user?.role === 'admin' && <li><Link to="/returns">Retours</Link></li>}
       </ul>
 
       <div className="navbar__actions">

my-library/src/context/ReturnContext.js

@@ -1,36 +0,0 @@
-import { createContext, useContext, useState } from 'react';
-
-const ReturnContext = createContext(null);
-
-export function ReturnProvider({ children }) {
-  const [returns, setReturns] = useState(() => {
-    const saved = localStorage.getItem('returns');
-    return saved ? JSON.parse(saved) : [];
-  });
-
-  function addReturn(bookId, bookTitle, customerPhone, reason) {
-    const bookReturn = {
-      returnId: crypto.randomUUID(),
-      bookId,
-      bookTitle,
-      customerPhone,
-      reason,
-      status: 'PROCESSED',
-      returnedAt: new Date().toISOString(),
-    };
-    const updated = [...returns, bookReturn];
-    setReturns(updated);
-    localStorage.setItem('returns', JSON.stringify(updated));
-    return bookReturn;
-  }
-
-  return (
-    <ReturnContext.Provider value={{ returns, addReturn }}>
-      {children}
-    </ReturnContext.Provider>
-  );
-}
-
-export function useReturns() {
-  return useContext(ReturnContext);
-}

my-library/src/index.js

@@ -4,7 +4,6 @@ import { BrowserRouter } from 'react-router-dom';
 import { AuthProvider } from './context/AuthContext';
 import { ReservationProvider } from './context/ReservationContext';
 import { ReviewProvider } from './context/ReviewContext';
-import { ReturnProvider } from './context/ReturnContext';
 import App from './App';
 import './styles/global.css';
 
@@ -15,9 +14,7 @@ root.render(
       <AuthProvider>
         <ReservationProvider>
           <ReviewProvider>
-            <ReturnProvider>
+            <App />
-              <App />
-            </ReturnProvider>
           </ReviewProvider>
         </ReservationProvider>
       </AuthProvider>

my-library/src/pages/Orders.jsx

@@ -1,3 +1,91 @@
+import { useState } from 'react';
+import { createOrder } from '../api/orders';
+
 export default function Orders() {
-  return <main><h1>Mes commandes</h1></main>;
+  const [customerId, setCustomerId] = useState('');
+  const [paymentMethod, setPaymentMethod] = useState('CREDIT_CARD');
+  const [address, setAddress] = useState({ street: '', city: '', postalCode: '', country: '' });
+  const [lines, setLines] = useState([{ bookId: '', quantity: 1 }]);
+  const [message, setMessage] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  function handleAddressChange(e) {
+    const { name, value } = e.target;
+    setAddress((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function handleLineChange(index, field, value) {
+    setLines((prev) => prev.map((line, i) => (i === index ? { ...line, [field]: value } : line)));
+  }
+  function addLine() {
+    setLines((prev) => [...prev, { bookId: '', quantity: 1 }]);
+  }
+  function removeLine(index) {
+    setLines((prev) => prev.filter((_, i) => i !== index));
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    setSubmitting(true);
+    setMessage(null);
+
+    const payload = {
+      customerId,
+      paymentMethod,
+      address,
+      orderLineDtos: lines.map((line) => ({
+        bookId: Number(line.bookId),
+        quantity: Number(line.quantity),
+      })),
+    };
+
+    createOrder(payload)
+      .then((response) => setMessage('Commande créée'))
+      .catch((error) => {
+        console.error(error);
+        setMessage(error.response?.data?.message || 'Erreur lors de la commande.');
+      })
+      .finally(() => setSubmitting(false));
+  }
+
+  return (
+    <main>
+      <h1>Passer une commande</h1>
+      <form onSubmit={handleSubmit}>
+        <label>ID client
+          <input value={customerId} onChange={(e) => setCustomerId(e.target.value)} required />
+        </label>
+
+        <h2>Livres</h2>
+        {lines.map((line, index) => (
+          <div key={index}>
+            <input type="number" placeholder="ISBN du livre" value={line.bookId}
+              onChange={(e) => handleLineChange(index, 'bookId', e.target.value)} required />
+            <input type="number" placeholder="Quantité" value={line.quantity}
+              onChange={(e) => handleLineChange(index, 'quantity', e.target.value)} required />
+            {lines.length > 1 && (
+              <button type="button" onClick={() => removeLine(index)}>Retirer</button>
+            )}
+          </div>
+        ))}
+        <button type="button" onClick={addLine}>+ Ajouter un livre</button>
+
+        <h2>Adresse de livraison</h2>
+        <input name="street" placeholder="Rue" value={address.street} onChange={handleAddressChange} required />
+        <input name="city" placeholder="Ville" value={address.city} onChange={handleAddressChange} required />
+        <input name="postalCode" placeholder="Code postal" value={address.postalCode} onChange={handleAddressChange} required />
+        <input name="country" placeholder="Pays" value={address.country} onChange={handleAddressChange} required />
+
+        <h2>Paiement</h2>
+        <select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value)}>
+          <option value="CREDIT_CARD">Carte bancaire</option>
+        </select>
+
+        <button type="submit" disabled={submitting}>
+          {submitting ? 'Envoi…' : 'Valider la commande'}
+        </button>
+      </form>
+      {message && <p>{message}</p>}
+    </main>
+  );
 }

my-library/src/pages/Returns.jsx

@@ -1,96 +0,0 @@
-import { useState } from 'react';
-import { useReturns } from '../context/ReturnContext';
-import { getBooks } from '../api/books';
-import { useEffect } from 'react';
-
-export default function Returns() {
-  const { returns, addReturn } = useReturns();
-  const [books, setBooks] = useState([]);
-  const [form, setForm] = useState({ bookId: '', customerPhone: '', reason: '' });
-  const [message, setMessage] = useState(null);
-
-  useEffect(() => {
-    getBooks(0, 100).then(res => setBooks(res.data.content)).catch(console.error);
-  }, []);
-
-  function handleChange(e) {
-    const { name, value } = e.target;
-    setForm(f => ({ ...f, [name]: value }));
-  }
-
-  function handleSubmit(e) {
-    e.preventDefault();
-    const book = books.find(b => String(b.isbn) === String(form.bookId));
-    const bookTitle = book ? book.title : form.bookId;
-    addReturn(form.bookId, bookTitle, form.customerPhone, form.reason);
-    setMessage({ success: true, text: 'Retour enregistré avec succès !' });
-    setForm({ bookId: '', customerPhone: '', reason: '' });
-  }
-
-  return (
-    <main>
-      <h1>Gestion des retours</h1>
-
-      <section>
-        <h2>Enregistrer un retour</h2>
-        <form onSubmit={handleSubmit}>
-          <label>
-            Livre :
-            <select name="bookId" value={form.bookId} onChange={handleChange} required>
-              <option value="">-- Choisir un livre --</option>
-              {books.map(b => (
-                <option key={b.isbn} value={b.isbn}>{b.title} — {b.author}</option>
-              ))}
-            </select>
-          </label>
-          <label>
-            Téléphone du client :
-            <input
-              name="customerPhone"
-              type="tel"
-              value={form.customerPhone}
-              onChange={handleChange}
-              placeholder="0612345678"
-              required
-            />
-          </label>
-          <label>
-            Motif :
-            <textarea
-              name="reason"
-              value={form.reason}
-              onChange={handleChange}
-              placeholder="Motif du retour..."
-              required
-            />
-          </label>
-          <button type="submit">Enregistrer le retour</button>
-        </form>
-        {message && <p style={{ color: message.success ? 'green' : 'red' }}>{message.text}</p>}
-      </section>
-
-      <section>
-        <h2>Historique des retours</h2>
-        {returns.length === 0 ? (
-          <p>Aucun retour enregistré.</p>
-        ) : (
-          <ul>
-            {returns.map(r => (
-              <li key={r.returnId}>
-                <strong>{r.bookTitle}</strong>
-                <br />
-                Client : {r.customerPhone}
-                <br />
-                Motif : {r.reason}
-                <br />
-                Statut : {r.status}
-                <br />
-                <small>{new Date(r.returnedAt).toLocaleDateString('fr-FR')}</small>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
-    </main>
-  );
-}