feat: use Cache

resources/assets/js/services/cache.ts

@@ -0,0 +1,50 @@
+const CACHE_EXPIRATION_TIME = 1000 * 60 * 60 * 24 // 1 day
+
+export const Cache = {
+  storage: new Map<any, {
+    time: number,
+    value: any
+  }>(),
+
+  normalizeKey: (key: any) => typeof key === 'object' ? JSON.stringify(key) : key,
+
+  has (key: any) {
+    return this.hit(this.normalizeKey(key))
+  },
+
+  set (key: any, value: any) {
+    this.storage.set(this.normalizeKey(key), {
+      value,
+      time: Date.now()
+    })
+  },
+
+  hit (key: any) {
+    return !this.miss(this.normalizeKey(key))
+  },
+
+  miss (key: any) {
+    key = this.normalizeKey(key)
+
+    if (!this.storage.has(key)) return true
+    const { time } = this.storage.get(key)!
+
+    if (time < Date.now() - CACHE_EXPIRATION_TIME) {
+      this.storage.delete(key)
+      return true
+    }
+
+    return false
+  },
+
+  invalidate (key: any) {
+    this.storage.delete(this.normalizeKey(key))
+  },
+
+  resolve<T> (key: any, resolver: Closure) {
+    key = this.normalizeKey(key)
+
+    this.hit(key) || this.set(key, resolver())
+    return this.storage.get(key)!.value
+  }
+}

resources/assets/js/stores/albumStore.ts

@@ -3,6 +3,7 @@ import { difference, orderBy, take, union } from 'lodash'
 import { httpService } from '@/services'
 import { arrayify } from '@/utils'
 import { songStore } from '@/stores'
+import { Cache } from '@/services/cache'
 
 const UNKNOWN_ALBUM_ID = 1
 
@@ -60,7 +61,7 @@ export const albumStore = {
     let album = this.byId(id)
 
     if (!album) {
-      album = await httpService.get<Album>(`albums/${id}`)
+      album = Cache.resolve<Album>(['album', id], async () => await httpService.get<Album>(`albums/${id}`))
       this.syncWithVault(album)
     }
 

resources/assets/js/stores/artistStore.ts

@@ -2,6 +2,7 @@ import { reactive } from 'vue'
 import { difference, orderBy, take, union } from 'lodash'
 import { httpService } from '@/services'
 import { arrayify } from '@/utils'
+import { Cache } from '@/services/cache'
 
 const UNKNOWN_ARTIST_ID = 1
 const VARIOUS_ARTISTS_ID = 2
@@ -55,7 +56,7 @@ export const artistStore = {
     let artist = this.byId(id)
 
     if (!artist) {
-      artist = await httpService.get<Artist>(`artists/${id}`)
+      artist = Cache.resolve<Artist>(['artist', id], async () => await httpService.get<Artist>(`artists/${id}`))
       this.syncWithVault(artist)
     }
 

resources/assets/js/stores/songStore.ts

@@ -5,6 +5,7 @@ import { reactive, watch } from 'vue'
 import { arrayify, secondsToHis, use } from '@/utils'
 import { authService, httpService } from '@/services'
 import { albumStore, artistStore, commonStore, overviewStore, preferenceStore } from '@/stores'
+import { Cache } from '@/services/cache'
 
 interface BroadcastSongData {
   song: {
@@ -177,15 +178,24 @@ export const songStore = {
   },
 
   async fetchForAlbum (album: Album) {
-    return this.syncWithVault(await httpService.get<Song[]>(`albums/${album.id}/songs`))
+    return Cache.resolve<Song[]>(
+      [`album.songs`, album.id],
+      async () => this.syncWithVault(await httpService.get<Song[]>(`albums/${album.id}/songs`))
+    )
   },
 
   async fetchForArtist (artist: Artist) {
-    return this.syncWithVault(await httpService.get<Song[]>(`artists/${artist.id}/songs`))
+    return Cache.resolve<Song[]>(
+      ['artist.songs', artist.id],
+      async () => this.syncWithVault(await httpService.get<Song[]>(`artists/${artist.id}/songs`))
+    )
   },
 
   async fetchForPlaylist (playlist: Playlist) {
-    return this.syncWithVault(await httpService.get<Song[]>(`playlists/${playlist.id}/songs`))
+    return Cache.resolve<Song[]>(
+      [`playlist.songs`, playlist.id],
+      async () => this.syncWithVault(await httpService.get<Song[]>(`playlists/${playlist.id}/songs`))
+    )
   },
 
   async fetch (sortField: SongListSortField, sortOrder: SortOrder, page: number) {