handle discs in album page

src/views/album/Content.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="songs rounded">
-    <SongList :tracks="tracks" :on_album_page="true" />
+  <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" />
+    </div>
   </div>
 </template>
 
@@ -9,6 +11,15 @@ import { Track } from "@/interfaces";
 import SongList from "@/components/FolderView/SongList.vue";
 
 defineProps<{
-  tracks: Track[];
+  discs: {
+    [key: string]: Track[];
+  };
 }>();
 </script>
+
+<style lang="scss">
+.album-tracks {
+  display: grid;
+  gap: 1rem;
+}
+</style>

src/views/album/index.vue

@@ -4,7 +4,7 @@
       <Header :album="album.info" />
     </template>
     <template #content>
-      <Content :tracks="album.tracks" />
+      <Content :discs="discs" />
     </template>
     <template #bottom>
       <Bottom
@@ -28,14 +28,36 @@ 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());
+  await album.fetchTracksAndArtists(to.params.hash.toString()).then(() => {
+    discs.value = createDiscs(album.tracks);
+  });
 });
 </script>