feat: improved routing removing display none/block on route change; feat: improved favorites data rendering; feat: added type checking for socket.io

src/components/ArtistTab.vue

@@ -184,7 +184,7 @@ export default {
 		}
 	},
 	mounted() {
-		this.$refs.root.style.display = 'block'
+		// this.$refs.root.style.display = 'block'
 		console.log('artist mounted')
 
 		socket.on('show_artist', this.showArtist)
@@ -194,7 +194,7 @@ export default {
 	},
 	beforeDestroy() {
 		console.log('artist bef dest')
-		this.$refs.root.style.display = 'none'
+		// this.$refs.root.style.display = 'none'
 	}
 }
 </script>

src/components/TheAboutTab.vue

@@ -201,11 +201,11 @@ export default {
 	}),
 	mounted() {
 		console.log('about mounted')
-		this.$refs.root.style.display = 'block'
+		// this.$refs.root.style.display = 'block'
 	},
 	beforeDestroy() {
 		console.log('about bef dest')
-		this.$refs.root.style.display = 'none'
+		// this.$refs.root.style.display = 'none'
 	}
 }
 </script>

src/components/TheChartsTab.vue

@@ -105,6 +105,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { socket } from '@/utils/socket'
 import { showView } from '@js/tabs.js'
 import Downloads from '@/utils/downloads'
@@ -122,9 +123,41 @@ export default {
 			chart: []
 		}
 	},
+	computed: {
+		...mapGetters(['getCharts']),
+		needToWait() {
+			return this.getCharts.length === 0
+		}
+	},
+	mounted() {
+		console.log('charts mounted')
+		// this.$refs.root.style.display = 'block'
+		this.waitCharts()
+		// socket.on('init_charts', this.initCharts)
+		socket.on('setChartTracks', this.setTracklist)
+	},
+	beforeDestroy() {
+		console.log('charts bef dest')
+		// this.$refs.root.style.display = 'none'
+	},
 	methods: {
 		artistView: showView.bind(null, 'artist'),
 		albumView: showView.bind(null, 'album'),
+		waitCharts() {
+			if (this.needToWait) {
+				// Checking if the saving of the settings is completed
+				let unsub = this.$store.subscribeAction({
+					after: (action, state) => {
+						if (action.type === 'cacheCharts') {
+							this.initCharts()
+							unsub()
+						}
+					}
+				})
+			} else {
+				this.initCharts()
+			}
+		},
 		playPausePreview(e) {
 			EventBus.$emit('trackPreview:playPausePreview', e)
 		},
@@ -164,9 +197,9 @@ export default {
 			this.country = ''
 			this.id = 0
 		},
-		initCharts(data) {
+		initCharts() {
 			console.log('init charts')
-			this.countries = data
+			this.countries = this.getCharts
 			this.country = localStorage.getItem('chart') || ''
 
 			if (!this.country) return
@@ -184,16 +217,6 @@ export default {
 				localStorage.setItem('chart', this.country)
 			}
 		}
-	},
-	mounted() {
-		console.log('charts mounted')
-		this.$refs.root.style.display = 'block'
-		socket.on('init_charts', this.initCharts)
-		socket.on('setChartTracks', this.setTracklist)
-	},
-	beforeDestroy() {
-		console.log('charts bef dest')
-		this.$refs.root.style.display = 'none'
 	}
 }
 </script>

src/components/TheErrorsTab.vue

@@ -43,13 +43,13 @@ export default {
 	},
 	mounted() {
 		console.log('errors mounted')
-		this.$refs.root.style.display = 'block'
+		// this.$refs.root.style.display = 'block'
 		EventBus.$on('showTabErrors', this.showErrors)
 		this.$root.$on('showTabErrors', this.showErrors)
 	},
 	beforeDestroy() {
 		console.log('errors bef dest')
-		this.$refs.root.style.display = 'none'
+		// this.$refs.root.style.display = 'none'
 	}
 }
 </script>

