perf: applied home cache technique to favorites and to settings

src/components/TheChartsTab.vue

@@ -35,7 +35,7 @@
 			</div>
 		</div>
 		<div v-else id="charts_table">
-			<button @click="changeCountry">{{ $t('charts.changeCountry') }}</button>
+			<button @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
 			<button @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
 				{{ $t('charts.download') }}
 			</button>
@@ -127,7 +127,6 @@ export default {
 	async created() {
 		socket.on('setChartTracks', this.setTracklist)
 		this.$on('hook:destroyed', () => {
-			console.log('destroyed')
 			socket.off('setChartTracks')
 		})
 
@@ -170,10 +169,9 @@ export default {
 			socket.emit('getChartTracks', this.id)
 		},
 		setTracklist(data) {
-			console.log('set tracklist')
 			this.chart = data
 		},
-		changeCountry() {
+		onChangeCountry() {
 			this.country = ''
 			this.id = 0
 		},

src/components/TheFavoritesTab.vue

@@ -210,13 +210,15 @@
 </style>
 
 <script>
-import { mapGetters } from 'vuex'
-import { socket } from '@/utils/socket'
 import { showView } from '@js/tabs'
-import Downloads from '@/utils/downloads'
+
+import { socket } from '@/utils/socket'
+import { sendAddToQueue } from '@/utils/downloads'
 import { convertDuration } from '@/utils/utils'
 import { toast } from '@/utils/toasts'
 
+import { getFavoritesData } from '@/data/favorites'
+
 export default {
 	data() {
 		return {
@@ -229,45 +231,33 @@ export default {
 			tabs: ['playlist', 'album', 'artist', 'track']
 		}
 	},
-	computed: {
-		...mapGetters(['getFavorites']),
-		needToWait() {
-			return Object.keys(this.getFavorites).length === 0
-		}
+	async created() {
+		const favoritesData = await getFavoritesData()
+
+		this.setFavorites(favoritesData)
 	},
 	mounted() {
-		// ! Need to implement memorization of the last tab clicked
-		// ! Use router query
-
-		this.waitFavorites()
-
 		socket.on('updated_userFavorites', this.updated_userFavorites)
 		socket.on('updated_userSpotifyPlaylists', this.updated_userSpotifyPlaylists)
 		socket.on('updated_userPlaylists', this.updated_userPlaylists)
 		socket.on('updated_userAlbums', this.updated_userAlbums)
 		socket.on('updated_userArtist', this.updated_userArtist)
 		socket.on('updated_userTracks', this.updated_userTracks)
+
+		this.$on('hook:destroyed', () => {
+			socket.off('updated_userFavorites')
+			socket.off('updated_userSpotifyPlaylists')
+			socket.off('updated_userPlaylists')
+			socket.off('updated_userAlbums')
+			socket.off('updated_userArtist')
+			socket.off('updated_userTracks')
+		})
 	},
 	methods: {
 		artistView: showView.bind(null, 'artist'),
 		albumView: showView.bind(null, 'album'),
 		playlistView: showView.bind(null, 'playlist'),
 		spotifyPlaylistView: showView.bind(null, 'spotifyplaylist'),
-		waitFavorites() {
-			if (this.needToWait) {
-				// Checking if the saving of the settings is completed
-				let unsub = this.$store.subscribeAction({
-					after: (action, state) => {
-						if (action.type === 'setFavorites') {
-							this.initFavorites()
-							unsub()
-						}
-					}
-				})
-			} else {
-				this.initFavorites()
-			}
-		},
 		playPausePreview(e) {
 			EventBus.$emit('trackPreview:playPausePreview', e)
 		},
@@ -279,13 +269,13 @@ export default {
 		},
 		convertDuration,
 		addToQueue(e) {
-			e.stopPropagation()
-			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
+			sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		updated_userSpotifyPlaylists(data) {
 			this.spotifyPlaylists = data
 		},
 		updated_userPlaylists(data) {
+			console.log(data)
 			this.playlists = data
 		},
 		updated_userAlbums(data) {
@@ -307,11 +297,7 @@ export default {
 			}
 		},
 		updated_userFavorites(data) {
-			const { tracks, albums, artists, playlists } = data
-			this.tracks = typeof tracks === 'string' ? JSON.parse(tracks) : tracks
-			this.albums = albums
-			this.artists = artists
-			this.playlists = playlists
+			this.setFavorites(data)
 
 			// Removing animation class only when the animation has completed an iteration
 			// Prevents animation ugly stutter
@@ -324,8 +310,13 @@ export default {
 				{ once: true }
 			)
 		},
-		initFavorites() {
-			this.updated_userFavorites(this.getFavorites)
+		setFavorites(data) {
+			const { tracks, albums, artists, playlists } = data
+
+			this.tracks = tracks
+			this.albums = albums
+			this.artists = artists
+			this.playlists = playlists
 		}
 	}
 }

src/components/TheSettingsTab.vue

@@ -658,6 +658,8 @@ import { socket } from '@/utils/socket'
 import EventBus from '@/utils/EventBus'
 import flags from '@/utils/flags'
 
+import { getSettingsData } from '@/data/settings'
+
 export default {
 	data() {
 		return {
@@ -670,7 +672,7 @@ export default {
 			lastSettings: {},
 			spotifyFeatures: {},
 			lastCredentials: {},
-			// defaultSettings: {},
+			defaultSettings: {},
 			lastUser: '',
 			spotifyUser: '',
 			slimDownloads: false,
@@ -682,9 +684,6 @@ export default {
 	},
 	computed: {
 		...mapGetters({
-			getSettings: 'getSettings',
-			getCredentials: 'getCredentials',
-			getDefaultSettings: 'getDefaultSettings',
 			arl: 'getARL',
 			user: 'getUser',
 			isLoggedIn: 'isLoggedIn'
@@ -707,11 +706,16 @@ export default {
 			return `https://e-cdns-images.dzcdn.net/images/user/${this.user.picture}/125x125-000000-80-0-0.jpg`
 		}
 	},
-	mounted() {
+	async mounted() {
 		this.locales = this.$i18n.availableLocales
 
-		this.revertSettings()
-		this.revertCredentials()
+		const { settingsData, defaultSettingsData, spotifyCredentials } = await getSettingsData()
+
+		this.defaultSettings = defaultSettingsData
+		this.initSettings(settingsData, spotifyCredentials)
+
+		// this.revertSettings()
+		// this.revertCredentials()
 
 		let storedLocale = localStorage.getItem('locale')
 
@@ -737,6 +741,7 @@ export default {
 		this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
 
 		let volume = parseInt(localStorage.getItem('previewVolume'))
+
 		if (isNaN(volume)) {
 			volume = 80
 			localStorage.setItem('previewVolume', volume)
@@ -744,39 +749,28 @@ export default {
 
 		window.vol.preview_max_volume = volume
 
-		this.waitSettings()
 		socket.on('updateSettings', this.updateSettings)
 		socket.on('accountChanged', this.accountChanged)
 		socket.on('familyAccounts', this.initAccounts)
 		socket.on('downloadFolderSelected', this.downloadFolderSelected)
 		socket.on('applogin_arl', this.setArl)
-	},
 
+		this.$on('hook:destroyed', () => {
+			socket.off('updateSettings')
+			socket.off('accountChanged')
+			socket.off('familyAccounts')
+			socket.off('downloadFolderSelected')
+			socket.off('applogin_arl')
+		})
+	},
 	methods: {
 		...mapActions({
 			dispatchARL: 'setARL'
 		}),
-		waitSettings() {
-			if (this.needToWait) {
-				// Checking if the saving of the settings is completed
-				let unsub = this.$store.subscribeAction({
-					after: (action, state) => {
-						if (action.type === 'setSettings') {
-							this.initSettings()
-							unsub()
-						}
-					}
-				})
-			} else {
-				this.initSettings()
-			}
-		},
 		revertSettings() {
-			// this.settings = { ...this.lastSettings }
 			this.settings = JSON.parse(JSON.stringify(this.lastSettings))
 		},
 		revertCredentials() {
-			// this.spotifyCredentials = { ...this.lastCredentials }
 			this.spotifyCredentials = JSON.parse(JSON.stringify(this.lastCredentials))
 			this.spotifyUser = (' ' + this.lastUser).slice(1)
 		},
@@ -800,13 +794,11 @@ export default {
 			localStorage.setItem('previewVolume', this.previewVolume.preview_max_volume)
 		},
 		saveSettings() {
-			// this.lastSettings = { ...this.settings }
-			// this.lastCredentials = { ...this.spotifyFeatures }
-
 			this.lastSettings = JSON.parse(JSON.stringify(this.settings))
 			this.lastCredentials = JSON.parse(JSON.stringify(this.spotifyFeatures))
 
 			let changed = false
+
 			if (this.lastUser != this.spotifyUser) {
 				// force cloning without linking
 				this.lastUser = (' ' + this.spotifyUser).slice(1)
@@ -823,19 +815,13 @@ export default {
 			console.log(folder)
 			this.$set(this.settings, 'downloadLocation', folder)
 		},
-		// loadDefaultSettings() {
-		// 	this.defaultSettings = { ...this.getDefaultSettings }
-		// },
-		loadSettings() {
-			// this.lastSettings = { ...this.getSettings }
-			this.lastSettings = JSON.parse(JSON.stringify(this.getSettings))
-			// this.lastCredentials = { ...this.getCredentials }
-			this.lastCredentials = JSON.parse(JSON.stringify(this.getCredentials))
-
-			// this.settings = { ...this.getSettings }
-			this.settings = JSON.parse(JSON.stringify(this.getSettings))
-			// this.spotifyFeatures = { ...this.getCredentials }
-			this.spotifyFeatures = JSON.parse(JSON.stringify(this.getCredentials))
+		loadSettings(data) {
+			this.lastSettings = JSON.parse(JSON.stringify(data))
+			this.settings = JSON.parse(JSON.stringify(data))
+		},
+		loadCredentials(credentials) {
+			this.lastCredentials = JSON.parse(JSON.stringify(credentials))
+			this.spotifyFeatures = JSON.parse(JSON.stringify(credentials))
 		},
 		login() {
 			let newArl = this.$refs.loginInput.value.trim()
@@ -858,6 +844,7 @@ export default {
 			this.$refs.username.innerText = user.name
 			this.$refs.userpicture.src = `https://e-cdns-images.dzcdn.net/images/user/${user.picture}/125x125-000000-80-0-0.jpg`
 			this.accountNum = accountNum
+
 			localStorage.setItem('accountNum', this.accountNum)
 		},
 		initAccounts(accounts) {
@@ -866,20 +853,21 @@ export default {
 		logout() {
 			socket.emit('logout')
 		},
-		initSettings() {
+		initSettings(settings, credentials) {
 			// this.loadDefaultSettings()
-			this.loadSettings()
+			this.loadSettings(settings)
+			this.loadCredentials(credentials)
 
 			toast(this.$t('settings.toasts.init'), 'settings')
 		},
-		updateSettings() {
-			this.loadSettings()
+		updateSettings(newSettings, newCredentials) {
+			this.loadSettings(newSettings)
+			this.loadCredentials(newCredentials)
 
 			toast(this.$t('settings.toasts.update'), 'settings')
 		},
 		resetSettings() {
-			// this.settings = { ...this.getDefaultSettings }
-			this.settings = JSON.parse(JSON.stringify(this.getDefaultSettings))
+			this.settings = JSON.parse(JSON.stringify(this.defaultSettings))
 		}
 	}
 }

src/data/charts.js

@@ -14,6 +14,7 @@ export function getChartsData() {
 				chartsData = data
 				cached = true
 
+				socket.off('init_charts')
 				resolve(data)
 			})
 		})

src/data/favorites.js

@@ -0,0 +1,22 @@
+import { socket } from '@/utils/socket'
+
+let favoritesData = {}
+let cached = false
+
+export function getFavoritesData() {
+	if (cached) {
+		return favoritesData
+	} else {
+		socket.emit('get_favorites_data')
+
+		return new Promise((resolve, reject) => {
+			socket.on('init_favorites', data => {
+				favoritesData = data
+				cached = true
+
+				socket.off('init_favorites')
+				resolve(data)
+			})
+		})
+	}
+}

src/data/home.js

@@ -14,6 +14,7 @@ export function getHomeData() {
 				homeData = data
 				cached = true
 
+				socket.off('init_home')
 				resolve(data)
 			})
 		})

src/data/settings.js

@@ -0,0 +1,27 @@
+import { socket } from '@/utils/socket'
+
+let settingsData = {}
+let defaultSettingsData = {}
+let spotifyCredentials = {}
+
+let cached = false
+
+export function getSettingsData() {
+	if (cached) {
+		return { settingsData, defaultSettingsData, spotifyCredentials }
+	} else {
+		socket.emit('get_settings_data')
+
+		return new Promise((resolve, reject) => {
+			socket.on('init_settings', (settings, credentials, defaults) => {
+				settingsData = settings
+				defaultSettingsData = defaults
+				spotifyCredentials = credentials
+				// cached = true
+
+				socket.off('init_settings')
+				resolve({ settingsData, defaultSettingsData, spotifyCredentials })
+			})
+		})
+	}
+}

src/router.js

@@ -47,7 +47,10 @@ const routes = [
 	{
 		path: '/favorites',
 		name: 'Favorites',
-		component: TheFavoritesTab
+		component: TheFavoritesTab,
+		meta: {
+			notKeepAlive: true
+		}
 	},
 	{
 		path: '/errors',
@@ -106,12 +109,6 @@ router.beforeEach((to, from, next) => {
 				id: to.params.id
 			}
 			break
-		case 'Home':
-			// socket.emit('get_home_data')
-			break
-		case 'Charts':
-			// socket.emit('get_charts_data')
-			break
 
 		default:
 			break

src/store/index.js

@@ -1,10 +1,6 @@
 import Vuex from 'vuex'
 import Vue from 'vue'
 
-import settings from '@/store/modules/settings'
-import defaultSettings from '@/store/modules/defaultSettings'
-import spotifyCredentials from '@/store/modules/spotifyCredentials'
-import favorites from '@/store/modules/favorites'
 import about from '@/store/modules/about'
 import login from '@/store/modules/login'
 import errors from '@/store/modules/errors'
@@ -15,10 +11,6 @@ Vue.use(Vuex)
 // Create store
 export default new Vuex.Store({
 	modules: {
-		settings,
-		defaultSettings,
-		spotifyCredentials,
-		favorites,
 		about,
 		login,
 		errors

src/store/modules/favorites.js

@@ -1,65 +0,0 @@
-import Vue from 'vue'
-
-const state = {
-	albums: [],
-	artists: [],
-	playlists: [],
-	tracks: [],
-	test: ''
-}
-
-const actions = {
-	setFavorites({ commit, dispatch }, payload) {
-		payload.playlists.forEach((playlist, index) => {
-			commit('SET_FAVORITES_PLAYLISTS', { index, data: playlist })
-		})
-
-		payload.albums.forEach((album, index) => {
-			commit('SET_FAVORITES_ALBUMS', { index, data: album })
-		})
-
-		payload.artists.forEach((artist, index) => {
-			commit('SET_FAVORITES_ARTISTS', { index, data: artist })
-		})
-
-		dispatch('setFavoritesTracks', payload.tracks)
-	},
-	setFavoritesTracks({ commit }, payload) {
-		commit('SET_FAVORITES_TRACKS', payload)
-	}
-}
-
-const getters = {
-	getFavorites: state => state,
-	getFavoritesAlbums: state => state.albums,
-	getFavoritesArtists: state => state.artists,
-	getFavoritesPlaylists: state => state.playlists,
-	getFavoritesTracks: state => state.tracks
-}
-
-const mutations = {
-	SET_FAVORITES_ALBUMS: (state, payload) => {
-		Vue.set(state.albums, payload.index, payload.data)
-	},
-	SET_FAVORITES_ARTISTS: (state, payload) => {
-		Vue.set(state.artists, payload.index, payload.data)
-	},
-	SET_FAVORITES_PLAYLISTS: (state, payload) => {
-		Vue.set(state.playlists, payload.index, payload.data)
-	},
-	SET_FAVORITES_TRACKS: (state, payload) => {
-		if (typeof payload !== 'string') {
-			console.error('[deemix] Not setting the favorites tracks because they are not in string format')
-			return
-		}
-
-		state.tracks = payload
-	}
-}
-
-export default {
-	state,
-	actions,
-	getters,
-	mutations
-}

src/store/modules/settings.js

@@ -1,31 +0,0 @@
-import Vue from 'vue'
-
-const state = {}
-
-const actions = {
-	setSettings({ commit }, payload) {
-		for (const settingName in payload) {
-			if (!payload.hasOwnProperty(settingName)) return
-
-			const settingValue = payload[settingName]
-			commit('SET_UNKNOWN_SETTING', { settingName, settingValue })
-		}
-	}
-}
-
-const getters = {
-	getSettings: state => state
-}
-
-const mutations = {
-	SET_UNKNOWN_SETTING(state, payload) {
-		Vue.set(state, payload.settingName, payload.settingValue)
-	}
-}
-
-export default {
-	state,
-	actions,
-	getters,
-	mutations
-}

src/utils/socket.js

@@ -6,26 +6,6 @@ socket.on('connect', () => {
 	document.getElementById('start_app_placeholder').classList.add('loading_placeholder--hidden')
 })
 
-// socket.on('init_charts', charts => {
-// 	store.dispatch('cacheCharts', charts)
-// })
-
-socket.on('init_favorites', favorites => {
-	favorites.tracks = JSON.stringify(favorites.tracks)
-	store.dispatch('setFavorites', favorites)
-})
-
-socket.on('init_settings', (settings, credentials, defaults) => {
-	store.dispatch('setSettings', settings)
-	store.dispatch('setDefaultSettings', defaults)
-	store.dispatch('setCredentials', credentials)
-})
-
-// socket.on('init_home', data => {
-// 	console.log('init home', Date.now())
-// 	store.dispatch('cacheHomeData', data)
-// })
-
 socket.on('init_update', data => {
 	store.dispatch('setAboutInfo', data)
 })