use tabs to seperate search results

src/composables/loadmore.js

@@ -1,42 +0,0 @@
-import axios from "axios";
-
-const url = "http://127.0.0.1:9876/search/loadmore";
-
-async function loadMoreTracks(start) {
-  const response = await axios.get(url, {
-    params: {
-      type: "tracks",
-      start: start,
-    },
-  });
-
-  return response.data;
-}
-
-async function loadMoreAlbums(start) {
-  const response = await axios.get(url, {
-    params: {
-      type: "albums",
-      start: start,
-    },
-  });
-
-  return response.data;
-}
-
-async function loadMoreArtists(start) {
-  const response = await axios.get(url, {
-    params: {
-      type: "artists",
-      start: start,
-    },
-  });
-
-  return response.data;
-}
-
-export default {
-  loadMoreTracks,
-  loadMoreAlbums,
-  loadMoreArtists,
-};

src/composables/searchMusic.js

@@ -1,27 +0,0 @@
-import state from "./state";
-
-const base_url = `${state.settings.uri}/search?q=`;
-
-async function search(query) {
-  state.loading.value = true;
-  const url = base_url + encodeURIComponent(query.trim());
-
-  const res = await fetch(url);
-
-  if (!res.ok) {
-    const message = `An error has occured: ${res.status}`;
-    throw new Error(message);
-  }
-
-  const data = await res.json();
-
-  state.loading.value = false;
-
-  return {
-    tracks: data.data[0],
-    albums: data.data[1],
-    artists: data.data[2],
-  };
-}
-
-export default search;

src/composables/searchMusic.ts

@@ -0,0 +1,106 @@
+import state from "./state";
+import axios from "axios";
+
+const base_url = `${state.settings.uri}/search`;
+
+const uris = {
+  tracks: `${base_url}/tracks?q=`,
+  albums: `${base_url}/albums?q=`,
+  artists: `${base_url}/artists?q=`,
+};
+
+async function search(query: string) {
+  state.loading.value = true;
+
+  const url = base_url + encodeURIComponent(query.trim());
+
+  const res = await fetch(url);
+
+  if (!res.ok) {
+    const message = `An error has occured: ${res.status}`;
+    throw new Error(message);
+  }
+
+  const data = await res.json();
+
+  state.loading.value = false;
+
+  return {
+    tracks: data.data[0],
+    albums: data.data[1],
+    artists: data.data[2],
+  };
+}
+
+async function searchTracks(query: string) {
+  const url = uris.tracks + encodeURIComponent(query.trim());
+
+  const res = await fetch(url);
+
+  if (!res.ok) {
+    const message = `An error has occured: ${res.status}`;
+    throw new Error(message);
+  }
+
+  const data = await res.json();
+
+  return data;
+}
+
+async function searchAlbums(query: string) {
+  const url = uris.albums + encodeURIComponent(query.trim());
+
+  const res = await axios.get(url);
+  return res.data;
+}
+
+async function searchArtists(query: string) {
+  const url = uris.artists + encodeURIComponent(query.trim());
+
+  const res = await axios.get(url);
+  return res.data;
+}
+
+const url = state.settings.uri + "/search/loadmore";
+
+async function loadMoreTracks(index: number) {
+  const response = await axios.get(url, {
+    params: {
+      type: "tracks",
+      index: index,
+    },
+  });
+
+  return response.data;
+}
+
+async function loadMoreAlbums(index: number) {
+  const response = await axios.get(url, {
+    params: {
+      type: "albums",
+      index: index,
+    },
+  });
+
+  return response.data;
+}
+
+async function loadMoreArtists(index: number) {
+  const response = await axios.get(url, {
+    params: {
+      type: "artists",
+      index: index,
+    },
+  });
+
+  return response.data;
+}
+
+export {
+  searchTracks,
+  searchAlbums,
+  searchArtists,
+  loadMoreTracks,
+  loadMoreAlbums,
+  loadMoreArtists,
+};

src/composables/useDebouncedRef.js

@@ -1,33 +1,49 @@
-import {customRef, ref} from 'vue'
+import { customRef, ref } from "vue";
 
+/**
+ * Debounces a function
+ *
+ * @param {*} fn The function to debounce
+ * @param {*} delay The delay in milliseconds
+ * @param {*} immediate whether to debounce immediately
+ * @returns {Function} The debounced function
+ */
 const debounce = (fn, delay = 0, immediate = false) => {
-  let timeout
+  let timeout;
   return (...args) => {
-    if (immediate && !timeout) fn(...args)
-    clearTimeout(timeout)
+    if (immediate && !timeout) fn(...args);
+    clearTimeout(timeout);
 
     timeout = setTimeout(() => {
-      fn(...args)
-    }, delay)
-  }
-}
+      fn(...args);
+    }, delay);
+  };
+};
 
-const useDebouncedRef = (initialValue, delay, immediate) => {
-  const state = ref(initialValue)
+/**
+ * Emits the ref updated value after the given delay.
+ *
+ * @param {*} initialValue The default value of the ref
+ * @param {*} delay The delay in milliseconds
+ * @param {*} immediate Whether to call the function immediately
+ * @returns {Object} The ref and a function to call to update the ref
+ */
+const useDebouncedRef = (initialValue, delay, immediate = false) => {
+  const state = ref(initialValue);
   return customRef((track, trigger) => ({
     get() {
-      track()
-      return state.value
+      track();
+      return state.value;
     },
     set: debounce(
-        value => {
-          state.value = value
-          trigger()
-        },
-        delay,
-        immediate
+      (value) => {
+        state.value = value;
+        trigger();
+      },
+      delay,
+      immediate
     ),
-  }))
-}
+  }));
+};
 
-export default useDebouncedRef
+export default useDebouncedRef;