src/components/TheFavoritesTab.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="favorites_tab" class="main_tabcontent" @click="handleFavoritesTabClick" ref="root">
+	<div id="favorites_tab" class="main_tabcontent">
 		<h2 class="page_heading">
 			{{ $t('favorites.title') }}
 			<div
@@ -13,21 +13,18 @@
 			</div>
 		</h2>
 		<div class="section-tabs">
-			<div class="section-tabs__tab favorites_tablinks" id="favorites_playlist_tab">
-				{{ $tc('globals.listTabs.playlist', 2) }}
-			</div>
-			<div class="section-tabs__tab favorites_tablinks" id="favorites_album_tab">
-				{{ $tc('globals.listTabs.album', 2) }}
-			</div>
-			<div class="section-tabs__tab favorites_tablinks" id="favorites_artist_tab">
-				{{ $tc('globals.listTabs.artist', 2) }}
-			</div>
-			<div class="section-tabs__tab favorites_tablinks" id="favorites_track_tab">
-				{{ $tc('globals.listTabs.track', 2) }}
+			<div
+				class="section-tabs__tab favorites_tablinks"
+				:class="{ active: activeTab === tab }"
+				@click="activeTab = tab"
+				v-for="tab in tabs"
+				:key="tab"
+			>
+				{{ $tc(`globals.listTabs.${tab}`, 2) }}
 			</div>
 		</div>
 
-		<div id="playlist_favorites" class="favorites_tabcontent">
+		<div class="favorites_tabcontent" :class="{ 'favorites_tabcontent--active': activeTab === 'playlist' }">
 			<div v-if="playlists.length == 0">
 				<h1>{{ $t('favorites.noPlaylists') }}</h1>
 			</div>
@@ -75,7 +72,8 @@
 				</div>
 			</div>
 		</div>
-		<div id="album_favorites" class="favorites_tabcontent">
+
+		<div class="favorites_tabcontent" :class="{ 'favorites_tabcontent--active': activeTab === 'album' }">
 			<div v-if="albums.length == 0">
 				<h1>{{ $t('favorites.noAlbums') }}</h1>
 			</div>
@@ -98,7 +96,8 @@
 				</div>
 			</div>
 		</div>
-		<div id="artist_favorites" class="favorites_tabcontent">
+
+		<div class="favorites_tabcontent" :class="{ 'favorites_tabcontent--active': activeTab === 'artist' }">
 			<div v-if="artists.length == 0">
 				<h1>{{ $t('favorites.noArtists') }}</h1>
 			</div>
@@ -120,7 +119,8 @@
 				</div>
 			</div>
 		</div>
-		<div id="track_favorites" class="favorites_tabcontent">
+
+		<div class="favorites_tabcontent" :class="{ 'favorites_tabcontent--active': activeTab === 'track' }">
 			<div v-if="tracks.length == 0">
 				<h1>{{ $t('favorites.noTracks') }}</h1>
 			</div>
@@ -189,29 +189,76 @@
 	</div>
 </template>
 
+<style lang="scss">
+.favorites_tabcontent {
+	display: none;
+
+	&--active {
+		display: block;
+	}
+}
+</style>
+
 <script>
+import { mapGetters } from 'vuex'
 import { socket } from '@/utils/socket'
-import { showView, changeTab } from '@js/tabs.js'
+import { showView } from '@js/tabs'
 import Downloads from '@/utils/downloads'
-import Utils from '@/utils/utils'
+import { convertDuration } from '@/utils/utils'
 import { toast } from '@/utils/toasts'
 
 export default {
-	name: 'the-favorites-tab',
 	data() {
 		return {
 			tracks: [],
 			albums: [],
 			artists: [],
 			playlists: [],
-			spotifyPlaylists: []
+			spotifyPlaylists: [],
+			activeTab: 'playlist',
+			tabs: ['playlist', 'album', 'artist', 'track']
 		}
 	},
+	computed: {
+		...mapGetters(['getFavorites']),
+		needToWait() {
+			return Object.keys(this.getFavorites).length === 0
+		}
+	},
+	mounted() {
+		console.log('favorites 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)
+	},
 	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)
 		},
