feat: global storage of the settings

src/components/TheHomeTab.vue

@@ -104,10 +104,10 @@ export default {
 			this.playlists = playlistData
 			this.albums = albumData
 		},
+		// ! Define this functionality as a Vue Mixin
 		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') {

src/store/index.js

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

src/store/modules/home.js

@@ -1,5 +1,6 @@
+import Vue from 'vue'
+
 const state = {
-	homeData: {
 	albums: {
 		data: [],
 		total: 0
@@ -21,13 +22,13 @@ const state = {
 		total: 0
 	}
 }
-}
 
 let homeDataCached = false
 
 const actions = {
 	cacheHomeData({ commit }, payload) {
-		if (!homeDataCached) {
+		if (homeDataCached) return
+
 		commit('SET_HOME_ALBUMS', payload.albums)
 		commit('SET_HOME_ARTISTS', payload.artists)
 		commit('SET_HOME_PLAYLISTS', payload.playlists)
@@ -37,40 +38,41 @@ const actions = {
 		homeDataCached = true
 	}
 }
-}
 
 const getters = {
-	getHomeData: store => store.homeData,
+	getHomeData: state => state,
-	getHomeAlbums: store => store.homeData.albums,
+	getHomeAlbums: state => state.albums,
-	getHomeArtists: store => store.homeData.artists,
+	getHomeArtists: state => state.artists,
-	getHomePlaylists: store => store.homeData.playlists,
+	getHomePlaylists: state => state.playlists,
-	getHomePodcasts: store => store.homeData.podcasts,
+	getHomePodcasts: state => state.podcasts,
-	getHomeTracks: store => store.homeData.tracks
+	getHomeTracks: state => state.tracks
 }
 
 const mutations = {
-	SET_HOME_DATA: (state, payload) => {
-		state.homeData = payload
-	},
 	SET_HOME_ALBUMS: (state, payload) => {
-		state.homeData.albums.data = payload.data
+		Vue.set(state.albums, 'data', payload.data)
-		state.homeData.albums.total = payload.total
+		// state.albums.data = payload.data
+		state.albums.total = payload.total
 	},
 	SET_HOME_ARTISTS: (state, payload) => {
-		state.homeData.artists.data = payload.data
+		Vue.set(state.artists, 'data', payload.data)
-		state.homeData.artists.total = payload.total
+		// state.artists.data = payload.data
+		state.artists.total = payload.total
 	},
 	SET_HOME_PLAYLISTS: (state, payload) => {
-		state.homeData.playlists.data = payload.data
+		Vue.set(state.playlists, 'data', payload.data)
-		state.homeData.playlists.total = payload.total
+		// state.playlists.data = payload.data
+		state.playlists.total = payload.total
 	},
 	SET_HOME_PODCASTS: (state, payload) => {
-		state.homeData.podcasts.data = payload.data
+		Vue.set(state.podcasts, 'data', payload.data)
-		state.homeData.podcasts.total = payload.total
+		// state.podcasts.data = payload.data
+		state.podcasts.total = payload.total
 	},
 	SET_HOME_TRACKS: (state, payload) => {
-		state.homeData.tracks.data = payload.data
+		Vue.set(state.tracks, 'data', payload.data)
-		state.homeData.tracks.total = payload.total
+		// state.tracks.data = payload.data
+		state.tracks.total = payload.total
 	}
 }
 

src/store/modules/settings.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+
+const state = {}
+
+const actions = {
+	setSettings({ commit }, payload) {
+		for (const settingName in payload) {
+			if (!payload.hasOwnProperty(settingName)) return
+
+			const settingValue = payload[settingName]
+			commit('SET_UNKNOWN_SETTING', { settingName, settingValue })
+		}
+	}
+}
+
+const getters = {
+	getSettings: state => state
+}
+
+const mutations = {
+	SET_UNKNOWN_SETTING(state, payload) {
+		Vue.set(state, payload.settingName, payload.settingValue)
+	}
+}
+
+export default {
+	state,
+	actions,
+	getters,
+	mutations
+}

src/utils/socket.js

@@ -10,6 +10,11 @@ socket.on('connect', () => {
 // 	console.log(data)
 // })
 
+socket.on('init_settings', (settings, credentials, defaults) => {
+	console.log(settings, credentials, defaults)
+	store.dispatch('setSettings', settings)
+})
+
 socket.on('init_home', data => {
 	store.dispatch('cacheHomeData', data)
 })