feat: added vuex store to cache data; feat: cached home data in the frontend

package-lock.json

@@ -2825,6 +2825,11 @@
 			"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
 			"dev": true
 		},
+		"vuex": {
+			"version": "3.5.1",
+			"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
+			"integrity": "sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw=="
+		},
 		"which": {
 			"version": "1.3.1",
 			"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

package.json

@@ -23,7 +23,8 @@
 		"toastify-js": "^1.8.0",
 		"vue": "^2.6.11",
 		"vue-i18n": "^8.18.2",
-		"vue-router": "^3.3.4"
+		"vue-router": "^3.3.4",
+		"vuex": "^3.5.1"
 	},
 	"devDependencies": {
 		"@rollup/plugin-alias": "^3.1.0",

src/app.js

@@ -7,7 +7,8 @@ window.vol = {
 
 import App from '@components/App.vue'
 import i18n from '@/plugins/i18n'
-import router from '@/plugins/router'
+import router from '@/router'
+import store from '@/store'
 
 import $ from 'jquery'
 import { socket } from '@/utils/socket'
@@ -23,6 +24,7 @@ function startApp() {
 
 function mountApp() {
 	new Vue({
+		store,
 		router,
 		i18n,
 		render: h => h(App)

src/components/TheHomeTab.vue

@@ -65,8 +65,9 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { socket } from '@/utils/socket'
-import { showView } from '@js/tabs.js'
+import { showView } from '@js/tabs'
 import Downloads from '@/utils/downloads'
 
 export default {
@@ -77,6 +78,12 @@ export default {
 			albums: []
 		}
 	},
+	computed: {
+		...mapGetters(['getHomeData']),
+		needToWait() {
+			return this.getHomeData.albums.data.length === 0 && this.getHomeData.playlists.data.length === 0
+		}
+	},
 	methods: {
 		artistView: showView.bind(null, 'artist'),
 		albumView: showView.bind(null, 'album'),
@@ -88,6 +95,7 @@ export default {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		initHome(data) {
+			console.log('init home')
 			const {
 				playlists: { data: playlistData },
 				albums: { data: albumData }
@@ -95,6 +103,22 @@ export default {
 
 			this.playlists = playlistData
 			this.albums = albumData
+		},
+		checkIfWaitData(data) {
+			if (this.needToWait) {
+				// This case verifies only at the first load, beacuse the data retrieving is not completed yet
+				// ! Define this functionality as a Vue Mixin
+				let unsub = this.$store.subscribeAction({
+					after: (action, state) => {
+						if (action.type === 'cacheHomeData') {
+							this.initHome(this.getHomeData)
+							unsub()
+						}
+					}
+				})
+			} else {
+				this.initHome(this.getHomeData)
+			}
 		}
 	},
 	mounted() {
@@ -106,7 +130,8 @@ export default {
 		}
 
 		// ! Need to init home everytime, atm this is called only on connect
-		socket.on('init_home', this.initHome)
+		this.checkIfWaitData(this.getHomeData)
+		// socket.on('init_home', this.initHome)
 	},
 	beforeDestroy() {
 		console.log('home bef dest')

src/js/tabs.js

@@ -1,6 +1,6 @@
 import { socket } from '@/utils/socket'
 import EventBus from '@/utils/EventBus'
-import router from '@/plugins/router'
+import router from '@/router'
 
 /* ===== Globals ====== */
 window.search_selected = ''

src/store/index.js

@@ -0,0 +1,17 @@
+import Vuex from 'vuex'
+import Vue from 'vue'
+
+import home from '@/store/modules/home'
+
+// Load Vuex
+Vue.use(Vuex)
+
+console.log(process.env.NODE_ENV)
+
+// Create store
+export default new Vuex.Store({
+	modules: {
+		home
+	},
+	strict: process.env.NODE_ENV !== 'production'
+})

src/store/modules/home.js

@@ -0,0 +1,82 @@
+const state = {
+	homeData: {
+		albums: {
+			data: [],
+			total: 0
+		},
+		artists: {
+			data: [],
+			total: 0
+		},
+		playlists: {
+			data: [],
+			total: 0
+		},
+		podcasts: {
+			data: [],
+			total: 0
+		},
+		tracks: {
+			data: [],
+			total: 0
+		}
+	}
+}
+
+let homeDataCached = false
+
+const actions = {
+	cacheHomeData({ commit }, payload) {
+		if (!homeDataCached) {
+			commit('SET_HOME_ALBUMS', payload.albums)
+			commit('SET_HOME_ARTISTS', payload.artists)
+			commit('SET_HOME_PLAYLISTS', payload.playlists)
+			commit('SET_HOME_PODCASTS', payload.podcasts)
+			commit('SET_HOME_TRACKS', payload.tracks)
+
+			homeDataCached = true
+		}
+	}
+}
+
+const getters = {
+	getHomeData: store => store.homeData,
+	getHomeAlbums: store => store.homeData.albums,
+	getHomeArtists: store => store.homeData.artists,
+	getHomePlaylists: store => store.homeData.playlists,
+	getHomePodcasts: store => store.homeData.podcasts,
+	getHomeTracks: store => store.homeData.tracks
+}
+
+const mutations = {
+	SET_HOME_DATA: (state, payload) => {
+		state.homeData = payload
+	},
+	SET_HOME_ALBUMS: (state, payload) => {
+		state.homeData.albums.data = payload.data
+		state.homeData.albums.total = payload.total
+	},
+	SET_HOME_ARTISTS: (state, payload) => {
+		state.homeData.artists.data = payload.data
+		state.homeData.artists.total = payload.total
+	},
+	SET_HOME_PLAYLISTS: (state, payload) => {
+		state.homeData.playlists.data = payload.data
+		state.homeData.playlists.total = payload.total
+	},
+	SET_HOME_PODCASTS: (state, payload) => {
+		state.homeData.podcasts.data = payload.data
+		state.homeData.podcasts.total = payload.total
+	},
+	SET_HOME_TRACKS: (state, payload) => {
+		state.homeData.tracks.data = payload.data
+		state.homeData.tracks.total = payload.total
+	}
+}
+
+export default {
+	state,
+	actions,
+	getters,
+	mutations
+}

src/utils/socket.js

@@ -1,3 +1,5 @@
+import store from '@/store'
+
 export const socket = io.connect(window.location.href)
 
 socket.on('connect', () => {
@@ -8,8 +10,6 @@ socket.on('connect', () => {
 // 	console.log(data)
 // })
 
-// socket.on('init_home', data => {
-// 	console.log(data)
-// 	localStorage.setItem('test_DELETE', JSON.stringify(data))
-// 	console.log(JSON.parse(localStorage.getItem('test_DELETE')))
-// })
+socket.on('init_home', data => {
+	store.dispatch('cacheHomeData', data)
+})