basic profile

packages/frontend/src/components/CelebrityList.jsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { getCelebrities, deleteCelebrity } from '../services/api';
+
+function CelebrityList() {
+  const [celebrities, setCelebrities] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetchCelebrities();
+  }, []);
+
+  const fetchCelebrities = async () => {
+    try {
+      setLoading(true);
+      const data = await getCelebrities();
+      setCelebrities(data);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (window.confirm('Sei sicuro di voler eliminare questa celebrità?')) {
+      try {
+        await deleteCelebrity(id);
+        // Rimuovi la celebrità dalla lista senza ricaricare i dati
+        setCelebrities(celebrities.filter((c) => c.id !== id));
+      } catch (err) {
+        alert(`Errore: ${err.message}`);
+      }
+    }
+  };
+
+  if (loading) return <p>Caricamento in corso...</p>;
+  if (error) return <p>Errore: {error}</p>;
+
+  return (
+    <div>
+      <h1>Catalogo Celebrità</h1>
+      <Link to="/celebrity/new" className="button-new">
+        + Aggiungi Nuova Celebrità
+      </Link>
+      <table>
+        <thead>
+          <tr>
+            <th>Nome</th>
+            <th>Seno (cm)</th>
+            <th>Vita (cm)</th>
+            <th>Fianchi (cm)</th>
+            <th>Taglia Reggiseno</th>
+            <th>Naturali?</th>
+            <th>Azioni</th>
+          </tr>
+        </thead>
+        <tbody>
+          {celebrities.map((celeb) => (
+            <tr key={celeb.id}>
+              <td>{celeb.name}</td>
+              <td>{celeb.bust_cm || 'N/A'}</td>
+              <td>{celeb.waist_cm || 'N/A'}</td>
+              <td>{celeb.hips_cm || 'N/A'}</td>
+              <td>
+                {celeb.bra_band_size && celeb.bra_cup_size
+                  ? `${celeb.bra_band_size}${celeb.bra_cup_size} (${celeb.bra_size_system})`
+                  : 'N/A'}
+              </td>
+              <td>{celeb.boobs_are_natural === null ? 'N/A' : celeb.boobs_are_natural ? 'Sì' : 'No'}</td>
+              <td>
+                <Link to={`/celebrity/${celeb.id}`} className="button-edit">Modifica</Link>
+                <button onClick={() => handleDelete(celeb.id)} className="button-delete">Elimina</button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default CelebrityList;