refactor: cleaned up new modal system

frontend/src/App.vue

@@ -52,7 +52,7 @@ export default {
 			userId: state => state.user.auth.userId,
 			banned: state => state.user.auth.banned,
 			modals: state => state.modalVisibility.modals,
-			currentlyActive: state => state.modalVisibility.currentlyActive,
+			activeModals: state => state.modalVisibility.activeModals,
 			nightmode: state => state.user.preferences.nightmode,
 			activityWatch: state => state.user.preferences.activityWatch
 		}),
@@ -60,7 +60,7 @@ export default {
 			socket: "websockets/getSocket"
 		}),
 		aModalIsOpen() {
-			return Object.keys(this.currentlyActive).length > 0;
+			return Object.keys(this.activeModals).length > 0;
 		}
 	},
 	watch: {
@@ -148,9 +148,13 @@ export default {
 			ctrl: false,
 			handler: () => {
 				if (
-					Object.keys(this.currentlyActive).length !== 0 &&
-					this.currentlyActive[0] !== "editSong" &&
-					this.currentlyActive[0] !== "editSongs"
+					Object.keys(this.activeModals).length !== 0 &&
+					this.modals[
+						this.activeModals[this.activeModals.length - 1]
+					] !== "editSong" &&
+					this.modals[
+						this.activeModals[this.activeModals.length - 1]
+					] !== "editSongs"
 				)
 					this.closeCurrentModal();
 			}

frontend/src/components/AdvancedTable.vue

@@ -919,10 +919,10 @@ export default {
 			);
 		},
 		aModalIsOpen() {
-			return Object.keys(this.currentlyActive).length > 0;
+			return Object.keys(this.activeModals).length > 0;
 		},
 		...mapState({
-			currentlyActive: state => state.modalVisibility.currentlyActive
+			activeModals: state => state.modalVisibility.activeModals
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"

frontend/src/components/ModalManager.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div v-for="activeModalUuid in activeModals" :key="activeModalUuid">
 			<component
-				:is="this[modalMap[activeModalUuid]]"
+				:is="this[modals[activeModalUuid]]"
 				:modal-uuid="activeModalUuid"
 			/>
 		</div>
@@ -38,8 +38,8 @@ export default {
 			editSong: "EditSong/index.vue"
 		}),
 		...mapState("modalVisibility", {
-			activeModals: state => state.new.activeModals,
-			modalMap: state => state.new.modalMap
+			activeModals: state => state.activeModals,
+			modals: state => state.modals
 		})
 	}
 };

frontend/src/components/modals/EditPlaylist/index.vue

@@ -328,7 +328,7 @@ export default {
 				if (this.playlist._id === res.data.playlistId)
 					this.addSong(res.data.song);
 			},
-			{ modal: "editPlaylist" }
+			{ modalUuid: this.modalUuid }
 		);
 
 		this.socket.on(
@@ -339,7 +339,7 @@ export default {
 					this.removeSong(res.data.youtubeId);
 				}
 			},
-			{ modal: "editPlaylist" }
+			{ modalUuid: this.modalUuid }
 		);
 
 		this.socket.on(
@@ -353,7 +353,7 @@ export default {
 					this.setPlaylist(playlist);
 				}
 			},
-			{ modal: "editPlaylist" }
+			{ modalUuid: this.modalUuid }
 		);
 
 		this.socket.on(
@@ -367,7 +367,7 @@ export default {
 					}
 				}
 			},
-			{ modal: "editPlaylist" }
+			{ modalUuid: this.modalUuid }
 		);
 	},
 	beforeUnmount() {

frontend/src/components/modals/EditSong/Tabs/Reports.vue

@@ -245,13 +245,13 @@ export default {
 		this.socket.on(
 			"event:admin.report.created",
 			res => this.reports.unshift(res.data.report),
-			{ modal: "editSong" }
+			{ modalUuid: this.modalUuid }
 		);
 
 		this.socket.on(
 			"event:admin.report.resolved",
 			res => this.resolveReport(res.data.reportId),
-			{ modal: "editSong" }
+			{ modalUuid: this.modalUuid }
 		);
 
 		this.socket.on(
@@ -267,7 +267,7 @@ export default {
 					}
 				});
 			},
