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.lastCredentials = { ...this.spotifyFeatures }
+			// 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
@@ -821,11 +827,15 @@ export default {
 		// 	this.defaultSettings = { ...this.getDefaultSettings }
 		// },
 		loadSettings() {
-			this.lastSettings = { ...this.getSettings }
-			this.lastCredentials = { ...this.getCredentials }
+			// 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.spotifyFeatures = { ...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))
 		},
 		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))
 		}
 	}
 }