implement clearing search input on start typing

+ rename pages folder to fetch in composables folder

src/composables/fetch/album.ts

@@ -0,0 +1,68 @@
+import state from "../state";
+import { AlbumInfo, Track } from "../../interfaces";
+import useAxios from "../useAxios";
+import { NotifType, useNotifStore } from "@/stores/notification";
+
+const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
+  const url = state.settings.uri + "/album";
+
+  interface AlbumData {
+    info: AlbumInfo;
+    tracks: Track[];
+  }
+
+  const { data, status } = await useAxios({
+    url,
+    props: {
+      hash: hash,
+    },
+  });
+
+  if (status == 204) {
+    ToastStore().showNotification("Album not created yet!", NotifType.Error);
+    return {
+      info: {
+        album: "",
+        artist: "",
+        colors: []
+      },
+      tracks: [],
+    };
+  }
+
+  return data as AlbumData;
+};
+
+const getAlbumArtists = async (hash: string) => {
+  const { data, error } = await useAxios({
+    url: state.settings.uri + "/album/artists",
+    props: {
+      hash: hash,
+    },
+  });
+
+  if (error) {
+    console.error(error);
+  }
+
+  return data.artists;
+};
+
+const getAlbumBio = async (hash: string) => {
+  const { data, status } = await useAxios({
+    url: state.settings.uri + "/album/bio",
+    props: {
+      hash: hash,
+    },
+  });
+
+  if (data) {
+    return data.bio;
+  }
+
+  if (status == 404) {
+    return null;
+  }
+};
+
+export { getAlbumData as getAlbumTracks, getAlbumArtists, getAlbumBio };

src/composables/fetch/folders.ts

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

src/composables/fetch/playlists.ts

@@ -0,0 +1,156 @@
+import { Artist } from "../../interfaces";
+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!");
+  }
+}
+
+/**
+ * Gets the artists in a playlist.
+ * @param pid The playlist id to fetch tracks for.
+ * @returns {Promise<Artist[]>} A promise that resolves to an array of artists.
+ */
+export async function getPlaylistArtists(pid: string): Promise<Artist[]> {
+  const uri = state.settings.uri + "/playlist/artists";
+
+  const { data, error } = await useAxios({
+    url: uri,
+    props: {
+      pid: pid,
+    },
+  });
+
+  if (error) {
+    new Notification("Something funny happened!", NotifType.Error);
+  }
+
+  if (data) {
+    return data.data as Artist[];
+  }
+
+  return [];
+}
+
+export {
+  createNewPlaylist,
+  getAllPlaylists,
+  addTrackToPlaylist,
+  getPlaylist,
+  updatePlaylist,
+};

src/composables/fetch/searchMusic.ts

@@ -0,0 +1,86 @@
+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 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,
+};
+
+// TODO:
+// Rewrite this module using `useAxios` hook