refactor(ModalManager): Converted to composition API

frontend/src/components/ModalManager.vue

@@ -1,47 +1,46 @@
+<script setup lang="ts">
+import { useStore } from "vuex";
+import { computed, ref } from "vue";
+import { useModalComponents } from "@/vuex_helpers";
+
+const store = useStore();
+
+const activeModals = computed(() => store.state.modalVisibility.activeModals);
+const modals = computed(() => store.state.modalVisibility.modals);
+
+const modalComponents = ref(
+	useModalComponents("components/modals", {
+		editUser: "EditUser.vue",
+		login: "Login.vue",
+		register: "Register.vue",
+		whatIsNew: "WhatIsNew.vue",
+		createStation: "CreateStation.vue",
+		editNews: "EditNews.vue",
+		manageStation: "ManageStation/index.vue",
+		editPlaylist: "EditPlaylist/index.vue",
+		createPlaylist: "CreatePlaylist.vue",
+		report: "Report.vue",
+		viewReport: "ViewReport.vue",
+		bulkActions: "BulkActions.vue",
+		viewApiRequest: "ViewApiRequest.vue",
+		viewPunishment: "ViewPunishment.vue",
+		removeAccount: "RemoveAccount.vue",
+		importAlbum: "ImportAlbum.vue",
+		confirm: "Confirm.vue",
+		editSongs: "EditSongs.vue",
+		editSong: "EditSong/index.vue",
+		viewYoutubeVideo: "ViewYoutubeVideo.vue"
+	})
+);
+</script>
+
 <template>
 	<div>
 		<div v-for="activeModalUuid in activeModals" :key="activeModalUuid">
 			<component
-				:is="this[modals[activeModalUuid]]"
+				:is="modalComponents[modals[activeModalUuid]]"
 				:modal-uuid="activeModalUuid"
 			/>
 		</div>
 	</div>
 </template>
-
-<script>
-import { mapState } from "vuex";
-
-import { mapModalComponents } from "@/vuex_helpers";
-
-export default {
-	computed: {
-		...mapModalComponents("components/modals", {
-			editUser: "EditUser.vue",
-			login: "Login.vue",
-			register: "Register.vue",
-			whatIsNew: "WhatIsNew.vue",
-			createStation: "CreateStation.vue",
-			editNews: "EditNews.vue",
-			manageStation: "ManageStation/index.vue",
-			editPlaylist: "EditPlaylist/index.vue",
-			createPlaylist: "CreatePlaylist.vue",
-			report: "Report.vue",
-			viewReport: "ViewReport.vue",
-			bulkActions: "BulkActions.vue",
-			viewApiRequest: "ViewApiRequest.vue",
-			viewPunishment: "ViewPunishment.vue",
-			removeAccount: "RemoveAccount.vue",
-			importAlbum: "ImportAlbum.vue",
-			confirm: "Confirm.vue",
-			editSongs: "EditSongs.vue",
-			editSong: "EditSong/index.vue",
-			viewYoutubeVideo: "ViewYoutubeVideo.vue"
-		}),
-		...mapState("modalVisibility", {
-			activeModals: state => state.activeModals,
-			modals: state => state.modals
-		})
-	}
-};
-</script>

frontend/src/vuex_helpers.ts

@@ -90,7 +90,7 @@ const useModalState = (namespace, options) => {
 		.reduce((a, b) => a[b], store.state);
 
 	return modalState ? modalState : {};
-}
+};
 
 const useModalActions = (namespace, actions, options) => {
 	const store = useStore();
@@ -112,6 +112,17 @@ const useModalActions = (namespace, actions, options) => {
 	}]));
 
 	return Object.fromEntries(actionDispatchers);
-}
+};
+
+const useModalComponents = (baseDirectory, map) => {
+	const modalComponents = {};
+	Object.entries(map).forEach(([mapKey, mapValue]) => {
+		modalComponents[mapKey] =
+			defineAsyncComponent(() =>
+				import(`./${baseDirectory}/${mapValue}`)
+			);
+	});
+	return modalComponents;
+};
 
-export { mapModalState, mapModalActions, mapModalComponents, useModalState, useModalActions };
+export { mapModalState, mapModalActions, mapModalComponents, useModalState, useModalActions, useModalComponents };