refactor: Converted viewReport Vuex store to Pinia store

frontend/src/components/modals/ViewReport.vue

@@ -2,8 +2,9 @@
 import { useStore } from "vuex";
 import { defineAsyncComponent, ref, onMounted, onBeforeUnmount } from "vue";
 import Toast from "toasters";
+import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
-import { useModalState } from "@/vuex_helpers";
+import { useViewReportStore } from "@/stores/viewReport";
 import ws from "@/ws";
 import admin from "@/api/admin/index";
 
@@ -22,9 +23,8 @@ const store = useStore();
 
 const { socket } = useWebsocketsStore();
 
-const { reportId } = useModalState("modals/viewReport/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
+const viewReportStore = useViewReportStore(props);
+const { reportId } = storeToRefs(viewReportStore);
 
 const openModal = payload =>
 	store.dispatch("modalVisibility/openModal", payload);
@@ -43,11 +43,11 @@ const report = ref({});
 const song = ref();
 
 const init = () => {
-	socket.dispatch("reports.findOne", reportId, res => {
+	socket.dispatch("reports.findOne", reportId.value, res => {
 		if (res.status === "success") {
 			report.value = res.data.report;
 
-			socket.dispatch("apis.joinRoom", `view-report.${reportId}`);
+			socket.dispatch("apis.joinRoom", `view-report.${reportId.value}`);
 
 			socket.dispatch(
 				"songs.getSongFromSongId",
@@ -76,7 +76,7 @@ const init = () => {
 			socket.on(
 				"event:admin.report.issue.toggled",
 				res => {
-					if (reportId === res.data.reportId) {
+					if (reportId.value === res.data.reportId) {
 						const issue = report.value.issues.find(
 							issue => issue._id.toString() === res.data.issueId
 						);
@@ -95,7 +95,7 @@ const init = () => {
 
 const resolve = value =>
 	admin.reports
-		.resolve({ reportId, value })
+		.resolve({ reportId: reportId.value, value })
 		.then(res => {
 			if (res.status !== "success") new Toast(res.message);
 		})
@@ -103,14 +103,14 @@ const resolve = value =>
 
 const remove = () =>
 	admin.reports
-		.remove(reportId)
+		.remove(reportId.value)
 		.then(res => {
 			if (res.status === "success") closeCurrentModal();
 		})
 		.catch(err => new Toast(err.message));
 
 const toggleIssue = issueId => {
-	socket.dispatch("reports.toggleIssue", reportId, issueId, res => {
+	socket.dispatch("reports.toggleIssue", reportId.value, issueId, res => {
 		if (res.status !== "success") new Toast(res.message);
 	});
 };
@@ -127,9 +127,9 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-	socket.dispatch("apis.leaveRoom", `view-report.${reportId}`);
-	// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-	store.unregisterModule(["modals", "viewReport", props.modalUuid]);
+	socket.dispatch("apis.leaveRoom", `view-report.${reportId.value}`);
+	// Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
+	viewReportStore.$dispose();
 });
 </script>
 

frontend/src/store/index.ts

@@ -14,7 +14,6 @@ export default createStore({
 			namespaced: true,
 			modules: {
 				whatIsNew: emptyModule,
-				viewReport: emptyModule,
 				viewYoutubeVideo: emptyModule
 			}
 		}

frontend/src/store/modules/modalVisibility.ts

@@ -2,7 +2,6 @@
 import ws from "@/ws";
 
 import whatIsNew from "./modals/whatIsNew";
-import viewReport from "./modals/viewReport";
 import viewYoutubeVideo from "./modals/viewYoutubeVideo";
 
 import { useEditUserStore } from "@/stores/editUser";
@@ -19,6 +18,7 @@ import { useRemoveAccountStore } from "@/stores/removeAccount";
 import { useReportStore } from "@/stores/report";
 import { useViewApiRequestStore } from "@/stores/viewApiRequest";
 import { useViewPunishmentStore } from "@/stores/viewPunishment";
+import { useViewReportStore } from "@/stores/viewReport";
 
 const state = {
 	modals: {},
@@ -39,12 +39,12 @@ const piniaStores = [
 	"removeAccount",
 	"report",
 	"viewApiRequest",
-	"viewPunishment"
+	"viewPunishment",
+	"viewReport"
 ];
 
 const modalModules = {
 	whatIsNew,
-	viewReport,
 	viewYoutubeVideo
 };
 
@@ -149,6 +149,9 @@ const mutations = {
 				case "viewPunishment":
 					store = useViewPunishmentStore({ modalUuid: uuid });
 					break;
+				case "viewReport":
+					store = useViewReportStore({ modalUuid: uuid });
+					break;
 				default:
 					break;
 			}

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

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

frontend/src/stores/viewReport.ts

@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+// TODO fix/decide eslint rule properly
+// eslint-disable-next-line
+export const useViewReportStore = props => {
+	const { modalUuid } = props;
+	return defineStore(`viewReport-${modalUuid}`, {
+		state: () => ({
+			reportId: null
+		}),
+		actions: {
+			init({ reportId }) {
+				this.reportId = reportId;
+			}
+		}
+	})();
+};