perf: applied home cache technique to favorites and to settings

2020-09-21 21:54:00 +02:00
parent 53dd45b740
commit 55646c7179
13 changed files with 127 additions and 226 deletions
--- a/src/components/TheChartsTab.vue
+++ b/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
 		},
--- a/src/components/TheFavoritesTab.vue
+++ b/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
 		}
 	}
 }
--- a/src/components/TheSettingsTab.vue
+++ b/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))
 		}
 	}
 }