refactor: migrated createStation modal to new modal system

frontend/src/App.vue

@@ -196,13 +196,16 @@ export default {
 
 				if (news) {
 					if (newUser) {
-						this.openModal({ modal: "whatIsNew", data: { news }});
+						this.openModal({ modal: "whatIsNew", data: { news } });
 					} else if (localStorage.getItem("whatIsNew")) {
 						if (
 							parseInt(localStorage.getItem("whatIsNew")) <
 							news.createdAt
 						) {
-							this.openModal({ modal: "whatIsNew", data: { news }});
+							this.openModal({
+								modal: "whatIsNew",
+								data: { news }
+							});
 							localStorage.setItem("whatIsNew", news.createdAt);
 						}
 					} else {
@@ -210,7 +213,10 @@ export default {
 							parseInt(localStorage.getItem("firstVisited")) <
 							news.createdAt
 						)
-							this.openModal({ modal: "whatIsNew", data: { news }});
+							this.openModal({
+								modal: "whatIsNew",
+								data: { news }
+							});
 						localStorage.setItem("whatIsNew", news.createdAt);
 					}
 				}

frontend/src/components/ModalManager.vue

@@ -21,6 +21,7 @@ export default {
 			login: "Login.vue",
 			register: "Register.vue",
 			whatIsNew: "WhatIsNew.vue",
+			createStation: "CreateStation.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/modals/CreateStation.vue

@@ -45,11 +45,13 @@
 import { mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
+import { mapModalState } from "@/vuex_helpers";
+
 import validation from "@/validation";
 
 export default {
 	props: {
-		official: { type: Boolean, default: false }
+		modalUuid: { type: String, default: "" }
 	},
 	data() {
 		return {
@@ -60,9 +62,22 @@ export default {
 			}
 		};
 	},
-	computed: mapGetters({
-		socket: "websockets/getSocket"
-	}),
+	computed: {
+		...mapModalState("modals/createStation/MODAL_UUID", {
+			official: state => state.official
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	beforeUnmount() {
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule([
+			"modals",
+			"createStation",
+			this.modalUuid
+		]);
+	},
 	methods: {
 		submitModal() {
 			this.newStation.name = this.newStation.name.toLowerCase();

frontend/src/pages/Admin/Stations.vue

@@ -5,7 +5,12 @@
 			<div class="button-row">
 				<button
 					class="button is-primary"
-					@click="openModal('createStation')"
+					@click="
+						openModal({
+							modal: 'createStation',
+							data: { official: true }
+						})
+					"
 				>
 					Create Station
 				</button>
@@ -141,7 +146,6 @@
 		<edit-playlist v-if="modals.editPlaylist" />
 		<edit-song v-if="modals.editSong" song-type="songs" sector="admin" />
 		<report v-if="modals.report" />
-		<create-station v-if="modals.createStation" :official="true" />
 	</div>
 </template>
 
@@ -171,9 +175,6 @@ export default {
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong")
 		),
-		CreateStation: defineAsyncComponent(() =>
-			import("@/components/modals/CreateStation.vue")
-		),
 		AdvancedTable,
 		RunJobDropdown
 	},

frontend/src/pages/Home.vue

@@ -487,7 +487,6 @@
 			</div>
 			<main-footer />
 		</div>
-		<create-station v-if="modals.createStation" />
 		<manage-station
 			v-if="modals.manageStation"
 			:station-id="editingStationId"
@@ -517,9 +516,6 @@ export default {
 	components: {
 		ModalManager,
 		SongThumbnail,
-		CreateStation: defineAsyncComponent(() =>
-			import("@/components/modals/CreateStation.vue")
-		),
 		ManageStation: defineAsyncComponent(() =>
 			import("@/components/modals/ManageStation/index.vue")
 		),

frontend/src/store/index.js

@@ -43,6 +43,7 @@ export default createStore({
 				manageStation: manageStationModal,
 				editUser: emptyModule,
 				whatIsNew: emptyModule,
+				createStation: emptyModule,
 				viewPunishment: viewPunishmentModal,
 				report: reportModal,
 				viewReport: viewReportModal,

frontend/src/store/modules/modalVisibility.js

@@ -3,11 +3,11 @@ import ws from "@/ws";
 
 import editUser from "./modals/editUser";
 import whatIsNew from "./modals/whatIsNew";
+import createStation from "./modals/createStation";
 
 const state = {
 	modals: {
 		manageStation: false,
-		createStation: false,
 		importPlaylist: false,
 		editPlaylist: false,
 		createPlaylist: false,
@@ -33,7 +33,8 @@ const state = {
 
 const modalModules = {
 	editUser,
-	whatIsNew
+	whatIsNew,
+	createStation
 };
 
 const migratedModules = {
@@ -41,7 +42,7 @@ const migratedModules = {
 	manageStation: false,
 	login: true,
 	register: true,
-	createStation: false,
+	createStation: true,
 	importPlaylist: false,
 	editPlaylist: false,
 	createPlaylist: false,

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

@@ -0,0 +1,16 @@
+/* eslint no-param-reassign: 0 */
+
+export default {
+	namespaced: true,
+	state: {
+		official: false
+	},
+	actions: {
+		init: ({ commit }, data) => commit("init", data)
+	},
+	mutations: {
+		init(state, data) {
+			if (data) state.official = data.official;
+		}
+	}
+};