Fixed issue with genres not loading in editstation modal

frontend/src/components/modals/EditStation.vue

@@ -474,7 +474,7 @@
 			<save-button ref="saveButton" @clicked="saveChanges()" />
 
 			<button
-				v-if="station.type === 'community'"
+				v-if="station && station.type === 'community'"
 				class="button is-danger"
 				@click="deleteStation()"
 			>
@@ -592,15 +592,15 @@ export default {
 					this.stationId,
 					res => {
 						if (res.status === "success") {
-							this.station.genres = res.playlists.map(
-								playlist => {
+							this.setGenres(
+								res.playlists.map(playlist => {
 									if (playlist) {
 										if (playlist.type === "genre")
 											return playlist.createdFor;
 										return `Playlist: ${playlist.name}`;
 									}
 									return "Unknown/Error";
-								}
+								})
 							);
 							this.originalStation.genres = JSON.parse(
 								JSON.stringify(this.station.genres)
@@ -614,15 +614,15 @@ export default {
 					this.stationId,
 					res => {
 						if (res.status === "success") {
-							this.station.blacklistedGenres = res.playlists.map(
-								playlist => {
+							this.setBlacklistedGenres(
+								res.playlists.map(playlist => {
 									if (playlist) {
 										if (playlist.type === "genre")
 											return playlist.createdFor;
 										return `Playlist: ${playlist.name}`;
 									}
 									return "Unknown/Error";
-								}
+								})
 							);
 							this.originalStation.blacklistedGenres = JSON.parse(
 								JSON.stringify(this.station.blacklistedGenres)
@@ -649,6 +649,9 @@ export default {
 			}
 		});
 	},
+	beforeDestroy() {
+		this.clearStation();
+	},
 	methods: {
 		saveChanges() {
 			const nameChanged = this.originalStation.name !== this.station.name;
@@ -1104,7 +1107,12 @@ export default {
 			else if (type === "blacklist-genres")
 				this.station.blacklistedGenres.splice(index, 1);
 		},
-		...mapActions("modals/editStation", ["editStation"]),
+		...mapActions("modals/editStation", [
+			"editStation",
+			"setGenres",
+			"setBlacklistedGenres",
+			"clearStation"
+		]),
 		...mapActions("modalVisibility", ["closeModal"])
 	}
 };

frontend/src/store/modules/modals/editStation.js

@@ -1,5 +1,7 @@
 /* eslint no-param-reassign: 0 */
 
+import Vue from "vue";
+
 export default {
 	namespaced: true,
 	state: {
@@ -8,12 +10,34 @@ export default {
 	},
 	getters: {},
 	actions: {
-		editStation: ({ commit }, station) => commit("editStation", station)
+		editStation: ({ commit }, station) => commit("editStation", station),
+		setGenres: ({ commit }, genres) => commit("setGenres", genres),
+		setBlacklistedGenres: ({ commit }, blacklistedGenres) =>
+			commit("setBlacklistedGenres", blacklistedGenres),
+		clearStation: ({ commit }) => commit("clearStation")
 	},
 	mutations: {
 		editStation(state, station) {
 			state.originalStation = JSON.parse(JSON.stringify(station));
 			state.station = JSON.parse(JSON.stringify(station));
+		},
+		setGenres(state, genres) {
+			Vue.set(
+				state.station,
+				"genres",
+				JSON.parse(JSON.stringify(genres))
+			);
+		},
+		setBlacklistedGenres(state, blacklistedGenres) {
+			Vue.set(
+				state.station,
+				"blacklistedGenres",
+				JSON.parse(JSON.stringify(blacklistedGenres))
+			);
+		},
+		clearStation(state) {
+			state.originalStation = null;
+			state.station = null;
 		}
 	}
 };