@@ -221,36 +268,7 @@ export default {
 		previewMouseLeave(e) {
 			EventBus.$emit('trackPreview:previewMouseLeave', e)
 		},
-		convertDuration: Utils.convertDuration,
-		handleFavoritesTabClick(event) {
-			const {
-				target,
-				target: { id }
-			} = event
-			let selectedTab = null
-
-			switch (id) {
-				case 'favorites_playlist_tab':
-					selectedTab = 'playlist_favorites'
-					break
-				case 'favorites_album_tab':
-					selectedTab = 'album_favorites'
-					break
-				case 'favorites_artist_tab':
-					selectedTab = 'artist_favorites'
-					break
-				case 'favorites_track_tab':
-					selectedTab = 'track_favorites'
-					break
-
-				default:
-					break
-			}
-
-			if (!selectedTab) return
-
-			changeTab(target, 'favorites', selectedTab)
-		},
+		convertDuration,
 		addToQueue(e) {
 			e.stopPropagation()
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
@@ -294,28 +312,9 @@ export default {
 				{ once: true }
 			)
 		},
-		initFavorites(data) {
-			this.updated_userFavorites(data)
-			document.getElementById('favorites_playlist_tab').click()
+		initFavorites() {
+			this.updated_userFavorites(this.getFavorites)
 		}
-	},
-	mounted() {
-		console.log('favorites mounted')
-		this.$refs.root.style.display = 'block'
-		socket.on('init_favorites', this.initFavorites)
-		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)
-	},
-	beforeDestroy() {
-		console.log('favorites bef dest')
-		this.$refs.root.style.display = 'none'
 	}
 }
 </script>
-
-<style>
-</style>

src/components/TheHomeTab.vue

