migrating to pico.css
This commit is contained in:
Nicola Malizia
@@ -4,7 +4,6 @@ import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { getCelebrityById, updateCelebrity, deleteCelebrity } from '../services/api';
|
||||
import EditableField from './EditableField';
|
||||
import './CelebrityProfile.css'; // Importa il nuovo CSS
|
||||
|
||||
function CelebrityProfile() {
|
||||
const { id } = useParams();
|
||||
@@ -14,12 +13,10 @@ function CelebrityProfile() {
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Ignoriamo la modalità "new", questa pagina è solo per visualizzare/modificare
|
||||
if (id) {
|
||||
setLoading(true);
|
||||
getCelebrityById(id)
|
||||
.then((data) => {
|
||||
// Formatta la data per l'input type="date"
|
||||
if (data.birth_date) {
|
||||
data.birth_date = data.birth_date.split('T')[0];
|
||||
}
|
||||
@@ -28,23 +25,19 @@ function CelebrityProfile() {
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
} else {
|
||||
navigate('/'); // Se non c'è id, torna alla home
|
||||
navigate('/');
|
||||
}
|
||||
}, [id, navigate]);
|
||||
|
||||
const handleFieldSave = async (fieldName, newValue) => {
|
||||
// Converte stringa vuota a null per il backend
|
||||
const valueToSend = newValue === '' ? null : newValue;
|
||||
const payload = { [fieldName]: valueToSend };
|
||||
|
||||
try {
|
||||
const updatedCelebrity = await updateCelebrity(id, payload);
|
||||
// Aggiorna lo stato locale per un feedback immediato
|
||||
await updateCelebrity(id, payload);
|
||||
setCelebrity((prev) => ({ ...prev, [fieldName]: newValue }));
|
||||
console.log('Salvataggio riuscito:', updatedCelebrity);
|
||||
} catch (err) {
|
||||
setError(`Errore durante il salvataggio del campo ${fieldName}: ${err.message}`);
|
||||
// Potresti voler ripristinare il valore precedente in caso di errore
|
||||
setError(`Errore durante il salvataggio: ${err.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -52,95 +45,80 @@ function CelebrityProfile() {
|
||||
if (window.confirm(`Sei sicuro di voler eliminare ${celebrity.name}? L'azione è irreversibile.`)) {
|
||||
try {
|
||||
await deleteCelebrity(id);
|
||||
alert(`${celebrity.name} è stato eliminato con successo.`);
|
||||
navigate('/');
|
||||
} catch (err) {
|
||||
setError(`Errore durante l'eliminazione: ${err.message}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <p>Caricamento profilo...</p>;
|
||||
if (error) return <p className="error-message">Errore: {error}</p>;
|
||||
|
||||
if (loading) return <article aria-busy="true">Caricamento profilo...</article>;
|
||||
if (error) return <article><p className="error-message">Errore: {error}</p></article>;
|
||||
if (!celebrity) return <p>Nessuna celebrità trovata.</p>;
|
||||
|
||||
// Opzioni per i campi <select>
|
||||
const genderOptions = [
|
||||
{ value: 'female', label: 'Female' }, { value: 'male', label: 'Male' }, { value: 'other', label: 'Other' },
|
||||
];
|
||||
const braSystemOptions = [
|
||||
{ value: 'US', label: 'US' }, { value: 'UK', label: 'UK' }, { value: 'EU', label: 'EU' },
|
||||
{ value: 'FR', label: 'FR' }, { value: 'AU', label: 'AU' }, { value: 'IT', label: 'IT' }, { value: 'JP', label: 'JP' },
|
||||
];
|
||||
const booleanOptions = [
|
||||
{ value: 'true', label: 'Sì' }, { value: 'false', label: 'No' },
|
||||
];
|
||||
|
||||
const genderOptions = [ { value: 'female', label: 'Female' }, { value: 'male', label: 'Male' }, { value: 'other', label: 'Other' } ];
|
||||
const braSystemOptions = [ { value: 'US', label: 'US' }, { value: 'UK', label: 'UK' }, { value: 'EU', label: 'EU' }, { value: 'FR', label: 'FR' }, { value: 'AU', label: 'AU' }, { value: 'IT', label: 'IT' }, { value: 'JP', label: 'JP' }];
|
||||
const booleanOptions = [ { value: 'true', label: 'Sì' }, { value: 'false', label: 'No' }];
|
||||
|
||||
return (
|
||||
<div className="profile-container">
|
||||
<div className="profile-sidebar">
|
||||
{/* Immagine del profilo (placeholder) */}
|
||||
<img src={`https://i.pravatar.cc/300?u=${id}`} alt={celebrity.name} className="profile-main-image" />
|
||||
<div className="thumbnails">
|
||||
{/* Placeholder per le miniature */}
|
||||
<div className="thumbnail"><img src={`https://i.pravatar.cc/150?u=${id}a`} alt="thumbnail" /></div>
|
||||
<div className="thumbnail"><img src={`https://i.pravatar.cc/150?u=${id}b`} alt="thumbnail" /></div>
|
||||
<div className="thumbnail"><img src={`https://i.pravatar.cc/150?u=${id}c`} alt="thumbnail" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid">
|
||||
<aside>
|
||||
<figure>
|
||||
<img src={`https://i.pravatar.cc/400?u=${id}`} alt={celebrity.name} style={{ width: '100%' }} />
|
||||
<figcaption>{celebrity.name}</figcaption>
|
||||
</figure>
|
||||
</aside>
|
||||
|
||||
<div className="profile-content">
|
||||
<div className="profile-header">
|
||||
<h1>{celebrity.name}</h1>
|
||||
<EditableField label="Nome completo / Alias" name="name" value={celebrity.name} onSave={handleFieldSave} />
|
||||
</div>
|
||||
|
||||
<section className="profile-section">
|
||||
<h2>Dati Personali</h2>
|
||||
<div className="profile-grid">
|
||||
<section>
|
||||
<article>
|
||||
<header>
|
||||
<h2>{celebrity.name}</h2>
|
||||
<EditableField label="Nome completo / Alias" name="name" value={celebrity.name} onSave={handleFieldSave} />
|
||||
</header>
|
||||
|
||||
<h3>Dati Personali</h3>
|
||||
<div className="grid">
|
||||
<EditableField label="Data di nascita" name="birth_date" value={celebrity.birth_date} type="date" onSave={handleFieldSave} />
|
||||
<EditableField label="Luogo di nascita" name="birth_place" value={celebrity.birth_place} onSave={handleFieldSave} />
|
||||
<EditableField label="Nazionalità" name="nationality" value={celebrity.nationality} onSave={handleFieldSave} />
|
||||
<EditableField label="Etnia" name="ethnicity" value={celebrity.ethnicity} onSave={handleFieldSave} />
|
||||
</div>
|
||||
<div className="grid">
|
||||
<EditableField label="Genere" name="gender" value={celebrity.gender} type="select" options={genderOptions} onSave={handleFieldSave} />
|
||||
<EditableField label="Etnia" name="ethnicity" value={celebrity.ethnicity} onSave={handleFieldSave} />
|
||||
<EditableField label="Sessualità" name="sexuality" value={celebrity.sexuality} onSave={handleFieldSave} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="profile-section">
|
||||
<h2>Aspetto Fisico</h2>
|
||||
<div className="profile-grid">
|
||||
<EditableField label="Colore Capelli" name="hair_color" value={celebrity.hair_color} onSave={handleFieldSave} />
|
||||
<EditableField label="Colore Occhi" name="eye_color" value={celebrity.eye_color} onSave={handleFieldSave} />
|
||||
<hr/>
|
||||
<h3>Aspetto Fisico</h3>
|
||||
<div className="grid">
|
||||
<EditableField label="Altezza (cm)" name="height_cm" value={celebrity.height_cm} type="number" onSave={handleFieldSave} />
|
||||
<EditableField label="Peso (kg)" name="weight_kg" value={celebrity.weight_kg} type="number" onSave={handleFieldSave} />
|
||||
<EditableField label="Colore Capelli" name="hair_color" value={celebrity.hair_color} onSave={handleFieldSave} />
|
||||
<EditableField label="Colore Occhi" name="eye_color" value={celebrity.eye_color} onSave={handleFieldSave} />
|
||||
</div>
|
||||
<div className="grid">
|
||||
<EditableField label="Seno (cm)" name="bust_cm" value={celebrity.bust_cm} type="number" onSave={handleFieldSave} />
|
||||
<EditableField label="Vita (cm)" name="waist_cm" value={celebrity.waist_cm} type="number" onSave={handleFieldSave} />
|
||||
<EditableField label="Fianchi (cm)" name="hips_cm" value={celebrity.hips_cm} type="number" onSave={handleFieldSave} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="profile-section">
|
||||
<h2>Reggiseno</h2>
|
||||
<div className="profile-grid">
|
||||
<hr/>
|
||||
<h3>Reggiseno</h3>
|
||||
<div className="grid">
|
||||
<EditableField label="Misura Fascia" name="bra_band_size" value={celebrity.bra_band_size} type="number" onSave={handleFieldSave} />
|
||||
<EditableField label="Coppa" name="bra_cup_size" value={celebrity.bra_cup_size} onSave={handleFieldSave} />
|
||||
<EditableField label="Sistema" name="bra_size_system" value={celebrity.bra_size_system} type="select" options={braSystemOptions} onSave={handleFieldSave} />
|
||||
<EditableField label="Seno Naturale?" name="boobs_are_natural" value={String(celebrity.boobs_are_natural)} type="select" options={booleanOptions} onSave={handleFieldSave} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="profile-section">
|
||||
<h2>Biografia</h2>
|
||||
<hr/>
|
||||
<h3>Biografia</h3>
|
||||
<EditableField label="Note biografiche" name="biography" value={celebrity.biography} type="textarea" onSave={handleFieldSave} />
|
||||
</section>
|
||||
|
||||
<div className="profile-actions">
|
||||
<Link to="/" className="button-back">Torna alla Lista</Link>
|
||||
<button onClick={handleDelete} className="button-delete">Elimina Profilo</button>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div className="grid">
|
||||
<Link to="/" role="button" className="secondary outline">Torna alla Lista</Link>
|
||||
<button onClick={handleDelete} className="secondary">Elimina Profilo</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user