fix: attempted to fix some issues with modal states/EditSongs

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

@@ -866,8 +866,11 @@ export default {
 			this.loadSong(youtubeId);
 		}
 	},
+	beforeMount() {
+		console.log("EDITSONG BEFOREMOUNT");
+	},
 	async mounted() {
-		console.log("MOUNTED");
+		console.log("EDITSONG MOUNTED");
 		this.activityWatchVideoDataInterval = setInterval(() => {
 			this.sendActivityWatchVideoData();
 		}, 1000);
@@ -1061,7 +1064,7 @@ export default {
 		*/
 	},
 	beforeUnmount() {
-		console.log("UNMOUNT");
+		console.log("EDITSONG BEFOREUNMOUNT");
 		this.unloadSong(this.youtubeId, this.song._id);
 
 		this.playerReady = false;
@@ -1096,8 +1099,19 @@ export default {
 				"editSong",
 				this.modalUuid
 			]);
+		} else {
+			console.log("UNREGISTER EDITSONG");
+			this.$store.unregisterModule([
+				"modals",
+				"editSongs",
+				this.modalUuid,
+				"editSong"
+			]);
 		}
 	},
+	unmounted() {
+		console.log("EDITSONG UNMOUNTED");
+	},
 	methods: {
 		onThumbnailLoad() {
 			if (this.$refs.thumbnailElement) {

frontend/src/components/modals/EditSongs.vue

@@ -238,13 +238,17 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
-	async mounted() {
-		this.socket.dispatch("apis.joinRoom", "edit-songs");
-
+	beforeMount() {
+		console.log("EDITSONGS BEFOREMOUNT");
 		this.$store.registerModule(
 			["modals", "editSongs", this.modalUuid, "editSong"],
 			editSong
 		);
+	},
+	async mounted() {
+		console.log("EDITSONGS MOUNTED");
+
+		this.socket.dispatch("apis.joinRoom", "edit-songs");
 
 		this.socket.dispatch(
 			"songs.getSongsFromYoutubeIds",
@@ -318,9 +322,11 @@ export default {
 		);
 	},
 	beforeUnmount() {
+		console.log("EDITSONGS BEFORE UNMOUNT");
 		this.socket.dispatch("apis.leaveRoom", "edit-songs");
 	},
 	unmounted() {
+		console.log("EDITSONGS UNMOUNTED");
 		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
 		this.$store.unregisterModule(["modals", "editSongs", this.modalUuid]);
 	},

frontend/src/vuex_helpers.js

@@ -2,20 +2,41 @@ import { defineAsyncComponent } from "vue";
 
 const mapModalState = (namespace, map) => {
 	const modalState = {};
+	// console.log("MAP MODAL STATE", namespace);
+
 	Object.entries(map).forEach(([mapKey, mapValue]) => {
 		modalState[mapKey] = function func() {
-			return mapValue(
-				namespace
-					.replace(
-						"MODAL_MODULE_PATH",
-						namespace.indexOf("MODAL_MODULE_PATH") !== -1
-							? this.modalModulePath
-							: null
-					)
-					.replace("MODAL_UUID", this.modalUuid)
-					.split("/")
-					.reduce((a, b) => a[b], this.$store.state)
-			);
+			// console.log(
+			// 	321,
+			// 	namespace
+			// 		.replace(
+			// 			"MODAL_MODULE_PATH",
+			// 			namespace.indexOf("MODAL_MODULE_PATH") !== -1
+			// 				? this.modalModulePath
+			// 				: null
+			// 		)
+			// 		.replace("MODAL_UUID", this.modalUuid)
+			// 		.split("/")
+			// );
+			// console.log(3211, mapKey);
+
+			const state = namespace
+				.replace(
+					"MODAL_MODULE_PATH",
+					namespace.indexOf("MODAL_MODULE_PATH") !== -1
+						? this.modalModulePath
+						: null
+				)
+				.replace("MODAL_UUID", this.modalUuid)
+				.split("/")
+				.reduce((a, b) => a[b], this.$store.state);
+
+			// console.log(32111, state);
+			// if (state) console.log(321111, mapValue(state));
+			// else console.log(321111, "NADA");
+
+			if (state) return mapValue(state);
+			return mapValue({});
 		};
 	});
 	return modalState;