-			{ modal: "editSong" }
+			{ modalUuid: this.modalUuid }
 		);
 	},
 	methods: {

frontend/src/components/modals/EditSong/index.vue

@@ -779,7 +779,7 @@ export default {
 		}),
 		...mapState("modalVisibility", {
 			modals: state => state.modals,
-			currentlyActive: state => state.currentlyActive
+			activeModals: state => state.activeModals
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -824,7 +824,7 @@ export default {
 						this.songDeleted = true;
 					}
 				},
-				{ modal: this.bulk ? "editSongs" : "editSong" }
+				{ modalUuid: this.modalUuid }
 			);
 		}
 
@@ -958,8 +958,12 @@ export default {
 			keyCode: 27,
 			handler: () => {
 				if (
-					this.currentlyActive[0] === "editSong" ||
-					this.currentlyActive[0] === "editSongs"
+					this.modals[
+						this.activeModals[this.activeModals.length - 1]
+					] === "editSong" ||
+					this.modals[
+						this.activeModals[this.activeModals.length - 1]
+					] === "editSongs"
 				) {
 					this.onCloseModal();
 				}

frontend/src/components/modals/EditSongs.vue

@@ -2,6 +2,7 @@
 	<div>
 		<edit-song
 			:modal-module-path="`modals/editSongs/${this.modalUuid}/editSong`"
+			:modal-uuid="this.modalUuid"
 			:bulk="true"
 			:flagged="currentSongFlagged"
 			v-if="currentSong"

frontend/src/components/modals/EditUser.vue

@@ -175,7 +175,7 @@ export default {
 									if (res.data.userId === this.userId)
 										this.closeModal("editUser");
 								},
-								{ modal: "editUser" }
+								{ modalUuid: this.modalUuid }
 							);
 						} else {
 							new Toast("User with that ID not found");

frontend/src/components/modals/ManageStation/index.vue

@@ -323,7 +323,7 @@ export default {
 					res => {
 						this.updateStation(res.data.station);
 					},
-					{ modal: "manageStation" }
+					{ modalUuid: this.modalUuid }
 				);
 
 				this.socket.on(
@@ -335,7 +335,7 @@ export default {
 							.indexOf(playlist._id);
 						if (playlistIndex === -1) this.autofill.push(playlist);
 					},
-					{ modal: "manageStation" }
+					{ modalUuid: this.modalUuid }
 				);
 
 				this.socket.on(
@@ -347,7 +347,7 @@ export default {
 							.indexOf(playlist._id);
 						if (playlistIndex === -1) this.blacklist.push(playlist);
 					},
-					{ modal: "manageStation" }
+					{ modalUuid: this.modalUuid }
 				);
 
 				this.socket.on(
@@ -360,7 +360,7 @@ export default {
 						if (playlistIndex >= 0)
 							this.autofill.splice(playlistIndex, 1);
 					},
-					{ modal: "manageStation" }
+					{ modalUuid: this.modalUuid }
 				);
 
 				this.socket.on(
@@ -373,7 +373,7 @@ export default {
 						if (playlistIndex >= 0)
 							this.blacklist.splice(playlistIndex, 1);
 					},
-					{ modal: "manageStation" }
+					{ modalUuid: this.modalUuid }
 				);
 
 				this.socket.on(
@@ -382,7 +382,7 @@ export default {
 						new Toast(`The station you were editing was deleted.`);
 						this.closeModal("manageStation");
 					},
-					{ modal: "manageStation" }
+					{ modalUuid: this.modalUuid }
 				);
 			} else {
 				new Toast(`Station with that ID not found`);
@@ -396,7 +396,7 @@ export default {
 				if (res.data.stationId === this.station._id)
 					this.updateSongsList(res.data.queue);
 			},
-			{ modal: "manageStation" }
+			{ modalUuid: this.modalUuid }
 		);
 
 		this.socket.on(
@@ -405,7 +405,7 @@ export default {
 				if (res.data.stationId === this.station._id)
 					this.repositionSongInList(res.data.song);
 			},
-			{ modal: "manageStation" }
+			{ modalUuid: this.modalUuid }
 		);
 
 		this.socket.on(
@@ -414,7 +414,7 @@ export default {
 				if (res.data.stationId === this.station._id)
 					this.updateStationPaused(true);
 			},
-			{ modal: "manageStation" }
+			{ modalUuid: this.modalUuid }
 		);
 
 		this.socket.on(
@@ -423,7 +423,7 @@ export default {
 				if (res.data.stationId === this.station._id)
 					this.updateStationPaused(false);
 			},
-			{ modal: "manageStation" }
+			{ modalUuid: this.modalUuid }
 		);
 
 		this.socket.on(
@@ -432,7 +432,7 @@ export default {
 				if (res.data.stationId === this.station._id)
 					this.updateCurrentSong(res.data.currentSong || {});
 			},
-			{ modal: "manageStation" }
+			{ modalUuid: this.modalUuid }
 		);
 
 		if (this.isOwnerOrAdmin()) {
@@ -443,7 +443,7 @@ export default {
 						this.stationPlaylist.songs.push(res.data.song);
 				},
 				{
-					modal: "manageStation"
+					modalUuid: this.modalUuid
 				}
 			);
 
