refactor: converted editUser VueX store to a Pinia store

frontend/src/components/modals/EditUser.vue

@@ -1,28 +1,24 @@
 <script setup lang="ts">
 import { useStore } from "vuex";
-import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
 import Toast from "toasters";
-import { useModalState, useModalActions } from "@/vuex_helpers";
+import { storeToRefs } from "pinia";
 import ws from "@/ws";
 import validation from "@/validation";
+import { useEditUserStore } from "@/stores/editUser";
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });
 
+const editUserStore = useEditUserStore(props);
 const store = useStore();
 
 const { socket } = store.state.websockets;
 
-const modalState = useModalState("modals/editUser/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
-const userId = computed(() => modalState.userId);
-const user = computed(() => modalState.user);
+const { userId, user } = storeToRefs(editUserStore);
+const { setUser } = editUserStore;
 
-const { setUser } = useModalActions("modals/editUser/MODAL_UUID", ["setUser"], {
-	modalUuid: props.modalUuid
-});
 const closeCurrentModal = () =>
 	store.dispatch("modalVisibility/closeCurrentModal");
 
@@ -156,8 +152,8 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
 	socket.dispatch("apis.leaveRoom", `edit-user.${userId.value}`, () => {});
-	// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-	store.unregisterModule(["modals", "editUser", props.modalUuid]);
+	// Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
+	editUserStore.$dispose();
 });
 </script>
 

frontend/src/store/index.ts

@@ -28,7 +28,6 @@ export default createStore({
 				importAlbum: emptyModule,
 				editPlaylist: emptyModule,
 				manageStation: emptyModule,
-				editUser: emptyModule,
 				whatIsNew: emptyModule,
 				createStation: emptyModule,
 				editNews: emptyModule,

frontend/src/store/modules/modalVisibility.ts

@@ -1,7 +1,6 @@
 /* eslint no-param-reassign: 0 */
 import ws from "@/ws";
 
-import editUser from "./modals/editUser";
 import whatIsNew from "./modals/whatIsNew";
 import createStation from "./modals/createStation";
 import editNews from "./modals/editNews";
@@ -19,13 +18,16 @@ import editSong from "./modals/editSong";
 import viewYoutubeVideo from "./modals/viewYoutubeVideo";
 import removeAccount from "./modals/removeAccount";
 
+import { useEditUserStore } from "@/stores/editUser";
+
 const state = {
 	modals: {},
 	activeModals: []
 };
 
+const piniaStores = ["editUser"];
+
 const modalModules = {
-	editUser,
 	whatIsNew,
 	createStation,
 	editNews,
@@ -99,7 +101,19 @@ const mutations = {
 	openModal(state, { modal, uuid, data }) {
 		state.modals[uuid] = modal;
 
-		if (modalModules[modal]) {
+		if (piniaStores.indexOf(modal) !== -1) {
+			let store;
+
+			switch (modal) {
+				case "editUser":
+					store = useEditUserStore({ modalUuid: uuid });
+					break;
+				default:
+					break;
+			}
+
+			if (data) store.init(data);
+		} else if (modalModules[modal]) {
 			this.registerModule(["modals", modal, uuid], modalModules[modal]);
 			if (data) this.dispatch(`modals/${modal}/${uuid}/init`, data);
 		}

frontend/src/store/modules/modals/editUser.ts

@@ -1,22 +0,0 @@
-/* eslint no-param-reassign: 0 */
-
-export default {
-	namespaced: true,
-	state: () => ({
-		userId: null,
-		user: {}
-	}),
-	getters: {},
-	actions: {
-		init: ({ commit }, data) => commit("init", data),
-		setUser: ({ commit }, user) => commit("setUser", user)
-	},
-	mutations: {
-		init(state, { userId }) {
-			state.userId = userId;
-		},
-		setUser(state, user) {
-			state.user = user;
-		}
-	}
-};

frontend/src/stores/editUser.ts

@@ -0,0 +1,23 @@
+/* eslint no-param-reassign: 0 */
+
+import { defineStore } from "pinia";
+
+// TODO fix/decide eslint rule properly
+// eslint-disable-next-line
+export const useEditUserStore = props => {
+	const { modalUuid } = props;
+	return defineStore(`editUser-${modalUuid}`, {
+		state: () => ({
+			userId: null,
+			user: {}
+		}),
+		actions: {
+			init({ userId }) {
+				this.userId = userId;
+			},
+			setUser(user) {
+				this.user = user;
+			}
+		}
+	})();
+};