From 4b522fd317c495a384dafa55b00abe5ed1f45401 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sun, 26 Jun 2022 19:28:02 +0300
Subject: [PATCH] sort tracks by tracknumber in album page

---
 src/stores/pages/album.ts | 15 ++++++++++++---
 src/views/AlbumView.vue   |  2 +-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/stores/pages/album.ts b/src/stores/pages/album.ts
index c471ca9..a9aac3d 100644
--- a/src/stores/pages/album.ts
+++ b/src/stores/pages/album.ts
@@ -7,6 +7,16 @@ import {
   getAlbumBio,
 } from "../../composables/pages/album";
 
+function sortTracks(tracks: Track[]) {
+  return tracks.sort((a, b) => {
+    if (a.tracknumber && b.tracknumber) {
+      return a.tracknumber - b.tracknumber;
+    }
+
+    return 0;
+  });
+}
+
 export default defineStore("album", {
   state: () => ({
     info: <AlbumInfo>{},
@@ -18,14 +28,13 @@ export default defineStore("album", {
     /**
      * Fetches a single album information, artists and its tracks from the server
      * using the title and album-artist of the album.
-     * @param title title of the album
-     * @param albumartist artist of the album
+     * @param hash title of the album
      */
     async fetchTracksAndArtists(hash: string) {
       const tracks = await getAlbumTracks(hash, useNotifStore);
       const artists = await getAlbumArtists(hash);
 
-      this.tracks = tracks.tracks;
+      this.tracks = sortTracks(tracks.tracks);
       this.info = tracks.info;
       this.artists = artists;
     },
diff --git a/src/views/AlbumView.vue b/src/views/AlbumView.vue
index b2679bb..8f789ef 100644
--- a/src/views/AlbumView.vue
+++ b/src/views/AlbumView.vue
@@ -30,7 +30,7 @@ const album = useAStore();
 
 onBeforeRouteUpdate(async (to) => {
   await album.fetchTracksAndArtists(to.params.hash.toString());
-  album.fetchBio(to.params.album.toString(), to.params.artist.toString());
+  album.fetchBio(to.params.hash.toString());
 });
 </script>