rewrite some fetch methods to use the useAxios hook

src/composables/album.ts

@@ -1,65 +0,0 @@
-import axios, { AxiosError } from "axios";
-import state from "./state";
-import { AlbumInfo, Track } from "../interfaces";
-
-const getAlbumTracks = async (album: string, artist: string) => {
-  let data = {
-    info: <AlbumInfo>{},
-    tracks: <Track[]>[],
-  };
-
-  await axios
-    .post(state.settings.uri + "/album", {
-      album: album,
-      artist: artist,
-    })
-    .then((res) => {
-      data.info = res.data.info;
-      data.tracks = res.data.tracks;
-    })
-    .catch((err: AxiosError) => {
-      console.error(err);
-    });
-
-  return data;
-};
-
-const getAlbumArtists = async (album:string, artist:string) => {
-  let artists = [];
-
-  await axios
-    .post(state.settings.uri + "/album/artists", {
-      album: album,
-      artist: artist,
-    })
-    .then((res) => {
-      artists = res.data.artists;
-    })
-    .catch((err: AxiosError) => {
-      console.error(err);
-    });
-
-  return artists;
-};
-
-const getAlbumBio = async (album: string, albumartist: string) => {
-  let bio = null;
-
-  await axios
-    .post(state.settings.uri + "/album/bio", {
-      album: album,
-      albumartist: albumartist,
-    })
-    .then((res) => {
-      bio = res.data.bio;
-    })
-    .catch((err: AxiosError) => {
-      if (err.response.status === 404) {
-        bio = null;
-      }
-    });
-
-  return bio;
-};
-
-export { getAlbumTracks, getAlbumArtists, getAlbumBio };

src/composables/fetch/album.ts

@@ -0,0 +1,66 @@
+import axios, { AxiosError } from "axios";
+import state from "../state";
+import { AlbumInfo, Track } from "../../interfaces";
+import useAxios from "../useAxios";
+
+const getAlbumTracks = async (album: string, artist: string) => {
+  const url = state.settings.uri + "/album";
+
+  interface AlbumData {
+    info: AlbumInfo;
+    tracks: Track[];
+  }
+
+  const { data, status } = await useAxios({
+    url,
+    props: {
+      album: album,
+      artist: artist,
+    },
+  });
+
+  if (status == 404) {
+    return {
+      info: {},
+      tracks: [],
+    };
+  }
+
+  return data as AlbumData;
+};
+
+const getAlbumArtists = async (album: string, artist: string) => {
+  const { data, error } = await useAxios({
+    url: state.settings.uri + "/album/artists",
+    props: {
+      album: album,
+      artist: artist,
+    },
+  });
+
+  if (error) {
+    console.error(error);
+  }
+
+  return data.artists;
+};
+
+const getAlbumBio = async (album: string, albumartist: string) => {
+  const { data, status } = await useAxios({
+    url: state.settings.uri + "/album/bio",
+    props: {
+      album: album,
+      albumartist: albumartist,
+    },
+  });
+
+  if (data) {
+    return data.bio;
+  }
+
+  if (status == 404) {
+    return null;
+  }
+};
+
+export { getAlbumTracks, getAlbumArtists, getAlbumBio };

src/composables/fetch/playlists.ts

