feat: simple but efficient cache of home data

src/components/TheContent.vue

@@ -5,11 +5,21 @@
 
 			<keep-alive>
 				<router-view
+					v-if="!$route.meta.notKeepAlive"
 					v-show="!loading"
 					:key="$route.fullPath"
 					:perform-scrolled-search="performScrolledSearch"
+					exclude=""
 				></router-view>
 			</keep-alive>
+
+			<router-view
+				v-if="$route.meta.notKeepAlive"
+				v-show="!loading"
+				:key="$route.fullPath"
+				:perform-scrolled-search="performScrolledSearch"
+				exclude=""
+			></router-view>
 		</div>
 	</section>
 </template>

src/components/TheDownloadTab.vue

@@ -127,7 +127,6 @@ export default {
 			}
 		},
 		initQueue(data) {
-			console.log('this.initQueue')
 			const {
 				queue: initQueue,
 				queueComplete: initQueueComplete,
@@ -159,7 +158,6 @@ export default {
 			}
 		},
 		addToQueue(queueItem, current = false) {
-			console.log('this.addToQueue')
 			if (Array.isArray(queueItem)) {
 				if (queueItem.length > 1) {
 					queueItem.forEach((item, i) => {
@@ -210,7 +208,6 @@ export default {
 		updateQueue(update) {
 			// downloaded and failed default to false?
 			const { uuid, downloaded, failed, progress, conversion, error, data, errid } = update
-			console.log('this.updateQueue', !!this.queueList[uuid])
 
 			if (uuid && this.queue.indexOf(uuid) > -1) {
 				if (downloaded) {
@@ -232,7 +229,6 @@ export default {
 			}
 		},
 		removeFromQueue(uuid) {
-			console.log('this.removeFromQueue')
 			let index = this.queue.indexOf(uuid)
 
 			if (index > -1) {
@@ -241,7 +237,6 @@ export default {
 			}
 		},
 		removeAllDownloads(currentItem) {
-			console.log('this.removeFromQueue', currentItem)
 			this.queueComplete = []
 
 			if (!currentItem) {
@@ -257,7 +252,6 @@ export default {
 			}
 		},
 		removedFinishedDownloads() {
-			console.log('this.removedFinishedDownloads')
 			this.queueComplete.forEach(uuid => {
 				this.$delete(this.queueList, uuid)
 			})
@@ -279,11 +273,9 @@ export default {
 			localStorage.setItem('downloadTabOpen', !isHidden)
 		},
 		cleanQueue() {
-			console.log('this.cleanQueue')
 			socket.emit('removeFinishedDownloads')
 		},
 		cancelQueue() {
-			console.log('this.cancelQueue')
 			socket.emit('cancelAllDownloads')
 		},
 		openDownloadsFolder() {
@@ -307,12 +299,9 @@ export default {
 			document.addEventListener('mousemove', this.handleDrag)
 		},
 		startDownload(uuid) {
-			console.log('this.startDownload')
 			this.$set(this.queueList[uuid], 'status', 'downloading')
 		},
 		finishDownload(uuid) {
-			console.log('this.finishDownload')
-
 			let isInQueue = this.queue.indexOf(uuid) > -1
 
 			if (!isInQueue) return
@@ -332,7 +321,6 @@ export default {
 			}
 		},
 		startConversion(uuid) {
-			console.log('this.startConversion')
 			this.$set(this.queueList[uuid], 'status', 'converting')
 			this.$set(this.queueList[uuid], 'conversion', 0)
 		},

src/components/TheFavoritesTab.vue

@@ -299,13 +299,16 @@ export default {
 		},
 		reloadTabs() {
 			this.$refs.reloadButton.classList.add('spin')
+
 			socket.emit('update_userFavorites')
-			if (localStorage.getItem('spotifyUser'))
+
+			if (localStorage.getItem('spotifyUser')) {
 				socket.emit('update_userSpotifyPlaylists', localStorage.getItem('spotifyUser'))
+			}
 		},
 		updated_userFavorites(data) {
 			const { tracks, albums, artists, playlists } = data
-			this.tracks = tracks
+			this.tracks = typeof tracks === 'string' ? JSON.parse(tracks) : tracks
 			this.albums = albums
 			this.artists = artists
 			this.playlists = playlists

src/components/TheHomeTab.vue

@@ -82,16 +82,26 @@ import { socket } from '@/utils/socket'
 import { showView } from '@js/tabs'
 import Downloads from '@/utils/downloads'
 
+import { getHomeData } from '@/data/home'
+
 export default {
-	name: 'the-home-tab',
 	data() {
 		return {
 			playlists: [],
 			albums: []
 		}
 	},
+	async created() {
+		// if (localStorage.getItem('arl')) {
+		// 	this.$refs.notLogged.classList.add('hide')
+		// }
+
+		const homeData = await getHomeData()
+
+		this.initHome(homeData)
+	},
 	computed: {
-		...mapGetters(['getHomeData', 'isLoggedIn']),
+		...mapGetters([/* 'getHomeData', */ 'isLoggedIn']),
 		needToWait() {
 			return this.getHomeData.albums.data.length === 0 && this.getHomeData.playlists.data.length === 0
 		}
@@ -128,13 +138,6 @@ export default {
 				this.initHome(this.getHomeData)
 			}
 		}
-	},
-	mounted() {
-		// if (localStorage.getItem('arl')) {
-		// 	this.$refs.notLogged.classList.add('hide')
-		// }
-
-		this.checkIfWaitData(this.getHomeData)
 	}
 }
 </script>

src/components/TheSettingsTab.vue

@@ -772,10 +772,12 @@ export default {
 			}
 		},
 		revertSettings() {
-			this.settings = { ...this.lastSettings }
+			// this.settings = { ...this.lastSettings }
+			this.settings = JSON.parse(JSON.stringify(this.lastSettings))
 		},
 		revertCredentials() {
-			this.spotifyCredentials = { ...this.lastCredentials }
+			// this.spotifyCredentials = { ...this.lastCredentials }
+			this.spotifyCredentials = JSON.parse(JSON.stringify(this.lastCredentials))
 			this.spotifyUser = (' ' + this.lastUser).slice(1)
 		},
 		copyARLtoClipboard() {
@@ -798,8 +800,12 @@ export default {
 			localStorage.setItem('previewVolume', this.previewVolume.preview_max_volume)
 		},
 		saveSettings() {
-			this.lastSettings = { ...this.settings }
+			// this.lastSettings = { ...this.settings }
-			this.lastCredentials = { ...this.spotifyFeatures }
+			// 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
@@ -821,11 +827,15 @@ export default {
 		// 	this.defaultSettings = { ...this.getDefaultSettings }
 		// },
 		loadSettings() {
-			this.lastSettings = { ...this.getSettings }
+			// this.lastSettings = { ...this.getSettings }
-			this.lastCredentials = { ...this.getCredentials }
+			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 = { ...this.getSettings }
-			this.spotifyFeatures = { ...this.getCredentials }
+			this.settings = JSON.parse(JSON.stringify(this.getSettings))
+			// this.spotifyFeatures = { ...this.getCredentials }
+			this.spotifyFeatures = JSON.parse(JSON.stringify(this.getCredentials))
 		},
 		login() {
 			let newArl = this.$refs.loginInput.value.trim()
@@ -868,7 +878,8 @@ export default {
 			toast(this.$t('settings.toasts.update'), 'settings')
 		},
 		resetSettings() {
-			this.settings = { ...this.getDefaultSettings }
+			// this.settings = { ...this.getDefaultSettings }
+			this.settings = JSON.parse(JSON.stringify(this.getDefaultSettings))
 		}
 	}
 }

src/data/charts.js

@@ -0,0 +1,21 @@
+import { socket } from '@/utils/socket'
+
+let chartsData = {}
+let cached = false
+
+export function getChartsData() {
+	if (cached) {
+		return chartsData
+	} else {
+		socket.emit('get_charts_data')
+
+		return new Promise((resolve, reject) => {
+			socket.on('init_charts', data => {
+				chartsData = data
+				cached = true
+
+				resolve(data)
+			})
+		})
+	}
+}

src/data/home.js

@@ -0,0 +1,21 @@
+import { socket } from '@/utils/socket'
+
+let homeData = {}
+let cached = false
+
+export function getHomeData() {
+	if (cached) {
+		return homeData
+	} else {
+		socket.emit('get_home_data')
+
+		return new Promise((resolve, reject) => {
+			socket.on('init_home', data => {
+				homeData = data
+				cached = true
+
+				resolve(data)
+			})
+		})
+	}
+}

src/router.js

@@ -21,7 +21,10 @@ const routes = [
 	{
 		path: '/',
 		name: 'Home',
-		component: TheHomeTab
+		component: TheHomeTab,
+		meta: {
+			notKeepAlive: true
+		}
 	},
 	{
 		path: '/tracklist/:type/:id',
@@ -101,7 +104,7 @@ router.beforeEach((to, from, next) => {
 			}
 			break
 		case 'Home':
-			socket.emit('get_home_data')
+			// socket.emit('get_home_data')
 			break
 		case 'Charts':
 			socket.emit('get_charts_data')

src/store/index.js

@@ -1,7 +1,7 @@
 import Vuex from 'vuex'
 import Vue from 'vue'
 
-import home from '@/store/modules/home'
+// import home from '@/store/modules/home'
 import settings from '@/store/modules/settings'
 import defaultSettings from '@/store/modules/defaultSettings'
 import spotifyCredentials from '@/store/modules/spotifyCredentials'
@@ -17,7 +17,7 @@ Vue.use(Vuex)
 // Create store
 export default new Vuex.Store({
 	modules: {
-		home,
+		// home,
 		settings,
 		defaultSettings,
 		spotifyCredentials,

src/store/modules/favorites.js

@@ -22,12 +22,10 @@ const actions = {
 			commit('SET_FAVORITES_ARTISTS', { index, data: artist })
 		})
 
-		// dispatch('setFavoritesTracks', payload.tracks)
+		dispatch('setFavoritesTracks', payload.tracks)
 	},
 	setFavoritesTracks({ commit }, payload) {
-		payload.forEach((track, index) => {
+		commit('SET_FAVORITES_TRACKS', payload)
-			commit('SET_FAVORITES_TRACKS', { index, data: track })
-		})
 	}
 }
 
@@ -50,7 +48,12 @@ const mutations = {
 		Vue.set(state.playlists, payload.index, payload.data)
 	},
 	SET_FAVORITES_TRACKS: (state, payload) => {
-		Vue.set(state.tracks, payload.index, payload.data)
+		if (typeof payload !== 'string') {
+			console.error('[deemix] Not setting the favorites tracks because they are not in string format')
+			return
+		}
+
+		state.tracks = payload
 	}
 }
 

src/utils/socket.js

@@ -11,6 +11,7 @@ socket.on('init_charts', charts => {
 })
 
 socket.on('init_favorites', favorites => {
+	favorites.tracks = JSON.stringify(favorites.tracks)
 	store.dispatch('setFavorites', favorites)
 })
 
@@ -20,9 +21,10 @@ socket.on('init_settings', (settings, credentials, defaults) => {
 	store.dispatch('setCredentials', credentials)
 })
 
-socket.on('init_home', data => {
+// socket.on('init_home', data => {
-	store.dispatch('cacheHomeData', data)
+// 	console.log('init home', Date.now())
-})
+// 	store.dispatch('cacheHomeData', data)
+// })
 
 socket.on('init_update', data => {
 	store.dispatch('setAboutInfo', data)