improve profile
This commit is contained in:
Nicola Malizia
@@ -4,6 +4,7 @@ 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 per il layout del profilo
|
||||
|
||||
function CelebrityProfile() {
|
||||
const { id } = useParams();
|
||||
@@ -25,100 +26,116 @@ function CelebrityProfile() {
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
} else {
|
||||
navigate('/');
|
||||
navigate('/');
|
||||
}
|
||||
}, [id, navigate]);
|
||||
|
||||
const handleFieldSave = async (fieldName, newValue) => {
|
||||
const valueToSend = newValue === '' ? null : newValue;
|
||||
let valueToSend = newValue === '' ? null : newValue;
|
||||
if (fieldName === 'boobs_are_natural') {
|
||||
valueToSend = newValue === 'true';
|
||||
}
|
||||
const payload = { [fieldName]: valueToSend };
|
||||
|
||||
try {
|
||||
await updateCelebrity(id, payload);
|
||||
const updatedCelebrity = await updateCelebrity(id, payload);
|
||||
// Aggiorna lo stato locale per un feedback immediato
|
||||
setCelebrity((prev) => ({ ...prev, [fieldName]: newValue }));
|
||||
console.log('Salvataggio riuscito:', updatedCelebrity);
|
||||
} catch (err) {
|
||||
setError(`Errore durante il salvataggio: ${err.message}`);
|
||||
console.error(`Errore durante il salvataggio del campo ${fieldName}:`, err);
|
||||
// Rilancia l'errore in modo che il componente figlio possa gestirlo
|
||||
throw err;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (window.confirm(`Sei sicuro di voler eliminare ${celebrity.name}? L'azione è irreversibile.`)) {
|
||||
try {
|
||||
await deleteCelebrity(id);
|
||||
navigate('/');
|
||||
} catch (err) {
|
||||
setError(`Errore durante l'eliminazione: ${err.message}`);
|
||||
}
|
||||
try {
|
||||
await deleteCelebrity(id);
|
||||
alert(`${celebrity.name} è stato eliminato con successo.`);
|
||||
navigate('/');
|
||||
} catch (err) {
|
||||
setError(`Errore durante l'eliminazione: ${err.message}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
if (loading) return <article aria-busy="true">Caricamento profilo...</article>;
|
||||
if (error) return <article><p className="error-message">Errore: {error}</p></article>;
|
||||
if (error && !celebrity) return <article><p className="error-message">Errore: {error}</p></article>;
|
||||
if (!celebrity) return <p>Nessuna celebrità trovata.</p>;
|
||||
|
||||
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 shoeSystemOptions = [{ value: 'EU', label: 'EU' }, { value: 'US', label: 'US' }, { value: 'UK', label: 'UK' }];
|
||||
const booleanOptions = [{ value: 'true', label: 'Sì' }, { value: 'false', label: 'No' }];
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<aside>
|
||||
<div className="profile-container">
|
||||
<aside className="profile-sidebar">
|
||||
<figure>
|
||||
<img src={`https://i.pravatar.cc/400?u=${id}`} alt={celebrity.name} style={{ width: '100%' }} />
|
||||
<figcaption>{celebrity.name}</figcaption>
|
||||
<img src={`https://i.pravatar.cc/400?u=${id}`} alt={celebrity.name} />
|
||||
<figcaption>
|
||||
<EditableField label="Nome" name="name" value={celebrity.name} onSave={handleFieldSave} />
|
||||
</figcaption>
|
||||
</figure>
|
||||
<div className="profile-actions">
|
||||
<Link to="/" role="button" className="secondary outline">Torna alla Lista</Link>
|
||||
<button onClick={handleDelete} className="secondary">Elimina Profilo</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<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">
|
||||
<main className="profile-content">
|
||||
{error && <p className="error-message">Errore: {error}</p>}
|
||||
|
||||
<details open>
|
||||
<summary><h3>Dati Personali</h3></summary>
|
||||
<div className="profile-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} />
|
||||
</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="Genere" name="gender" value={celebrity.gender} type="select" options={genderOptions} onSave={handleFieldSave} />
|
||||
<EditableField label="Sessualità" name="sexuality" value={celebrity.sexuality} onSave={handleFieldSave} />
|
||||
</div>
|
||||
<hr/>
|
||||
<h3>Aspetto Fisico</h3>
|
||||
<div className="grid">
|
||||
<EditableField label="Sito Ufficiale" name="official_website" value={celebrity.official_website} type="url" onSave={handleFieldSave} />
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><h3>Aspetto Fisico e Misure</h3></summary>
|
||||
<div className="profile-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="Corporatura" name="body_type" value={celebrity.body_type} 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} />
|
||||
{celebrity.gender === 'male' && <EditableField label="Torace (cm)" name="chest_circumference_cm" value={celebrity.chest_circumference_cm} type="number" onSave={handleFieldSave} />}
|
||||
<EditableField label="Misura Scarpe" name="shoe_size" value={celebrity.shoe_size} type="number" onSave={handleFieldSave} />
|
||||
<EditableField label="Sistema Scarpe" name="shoe_size_system" value={celebrity.shoe_size_system} type="select" options={shoeSystemOptions} onSave={handleFieldSave} />
|
||||
</div>
|
||||
<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>
|
||||
<hr/>
|
||||
<h3>Biografia</h3>
|
||||
<EditableField label="Note biografiche" name="biography" value={celebrity.biography} type="textarea" onSave={handleFieldSave} />
|
||||
<footer>
|
||||
<div className="grid">
|
||||
<Link to="/" role="button" className="secondary outline">Torna alla Lista</Link>
|
||||
<button onClick={handleDelete} className="secondary">Elimina Profilo</button>
|
||||
</details>
|
||||
|
||||
{celebrity.gender !== 'male' && (
|
||||
<details>
|
||||
<summary><h3>Reggiseno</h3></summary>
|
||||
<div className="profile-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>
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
</details>
|
||||
)}
|
||||
|
||||
<details>
|
||||
<summary><h3>Biografia</h3></summary>
|
||||
<EditableField label="Note biografiche" name="biography" value={celebrity.biography} type="textarea" onSave={handleFieldSave} />
|
||||
</details>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user