fix: favorites behaviour when editing spotify credentials

src/app.js

@@ -25,6 +25,7 @@ import { fetchData, postToServer } from '@/utils/api'
 import { toast } from '@/utils/toasts'
 import { isValidURL } from '@/utils/utils'
 import { sendAddToQueue } from '@/utils/downloads'
+import { SPOTIFY_STATUS } from '@/constants'
 
 /* ===== App initialization ===== */
 async function startApp() {
@@ -36,9 +37,14 @@ async function startApp() {
 	}).$mount('#app')
 
 	const connectResponse = await (await fetch('connect')).json()
-	if (!connectResponse.deezerAvailable) document.getElementById('deezer_not_available').classList.remove('hide')
+	const spotifyStatus = connectResponse.spotifyEnabled ? SPOTIFY_STATUS.ENABLED : SPOTIFY_STATUS.DISABLED
+
+	if (!connectResponse.deezerAvailable) {
+		document.getElementById('deezer_not_available').classList.remove('hide')
+	}
 
 	store.dispatch('setAppInfo', connectResponse.update).catch(console.error)
+	store.dispatch('setSpotifyStatus', spotifyStatus).catch(console.error)
 
 	let arl = localStorage.getItem('arl')
 	const accessToken = localStorage.getItem('accessToken')

src/components/pages/Favorites.vue

