import React, { useState, useEffect, useMemo } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { getCelebrities, deleteCelebrity } from '../services/api';
import './CelebrityList.css';
const EditIcon = () => ;
const DeleteIcon = () => ;
const MoreIcon = () => ;
function CelebrityList() {
const [celebrities, setCelebrities] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [searchTerm, setSearchTerm] = useState('');
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(10);
const navigate = useNavigate();
// Effetto per "debouncare" il termine di ricerca
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedSearchTerm(searchTerm);
}, 300); // Attende 300ms dopo l'ultima digitazione prima di aggiornare
return () => {
clearTimeout(handler);
};
}, [searchTerm]);
// Effetto per caricare i dati quando il termine di ricerca (debounced) cambia
useEffect(() => {
fetchCelebrities();
}, [debouncedSearchTerm]);
const fetchCelebrities = async () => {
try {
setLoading(true);
const data = await getCelebrities(debouncedSearchTerm);
setCelebrities(data);
setError(null);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
const handleDelete = async (id, name) => {
if (window.confirm(`Sei sicuro di voler eliminare ${name}?`)) {
try {
await deleteCelebrity(id);
setCelebrities(prev => prev.filter((c) => c.id !== id));
} catch (err) {
alert(`Errore: ${err.message}`);
}
}
};
// La paginazione ora opera sulla lista (già filtrata) ricevuta dal backend
const paginatedCelebrities = useMemo(() => {
const startIndex = (currentPage - 1) * itemsPerPage;
return celebrities.slice(startIndex, startIndex + itemsPerPage);
}, [celebrities, currentPage, itemsPerPage]);
const totalPages = Math.ceil(celebrities.length / itemsPerPage);
const renderPagination = () => (
Pagina {currentPage} di {totalPages} ({celebrities.length} risultati)
);
const renderEmptyState = () => (
Nessun Profilo Trovato
{searchTerm ? "Prova a modificare i termini della ricerca." : "Inizia aggiungendo una nuova celebrità."}
+ Aggiungi una celebrità
);
return (
Catalogo Celebrità
+ Aggiungi Profilo
{ setSearchTerm(e.target.value); setCurrentPage(1); }}
/>
{loading &&
Ricerca in corso...}
{error &&
Errore: {error}
}
{!loading && !error && (
<>
{paginatedCelebrities.length === 0 ? renderEmptyState() : (
<>
|
Nome |
Misure (S-V-F) |
Taglia Reggiseno |
Naturale? |
Azioni |
{paginatedCelebrities.map((celeb) => (
|
{celeb.name}
|
{celeb.bust_cm || '?'}-{celeb.waist_cm || '?'}-{celeb.hips_cm || '?'} cm
|
{celeb.bra_band_size && celeb.bra_cup_size
? `${celeb.bra_band_size}${celeb.bra_cup_size} (${celeb.bra_size_system || 'N/A'})`
: 'N/A'}
|
{celeb.boobs_are_natural === null ? '?' : celeb.boobs_are_natural ? 'Sì' : 'No'}
|
|
))}
{totalPages > 1 && renderPagination()}
)}
)}
);
}
export default CelebrityList;