client: fix sending multiple requests

on songlist click

src/components/FolderView/SongList.vue

@@ -14,7 +14,7 @@
           <tr
             v-for="song in songs"
             :key="song"
-            @click="updateQueue(song.type.name, song.type.id)"
+            @click="updateQueue(song, song.type.name, song.type.id)"
           >
             <td :style="{ width: songTitleWidth + 'px' }" class="flex">
               <div
@@ -55,30 +55,58 @@
 </template>
 
 <script>
-import { ref } from "@vue/reactivity";
-
+import { ref, toRefs } from "@vue/reactivity";
 import { onMounted, onUnmounted } from "@vue/runtime-core";
+
 import { playAudio } from "@/composables/playAudio.js";
 import getQueue from "@/composables/getQueue.js";
-import putCommas from "@/composables/perks.js";
+import perks from "@/composables/perks.js";
 
 export default {
   props: ["songs"],
-  setup(props, context) {
+  setup(props) {
+    const song_list = toRefs(props).songs;
     const songtitle = ref(null);
     const songTitleWidth = ref(null);
 
     const minWidth = ref(300);
+    const putCommas = perks.putCommas;
 
-    const resizeSongTitleWidth = () => {
-      let a = songtitle.value.clientWidth;
+    const updateQueue = async (song, type, id) => {
+      if (perks.queue.value[0]._id.$oid !== song_list.value[0]._id.$oid) {
+        const queue = await getQueue(type, id);
+        localStorage.setItem("queue", JSON.stringify(queue));
+        perks.queue.value = queue;
+      }
+
+      perks.current.value = song;
+      localStorage.setItem("current", JSON.stringify(song));
+
+      const index = perks.queue.value.findIndex(
+        (item) => item._id.$oid === song._id.$oid
+      );
+
+      if (index == perks.queue.value.length - 1) {
+        perks.next.value = perks.queue.value[0];
+      } else {
+        perks.next.value = perks.queue.value[index + 1];
+      }
+
+      localStorage.setItem(
+        "next",
+        JSON.stringify(perks.queue.value[index + 1])
+      );
 
-      songTitleWidth.value = a > minWidth.value * 4 ? a / 4 : a / 3;
     };
 
-    const updateQueue = async (type, id) => {
-      const queue = await getQueue(type, id);
-      context.emit("updateQueue", queue);
+    const resizeSongTitleWidth = () => {
+      try {
+        let a = songtitle.value.clientWidth;
+  
+        songTitleWidth.value = a > minWidth.value * 4 ? a / 4 : a / 3;
+      } catch (error) {
+        return;
+      }
     };
 
     onMounted(() => {
@@ -101,7 +129,7 @@ export default {
       minWidth,
       playAudio,
       updateQueue,
-      putCommas
+      putCommas,
     };
   },
 };