refactor: moved VueX modal helper functions to its own file

frontend/src/components/ModalManager.vue

@@ -11,22 +11,13 @@
 
 <script>
 import { mapState } from "vuex";
-import { defineAsyncComponent } from "vue";
 
-const mapModalComponents = (baseDirectory, map) => {
-	const modalComponents = {};
-	Object.entries(map).forEach(([mapKey, mapValue]) => {
-		modalComponents[mapKey] = function() {
-			return defineAsyncComponent(() => import(`${baseDirectory}/${mapValue}`));
-		}
-	});
-	return modalComponents;
-}
+import { mapModalComponents } from "@/vuex_helpers";
 
 export default {
 	computed: {
-		...mapModalComponents("./modals", {
-			"editUser": "EditUser.vue"
+		...mapModalComponents("./components/modals", {
+			editUser: "EditUser.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/modals/EditUser.vue

@@ -112,25 +112,7 @@ import Toast from "toasters";
 import validation from "@/validation";
 import ws from "@/ws";
 
-const mapModalState = function(namespace, map) {
-	const modalState = {};
-	Object.entries(map).forEach(([mapKey, mapValue]) => {
-		modalState[mapKey] = function() {
-			return mapValue(namespace.replace("MODAL_UUID", this.modalUuid).split("/").reduce((a, b) => a[b], this.$store.state));
-		}
-	});
-	return modalState;
-}
-
-const mapModalActions = function(namespace, map) {
-	const modalState = {};
-	map.forEach(mapValue => {
-		modalState[mapValue] = function(value) {
-			return this.$store.dispatch(`${namespace.replace("MODAL_UUID", this.modalUuid)}/${mapValue}`, value);
-		}
-	});
-	return modalState;
-}
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
 
 export default {
 	props: {

frontend/src/pages/Admin/Users/index.vue

@@ -98,16 +98,12 @@
 
 <script>
 import { mapState, mapActions } from "vuex";
-import { defineAsyncComponent } from "vue";
 
 import AdvancedTable from "@/components/AdvancedTable.vue";
 import ProfilePicture from "@/components/ProfilePicture.vue";
 
 export default {
 	components: {
-		EditUser: defineAsyncComponent(() =>
-			import("@/components/modals/EditUser.vue")
-		),
 		AdvancedTable,
 		ProfilePicture
 	},

frontend/src/vuex_helpers.js

@@ -0,0 +1,43 @@
+import { defineAsyncComponent } from "vue";
+
+const mapModalState = (namespace, map) => {
+	const modalState = {};
+	Object.entries(map).forEach(([mapKey, mapValue]) => {
+		modalState[mapKey] = function func() {
+			return mapValue(
+				namespace
+					.replace("MODAL_UUID", this.modalUuid)
+					.split("/")
+					.reduce((a, b) => a[b], this.$store.state)
+			);
+		};
+	});
+	return modalState;
+};
+
+const mapModalActions = (namespace, map) => {
+	const modalState = {};
+	map.forEach(mapValue => {
+		modalState[mapValue] = function func(value) {
+			return this.$store.dispatch(
+				`${namespace.replace(
+					"MODAL_UUID",
+					this.modalUuid
+				)}/${mapValue}`,
+				value
+			);
+		};
+	});
+	return modalState;
+};
+
+const mapModalComponents = (baseDirectory, map) => {
+	const modalComponents = {};
+	Object.entries(map).forEach(([mapKey, mapValue]) => {
+		modalComponents[mapKey] = () =>
+			defineAsyncComponent(() => import(`${baseDirectory}/${mapValue}`));
+	});
+	return modalComponents;
+};
+
+export { mapModalState, mapModalActions, mapModalComponents };