refactor: Converted confirm Vuex store to Pinia store

frontend/src/components/modals/Confirm.vue

@@ -1,21 +1,19 @@
 <script setup lang="ts">
 import { useStore } from "vuex";
 import { onBeforeUnmount } from "vue";
-import { useModalState, useModalActions } from "@/vuex_helpers";
+import { storeToRefs } from "pinia";
+import { useConfirmStore } from "@/stores/confirm";
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });
 
-const store = useStore();
+const confirmStore = useConfirmStore(props);
+const { message } = storeToRefs(confirmStore);
+const { confirm } = confirmStore;
 
-const { message } = useModalState("modals/confirm/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
+const store = useStore();
 
-const { confirm } = useModalActions("modals/confirm/MODAL_UUID", ["confirm"], {
-	modalUuid: props.modalUuid
-});
 const closeCurrentModal = () =>
 	store.dispatch("modalVisibility/closeCurrentModal");
 
@@ -25,8 +23,8 @@ const confirmAction = () => {
 };
 
 onBeforeUnmount(() => {
-	// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-	store.unregisterModule(["modals", "confirm", props.modalUuid]);
+	// Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
+	confirmStore.$dispose();
 });
 </script>
 

frontend/src/store/index.ts

@@ -23,7 +23,6 @@ export default createStore({
 				viewPunishment: emptyModule,
 				report: emptyModule,
 				viewReport: emptyModule,
-				confirm: emptyModule,
 				viewYoutubeVideo: emptyModule,
 				removeAccount: emptyModule
 			}

frontend/src/store/modules/modalVisibility.ts

@@ -11,7 +11,6 @@ import viewReport from "./modals/viewReport";
 import viewApiRequest from "./modals/viewApiRequest";
 import viewPunishment from "./modals/viewPunishment";
 import importAlbum from "./modals/importAlbum";
-import confirm from "./modals/confirm";
 import viewYoutubeVideo from "./modals/viewYoutubeVideo";
 import removeAccount from "./modals/removeAccount";
 
@@ -19,13 +18,20 @@ import { useEditUserStore } from "@/stores/editUser";
 import { useEditSongStore } from "@/stores/editSong";
 import { useEditSongsStore } from "@/stores/editSongs";
 import { useBulkActionsStore } from "@/stores/bulkActions";
+import { useConfirmStore } from "@/stores/confirm";
 
 const state = {
 	modals: {},
 	activeModals: []
 };
 
-const piniaStores = ["editUser", "editSong", "editSongs", "bulkActions"];
+const piniaStores = [
+	"editUser",
+	"editSong",
+	"editSongs",
+	"bulkActions",
+	"confirm"
+];
 
 const modalModules = {
 	whatIsNew,
@@ -38,7 +44,6 @@ const modalModules = {
 	viewApiRequest,
 	viewPunishment,
 	importAlbum,
-	confirm,
 	viewYoutubeVideo,
 	removeAccount
 };
@@ -114,6 +119,9 @@ const mutations = {
 				case "bulkActions":
 					store = useBulkActionsStore({ modalUuid: uuid });
 					break;
+				case "confirm":
+					store = useConfirmStore({ modalUuid: uuid });
+					break;
 				default:
 					break;
 			}

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

@@ -1,29 +0,0 @@
-/* eslint no-param-reassign: 0 */
-// TODO - Remove action and param once fully removed from components
-export default {
-	namespaced: true,
-	state: {
-		message: "",
-		onCompleted: null,
-		action: null,
-		params: null
-	},
-	getters: {},
-	actions: {
-		init: ({ commit }, data) => commit("init", data),
-		confirm: ({ state }) => {
-			state.onCompleted({
-				action: state.action,
-				params: state.params
-			});
-		}
-	},
-	mutations: {
-		init(state, { message, onCompleted, action, params }) {
-			state.message = message;
-			state.onCompleted = onCompleted;
-			state.action = action;
-			state.params = params;
-		}
-	}
-};

frontend/src/stores/confirm.ts

@@ -0,0 +1,29 @@
+import { defineStore } from "pinia";
+
+// TODO fix/decide eslint rule properly
+// eslint-disable-next-line
+export const useConfirmStore = props => {
+	const { modalUuid } = props;
+	return defineStore(`confirm-${modalUuid}`, {
+		state: () => ({
+			message: "",
+			onCompleted: null,
+			action: null,
+			params: null
+		}),
+		actions: {
+			init({ message, onCompleted, action, params }) {
+				this.message = message;
+				this.onCompleted = onCompleted;
+				this.action = action;
+				this.params = params;
+			},
+			confirm() {
+				this.onCompleted({
+					action: this.action,
+					params: this.params
+				});
+			}
+		}
+	})();
+};