link loader to all request that use the useAxios hook

src/components/LeftSidebar/Navigation.vue

@@ -11,12 +11,7 @@
           separator: menu.separator,
         }"
       ></div>
-      <div
-        class="nav-button"
-        id="home-button"
-        :class="{ active: menu.route_name === $route.name }"
-        v-else
-      >
+      <div class="nav-button" id="home-button" v-else>
         <div class="in">
           <component :is="menu.icon"></component>
           <span>{{ menu.name }}</span>
@@ -75,11 +70,6 @@ const menus = [
 .side-nav-container {
   text-transform: capitalize;
   margin-top: 1rem;
-  font-size: 0.85rem;
-
-  .active {
-    background-color: $gray4;
-  }
 
   .nav-button {
     border-radius: $small;

src/composables/fetch/searchMusic.ts

@@ -1,5 +1,6 @@
 import state from "../state";
 import axios from "axios";
+import useAxios from "./useAxios";
 
 const base_url = `${state.settings.uri}/search`;
 
@@ -9,39 +10,39 @@ const uris = {
   artists: `${base_url}/artists?q=`,
 };
 
-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();
+/**
+ * Fetch data from url
+ * @param url url to fetch json from
+ * @returns promise that resolves to the JSON
+ */
+async function fetchData(url: string) {
+  const { data } = await useAxios({
+    url: url,
+    get: true,
+  });
 
   return data;
 }
 
+async function searchTracks(query: string) {
+  const url = uris.tracks + encodeURIComponent(query.trim());
+  return await fetchData(url);
+}
+
 async function searchAlbums(query: string) {
   const url = uris.albums + encodeURIComponent(query.trim());
-
-  const res = await axios.get(url);
-  return res.data;
+  return await fetchData(url);
 }
 
 async function searchArtists(query: string) {
   const url = uris.artists + encodeURIComponent(query.trim());
-
-  const res = await axios.get(url);
-  return res.data;
+  return await fetchData(url);
 }
 
-const url = state.settings.uri + "/search/loadmore";
+const loadmore_url = state.settings.uri + "/search/loadmore";
 
 async function loadMoreTracks(index: number) {
-  const response = await axios.get(url, {
+  const response = await axios.get(loadmore_url, {
     params: {
       type: "tracks",
       index: index,
@@ -52,7 +53,7 @@ async function loadMoreTracks(index: number) {
 }
 
 async function loadMoreAlbums(index: number) {
-  const response = await axios.get(url, {
+  const response = await axios.get(loadmore_url, {
     params: {
       type: "albums",
       index: index,
@@ -63,7 +64,7 @@ async function loadMoreAlbums(index: number) {
 }
 
 async function loadMoreArtists(index: number) {
-  const response = await axios.get(url, {
+  const response = await axios.get(loadmore_url, {
     params: {
       type: "artists",
       index: index,

src/composables/fetch/useAxios.ts

@@ -1,10 +1,11 @@
 import { FetchProps } from "../../interfaces";
 import axios, { AxiosError, AxiosResponse } from "axios";
+import useLoaderStore from "@/stores/loader";
 
 export default async (args: FetchProps) => {
   let data: any = null;
-  let error: string = null;
-  let status: number = null;
+  let error: string | null = null;
+  let status: number | null = null;
 
   function getAxios() {
     if (args.get) {
@@ -18,6 +19,8 @@ export default async (args: FetchProps) => {
     return axios.post(args.url, args.props);
   }
 
+  const { startLoading, stopLoading } = useLoaderStore();
+  startLoading();
   await getAxios()
     .then((res: AxiosResponse) => {
       data = res.data;
@@ -25,8 +28,9 @@ export default async (args: FetchProps) => {
     })
     .catch((err: AxiosError) => {
       error = err.message as string;
-      status = err.response.status as number;
-    });
+      status = err.response?.status as number;
+    })
+    .then(() => stopLoading());
 
   return { data, error, status };
 };

src/stores/search.ts

@@ -12,6 +12,7 @@ import {
 import { watch } from "vue";
 import useDebouncedRef from "../utils/useDebouncedRef";
 import useTabStore from "./tabs";
+import useLoaderStore from "./loader";
 /**
  *
  * Scrolls on clicking the loadmore button
@@ -28,6 +29,8 @@ function scrollOnLoad() {
 
 export default defineStore("search", () => {
   const query = useDebouncedRef(null, 600);
+  const { startLoading, stopLoading } = useLoaderStore();
+
   const currentTab = ref("tracks");
   const loadCounter = reactive({
     tracks: 0,
@@ -62,51 +65,67 @@ export default defineStore("search", () => {
 
   /**
    * Searches for tracks, albums and artists
-   * @param newquery query to search for
+   * @param query query to search for
    */
-  function fetchTracks(newquery: string) {
-    searchTracks(newquery).then((res) => {
+  function fetchTracks(query: string) {
+    if (!query) return;
+
+    searchTracks(query).then((res) => {
       tracks.value = res.tracks;
       tracks.more = res.more;
-      tracks.query = newquery;
+      tracks.query = query;
     });
   }
 
   function fetchAlbums(query: string) {
-    searchAlbums(query).then((res) => {
-      albums.value = res.albums;
-      albums.more = res.more;
-      albums.query = query;
-    });
+    if (!query) return;
+
+    startLoading();
+    searchAlbums(query)
+      .then((res) => {
+        albums.value = res.albums;
+        albums.more = res.more;
+        albums.query = query;
+      })
+      .then(() => stopLoading());
   }
 
   function fetchArtists(query: string) {
-    searchArtists(query).then((res) => {
-      artists.value = res.artists;
-      artists.more = res.more;
-      artists.query = query;
-    });
+    if (!query) return;
+
+    startLoading();
+    searchArtists(query)
+      .then((res) => {
+        artists.value = res.artists;
+        artists.more = res.more;
+        artists.query = query;
+      })
+      .then(() => stopLoading());
   }
 
   function loadTracks() {
     loadCounter.tracks += 12;
 
+    startLoading();
     loadMoreTracks(loadCounter.tracks)
       .then((res) => {
         tracks.value = [...tracks.value, ...res.tracks];
         tracks.more = res.more;
       })
+      .then(() => stopLoading())
       .then(() => scrollOnLoad());
   }
 
   function loadAlbums() {
     loadCounter.albums += 12;
 
+    startLoading();
     loadMoreAlbums(loadCounter.albums)
       .then((res) => {
         albums.value = [...albums.value, ...res.albums];
         albums.more = res.more;
       })
+      .then(() => stopLoading())
       .then(() => {
         setTimeout(() => {
           scrollOnLoad();
@@ -117,11 +136,13 @@ export default defineStore("search", () => {
   function loadArtists() {
     loadCounter.artists += 12;
 
+    startLoading();
     loadMoreArtists(loadCounter.artists)
       .then((res) => {
         artists.value = [...artists.value, ...res.artists];
         artists.more = res.more;
       })
+      .then(() => stopLoading())
       .then(() => scrollOnLoad());
   }