refactor: Converted report Vuex store to Pinia store

frontend/src/components/modals/Report.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 { useReportStore } from "@/stores/report";
 import ws from "@/ws";
 
 const SongItem = defineAsyncComponent(
@@ -21,9 +22,8 @@ const store = useStore();
 
 const { socket } = useWebsocketsStore();
 
-const { song } = useModalState("modals/report/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
+const reportStore = useReportStore(props);
+const { song } = storeToRefs(reportStore);
 
 const openModal = payload =>
 	store.dispatch("modalVisibility/openModal", payload);
@@ -151,7 +151,7 @@ const predefinedCategories = ref([
 ]);
 
 const init = () => {
-	socket.dispatch("reports.myReportsForSong", song._id, res => {
+	socket.dispatch("reports.myReportsForSong", song.value._id, res => {
 		if (res.status === "success") {
 			existingReports.value = res.data.reports;
 			existingReports.value.forEach(report =>
@@ -198,7 +198,7 @@ const create = () => {
 		"reports.create",
 		{
 			issues,
-			youtubeId: song.youtubeId
+			youtubeId: song.value.youtubeId
 		},
 		res => {
 			new Toast(res.message);
@@ -212,8 +212,8 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-	// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-	store.unregisterModule(["modals", "report", props.modalUuid]);
+	// Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
+	reportStore.$dispose();
 });
 </script>
 

frontend/src/store/index.ts

@@ -16,7 +16,6 @@ export default createStore({
 				whatIsNew: emptyModule,
 				viewApiRequest: emptyModule,
 				viewPunishment: emptyModule,
-				report: 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 report from "./modals/report";
 import viewReport from "./modals/viewReport";
 import viewApiRequest from "./modals/viewApiRequest";
 import viewPunishment from "./modals/viewPunishment";
@@ -19,6 +18,7 @@ import { useEditPlaylistStore } from "@/stores/editPlaylist";
 import { useImportAlbumStore } from "@/stores/importAlbum";
 import { useManageStationStore } from "@/stores/manageStation";
 import { useRemoveAccountStore } from "@/stores/removeAccount";
+import { useReportStore } from "@/stores/report";
 
 const state = {
 	modals: {},
@@ -36,12 +36,12 @@ const piniaStores = [
 	"editPlaylist",
 	"importAlbum",
 	"manageStation",
-	"removeAccount"
+	"removeAccount",
+	"report"
 ];
 
 const modalModules = {
 	whatIsNew,
-	report,
 	viewReport,
 	viewApiRequest,
 	viewPunishment,
@@ -140,6 +140,9 @@ const mutations = {
 				case "removeAccount":
 					store = useRemoveAccountStore({ modalUuid: uuid });
 					break;
+				case "report":
+					store = useReportStore({ modalUuid: uuid });
+					break;
 				default:
 					break;
 			}

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

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

frontend/src/stores/report.ts

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