geoaccess app

app/src/components/testCodaDbMongo.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import {
+  IonPage,
+  IonContent,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonInput,
+  IonButton,
+  IonSpinner,
+  IonText,
+} 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 [title, setTitle] = useState('');
+  const [artista, setArtista] = useState('');
+  const [coverUrl, setCoverUrl] = useState('');
+  const [color, setColor] = useState('');
+
+  const handleAdd = () => {
+    if (!title || !artista || !coverUrl || !color) return alert('Completa tutti i campi');
+    addRecord({ title, artista, coverUrl, color, voti: 0 });
+    setTitle('');
+    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="Title"
+          value={title}
+          onIonChange={(e) => setTitle(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}` }}>
+              <IonLabel>
+                <h3>{r.title}</h3>
+                <p>Artista: {r.artista}</p>
+                <img
+                  src={r.coverUrl}
+                  alt={r.title}
+                  style={{ width: 50, height: 50, objectFit: 'cover', marginBottom: 5 }}
+                />
+                <p>Voti: {r.voti}</p>
+              </IonLabel>
+              <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>
+            </IonItem>
+          ))}
+        </IonList>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default TestCoda;