group album tracks as they appear (in queue)

+ move handling disc logic to the album store

src/views/album/Content.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="album-tracks rounded">
     <div v-for="(disc, key) in discs" class="album-disc">
-      <SongList :key="key" :tracks="disc" :on_album_page="true" :c="key" />
+      <SongList :key="key" :tracks="disc" :on_album_page="true" :disc="key" />
     </div>
   </div>
 </template>

src/views/album/index.vue

@@ -4,7 +4,7 @@
       <Header :album="album.info" />
     </template>
     <template #content>
-      <Content :discs="discs" />
+      <Content :discs="album.discs" />
     </template>
     <template #bottom>
       <Bottom
@@ -28,36 +28,14 @@ import Page from "@/layouts/HeaderContentBottom.vue";
 import Bottom from "./Bottom.vue";
 import Content from "./Content.vue";
 import Header from "./Header.vue";
-import { Track } from "@/interfaces";
-import { ref } from "vue";
 
 const album = useAStore();
 
-// function that takes in a Track[] and returns a Track[][] which is a list of tracks split into discs
-interface Disc {
-  [key: string]: Track[];
-}
-
-function createDiscs(tracks: Track[]): Disc {
-  // group tracks by disc using array.reduce
-  return tracks.reduce((group, track) => {
-    const { discnumber } = track;
-    group[discnumber] = group[discnumber] ?? [];
-    group[discnumber].push(track);
-    return group;
-  }, {} as Disc);
-}
-
-const discs = ref(createDiscs(album.tracks));
-
-console.log(discs.value);
 function fetchAlbumBio(params: RouteParams) {
   album.fetchBio(params.hash.toString());
 }
 
 onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
-  await album.fetchTracksAndArtists(to.params.hash.toString()).then(() => {
-    discs.value = createDiscs(album.tracks);
-  });
+  await album.fetchTracksAndArtists(to.params.hash.toString());
 });
 </script>