join all favorites page request into one

src/components/nav/Titles/FavoriteAlbumsNav.vue

@@ -1,3 +1,3 @@
 <template>
-  <h2 style="margin: 0">💜 Favorite albums</h2>
+  <h2 style="margin: 0">Favorite albums ❤️</h2>
 </template>

src/composables/fetch/favorite.ts

@@ -7,7 +7,7 @@ import { Album, Artist, Track } from "@/interfaces";
 
 export async function addFavorite(favtype: favType, itemhash: string) {
   const { data, error } = await useAxios({
-    url: paths.api.favorite,
+    url: paths.api.addFavorite,
     props: {
       type: favtype,
       hash: itemhash,
@@ -47,6 +47,21 @@ export async function removeFavorite(favtype: favType, itemhash: string) {
   return true;
 }
 
+export async function getAllFavs(
+  track_limit = 6,
+  album_limit = 6,
+  artist_limit = 6
+) {
+  const { data } = await useAxios({
+    url:
+      paths.api.favorites +
+      `?track_limit=${track_limit}&album_limit=${album_limit}&artist_limit=${artist_limit}`,
+    get: true,
+  });
+
+  return data;
+}
+
 export async function getFavAlbums(limit = 6) {
   const { data } = await useAxios({
     url: paths.api.favAlbums + `?limit=${limit}`,

src/config.ts

@@ -20,11 +20,15 @@ const imageRoutes = {
 const paths = {
   api: {
     album: baseApiUrl + "/album",
+    favorite: baseApiUrl + "/favorite",
+    favorites: baseApiUrl + "/favorites",
     favAlbums: baseApiUrl + "/albums/favorite",
     favTracks: baseApiUrl + "/tracks/favorite",
     favArtists: baseApiUrl + "/artists/favorite",
     artist: baseApiUrl + "/artist",
-    favorite: baseApiUrl + "/favorite",
+    get addFavorite() {
+      return this.favorite + "/add";
+    },
     get removeFavorite() {
       return this.favorite + "/remove";
     },

src/views/Favorites.vue

@@ -30,11 +30,7 @@ import ArtistAlbums from "@/components/AlbumView/ArtistAlbums.vue";
 import TopTracks from "@/components/ArtistView/TopTracks.vue";
 import FeaturedArtists from "@/components/PlaylistView/ArtistsList.vue";
 import { discographyAlbumTypes } from "@/composables/enums";
-import {
+import { getAllFavs, getFavTracks } from "@/composables/fetch/favorite";
-  getFavAlbums,
-  getFavArtists,
-  getFavTracks,
-} from "@/composables/fetch/favorite";
 import { Album, Artist, Track } from "@/interfaces";
 import useQueueStore from "@/stores/queue";
 import { maxAbumCards } from "@/stores/content-width";
@@ -46,11 +42,12 @@ const favTracks: Ref<Track[]> = ref([]);
 const favArtists: Ref<Artist[]> = ref([]);
 
 onMounted(() => {
-  getFavTracks().then((tracks) => (favTracks.value = tracks));
+  const max = maxAbumCards.value;
-  getFavAlbums(maxAbumCards.value).then((albums) => (favAlbums.value = albums));
+  getAllFavs(5, max, max).then((favs) => {
-  getFavArtists(maxAbumCards.value).then(
+    favAlbums.value = favs.albums;
-    (artists) => (favArtists.value = artists)
+    favTracks.value = favs.tracks;
-  );
+    favArtists.value = favs.artists;
+  });
 });
 
 async function handlePlay(index: number) {