refactor: station remove/add events now implemented in VueX. Note: more detailed & cleaner refactor of Station logic coming soon

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/components/Admin/Stations.vue

@@ -194,7 +194,6 @@ export default {
 	components: { EditStation, UserIdToUsername },
 	data() {
 		return {
-			stations: [],
 			newStation: {
 				genres: [],
 				blacklistedGenres: []
@@ -202,6 +201,9 @@ export default {
 		};
 	},
 	computed: {
+		...mapState("admin/station", {
+			stations: state => state.stations
+		}),
 		...mapState("modals", {
 			modals: state => state.modals.station
 		})
@@ -334,19 +336,22 @@ export default {
 			this.socket.emit("apis.joinAdminRoom", "stations", () => {});
 		},
 		...mapActions("modals", ["openModal"]),
-		...mapActions("admin/stations", ["editStation"])
+		...mapActions("admin/stations", [
+			"editStation",
+			"stationRemoved",
+			"stationAdded"
+		])
 	},
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
 			if (this.socket.connected) this.init();
+
 			this.socket.on("event:admin.station.added", station => {
-				this.stations.push(station);
+				this.stationAdded(station);
 			});
 			this.socket.on("event:admin.station.removed", stationId => {
-				this.stations = this.stations.filter(station => {
-					return station._id !== stationId;
-				});
+				this.stationRemoved(stationId);
 			});
 			io.onConnect(() => {
 				this.init();

frontend/components/Modals/AddSongToQueue.vue

@@ -104,13 +104,14 @@ export default {
 			querySearch: "",
 			queryResults: [],
 			playlists: [],
-			privatePlaylistQueueSelected: null,
 			importQuery: ""
 		};
 	},
 	computed: mapState({
 		loggedIn: state => state.user.auth.loggedIn,
-		station: state => state.station.station
+		station: state => state.station.station,
+		privatePlaylistQueueSelected: state =>
+			state.station.privatePlaylistQueueSelected
 	}),
 	methods: {
 		isPlaylistSelected(playlistId) {
@@ -118,15 +119,13 @@ export default {
 		},
 		selectPlaylist(playlistId) {
 			if (this.station.type === "community") {
-				this.privatePlaylistQueueSelected = playlistId;
-				this.$parent.privatePlaylistQueueSelected = playlistId;
+				this.updatePrivatePlaylistQueueSelected(playlistId);
 				this.$parent.addFirstPrivatePlaylistSongToQueue();
 			}
 		},
 		unSelectPlaylist() {
 			if (this.station.type === "community") {
-				this.privatePlaylistQueueSelected = null;
-				this.$parent.privatePlaylistQueueSelected = null;
+				this.updatePrivatePlaylistQueueSelected(null);
 			}
 		},
 		addSongToQueue(songId) {
@@ -204,6 +203,7 @@ export default {
 				}
 			});
 		},
+		...mapActions("station", ["updatePrivatePlaylistQueueSelected"]),
 		...mapActions("user/playlists", ["editPlaylist"])
 	},
 	mounted() {
@@ -212,7 +212,6 @@ export default {
 			this.socket.emit("playlists.indexForUser", res => {
 				if (res.status === "success") this.playlists = res.data;
 			});
-			this.privatePlaylistQueueSelected = this.$parent.privatePlaylistQueueSelected;
 		});
 	},
 	components: { Modal }

frontend/components/Modals/EditStation.vue

@@ -301,16 +301,23 @@ import io from "../../io";
 import validation from "../../validation";
 
 export default {
-	computed: mapState({
-		editing(state) {
-			return this.$props.store.split("/").reduce((a, v) => a[v], state)
-				.editing;
-		},
-		station(state) {
-			return this.$props.store.split("/").reduce((a, v) => a[v], state)
-				.station;
-		}
-	}),
+	computed: {
+		...mapState("admin/station", {
+			stations: state => state.stations
+		}),
+		...mapState({
+			editing(state) {
+				return this.$props.store
+					.split("/")
+					.reduce((a, v) => a[v], state).editing;
+			},
+			station(state) {
+				return this.$props.store
+					.split("/")
+					.reduce((a, v) => a[v], state).station;
+			}
+		})
+	},
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
@@ -422,9 +429,9 @@ export default {
 					if (res.status === "success") {
 						if (this.station) this.station.name = name;
 						else {
-							this.$parent.stations.forEach((station, index) => {
+							this.stations.forEach((station, index) => {
 								if (station._id === this.editing._id) {
-									this.$parent.stations[index].name = name;
+									this.stations[index].name = name;
 									return name;
 								}
 
@@ -461,9 +468,9 @@ export default {
 						if (this.station)
 							this.station.displayName = displayName;
 						else {
-							this.$parent.stations.forEach((station, index) => {
+							this.stations.forEach((station, index) => {
 								if (station._id === this.editing._id) {
-									this.$parent.stations[
+									this.stations[
 										index
 									].displayName = displayName;
 									return displayName;
@@ -506,9 +513,9 @@ export default {
 						if (this.station)
 							this.station.description = description;
 						else {
-							this.$parent.stations.forEach((station, index) => {
+							this.stations.forEach((station, index) => {
 								if (station._id === this.editing._id) {
-									this.$parent.stations[
+									this.stations[
 										index
 									].description = description;
 									return description;
@@ -543,9 +550,9 @@ export default {
 						if (this.station)
 							this.station.privacy = this.editing.privacy;
 						else {
-							this.$parent.stations.forEach((station, index) => {
+							this.stations.forEach((station, index) => {
 								if (station._id === this.editing._id) {
-									this.$parent.stations[
+									this.stations[
 										index
 									].privacy = this.editing.privacy;
 									return this.editing.privacy;
@@ -575,9 +582,9 @@ export default {
 							JSON.stringify(this.editing.genres)
 						);
 						if (this.station) this.station.genres = genres;
-						this.$parent.stations.forEach((station, index) => {
+						this.stations.forEach((station, index) => {
 							if (station._id === this.editing._id) {
-								this.$parent.stations[index].genres = genres;
+								this.stations[index].genres = genres;
 								return genres;
 							}
 
@@ -606,9 +613,9 @@ export default {
 						);
 						if (this.station)
 							this.station.blacklistedGenres = blacklistedGenres;
-						this.$parent.stations.forEach((station, index) => {
+						this.stations.forEach((station, index) => {
 							if (station._id === this.editing._id) {
-								this.$parent.stations[
+								this.stations[
 									index
 								].blacklistedGenres = blacklistedGenres;
 								return blacklistedGenres;
@@ -642,9 +649,9 @@ export default {
 							this.station.partyMode = this.editing.partyMode;
 						// if (this.station)
 						// 	this.station.partyMode = this.editing.partyMode;
-						// this.$parent.stations.forEach((station, index) => {
+						// this.stations.forEach((station, index) => {
 						// 	if (station._id === this.editing._id) {
-						// 		this.$parent.stations[
+						// 		this.stations[
 						// 			index
 						// 		].partyMode = this.editing.partyMode;
 						// 		return this.editing.partyMode;

frontend/components/Station/Station.vue

@@ -452,7 +452,6 @@ export default {
 			disliked: false,
 			timeBeforePause: 0,
 			skipVotes: 0,
-			privatePlaylistQueueSelected: null,
 			automaticallyRequestedSongId: null,
 			systemDifference: 0,
 			attemptsToPlayVideo: 0,

frontend/store/modules/admin.js

@@ -101,17 +101,31 @@ const modules = {
 	stations: {
 		namespaced: true,
 		state: {
+			stations: [],
 			station: {},
 			editing: {}
 		},
 		getters: {},
 		actions: {
-			editStation: ({ commit }, station) => commit("editStation", station)
+			editStation: ({ commit }, station) =>
+				commit("editStation", station),
+			stationRemoved: ({ commit }, stationId) =>
+				commit("stationRemoved", stationId),
+			stationAdded: ({ commit }, station) =>
+				commit("stationAdded", station)
 		},
 		mutations: {
 			editStation(state, station) {
 				state.station = station;
 				state.editing = JSON.parse(JSON.stringify(station));
+			},
+			stationAdded(state, station) {
+				state.stations.push(station);
+			},
+			stationRemoved(state, stationId) {
+				state.stations = state.stations.filter(station => {
+					return station._id !== stationId;
+				});
 			}
 		}
 	},

frontend/store/modules/station.js

@@ -2,6 +2,7 @@
 
 const state = {
 	station: {},
+	privatePlaylistQueueSelected: null,
 	editing: {},
 	userCount: 0,
 	users: [],
@@ -41,6 +42,9 @@ const actions = {
 	},
 	updateNoSong: ({ commit }, noSong) => {
 		commit("updateNoSong", noSong);
+	},
+	updatePrivatePlaylistQueueSelected: ({ commit }, status) => {
+		commit("updatePrivatePlaylistQueueSelected", status);
 	}
 };
 
@@ -78,6 +82,9 @@ const mutations = {
 	},
 	updateNoSong(state, noSong) {
 		state.noSong = noSong;
+	},
+	updatePrivatePlaylistQueueSelected(state, status) {
+		state.privatePlaylistQueueSelected = status;
 	}
 };