cleanup duplicated artist/album lists

src/home/Home.vue

@@ -4,26 +4,19 @@
     <template v-else>
       <div v-for="section in sections" :key="section.key" class="mb-4">
         <h1>{{ section.name }}</h1>
-        <Tiles square>
+        <AlbumList :items="$data[section.key]"/>
-          <Tile v-for="item in $data[section.key]" :key="item.id"
-            :image="item.image"
-            :to="{name: 'album', params: { id: item.id } }"
-            :title="item.name">
-            <template v-slot:text>
-              <router-link :to="{name: 'artist', params: { id: item.artistId } }">
-                {{ item.artist }}
-              </router-link>
-            </template>
-          </Tile>
-        </Tiles>
       </div>
     </template>
   </div>
 </template>
 <script lang="ts">
 import Vue from 'vue';
+import AlbumList from "@/library/album/AlbumList.vue";
 
 export default Vue.extend({
+  components: {
+    AlbumList,
+  },
   data() {
     return {
       sections: [

src/library/album/AlbumCard.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="card">
-    <img class="card-img-top" :src="item.image">
-    <div class="card-body">
-      <div class=" ">
-        <div class="text-truncate">
-          <router-link :to="{name: 'album', params: { id: item.id } }">
-            <strong>{{ item.name }}</strong>
-          </router-link>
-        </div>
-        <div class="text-truncate text-muted">
-          {{ item.artist }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<style scoped lang="scss">
-  .on-hover {
-    opacity: 0.6;
-  }
-
-  .show-btns {
-    color: rgba(255, 255, 255, 1) !important;
-  }
-</style>
-<script lang="ts">
-  import Vue from "vue";
-
-  export default Vue.extend({
-    props: {
-      item: Object
-    }
-  });
-</script>

src/library/album/AlbumLibrary.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <Spinner :data="albums" v-slot="{albums: data}">
+      <AlbumList :items="albums"/>
+    </Spinner>
+  </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import AlbumList from './AlbumList.vue';
+import { AlbumSort } from '@/shared/api';
+
+export default Vue.extend({
+  components: {
+    AlbumList,
+  },
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      sort: "newest",
+      albums: null,
+    };
+  },
+  computed: {
+    sortOptions() {
+      return [
+        { text: "A-Z", value: "alphabeticalByName" },
+        { text: "Date", value: "newest" },
+        { text: "frequent", value: "frequent" },
+        // { text: "random", value: "random" },
+        // { text: "recent", value: "recent" },
+        // { text: "starred", value: "starred" },
+      ]
+    }
+  },
+  watch: {
+    sort: {
+      immediate: true,
+      handler(value: AlbumSort) {
+        this.albums = null;
+        this.$api.getAlbums(value).then(albums => {
+          this.albums = albums;
+        });
+      }
+    }
+  },
+});
+</script>

src/library/album/AlbumList.vue

@@ -1,59 +1,14 @@
-<template>
+<template functional>
-  <div>
-    <Spinner :data="albums" v-slot="{albums: data}">
   <Tiles square>
-        <Tile v-for="item in albums" :key="item.id"
+    <Tile v-for="item in props.items" :key="item.id"
       :image="item.image"
       :to="{name: 'album', params: { id: item.id } }"
       :title="item.name">
       <template v-slot:text>
-            <router-link :to="{name: 'artist', params: { id: item.artistId } }">
+        <router-link :to="{name: 'artist', params: { id: item.artistId } }" class="text-muted">
           {{ item.artist }}
         </router-link>
       </template>
     </Tile>
   </Tiles>
-    </Spinner>
-  </div>
 </template>
-<script lang="ts">
-import Vue from "vue";
-import { AlbumSort } from '@/shared/api';
-
-export default Vue.extend({
-  props: {
-    msg: String
-  },
-  data() {
-    return {
-      sort: "newest",
-      albums: null,
-    };
-  },
-  computed: {
-    sortOptions() {
-      return [
-        { text: "A-Z", value: "alphabeticalByName" },
-        { text: "Date", value: "newest" },
-        { text: "frequent", value: "frequent" },
-        // { text: "random", value: "random" },
-        // { text: "recent", value: "recent" },
-        // { text: "starred", value: "starred" },
-      ]
-    }
-  },
-  watch: {
-    sort: {
-      immediate: true,
-      handler(value: AlbumSort) {
-        this.albums = null;
-        this.$api.getAlbums(value).then(albums => {
-          this.albums = albums;
-        });
-      }
-    }
-  },
-  created() {
-  }
-});
-</script>

src/library/artist/ArtistCard.vue

@@ -1,21 +0,0 @@
-<template>
-  <div>
-    <div class="text-truncate">
-      <router-link :to="{name: 'artist', params: { id: item.id } }">
-        <strong>{{ item.name }}</strong>
-      </router-link>
-    </div>
-     <div class="text-truncate text-muted">
-      <strong>{{ item.albumCount }}</strong> albums
-    </div>
-  </div>
-</template>
-<script lang="ts">
-  import Vue from "vue";
-
-  export default Vue.extend({
-    props: {
-      item: { type: Object, required: true }
-    }
-  });
-</script>

src/library/artist/ArtistDetails.vue

@@ -10,31 +10,22 @@
       </div>
     </div>
     <h3 class="pt-5">Albums</h3>
-    <Tiles square>
+    <AlbumList :items="item.albums"/>
-      <Tile v-for="item in item.albums" :key="item.id"
+
-        :image="item.image"
-        :to="{name: 'album', params: { id: item.id } }"
-        :title="item.name"
-        :text="item.artist">
-      </Tile>
-    </Tiles>
     <h3 class="pt-5">Similar artist</h3>
-    <Tiles>
+    <ArtistList :items="item.similarArtist"/>
-      <Tile v-for="item in item.similarArtist" :key="item.id"
-        :to="{name: 'artist', params: { id: item.id } }"
-        :title="item.name">
-        <template v-slot:text>
-          <strong>{{ item.albumCount }}</strong> albums
-        </template>
-      </Tile>
-    </Tiles>
   </div>
 </template>
 <script lang="ts">
 import Vue from "vue";
+import AlbumList from "@/library/album/AlbumList.vue";
+import ArtistList from "@/library/artist/ArtistList.vue";
 
 export default Vue.extend({
-  components: {},
+  components: {
+    AlbumList,
+    ArtistList,
+  },
   props: {
     id: String
   },

src/library/artist/ArtistLibrary.vue

@@ -0,0 +1,23 @@
+<template>
+  <ArtistList :items="items"/>
+</template>
+<script lang="ts">
+  import Vue from "vue";
+  import ArtistList from './ArtistList.vue';
+
+  export default Vue.extend({
+    components: {
+      ArtistList,
+    },
+    data() {
+      return {
+        items: []
+      };
+    },
+    created() {
+      this.$api.getArtists().then(items => {
+        this.items = items;
+      });
+    }
+  });
+</script>

src/library/artist/ArtistList.vue

@@ -1,7 +1,6 @@
-<template>
+<template functional>
   <Tiles>
-    <Tile v-for="item in items" :key="item.id"
+    <Tile v-for="item in props.items" :key="item.id"
-      :image="item.image"
       :to="{name: 'artist', params: { id: item.id } }"
       :title="item.name">
       <template v-slot:text>
@@ -10,19 +9,3 @@
     </Tile>
   </Tiles>
 </template>
-<script lang="ts">
-  import Vue from "vue";
-
-  export default Vue.extend({
-    data() {
-      return {
-        items: []
-      };
-    },
-    created() {
-      this.$api.getArtists().then(items => {
-        this.items = items;
-      });
-    }
-  });
-</script>

src/search/SearchResult.vue

@@ -1,15 +1,8 @@
 <template>
   <div v-if="result">
-  
     <div>
       <h5 class="text-uppercase">Artists</h5>
-      <div class="d-flex">
+      <ArtistList :items="result.artists"/>
-        <div class="tiles">
-          <div v-for="item in result.artists" :key="item.id">
-            <ArtistCard :item="item"></ArtistCard>
-          </div>
-        </div>
-      </div>
 
       <b-table-simple hover borderless>
         <tbody>
@@ -22,13 +15,7 @@
 
     <div>
       <h5 class="text-uppercase">Albums</h5>
-       <div class="d-flex">
+      <AlbumList :items="result.albums"/>
-      <div class="tiles">
-        <div v-for="item in result.albums" :key="item.id">
-          <AlbumCard :item="item"></AlbumCard>
-        </div>
-      </div>
-      </div>
       <b-table-simple hover borderless>
         <tbody>
           <tr v-for="item in result.albums">
@@ -72,13 +59,13 @@
 </template>
 <script lang="ts">
   import Vue from "vue";
-  import AlbumCard from "@/library/album/AlbumCard.vue";
+  import AlbumList from "@/library/album/AlbumList.vue";
-  import ArtistCard from "@/library/artist/ArtistCard.vue";
+  import ArtistList from "@/library/artist/ArtistList.vue";
 
   export default Vue.extend({
     components: {
-      AlbumCard,
+      AlbumList,
-      ArtistCard,
+      ArtistList,
     },
     props: {
       query: String,

src/shared/router.ts

@@ -3,13 +3,13 @@ import Router from 'vue-router'
 import Login from '@/auth/Login.vue'
 import Queue from '@/player/Queue.vue'
 import Home from '@/home/Home.vue'
-import AlbumList from '@/library/album/AlbumList.vue'
 import ArtistDetails from '@/library/artist/ArtistDetails.vue'
-import ArtistList from '@/library/artist/ArtistList.vue'
+import ArtistLibrary from '@/library/artist/ArtistLibrary.vue'
-import Album from '@/library/album/Album.vue'
+import AlbumDetails from '@/library/album/AlbumDetails.vue'
+import AlbumLibrary from '@/library/album/AlbumLibrary.vue'
 import RandomSongs from '@/playlist/RandomSongs.vue'
-import GenreList from '@/library/genre/GenreList.vue'
 import GenreDetails from '@/library/genre/GenreDetails.vue'
+import GenreLibrary from '@/library/genre/GenreLibrary.vue'
 import Starred from '@/library/starred/Starred.vue'
 import Playlist from '@/playlist/Playlist.vue'
 import PlaylistList from '@/playlist/PlaylistList.vue'
@@ -44,18 +44,18 @@ export function setupRouter(auth: AuthService) {
       {
         name: 'albums',
         path: '/albums',
-        component: AlbumList
+        component: AlbumLibrary
       },
       {
         name: 'album',
         path: '/album/:id',
-        component: Album,
+        component: AlbumDetails,
         props: true,
       },
       {
         name: 'artists',
         path: '/artists',
-        component: ArtistList
+        component: ArtistLibrary
       },
       {
         name: 'artist',
@@ -66,7 +66,7 @@ export function setupRouter(auth: AuthService) {
       {
         name: 'genres',
         path: '/genres',
-        component: GenreList,
+        component: GenreLibrary,
       },
       {
         name: 'genre',