cleanup duplicated artist/album lists

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>
-      <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>
+    <AlbumList :items="item.albums"/>
+
     <h3 class="pt-5">Similar artist</h3>
-    <Tiles>
-      <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>
+    <ArtistList :items="item.similarArtist"/>
   </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"
-      :image="item.image"
+    <Tile v-for="item in props.items" :key="item.id"
       :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>