@@ -198,7 +198,7 @@ export default defineComponent({
 			refreshFavorites
 		} = useFavorites()
 
-		refreshFavorites({ isInitial: true })
+		refreshFavorites({ isInitial: true }).catch(console.error)
 
 		watch(isRefreshingFavorites, (newVal, oldVal) => {
 			// If oldVal is true and newOne is false, it means that a refreshing has just terminated

src/components/pages/Settings.vue

@@ -723,7 +723,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, mapMutations } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import { debounce } from 'lodash-es'
 
 import TemplateVariablesList from '@components/settings/TemplateVariablesList.vue'
@@ -858,10 +858,9 @@ export default {
 			setSlimDownloads: 'setSlimDownloads',
 			setSlimSidebar: 'setSlimSidebar',
 			dispatchLogout: 'logout',
-			dispatchLogin: 'login'
-		}),
-		...mapMutations({
-			setSpotifyUserId: 'SET_SPOTIFY_USER_ID'
+			dispatchLogin: 'login',
+			setSpotifyUserId: 'setSpotifyUserId',
+			refreshSpotifyStatus: 'refreshSpotifyStatus'
 		}),
 		onTemplateVariableClick(templateName) {
 			copyToClipboard(templateName)
@@ -911,6 +910,8 @@ export default {
 				spotifySettings: this.lastCredentials,
 				spotifyUser: changed ? this.lastUser : false
 			})
+
+			// this.refreshSpotifyStatus()
 		},
 		selectDownloadFolder() {
 			window.api.send('selectDownloadFolder', this.settings.downloadLocation)
@@ -1018,6 +1019,8 @@ export default {
 			this.loadCredentials(newCredentials)
 
 			toast(this.$t('settings.toasts.update'), 'settings')
+
+			this.refreshSpotifyStatus()
 		},
 		resetToDefault() {
 			const wantsToReset = confirm(this.$t('settings.resetMessage'))

src/constants.js

@@ -0,0 +1,4 @@
+export const SPOTIFY_STATUS = {
+	DISABLED: 'DISABLED',
+	ENABLED: 'ENABLED'
+}

src/store/modules/login.js

@@ -1,3 +1,6 @@
+import { SPOTIFY_STATUS } from '@/constants'
+import { fetchData } from '@/utils/api'
+
 const getDefaultState = () => ({
 	arl: localStorage.getItem('arl') || '',
 	accessToken: localStorage.getItem('accessToken') || '',
@@ -12,6 +15,10 @@ const getDefaultState = () => ({
 		name: null,
 		picture: null
 	},
+	// This does not always represent the truth because the status update on the server is async
+	// and at the moment there's no way to notice the status change. Therefore a fetch of the status
+	// is needed everytime we need to use it
+	spotifyStatus: SPOTIFY_STATUS.DISABLED,
 	clientMode: false
 })
 
@@ -72,6 +79,25 @@ const actions = {
 	},
 	setClientMode({ commit }, payload) {
 		commit('SET_CLIENT_MODE', payload)
+	},
+	setSpotifyStatus({ commit }, newSpotifyStatus) {
+		commit('SET_SPOTIFY_STATUS', newSpotifyStatus)
+	},
+	setSpotifyUserId({ commit }, newSpotifyUserId) {
+		commit('SET_SPOTIFY_USER_ID', newSpotifyUserId)
+	},
+	/**
+	 * Returning a Promise so that who calls this action is sure that
+	 * the fetching is complete after the statement
+	 *
+	 * @example
+	 * await store.dispatch('refreshSpotifyStatus')
+	 * // From here the status is refreshed
+	 */
+	refreshSpotifyStatus({ commit }) {
+		return fetchData('spotifyStatus').then(response => {
+			commit('SET_SPOTIFY_STATUS', response.spotifyEnabled ? SPOTIFY_STATUS.ENABLED : SPOTIFY_STATUS.DISABLED)
+		})
 	}
 }
 
@@ -83,7 +109,7 @@ const getters = {
 	getClientMode: state => state.clientMode,
 
 	isLoggedIn: state => !!state.arl,
-	isLoggedWithSpotify: state => !!state.spotifyUser.id
+	isLoggedWithSpotify: state => !!state.spotifyUser.id && state.spotifyStatus === SPOTIFY_STATUS.ENABLED
 }
 
 const mutations = {
@@ -108,8 +134,10 @@ const mutations = {
 		Object.assign(state, getDefaultState())
 		state.clientMode = clientMode
 	},
+	SET_SPOTIFY_STATUS(state, newSpotifyStatus) {
+		state.spotifyStatus = newSpotifyStatus
+	},
 	SET_SPOTIFY_USER_ID(state, newSpotifyUserId) {
-		console.log('setting spotify user', { newSpotifyUserId })
 		state.spotifyUser = {
 			...state.spotifyUser,
 			id: newSpotifyUserId

src/use/favorites.js

@@ -1,13 +1,15 @@
-import { ref } from '@vue/composition-api'
+import { ref, computed, watchEffect } from '@vue/composition-api'
 
 import store from '@/store'
 import { fetchData } from '@/utils/api'
+import { SPOTIFY_STATUS } from '@/constants'
 
 const favoriteArtists = ref([])
 const favoriteAlbums = ref([])
 const favoriteSpotifyPlaylists = ref([])
 const favoritePlaylists = ref([])
 const favoriteTracks = ref([])
+const isLoggedWithSpotify = computed(() => store.getters.isLoggedWithSpotify)
 
 const isRefreshingFavorites = ref(false)
 
@@ -22,26 +24,30 @@ const setAllFavorites = data => {
 	favoriteTracks.value = tracks
 }
 
-const refreshFavorites = ({ isInitial = false }) => {
+const setSpotifyPlaylists = response => {
+	if (response.error === 'spotifyNotEnabled') {
+		favoriteSpotifyPlaylists.value = []
+
+		store.dispatch('setSpotifyStatus', SPOTIFY_STATUS.DISABLED).catch(console.error)
+		return
+	}
+
+	favoriteSpotifyPlaylists.value = response
+}
+
+const refreshFavorites = async ({ isInitial = false }) => {
 	if (!isInitial) {
 		isRefreshingFavorites.value = true
 	}
 
+	await store.dispatch('refreshSpotifyStatus')
+
 	fetchData('getUserFavorites').then(setAllFavorites).catch(console.error)
 
-	if (store.getters.isLoggedWithSpotify) {
-		fetchData('getUserSpotifyPlaylists', {
-			spotifyUser: store.getters.getSpotifyUser.id
-		})
-			.then(spotifyPlaylists => {
-				if (spotifyPlaylists.error === 'spotifyNotEnabled') {
-					favoriteSpotifyPlaylists.value = []
-					return
-				}
+	if (isLoggedWithSpotify.value) {
+		const spotifyUser = store.getters.getSpotifyUser.id
 
-				favoriteSpotifyPlaylists.value = spotifyPlaylists
-			})
-			.catch(console.error)
+		fetchData('getUserSpotifyPlaylists', { spotifyUser }).then(setSpotifyPlaylists).catch(console.error)
 	} else {
 		favoriteSpotifyPlaylists.value = []
 	}