feat: app working mongodb queue

app/package-lock.json

@@ -17,6 +17,7 @@
         "@ionic/react-router": "^8.5.0",
         "@types/react-router": "^5.1.20",
         "@types/react-router-dom": "^5.3.3",
+        "framer-motion": "^12.23.12",
         "ionicons": "^7.4.0",
         "jotai": "^2.12.5",
         "lucide-react": "^0.536.0",
@@ -6560,6 +6561,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
+      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.12",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.3.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
@@ -8725,6 +8753,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

app/package.json

@@ -21,6 +21,7 @@
     "@ionic/react-router": "^8.5.0",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
+    "framer-motion": "^12.23.12",
     "ionicons": "^7.4.0",
     "jotai": "^2.12.5",
     "lucide-react": "^0.536.0",

app/src/App.tsx

@@ -32,7 +32,7 @@ setupIonicReact();
 
 const App: React.FC = () => {
   const [current, setCurrent] = useAtom(currentTrackAtom);
-  const [accessGranted, setAccessGranted] = useState<boolean | null>(null);
+  // const [accessGranted, setAccessGranted] = useState<boolean | null>(null);
 
   useEffect(() => {
     setCurrent(mocks.nowPlaying);
@@ -44,8 +44,9 @@ const App: React.FC = () => {
   // }
 
   return (
+    
     <IonApp>
-      <LocationAccessChecker onAccessChecked={setAccessGranted} />
+      {/* <LocationAccessChecker onAccessChecked={setAccessGranted} /> */}
       <IonReactRouter>
         <Tab />
       </IonReactRouter>

app/src/atoms/index.tsx

@@ -1,5 +1,7 @@
 import { atom } from 'jotai';
 import { NowPlayingData } from '../mocks';
+import { QueueItem } from '../models';
 
 export const themeAtom = atom<'light' | 'dark' | 'red'>('light');
 export const currentTrackAtom = atom<NowPlayingData>()
+export const codaRecordsAtom = atom<QueueItem[]>([]);

app/src/components/NowPlayingTab.css

@@ -6,6 +6,7 @@
   display: block;
   position: relative;
   border-radius: 8px;
+  
 }
 
 .now-playing-overlay {

app/src/components/Queue.tsx

@@ -11,10 +11,11 @@ import {
 } from "@ionic/react";
 
 import React, { useState } from "react";
-
 import { ArrowBigUp, Plus } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
 
 interface NowPlayingDiscProps {
+  id: string;
   coverUrl: string;
   title: string;
   artist: string;
@@ -24,13 +25,17 @@ interface NowPlayingDiscProps {
 
 interface QueueProps {
   songs: NowPlayingDiscProps[];
+  onUpvote: (id: string) => void;
 }
 
-const Queue: React.FC<QueueProps> = ({ songs }) => {
+const Queue: React.FC<QueueProps> = ({ songs, onUpvote }) => {
   const [showModal, setShowModal] = useState(false);
   const [searchText, setSearchText] = useState("");
 
-  const handleUpVote = () => {};
+  // Ordina i brani in ordine decrescente per upvotes
+  const sortedSongs = [...songs].sort(
+    (a, b) => (b.upvotes ?? 0) - (a.upvotes ?? 0)
+  );
 
   return (
     <div className="queue-container">
@@ -40,64 +45,72 @@ const Queue: React.FC<QueueProps> = ({ songs }) => {
           size={24}
           color="white"
           strokeWidth={2}
-          onClick={() => {
+          onClick={() => setShowModal(true)}
-            setShowModal(true);
-          }}
         />
       </div>
 
-      {songs.map((song, index) => {
+      <AnimatePresence>
-        const isUpvoted = song.upvoted ?? false;
+        {sortedSongs.map((song) => {
-        const votes = song.upvotes ?? 0;
+          const isUpvoted = song.upvoted ?? false;
+          const votes = song.upvotes ?? 0;
 
-        return (
+          return (
-          <div className="song-item" key={index}>
+            <motion.div
-            <img
+              layout
-              className="cover"
+              key={song.id}
-              src={song.coverUrl}
+              initial={{ opacity: 0, y: 20 }}
-              alt={`${song.title} cover`}
+              animate={{ opacity: 1, y: 0 }}
-            />
+              exit={{ opacity: 0, y: -20 }}
-            <div className="text-info">
+              transition={{ duration: 0.3 }}
-              <div className="title">{song.title}</div>
+              className="song-item"
-              <div className="artist">{song.artist}</div>
-            </div>
-
-            <div
-              className="upvote-container"
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "6px",
-                marginLeft: "auto",
-                cursor: "pointer",
-              }}
-              onClick={handleUpVote}
             >
-              <span
+              <img
-                style={{ fontWeight: "600", color: "#444", userSelect: "none" }}
+                className="cover"
-              >
+                src={song.coverUrl}
-                {votes}
+                alt={`${song.title} cover`}
-              </span>
-              <ArrowBigUp
-                size={24}
-                strokeWidth={2.5}
-                color={isUpvoted ? "#ff6600" : "#999"}
-                fill={isUpvoted ? "#ff6600" : "none"}
               />
-            </div>
+              <div className="text-info">
-          </div>
+                <div className="title">{song.title}</div>
-        );
+                <div className="artist">{song.artist}</div>
-      })}
+              </div>
+
+              <div
+                className="upvote-container"
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                  marginLeft: "auto",
+                  cursor: "pointer",
+                }}
+                onClick={() => onUpvote(song.id)}
+              >
+                <span
+                  style={{
+                    fontWeight: "600",
+                    color: "#444",
+                    userSelect: "none",
+                  }}
+                >
+                  {votes}
+                </span>
+                <ArrowBigUp
+                  size={24}
+                  strokeWidth={2.5}
+                  color={isUpvoted ? "#ff6600" : "#999"}
+                  fill={isUpvoted ? "#ff6600" : "none"}
+                />
+              </div>
+            </motion.div>
+          );
+        })}
+      </AnimatePresence>
 
       <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
         <IonHeader>
           <IonToolbar>
             <IonTitle>Add Songs</IonTitle>
-            <IonButton
+            <IonButton slot="end" fill="clear" onClick={() => setShowModal(false)}>
-              slot="end"
-              fill="clear"
-              onClick={() => setShowModal(false)}
-            >
               Close
             </IonButton>
           </IonToolbar>

app/src/components/testCodaDbMongo.tsx

@@ -9,6 +9,9 @@ import {
   IonButton,
   IonSpinner,
   IonText,
+  IonGrid,
+  IonRow,
+  IonCol,
 } from '@ionic/react';
 import { useCoda } from '../hooks/useCoda';
 
@@ -24,15 +27,18 @@ const TestCoda: React.FC = () => {
   } = useCoda();
 
   // Stati per i nuovi record da aggiungere
-  const [title, setTitle] = useState('');
+  const [titolo, setTitolo] = 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');
+    if (!titolo || !artista || !coverUrl || !color) {
-    addRecord({ title, artista, coverUrl, color, voti: 0 });
+      alert('Compila tutti i campi prima di aggiungere');
-    setTitle('');
+      return;
+    }
+    addRecord({ titolo, artista, coverUrl, color, voti: 0 });
+    setTitolo('');
     setArtista('');
     setCoverUrl('');
     setColor('');
@@ -61,9 +67,9 @@ const TestCoda: React.FC = () => {
 
         <h2>Aggiungi Nuovo Record</h2>
         <IonInput
-          placeholder="Title"
+          placeholder="Titolo"
-          value={title}
+          value={titolo}
-          onIonChange={(e) => setTitle(e.detail.value!)}
+          onIonChange={(e) => setTitolo(e.detail.value!)}
         />
         <IonInput
           placeholder="Artista"
@@ -88,26 +94,39 @@ const TestCoda: React.FC = () => {
         <IonList>
           {records.length === 0 && !loading && <p>Nessun record disponibile</p>}
           {records.map((r) => (
-            <IonItem key={r.id} style={{ borderLeft: `5px solid ${r.color}` }}>
+            <IonItem
-              <IonLabel>
+              key={r.id}
-                <h3>{r.title}</h3>
+              style={{ borderLeft: `5px solid ${r.color}`, alignItems: 'center' }}
-                <p>Artista: {r.artista}</p>
+            >
-                <img
+              <IonGrid>
-                  src={r.coverUrl}
+                <IonRow>
-                  alt={r.title}
+                  <IonCol size="3">
-                  style={{ width: 50, height: 50, objectFit: 'cover', marginBottom: 5 }}
+                    <img
-                />
+                      src={r.coverUrl}
-                <p>Voti: {r.voti}</p>
+                      alt={r.titolo}
-              </IonLabel>
+                      style={{ width: '100%', height: 60, objectFit: 'cover', borderRadius: 4 }}
-              <IonButton size="small" onClick={() => updateVoti(r.id, 1)} disabled={loading}>
+                    />
-                +1
+                  </IonCol>
-              </IonButton>
+                  <IonCol size="5">
-              <IonButton size="small" onClick={() => updateVoti(r.id, -1)} disabled={loading}>
+                    <IonLabel>
-                -1
+                      <h3>{r.titolo}</h3>
-              </IonButton>
+                      <p>Artista: {r.artista}</p>
-              <IonButton color="danger" size="small" onClick={() => deleteRecord(r.id)} disabled={loading}>
+                      <p>Voti: {r.voti}</p>
-                Elimina
+                    </IonLabel>
-              </IonButton>
+                  </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>

app/src/hooks/useCoda.tsx

@@ -1,9 +1,11 @@
-import { useState, useEffect } from "react";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
 import { MONGO_DB_CODA_API } from "../api_endpoints";
+import { codaRecordsAtom } from "../atoms";
 
 const API_URL = MONGO_DB_CODA_API;
 
-export interface Record {
+export interface QueueItem {
   id: string;
   titolo: string;
   coverUrl: string;
@@ -13,15 +15,15 @@ export interface Record {
 }
 
 export const useCoda = () => {
-  const [records, setRecords] = useState<Record[]>([]);
+  const [records, setRecords] = useAtom(codaRecordsAtom);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const fetchJson = async (input: RequestInfo, init?: RequestInit) => {
     const res = await fetch(input, init);
     if (!res.ok) {
-      const text = await res.text();
+      const msg = await res.text();
-      throw new Error(text || "Errore fetch");
+      throw new Error(msg || "Errore nella chiamata fetch");
     }
     return res.json();
   };
@@ -30,12 +32,8 @@ export const useCoda = () => {
     setLoading(true);
     try {
       const response = await fetchJson(`${API_URL}/read`);
-      if (response.success) {
+      setRecords(response.data);
-        setRecords(response.data);
+      setError(null);
-        setError(null);
-      } else {
-        throw new Error("Errore nella risposta del server");
-      }
     } catch (e: any) {
       setError(e.message || "Errore fetch");
     } finally {
@@ -43,20 +41,25 @@ export const useCoda = () => {
     }
   };
 
-  const addRecord = async (record: Omit<Record, "id">) => {
+  useEffect(() => {
+    fetchRecords(); // chiamata iniziale
+
+    const interval = setInterval(() => {
+      fetchRecords(); // polling ogni 5 secondi
+    }, 5000);
+
+    return () => clearInterval(interval); // pulizia su unmount
+  }, []);
+
+  const addRecord = async (record: Omit<QueueItem, "id">) => {
     try {
-      const body = JSON.stringify(record);
       const response = await fetchJson(`${API_URL}/add`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body,
+        body: JSON.stringify(record),
       });
-      if (response.success) {
+      setRecords((prev) => [...prev, response.data]);
-        setRecords((prev) => [...prev, response.data]);
+      setError(null);
-        setError(null);
-      } else {
-        throw new Error("Errore aggiunta record");
-      }
     } catch (e: any) {
       setError(e.message || "Errore add");
     }
@@ -64,43 +67,28 @@ export const useCoda = () => {
 
   const deleteRecord = async (id: string) => {
     try {
-      const response = await fetchJson(`${API_URL}/delete/${id}`, {
+      await fetchJson(`${API_URL}/delete/${id}`, { method: "DELETE" });
-        method: "DELETE",
+      setRecords((prev) => prev.filter((r) => r.id !== id));
-      });
+      setError(null);
-      if (response.success) {
-        setRecords((prev) => prev.filter((r) => r.id !== id));
-        setError(null);
-      } else {
-        throw new Error("Errore eliminazione record");
-      }
     } catch (e: any) {
       setError(e.message || "Errore delete");
     }
   };
 
-  const updateVoti = async (id: string, delta: 1 | -1) => {
+  const updateVoti = async (id: string, increment: boolean) => {
     try {
       const response = await fetchJson(`${API_URL}/vote/${id}`, {
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ increment: delta === 1 }),
+        body: JSON.stringify({ increment }),
       });
-      if (response.success) {
+      setRecords((prev) => prev.map((r) => (r.id === id ? response.data : r)));
-        const updatedItem: Record = response.data;
+      setError(null);
-        setRecords((prev) => prev.map((r) => (r.id === id ? updatedItem : r)));
-        setError(null);
-      } else {
-        throw new Error("Errore aggiornamento voti");
-      }
     } catch (e: any) {
       setError(e.message || "Errore update voti");
     }
   };
 
-  useEffect(() => {
-    fetchRecords();
-  }, []);
-
   return {
     records,
     loading,

app/src/models.tsx

@@ -0,0 +1,8 @@
+export interface QueueItem {
+  id: string;
+  titolo: string;
+  coverUrl: string;
+  artista: string;
+  color: string;
+  voti: number;
+}

app/src/pages/Tab.css

@@ -3,4 +3,5 @@
   /* height: 100%; */
   padding-top: 25px;
   padding-bottom: 25px;
+  border-radius: 0 0 20px 20px;
 }

app/src/pages/Tab3.tsx

@@ -1,42 +1,55 @@
-import { IonContent, IonPage } from "@ionic/react";
+import './Tab.css';
-import { useAtom } from "jotai";
-import React from "react";
 
-import { currentTrackAtom } from "../atoms";
+import { IonContent, IonPage } from '@ionic/react';
-import NowPlayingTab from "../components/NowPlayingTab";
+import { useAtom } from 'jotai';
-import Queue from "../components/Queue";
+import React from 'react';
-import { mocks } from "../mocks";
+
+import { currentTrackAtom } from '../atoms';
+import NowPlayingTab from '../components/NowPlayingTab';
+import Queue from '../components/Queue';
+import { useCoda } from '../hooks/useCoda';
+import { darkenAndSaturate } from '../utils';
 
-import "./Tab.css";
-import { darkenAndSaturate } from "../utils";
-import TestCoda from "../components/testCodaDbMongo";
 const Tab: React.FC = () => {
+  const { records, loading, error, updateVoti } = useCoda();
   const [current] = useAtom(currentTrackAtom);
   const now = Date.now();
 
+  // if (loading) return <div>Loading...</div>;
+  // if (error) return <div>Error: {error}</div>;
+  // if (records.length === 0) return <div>No songs in queue</div>;
+
   if (!current) return null;
 
   const darkerColor = darkenAndSaturate(current.color, 40, 100);
 
+  // Mappa i record nel formato richiesto da Queue
+  const songs = records.map((r) => ({
+    id: r.id,
+    coverUrl: r.coverUrl,
+    title: r.titolo,
+    artist: r.artista,
+    upvotes: r.voti,
+    upvoted: false,
+  }));
+
   return (
     <IonPage>
-      <IonContent fullscreen className="">
+      <IonContent fullscreen>
         <div
           className="gradient-background"
           style={{
             background: `linear-gradient(to bottom, ${current.color}, ${darkerColor})`,
           }}
         >
-          {current && (
+          <NowPlayingTab data={current} startTime={now - 15000} duration={180000} />
-            <NowPlayingTab
-              data={current}
-              startTime={now - 15000}
-              duration={180000}
-            />
-          )}
         </div>
-        <TestCoda />
+        <Queue
-        <Queue songs={mocks.queue} />
+          songs={songs}
+          onUpvote={(id) => {
+            updateVoti(id, true); // Incrementa voti
+          }}
+        />
       </IonContent>
     </IonPage>
   );