@@ -0,0 +1,130 @@
+import axios from "axios";
+import { Playlist, Track } from "../../interfaces";
+import { Notification, NotifType } from "../../stores/notification";
+import state from "../state";
+import useAxios from "../useAxios";
+/**
+ * Creates a new playlist on the server.
+ * @param playlist_name The name of the playlist to create.
+ */
+async function createNewPlaylist(playlist_name: string, track?: Track) {
+  const { data, status } = await useAxios({
+    url: state.settings.uri + "/playlist/new",
+    props: {
+      name: playlist_name,
+    },
+  });
+
+  if (status == 201) {
+    new Notification("✅ Playlist created successfullly!");
+
+    if (track) {
+      setTimeout(() => {
+        addTrackToPlaylist(data.playlist, track);
+      }, 1000);
+    }
+
+    return {
+      success: true,
+      playlist: data.playlist as Playlist,
+    };
+  }
+
+  new Notification("That playlist already exists", NotifType.Error);
+
+  return {
+    success: false,
+    playlist: <Playlist>{},
+  };
+}
+
+/**
+ * Fetches all playlists from the server.
+ * @returns {Promise<Playlist[]>} A promise that resolves to an array of playlists.
+ */
+async function getAllPlaylists(): Promise<Playlist[]> {
+  const { data, error } = await useAxios({
+    url: state.settings.uri + "/playlists",
+    get: true,
+  });
+
+  if (error) console.error(error);
+
+  if (data) {
+    return data.data;
+  }
+
+  return [];
+}
+
+async function addTrackToPlaylist(playlist: Playlist, track: Track) {
+  const uri = `${state.settings.uri}/playlist/${playlist.playlistid}/add`;
+
+  const { status } = await useAxios({
+    url: uri,
+    props: {
+      track: track.trackid,
+    },
+  });
+
+  if (status == 409) {
+    new Notification("Track already exists in playlist", NotifType.Info);
+    return;
+  }
+
+  new Notification(track.title + " added to " + playlist.name);
+}
+
+async function getPlaylist(pid: string) {
+  const uri = state.settings.uri + "/playlist/" + pid;
+
+  interface PlaylistData {
+    info: Playlist;
+    tracks: Track[];
+  }
+
+  const { data, error } = await useAxios({
+    url: uri,
+    get: true,
+  });
+
+  if (error) {
+    new Notification("Something funny happened!", NotifType.Error);
+  }
+
+  if (data) {
+    return data as PlaylistData;
+  }
+
+  return null;
+}
+
+async function updatePlaylist(pid: string, playlist: FormData, pStore: any) {
+  const uri = state.settings.uri + "/playlist/" + pid + "/update";
+
+  const { data, error } = await useAxios({
+    url: uri,
+    put: true,
+    props: playlist,
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+
+  if (error) {
+    new Notification("Something funny happened!", NotifType.Error);
+  }
+
+  if (data) {
+    pStore.updatePInfo(data.data);
+    new Notification("Playlist updated!");
+  }
+}
+
+export {
+  createNewPlaylist,
+  getAllPlaylists,
+  addTrackToPlaylist,
+  getPlaylist,
+  updatePlaylist,
+};

src/composables/getFilesAndFolders.ts

@@ -1,22 +1,31 @@
 import axios from "axios";
 import { Folder, Track } from "../interfaces";
 import state from "./state";
+import useAxios from "./useAxios";
 
 export default async function (path: string) {
-  let tracks = Array<Track>();
-  let folders = Array<Folder>();
+  interface FolderData {
+    tracks: Track[];
+    folders: Folder[];
+  }
 
-  await axios
-    .post(`${state.settings.uri}/folder`, {
+  const { data, error } = await useAxios({
+    url: `${state.settings.uri}/folder`,
+    props: {
       folder: path,
-    })
-    .then((res) => {
-      tracks = res.data.tracks;
-      folders = res.data.folders;
-    })
-    .catch((err) => {
-      console.error(err);
-    });
+    },
+  });
 
-  return { tracks, folders };
+  if (error) {
+    console.error(error);
+  }
+
+  if (data) {
+    return data as FolderData;
+  }
+
+  return <FolderData>{
+    tracks: [],
+    folders: [],
+  };
 }

src/composables/playlists.ts

@@ -1,145 +0,0 @@
-import axios from "axios";
-import { Playlist, Track } from "../interfaces";
-import { Notification, NotifType } from "../stores/notification";
-import state from "./state";
-/**
- * Creates a new playlist on the server.
- * @param playlist_name The name of the playlist to create.
- */
-async function createNewPlaylist(playlist_name: string, track?: Track) {
-  let status = {
-    success: false,
-    playlist: <Playlist>{},
-  };
-
-  await axios
-    .post(state.settings.uri + "/playlist/new", {
-      name: playlist_name,
-    })
-    .then((res) => {
-      new Notification("✅ Playlist created successfullly!");
-
-      if (track) {
-        setTimeout(() => {
-          addTrackToPlaylist(res.data.playlist, track);
-        }, 1000);
-      }
-
-      status.success = true;
-      status.playlist = res.data.playlist;
-    })
-    .catch((err) => {
-      if (err.response.status == 409) {
-        new Notification(
-          "That playlist already exists",
-          NotifType.Error
-        );
-      }
-    });
-
-  return status;
-}
-
-/**
- * Fetches all playlists from the server.
- * @returns {Promise<Playlist[]>} A promise that resolves to an array of playlists.
- */
-async function getAllPlaylists(): Promise<Playlist[]> {
-  let playlists = <Playlist[]>[];
-
-  const newLocal = `${state.settings.uri}/playlists`;
-
-  await axios
-    .get(newLocal)
-    .then((res) => {
-      playlists = res.data.data;
-    })
-    .catch((err) => {
-      console.error(err);
-    });
-
-  return playlists;
-}
-
-async function addTrackToPlaylist(playlist: Playlist, track: Track) {
-  const uri = `${state.settings.uri}/playlist/${playlist.playlistid}/add`;
-
-  await axios
-    .post(uri, { track: track.trackid })
-    .then(() => {
-      new Notification(track.title + " added to " + playlist.name);
-    })
-    .catch((error) => {
-      if (error.response.status == 409) {
-        new Notification("Track already exists in playlist", NotifType.Info);
-      }
-    });
-}
-
-async function getPTracks(playlistid: string) {
-  const uri = state.settings.uri + "/playlist/" + playlistid;
-
-  let tracks: Track[] = [];
-
-  await axios
-    .get(uri)
-    .then((res) => {
-      tracks = res.data.data;
-    })
-    .catch((err) => {
-      new Notification("Something funny happened!", NotifType.Error);
-      throw new Error(err);
-    });
-
-  return tracks;
-}
-
-async function getPlaylist(pid: string) {
-  const uri = state.settings.uri + "/playlist/" + pid;
-
-  let playlist = {
-    info: {},
-    tracks: <Track[]>[],
-  };
-
-  await axios
-    .get(uri)
-    .then((res) => {
-      playlist.info = res.data.info;
-      playlist.tracks = res.data.tracks;
-    })
-    .catch((err) => {
-      new Notification("Something funny happened!", NotifType.Error);
-      throw new Error(err);
-    });
-
-  return playlist;
-}
-
-async function updatePlaylist(pid: string, playlist: FormData, pStore: any) {
-  const uri = state.settings.uri + "/playlist/" + pid + "/update";
-
-  await axios
-    .put(uri, playlist, {
-      headers: {
-        "Content-Type": "multipart/form-data",
-      },
-    })
-    .then((res) => {
-      pStore.updatePInfo(res.data.data);
-      new Notification("Playlist updated!");
-    })
-    .catch((err) => {
-      new Notification("Something funny happened!", NotifType.Error);
-      throw new Error(err);
-    });
-}
-
-export {
-  createNewPlaylist,
-  getAllPlaylists,
-  addTrackToPlaylist,
-  getPTracks,
-  getPlaylist,
-  updatePlaylist,
-};

src/composables/useAxios.ts

@@ -0,0 +1,32 @@
+import { FetchProps } from "../interfaces";
+import axios, { AxiosError, AxiosResponse } from "axios";
+
+export default async (args: FetchProps) => {
+  let data: any = null;
+  let error: string = null;
+  let status: number = null;
+
+  function getAxios() {
+    if (args.get) {
+      return axios.get(args.url, args.props);
+    }
+
+    if (args.put) {
+      return axios.put(args.url, args.props, args.headers);
+    }
+
+    return axios.post(args.url, args.props);
+  }
+
+  await getAxios()
+    .then((res: AxiosResponse) => {
+      data = res.data;
+      status = res.status;
+    })
+    .catch((err: AxiosError) => {
+      error = err.message as string;
+      status = err.response.status as number;
+    });
+
+  return { data, error, status };
+};

src/composables/useKeyboard.ts

@@ -1,4 +1,4 @@
-import useQStore from "@/stores/queue"
+import useQStore from "@/stores/queue";
 
 let key_down_fired = false;
 
@@ -9,12 +9,12 @@ function focusSearchBox() {
 }
 
 export default function (queue: typeof useQStore) {
-  const q = queue()
-  window.addEventListener("keydown", (e: any) => {
-    let target = e.target;
+  const q = queue();
+  window.addEventListener("keydown", (e: KeyboardEvent) => {
+    let target = e.target as HTMLElement;
     let ctrlKey = e.ctrlKey;
 
-    function FocusedOnInput(target: any) {
+    function FocusedOnInput(target: HTMLElement) {
       return target.tagName === "INPUT" || target.tagName === "TEXTAREA";
     }