138 lines
3.8 KiB
TypeScript
138 lines
3.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
IonPage,
|
|
IonContent,
|
|
IonList,
|
|
IonItem,
|
|
IonLabel,
|
|
IonInput,
|
|
IonButton,
|
|
IonSpinner,
|
|
IonText,
|
|
IonGrid,
|
|
IonRow,
|
|
IonCol,
|
|
} from '@ionic/react';
|
|
import { useCoda } from '../hooks/useCoda';
|
|
|
|
const TestCoda: React.FC = () => {
|
|
const {
|
|
records,
|
|
loading,
|
|
error,
|
|
fetchRecords,
|
|
addRecord,
|
|
deleteRecord,
|
|
updateVoti,
|
|
} = useCoda();
|
|
|
|
// Stati per i nuovi record da aggiungere
|
|
const [titolo, setTitolo] = useState('');
|
|
const [artista, setArtista] = useState('');
|
|
const [coverUrl, setCoverUrl] = useState('');
|
|
const [color, setColor] = useState('');
|
|
|
|
const handleAdd = () => {
|
|
if (!titolo || !artista || !coverUrl || !color) {
|
|
alert('Compila tutti i campi prima di aggiungere');
|
|
return;
|
|
}
|
|
addRecord({ titolo, artista, coverUrl, color, voti: 0 });
|
|
setTitolo('');
|
|
setArtista('');
|
|
setCoverUrl('');
|
|
setColor('');
|
|
};
|
|
|
|
return (
|
|
<IonPage>
|
|
<IonContent className="ion-padding">
|
|
<h1>Test UseCoda</h1>
|
|
|
|
{loading && (
|
|
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: 10 }}>
|
|
<IonSpinner name="crescent" />
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<IonText color="danger">
|
|
<p>{error}</p>
|
|
</IonText>
|
|
)}
|
|
|
|
<IonButton expand="block" onClick={fetchRecords} disabled={loading}>
|
|
Ricarica Record
|
|
</IonButton>
|
|
|
|
<h2>Aggiungi Nuovo Record</h2>
|
|
<IonInput
|
|
placeholder="Titolo"
|
|
value={titolo}
|
|
onIonChange={(e) => setTitolo(e.detail.value!)}
|
|
/>
|
|
<IonInput
|
|
placeholder="Artista"
|
|
value={artista}
|
|
onIonChange={(e) => setArtista(e.detail.value!)}
|
|
/>
|
|
<IonInput
|
|
placeholder="Cover URL"
|
|
value={coverUrl}
|
|
onIonChange={(e) => setCoverUrl(e.detail.value!)}
|
|
/>
|
|
<IonInput
|
|
placeholder="Color (es. #ff0000)"
|
|
value={color}
|
|
onIonChange={(e) => setColor(e.detail.value!)}
|
|
/>
|
|
<IonButton expand="block" onClick={handleAdd} disabled={loading}>
|
|
Aggiungi
|
|
</IonButton>
|
|
|
|
<h2>Lista Record</h2>
|
|
<IonList>
|
|
{records.length === 0 && !loading && <p>Nessun record disponibile</p>}
|
|
{records.map((r) => (
|
|
<IonItem
|
|
key={r.id}
|
|
style={{ borderLeft: `5px solid ${r.color}`, alignItems: 'center' }}
|
|
>
|
|
<IonGrid>
|
|
<IonRow>
|
|
<IonCol size="3">
|
|
<img
|
|
src={r.coverUrl}
|
|
alt={r.titolo}
|
|
style={{ width: '100%', height: 60, objectFit: 'cover', borderRadius: 4 }}
|
|
/>
|
|
</IonCol>
|
|
<IonCol size="5">
|
|
<IonLabel>
|
|
<h3>{r.titolo}</h3>
|
|
<p>Artista: {r.artista}</p>
|
|
<p>Voti: {r.voti}</p>
|
|
</IonLabel>
|
|
</IonCol>
|
|
<IonCol size="4" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<IonButton size="small" onClick={() => updateVoti(r.id, 1)} disabled={loading}>
|
|
+1
|
|
</IonButton>
|
|
<IonButton size="small" onClick={() => updateVoti(r.id, -1)} disabled={loading}>
|
|
-1
|
|
</IonButton>
|
|
<IonButton color="danger" size="small" onClick={() => deleteRecord(r.id)} disabled={loading}>
|
|
Elimina
|
|
</IonButton>
|
|
</IonCol>
|
|
</IonRow>
|
|
</IonGrid>
|
|
</IonItem>
|
|
))}
|
|
</IonList>
|
|
</IonContent>
|
|
</IonPage>
|
|
);
|
|
};
|
|
|
|
export default TestCoda;
|