[web] Fix a bug preventing the "featured playlists" and "new releases" pages to work after a page refresh

web-src/src/pages/PageMusicSpotify.vue

@@ -48,45 +48,34 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListAlbumsSpotify from '@/components/ListAlbumsSpotify.vue'
 import ListPlaylistsSpotify from '@/components/ListPlaylistsSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import TabsMusic from '@/components/TabsMusic.vue'
-import store from '@/store'
+import webapi from '@/webapi'
 
 const dataObject = {
   load(to) {
-    if (
-      store.state.spotify_new_releases.length > 0 &&
-      store.state.spotify_featured_playlists.length > 0
-    ) {
-      return Promise.resolve()
-    }
-
-    const spotifyApi = new SpotifyWebApi()
-    spotifyApi.setAccessToken(store.state.spotify.webapi_token)
-    return Promise.all([
-      spotifyApi.getNewReleases({
-        country: store.state.spotify.webapi_country,
-        limit: 50
-      }),
-      spotifyApi.getFeaturedPlaylists({
-        country: store.state.spotify.webapi_country,
-        limit: 50
-      })
-    ])
+    return webapi.spotify().then(({ data }) => {
+      const spotifyApi = new SpotifyWebApi()
+      spotifyApi.setAccessToken(data.webapi_token)
+      return Promise.all([
+        spotifyApi.getNewReleases({
+          country: data.webapi_country,
+          limit: 3
+        }),
+        spotifyApi.getFeaturedPlaylists({
+          country: data.webapi_country,
+          limit: 3
+        })
+      ])
+    })
   },
 
   set(vm, response) {
-    if (response) {
-      store.commit(types.SPOTIFY_NEW_RELEASES, response[0].albums.items)
-      store.commit(
-        types.SPOTIFY_FEATURED_PLAYLISTS,
-        response[1].playlists.items
-      )
-    }
+    vm.new_releases = response[0].albums.items
+    vm.featured_playlists = response[1].playlists.items
   }
 }
 
@@ -105,12 +94,10 @@ export default {
     })
   },
 
-  computed: {
-    featured_playlists() {
-      return this.$store.state.spotify_featured_playlists.slice(0, 3)
-    },
-    new_releases() {
-      return this.$store.state.spotify_new_releases.slice(0, 3)
+  data() {
+    return {
+      featured_playlists: [],
+      new_releases: []
     }
   }
 }

web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue

@@ -16,31 +16,26 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListPlaylistsSpotify from '@/components/ListPlaylistsSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import TabsMusic from '@/components/TabsMusic.vue'
-import store from '@/store'
+import webapi from '@/webapi'
 
 const dataObject = {
   load(to) {
-    if (store.state.spotify_featured_playlists.length > 0) {
-      return Promise.resolve()
-    }
-
-    const spotifyApi = new SpotifyWebApi()
-    spotifyApi.setAccessToken(store.state.spotify.webapi_token)
-    spotifyApi.getFeaturedPlaylists({
-      country: store.state.spotify.webapi_country,
-      limit: 50
+    return webapi.spotify().then(({ data }) => {
+      const spotifyApi = new SpotifyWebApi()
+      spotifyApi.setAccessToken(data.webapi_token)
+      return spotifyApi.getFeaturedPlaylists({
+        country: data.webapi_country,
+        limit: 50
+      })
     })
   },
 
   set(vm, response) {
-    if (response) {
-      store.commit(types.SPOTIFY_FEATURED_PLAYLISTS, response.playlists.items)
-    }
+    vm.featured_playlists = response.playlists.items
   }
 }
 
@@ -58,9 +53,9 @@ export default {
     })
   },
 
-  computed: {
-    featured_playlists() {
-      return this.$store.state.spotify_featured_playlists
+  data() {
+    return {
+      featured_playlists: []
     }
   }
 }

web-src/src/pages/PageMusicSpotifyNewReleases.vue

@@ -13,31 +13,26 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListAlbumsSpotify from '@/components/ListAlbumsSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import TabsMusic from '@/components/TabsMusic.vue'
-import store from '@/store'
+import webapi from '@/webapi'
 
 const dataObject = {
   load(to) {
-    if (store.state.spotify_new_releases.length > 0) {
-      return Promise.resolve()
-    }
-
-    const spotifyApi = new SpotifyWebApi()
-    spotifyApi.setAccessToken(store.state.spotify.webapi_token)
-    return spotifyApi.getNewReleases({
-      country: store.state.spotify.webapi_country,
-      limit: 50
+    return webapi.spotify().then(({ data }) => {
+      const spotifyApi = new SpotifyWebApi()
+      spotifyApi.setAccessToken(data.webapi_token)
+      return spotifyApi.getNewReleases({
+        country: data.webapi_country,
+        limit: 50
+      })
     })
   },
 
   set(vm, response) {
-    if (response) {
-      store.commit(types.SPOTIFY_NEW_RELEASES, response.albums.items)
-    }
+    vm.new_releases = response.albums.items
   }
 }
 
@@ -55,9 +50,9 @@ export default {
     })
   },
 
-  computed: {
-    new_releases() {
-      return this.$store.state.spotify_new_releases
+  data() {
+    return {
+      new_releases: []
     }
   }
 }

web-src/src/store/index.js

@@ -63,8 +63,6 @@ export default createStore({
       show_player_menu: false,
       show_update_dialog: false,
       spotify: {},
-      spotify_featured_playlists: [],
-      spotify_new_releases: [],
       update_dialog_scan_kind: ''
     }
   },
@@ -132,12 +130,6 @@ export default createStore({
     [types.UPDATE_PAIRING](state, pairing) {
       state.pairing = pairing
     },
-    [types.SPOTIFY_NEW_RELEASES](state, newReleases) {
-      state.spotify_new_releases = newReleases
-    },
-    [types.SPOTIFY_FEATURED_PLAYLISTS](state, featuredPlaylists) {
-      state.spotify_featured_playlists = featuredPlaylists
-    },
     [types.SEARCH_SOURCE](state, searchSource) {
       state.search_source = searchSource
     },

web-src/src/store/mutation_types.js

@@ -9,12 +9,7 @@ export const UPDATE_LYRICS = 'UPDATE_LYRICS'
 export const UPDATE_LASTFM = 'UPDATE_LASTFM'
 export const UPDATE_SPOTIFY = 'UPDATE_SPOTIFY'
 export const UPDATE_PAIRING = 'UPDATE_PAIRING'
-
-export const SPOTIFY_NEW_RELEASES = 'SPOTIFY_NEW_RELEASES'
-export const SPOTIFY_FEATURED_PLAYLISTS = 'SPOTIFY_FEATURED_PLAYLISTS'
-
 export const SEARCH_SOURCE = 'SEARCH_SOURCE'
-
 export const COMPOSER_TRACKS_SORT = 'COMPOSER_TRACKS_SORT'
 export const GENRE_TRACKS_SORT = 'GENRE_TRACKS_SORT'
 export const HIDE_SINGLES = 'HIDE_SINGLES'