link to album views from home page

src/app/Nav.vue

@@ -22,7 +22,7 @@
         </small>
       </a>
 
-      <router-link class="nav-link" :to="{name: 'albums'}">
+      <router-link class="nav-link" :to="{name: 'albums', params: {sort: 'a-z'}}">
         <Icon icon="collection" /> Albums
       </router-link>
 

src/home/Home.vue

@@ -3,9 +3,17 @@
     <Spinner v-if="loading" />
     <template v-else>
       <div v-for="section in sections" :key="section.key" class="mb-4">
-        <template v-if="$data[section.key].length > 0">
+        <template v-if="result[section.key].length > 0">
-          <h1>{{ section.name }}</h1>
+          <h1>
-          <AlbumList :items="$data[section.key]" />
+            {{ section.name }}
+            <router-link
+              :to="{name: 'albums', params: {sort: section.key}}"
+              class="text-muted"
+            >
+              <Icon icon="chevron-compact-right" />
+            </router-link>
+          </h1>
+          <AlbumList :items="result[section.key]" />
         </template>
       </div>
     </template>
@@ -23,36 +31,38 @@
     data() {
       return {
         loading: true as boolean,
-        recent: [] as Album[],
+        result: {
-        newest: [] as Album[],
+          'recently-added': [] as Album[],
-        frequent: [] as Album[],
+          'recently-played': [] as Album[],
+          'most-played': [] as Album[],
           random: [] as Album[],
         }
+      }
     },
     computed: {
       sections(): any[] {
         return [
-          { name: 'Recently added', key: 'newest' },
+          { name: 'Recently added', key: 'recently-added' },
-          { name: 'Recently played', key: 'recent' },
+          { name: 'Recently played', key: 'recently-played' },
-          { name: 'Most played', key: 'frequent' },
+          { name: 'Most played', key: 'most-played' },
           { name: 'Random', key: 'random' },
         ]
       }
     },
     created() {
       const size = 10
-      this.$api.getAlbums('newest', size).then(result => {
+      this.$api.getAlbums('recently-added', size).then(result => {
-        this.newest = result
+        this.result['recently-added'] = result
         this.loading = false
       })
-      this.$api.getAlbums('recent', size).then(result => {
+      this.$api.getAlbums('recently-played', size).then(result => {
-        this.recent = result
+        this.result['recently-played'] = result
       })
-      this.$api.getAlbums('frequent', size).then(result => {
+      this.$api.getAlbums('most-played', size).then(result => {
-        this.frequent = result
+        this.result['most-played'] = result
       })
       this.$api.getAlbums('random', 50).then(result => {
-        this.random = result
+        this.result.random = result
       })
     }
   })

src/library/album/AlbumLibrary.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <ul class="nav-underlined">
-      <li v-for="{ value, text } in categories" :key="value">
+      <li v-for="{ value, text } in options" :key="value">
         <router-link :to="{... $route, params: {... $route.params, sort: value }}">
           {{ text }}
         </router-link>
@@ -17,14 +17,6 @@
   import AlbumList from './AlbumList.vue'
   import { Album, AlbumSort } from '@/shared/api'
 
-  const categoryToSort = {
-    'a-z': 'alphabeticalByName',
-    'recently-added': 'newest',
-    'recently-played': 'recent',
-    'most-played': 'frequent',
-    random: 'random',
-  } as {[key: string]: AlbumSort}
-
   export default Vue.extend({
     components: {
       AlbumList,
@@ -38,7 +30,7 @@
       }
     },
     computed: {
-      categories() {
+      options() {
         return [
           { text: 'A-Z', value: 'a-z' },
           { text: 'Recently added', value: 'recently-added' },
@@ -51,9 +43,9 @@
     watch: {
       sort: {
         immediate: true,
-        handler(value: string) {
+        handler(value: AlbumSort) {
           this.albums = null
-          this.$api.getAlbums(categoryToSort[value]).then(albums => {
+          this.$api.getAlbums(value).then(albums => {
             this.albums = albums
           })
         }

src/shared/api.ts

@@ -1,7 +1,12 @@
 import axios, { AxiosRequestConfig, AxiosInstance } from 'axios'
 import { AuthService } from '@/auth/service'
 
-export type AlbumSort = 'alphabeticalByName' | 'newest' | 'recent' | 'frequent' | 'random'
+export type AlbumSort =
+  'a-z' |
+  'recently-added'|
+  'recently-played' |
+  'most-played' |
+  'random'
 
 export interface Album {
   id: string
@@ -123,8 +128,16 @@ export class API {
   }
 
   async getAlbums(sort: AlbumSort, size = 500): Promise<Album[]> {
+    const type = {
+      'a-z': 'alphabeticalByName',
+      'recently-added': 'newest',
+      'recently-played': 'recent',
+      'most-played': 'frequent',
+      random: 'random',
+    }[sort]
+
     const params = {
-      type: sort,
+      type,
       offset: '0',
       size: size,
     }

src/shared/components/Icon.vue

@@ -6,6 +6,7 @@
   import {
     BIcon,
     BIconCardText,
+    BIconChevronCompactRight,
     BIconMusicNoteList,
     BIconStar,
     BIconStarFill,
@@ -28,6 +29,7 @@
     components: {
       BIcon,
       BIconCardText,
+      BIconChevronCompactRight,
       BIconMusicNoteList,
       BIconStar,
       BIconStarFill,

src/shared/router.ts

@@ -41,14 +41,6 @@ export function setupRouter(auth: AuthService) {
       },
       {
         name: 'albums',
-        path: '/albums',
-        redirect: {
-          name: 'albums-params',
-          params: { sort: 'a-z' }
-        }
-      },
-      {
-        name: 'albums-params',
         path: '/albums/:sort',
         component: AlbumLibrary,
         props: true