feat: spotify search

app/src/components/Queue.tsx

@@ -8,11 +8,17 @@ import {
   IonSearchbar,
   IonTitle,
   IonToolbar,
+  IonList,
+  IonItem,
+  IonLabel,
 } from "@ionic/react";
 
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
+
 import { ArrowBigUp, Plus } from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
+import { useCoda } from "../hooks/useCoda";
+
+
 
 interface NowPlayingDiscProps {
   id: string;
@@ -23,19 +29,80 @@ interface NowPlayingDiscProps {
   upvotes?: number;
 }
 
-interface QueueProps {
-  songs: NowPlayingDiscProps[];
-  onUpvote: (id: string) => void;
-}
+const Queue: React.FC = () => {
+  const { records, addRecord, updateVoti } = useCoda();
 
-const Queue: React.FC<QueueProps> = ({ songs, onUpvote }) => {
   const [showModal, setShowModal] = useState(false);
   const [searchText, setSearchText] = useState("");
+  const [searchResults, setSearchResults] = useState<NowPlayingDiscProps[]>([]);
+  const debounceTimeout = useRef<NodeJS.Timeout>();
 
-  // Ordina i brani in ordine decrescente per upvotes
-  const sortedSongs = [...songs].sort(
-    (a, b) => (b.upvotes ?? 0) - (a.upvotes ?? 0)
-  );
+  // Ordina i brani in ordine decrescente per voti (dal DB)
+  const sortedSongs = [...records].sort((a, b) => b.voti - a.voti);
+
+  // Effetto debounce per chiamare API dopo 2 secondi
+  useEffect(() => {
+    if (!searchText) {
+      setSearchResults([]);
+      return;
+    }
+
+    if (debounceTimeout.current) {
+      clearTimeout(debounceTimeout.current);
+    }
+
+    debounceTimeout.current = setTimeout(() => {
+      fetch(
+        `https://fbbb261497e3.ngrok-free.app/music/search?query=${encodeURIComponent(searchText)}`
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          const results: NowPlayingDiscProps[] = data.tracks?.items.map((item: any) => ({
+            id: item.id,
+            coverUrl: item.album?.images?.[0]?.url || "",
+            title: item.name,
+            artist: item.artists?.map((a: any) => a.name).join(", ") || "",
+            upvotes: 0,
+            upvoted: false,
+          })) || [];
+
+          setSearchResults(results);
+        })
+        .catch((err) => {
+          console.error("Error fetching search results:", err);
+          setSearchResults([]);
+        });
+    }, 2000);
+
+    return () => {
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+    };
+  }, [searchText]);
+
+  // Funzione per aggiungere o incrementare voto in DB
+  const handleAddSong = (song: NowPlayingDiscProps) => {
+    // Cerco se è già presente nel DB (records)
+    const existing = records.find((r) => r.id === song.id);
+
+    if (existing) {
+      // Incrementa il voto
+      updateVoti(existing.id, true);
+    } else {
+      // Aggiunge la nuova canzone al DB
+      addRecord({
+        titolo: song.title,
+        coverUrl: song.coverUrl,
+        artista: song.artist,
+        color: "#ff6600", // puoi decidere un colore o gestirlo dinamicamente
+        voti: 1,
+      });
+    }
+    setShowModal(false);
+    setSearchText("");
+    setSearchResults([]);
+  };
 
   return (
     <div className="queue-container">
@@ -46,71 +113,57 @@ const Queue: React.FC<QueueProps> = ({ songs, onUpvote }) => {
           color="white"
           strokeWidth={2}
           onClick={() => setShowModal(true)}
+          style={{ cursor: "pointer" }}
         />
       </div>
 
-      <AnimatePresence>
-        {sortedSongs.map((song) => {
-          const isUpvoted = song.upvoted ?? false;
-          const votes = song.upvotes ?? 0;
+      {sortedSongs.map((song) => (
+        <div className="song-item" key={song.id}>
+          <img
+            className="cover"
+            src={song.coverUrl}
+            alt={`${song.titolo} cover`}
+          />
+          <div className="text-info">
+            <div className="title">{song.titolo}</div>
+            <div className="artist">{song.artista}</div>
+          </div>
 
-          return (
-            <motion.div
-              layout
-              key={song.id}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -20 }}
-              transition={{ duration: 0.3 }}
-              className="song-item"
+          <div
+            className="upvote-container"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              marginLeft: "auto",
+              cursor: "pointer",
+            }}
+            onClick={() => updateVoti(song.id, true)}
+          >
+            <span
+              style={{ fontWeight: "600", color: "#444", userSelect: "none" }}
             >
-              <img
-                className="cover"
-                src={song.coverUrl}
-                alt={`${song.title} cover`}
-              />
-              <div className="text-info">
-                <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>
+              {song.voti}
+            </span>
+            <ArrowBigUp
+              size={24}
+              strokeWidth={2.5}
+              color="#ff6600"
+              fill="#ff6600"
+            />
+          </div>
+        </div>
+      ))}
 
       <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
         <IonHeader>
           <IonToolbar>
             <IonTitle>Add Songs</IonTitle>
-            <IonButton slot="end" fill="clear" onClick={() => setShowModal(false)}>
+            <IonButton
+              slot="end"
+              fill="clear"
+              onClick={() => setShowModal(false)}
+            >
               Close
             </IonButton>
           </IonToolbar>
@@ -121,6 +174,22 @@ const Queue: React.FC<QueueProps> = ({ songs, onUpvote }) => {
             onIonInput={(e) => setSearchText(e.detail.value!)}
             placeholder="Search..."
           />
+
+          <IonList>
+            {searchResults.map((song) => (
+              <IonItem button key={song.id} onClick={() => handleAddSong(song)}>
+                <img
+                  src={song.coverUrl}
+                  alt={song.title}
+                  style={{ width: 50, height: 50, marginRight: 10 }}
+                />
+                <IonLabel>
+                  <h2>{song.title}</h2>
+                  <p>{song.artist}</p>
+                </IonLabel>
+              </IonItem>
+            ))}
+          </IonList>
         </IonContent>
       </IonModal>
     </div>