@@ -123,7 +123,7 @@ export default {
 	},
 	mounted() {
 		console.log('home mounted')
-		this.$refs.root.style.display = 'block'
+		// this.$refs.root.style.display = 'block'
 
 		if (localStorage.getItem('arl')) {
 			this.$refs.notLogged.classList.add('hide')
@@ -135,7 +135,7 @@ export default {
 	},
 	beforeDestroy() {
 		console.log('home bef dest')
-		this.$refs.root.style.display = 'none'
+		// this.$refs.root.style.display = 'none'
 	}
 }
 </script>

src/components/TheLinkAnalyzerTab.vue

@@ -192,7 +192,7 @@ export default {
 	},
 	mounted() {
 		console.log('link analyzer mounted')
-		this.$refs.root.style.display = 'block'
+		// this.$refs.root.style.display = 'block'
 		EventBus.$on('linkAnalyzerTab:reset', this.reset)
 
 		socket.on('analyze_track', this.showTrack)
@@ -201,7 +201,7 @@ export default {
 	},
 	beforeDestroy() {
 		console.log('link analyzer bef dest')
-		this.$refs.root.style.display = 'none'
+		// this.$refs.root.style.display = 'none'
 	}
 }
 </script>

src/components/TheSettingsTab.vue

@@ -641,11 +641,11 @@ export default {
 	}),
 	beforeDestroy() {
 		console.log('settings bef dest')
-		this.$refs.root.style.display = 'none'
+		// this.$refs.root.style.display = 'none'
 	},
 	mounted() {
 		console.log('settings mounted')
-		this.$refs.root.style.display = 'block'
+		// this.$refs.root.style.display = 'block'
 
 		this.locales = this.$i18n.availableLocales
 

src/components/TheSidebar.vue

@@ -1,30 +1,72 @@
 <template>
 	<aside id="sidebar" role="navigation" @click="handleSidebarClick">
-		<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home">
+		<span
+			id="main_home_tablink"
+			class="main_tablinks"
+			:class="{ active: activeTablink === 'home' }"
+			role="link"
+			aria-label="home"
+		>
 			<i class="material-icons side_icon">home</i>
 			<span class="main_tablinks_text">{{ $t('sidebar.home') }}</span>
 		</span>
-		<span id="main_search_tablink" class="main_tablinks" role="link" aria-label="search">
+		<span
+			id="main_search_tablink"
+			class="main_tablinks"
+			:class="{ active: activeTablink === 'search' }"
+			role="link"
+			aria-label="search"
+		>
 			<i class="material-icons side_icon">search</i>
 			<span class="main_tablinks_text">{{ $t('sidebar.search') }}</span>
 		</span>
-		<span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="charts">
+		<span
+			id="main_charts_tablink"
+			class="main_tablinks"
+			:class="{ active: activeTablink === 'charts' }"
+			role="link"
+			aria-label="charts"
+		>
 			<i class="material-icons side_icon">show_chart</i>
 			<span class="main_tablinks_text">{{ $t('sidebar.charts') }}</span>
 		</span>
-		<span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="favorites">
+		<span
+			id="main_favorites_tablink"
+			class="main_tablinks"
+			:class="{ active: activeTablink === 'favorites' }"
+			role="link"
+			aria-label="favorites"
+		>
 			<i class="material-icons side_icon">star</i>
 			<span class="main_tablinks_text">{{ $t('sidebar.favorites') }}</span>
 		</span>
-		<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="link analyzer">
+		<span
+			id="main_analyzer_tablink"
+			class="main_tablinks"
+			:class="{ active: activeTablink === 'analyzer' }"
+			role="link"
+			aria-label="link analyzer"
+		>
 			<i class="material-icons side_icon">link</i>
 			<span class="main_tablinks_text">{{ $t('sidebar.linkAnalyzer') }}</span>
 		</span>
-		<span id="main_settings_tablink" class="main_tablinks" role="link" aria-label="settings">
+		<span
+			id="main_settings_tablink"
+			class="main_tablinks"
+			:class="{ active: activeTablink === 'settings' }"
+			role="link"
+			aria-label="settings"
+		>
 			<i class="material-icons side_icon">settings</i>
 			<span class="main_tablinks_text">{{ $t('sidebar.settings') }}</span>
 		</span>
-		<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="info">
+		<span
+			id="main_about_tablink"
+			class="main_tablinks"
+			:class="{ active: activeTablink === 'about' }"
+			role="link"
+			aria-label="info"
+		>
 			<i class="material-icons side_icon">info</i>
 			<span class="main_tablinks_text">{{ $t('sidebar.about') }}</span>
 		</span>
@@ -84,7 +126,8 @@ export default {
 	data: () => ({
 		appOnline: null,
 		activeTheme: 'light',
-		themes: ['purple', 'dark', 'light']
+		themes: ['purple', 'dark', 'light'],
+		activeTablink: 'home'
 	}),
 	mounted() {
 		/* === Online status handling === */
@@ -139,6 +182,8 @@ export default {
 			let targetID = sidebarEl.id
 			let selectedTab = null
 
+			this.activeTablink = targetID.match(/main_(\w+)_tablink/)[1]
+
 			switch (targetID) {
 				case 'main_search_tablink':
 					selectedTab = 'search_tab'
@@ -162,6 +207,9 @@ export default {
 					selectedTab = 'favorites_tab'
 					this.$router.push({
 						name: 'Favorites'
+						// query: {
+						// 	tab: 'playlist'
+						// }
 					})
 					break
 				case 'main_analyzer_tablink':

src/components/TracklistTab.vue

@@ -296,7 +296,7 @@ export default {
 	},
 	mounted() {
 		console.log('tracklist mounted')
-		this.$refs.root.style.display = 'block'
+		// this.$refs.root.style.display = 'block'
 		EventBus.$on('tracklistTab:selectRow', this.selectRow)
 
 		socket.on('show_album', this.showAlbum)
@@ -305,7 +305,7 @@ export default {
 	},
 	beforeDestroy() {
 		console.log('tracklist bef dest')
-		this.$refs.root.style.display = 'none'
+		// this.$refs.root.style.display = 'none'
 	}
 }
 </script>