some bug fixes

- watch route params instead of route object in folderview
- move to script setup on album view
- use album as a reactive object instead of refs
- use axios instead of fetch to get album data
- improve clickable areas on songItem
- move album requests to POST

src/views/AlbumView.vue

@@ -1,26 +1,24 @@
 <template>
   <div class="al-view rounded">
     <div>
-      <Header :album_info="album_info" />
+      <Header :album_info="state.album.info" />
     </div>
     <div class="separator" id="av-sep"></div>
     <div class="songs rounded">
-      <SongList :songs="album_songs" />
+      <SongList :songs="state.album.tracklist" />
     </div>
     <div class="separator" id="av-sep"></div>
-    <FeaturedArtists :artists="artists" />
-    <div v-if="bio">
+    <FeaturedArtists :artists="state.album.artists" />
+    <div v-if="state.album.bio">
       <div class="separator" id="av-sep"></div>
-      <AlbumBio :bio="bio" v-if="bio" />
+      <AlbumBio :bio="state.album.bio" v-if="state.album.bio" />
     </div>
-    <!-- <div class="separator" id="av-sep"></div> -->
   </div>
 </template>
 
-<script>
+<script setup>
 import { useRoute } from "vue-router";
 import { onMounted } from "@vue/runtime-core";
-import { onUnmounted } from "@vue/runtime-core";
 import { watch } from "vue";
 import Header from "../components/AlbumView/Header.vue";
 import AlbumBio from "../components/AlbumView/AlbumBio.vue";
@@ -31,45 +29,20 @@ import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 import state from "@/composables/state.js";
 import routeLoader from "@/composables/routeLoader.js";
 
-export default {
-  components: {
-    Header,
-    AlbumBio,
-    SongList,
-    FeaturedArtists,
-  },
-  setup() {
-    const route = useRoute();
+const route = useRoute();
 
-    watch(
-      () => route.params,
-      () => {
-        if (route.name === "AlbumView") {
-          routeLoader.toAlbum(route.params.album, route.params.artist);
-        }
+onMounted(() => {
+  routeLoader.toAlbum(route.params.album, route.params.artist);
+
+  watch(
+    () => route.params,
+    () => {
+      if (route.name === "AlbumView") {
+        routeLoader.toAlbum(route.params.album, route.params.artist);
       }
-    );
-
-    onMounted(() => {
-      console.log("mounted");
-      routeLoader.toAlbum(route.params.album, route.params.artist);
-    });
-
-    onUnmounted(() => {
-      state.album_song_list.value = [];
-      state.album_info.value = {};
-      state.album_artists.value = [];
-      state.album_bio.value = "";
-    });
-
-    return {
-      album_songs: state.album_song_list,
-      album_info: state.album_info,
-      artists: state.album_artists,
-      bio: state.album_bio,
-    };
-  },
-};
+    }
+  );
+});
 </script>
 
 <style lang="scss">

src/views/FolderView.vue

@@ -101,13 +101,16 @@ export default {
 
       getDirData(path.value);
 
-      watch(route, (new_route) => {
-        path.value = new_route.params.path;
+      watch(
+        () => route.params,
+        () => {
+          path.value = route.params.path;
 
-        if (!path.value) return;
+          if (!path.value) return;
 
-        getDirData(path.value);
-      });
+          getDirData(path.value);
+        }
+      );
     });
 
     function updateQueryString(value) {