@@ -459,7 +459,7 @@ export default {
 					}
 				},
 				{
-					modal: "manageStation"
+					modalUuid: this.modalUuid
 				}
 			);
 
@@ -497,7 +497,7 @@ export default {
 					}
 				},
 				{
-					modal: "manageStation"
+					modalUuid: this.modalUuid
 				}
 			);
 		}

frontend/src/components/modals/Report.vue

@@ -368,7 +368,7 @@ export default {
 					report => report._id !== res.data.reportId
 				);
 			},
-			{ modal: "report" }
+			{ modalUuid: this.modalUuid }
 		);
 	},
 	beforeUnmount() {

frontend/src/components/modals/ViewReport.vue

@@ -158,13 +158,13 @@ export default {
 			res => {
 				this.report.resolved = res.data.resolved;
 			},
-			{ modal: "viewReport" }
+			{ modalUuid: this.modalUuid }
 		);
 
 		this.socket.on(
 			"event:admin.report.removed",
 			() => this.closeModal("viewReport"),
-			{ modal: "viewReport" }
+			{ modalUuid: this.modalUuid }
 		);
 
 		this.socket.on(
@@ -178,7 +178,7 @@ export default {
 					issue.resolved = res.data.resolved;
 				}
 			},
-			{ modal: "viewReport" }
+			{ modalUuid: this.modalUuid }
 		);
 	},
 	beforeUnmount() {

frontend/src/pages/Station/index.vue

@@ -865,7 +865,7 @@ export default {
 			);
 		},
 		aModalIsOpen() {
-			return Object.keys(this.currentlyActive).length > 0;
+			return Object.keys(this.activeModals).length > 0;
 		},
 		currentUserQueueSongs() {
 			return this.songsList.filter(
@@ -874,7 +874,7 @@ export default {
 		},
 		...mapState("modalVisibility", {
 			modals: state => state.modals,
-			currentlyActive: state => state.currentlyActive
+			activeModals: state => state.activeModals
 		}),
 		...mapState("modals/editSong", {
 			video: state => state.video

frontend/src/store/modules/modalVisibility.js

@@ -19,11 +19,7 @@ import editSong from "./modals/editSong";
 
 const state = {
 	modals: {},
-	currentlyActive: [],
-	new: {
-		activeModals: [],
-		modalMap: {}
-	}
+	activeModals: []
 };
 
 const modalModules = {
@@ -44,28 +40,6 @@ const modalModules = {
 	editSong
 };
 
-const migratedModules = {
-	whatIsNew: true,
-	manageStation: true,
-	login: true,
-	register: true,
-	createStation: true,
-	importPlaylist: true,
-	editPlaylist: true,
-	createPlaylist: true,
-	report: true,
-	removeAccount: true,
-	editNews: true,
-	editSong: true,
-	editSongs: true,
-	editUser: true,
-	importAlbum: true,
-	viewReport: true,
-	viewPunishment: true,
-	confirm: true,
-	bulkActions: true
-};
-
 const getters = {};
 
 const actions = {
@@ -107,74 +81,33 @@ const actions = {
 
 const mutations = {
 	closeModal(state, modal) {
-		if (!migratedModules[modal]) {
-			state.modals[modal] = false;
-			const index = state.currentlyActive.indexOf(modal);
-			if (index > -1) state.currentlyActive.splice(index, 1);
-		} else {
-			Object.entries(state.new.modalMap).forEach(([uuid, _modal]) => {
-				if (modal === _modal) {
-					state.new.activeModals.splice(
-						state.new.activeModals.indexOf(uuid),
-						1
-					);
-					state.currentlyActive.splice(
-						state.currentlyActive.indexOf(`${modal}-${uuid}`),
-						1
-					);
-					delete state.new.modalMap[uuid];
-				}
-			});
-		}
+		Object.entries(state.modals).forEach(([uuid, _modal]) => {
+			if (modal === _modal) {
+				state.activeModals.splice(state.activeModals.indexOf(uuid), 1);
+				delete state.modals[uuid];
+			}
+		});
 	},
 	openModal(state, { modal, uuid, data }) {
-		if (!migratedModules[modal]) {
-			state.modals[modal] = true;
-			state.currentlyActive.push(modal);
-		} else {
-			state.new.modalMap[uuid] = modal;
+		state.modals[uuid] = modal;
 
-			if (modalModules[modal]) {
-				this.registerModule(
-					["modals", modal, uuid],
-					modalModules[modal]
-				);
-				if (data) this.dispatch(`modals/${modal}/${uuid}/init`, data);
-			}
-
-			state.new.activeModals.push(uuid);
-			state.currentlyActive.push(`${modal}-${uuid}`);
+		if (modalModules[modal]) {
+			this.registerModule(["modals", modal, uuid], modalModules[modal]);
+			if (data) this.dispatch(`modals/${modal}/${uuid}/init`, data);
 		}
+
+		state.activeModals.push(uuid);
 	},
 	closeCurrentModal(state) {
-		const currentlyActiveModal =
-			state.currentlyActive[state.currentlyActive.length - 1];
+		const currentlyActiveModalUuid =
+			state.activeModals[state.activeModals.length - 1];
 		// TODO: make sure to only destroy/register modal listeners for a unique modal
 		// remove any websocket listeners for the modal
-		ws.destroyModalListeners(currentlyActiveModal);
+		ws.destroyModalListeners(currentlyActiveModalUuid);
 
-		if (
-			!migratedModules[
-				currentlyActiveModal.substring(
-					0,
-					currentlyActiveModal.indexOf("-")
-				)
-			]
-		) {
-			state.modals[currentlyActiveModal] = false;
-			state.currentlyActive.pop();
-		} else {
-			state.currentlyActive.pop();
-			state.new.activeModals.pop();
-			// const modal = currentlyActiveModal.substring(
-			// 	0,
-			// 	currentlyActiveModal.indexOf("-")
-			// );
-			const uuid = currentlyActiveModal.substring(
-				currentlyActiveModal.indexOf("-") + 1
-			);
-			delete state.new.modalMap[uuid];
-		}
+		state.activeModals.pop();
+
+		delete state.modals[currentlyActiveModalUuid];
 	}
 };