refactor: Converted viewApiRequest Vuex store to Pinia store

frontend/src/components/modals/ViewApiRequest.vue

@@ -3,8 +3,9 @@ import { useStore } from "vuex";
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import Toast from "toasters";
 import VueJsonPretty from "vue-json-pretty";
+import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
-import { useModalState, useModalActions } from "@/vuex_helpers";
+import { useViewApiRequestStore } from "@/stores/viewApiRequest";
 import ws from "@/ws";
 import "vue-json-pretty/lib/styles.css";
 
@@ -16,20 +17,9 @@ const store = useStore();
 
 const { socket } = useWebsocketsStore();
 
-const { requestId, request, removeAction } = useModalState(
-	"modals/viewApiRequest/MODAL_UUID",
-	{
-		modalUuid: props.modalUuid
-	}
-);
-
-const { viewApiRequest } = useModalActions(
-	"modals/viewApiRequest/MODAL_UUID",
-	["viewApiRequest"],
-	{
-		modalUuid: props.modalUuid
-	}
-);
+const viewApiRequestStore = useViewApiRequestStore(props);
+const { requestId, request, removeAction } = storeToRefs(viewApiRequestStore);
+const { viewApiRequest } = viewApiRequestStore;
 
 const closeCurrentModal = () =>
 	store.dispatch("modalVisibility/closeCurrentModal");
@@ -38,13 +28,16 @@ const loaded = ref(false);
 
 const init = () => {
 	loaded.value = false;
-	socket.dispatch("youtube.getApiRequest", requestId, res => {
+	socket.dispatch("youtube.getApiRequest", requestId.value, res => {
 		if (res.status === "success") {
 			const { apiRequest } = res.data;
 			viewApiRequest(apiRequest);
 			loaded.value = true;
 
-			socket.dispatch("apis.joinRoom", `view-api-request.${requestId}`);
+			socket.dispatch(
+				"apis.joinRoom",
+				`view-api-request.${requestId.value}`
+			);
 
 			socket.on(
 				"event:youtubeApiRequest.removed",
@@ -62,8 +55,8 @@ const init = () => {
 };
 
 const remove = () => {
-	if (removeAction)
-		socket.dispatch(removeAction, requestId, res => {
+	if (removeAction.value)
+		socket.dispatch(removeAction.value, requestId.value, res => {
 			if (res.status === "success") {
 				new Toast("API request successfully removed.");
 				closeCurrentModal();
@@ -80,11 +73,11 @@ onMounted(() => {
 onBeforeUnmount(() => {
 	socket.dispatch(
 		"apis.leaveRoom",
-		`view-api-request.${requestId}`,
+		`view-api-request.${requestId.value}`,
 		() => {}
 	);
-	// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-	store.unregisterModule(["modals", "viewApiRequest", props.modalUuid]);
+	// Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
+	viewApiRequestStore.$dispose();
 });
 </script>
 

frontend/src/store/index.ts

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

frontend/src/store/modules/modalVisibility.ts

@@ -3,7 +3,6 @@ import ws from "@/ws";
 
 import whatIsNew from "./modals/whatIsNew";
 import viewReport from "./modals/viewReport";
-import viewApiRequest from "./modals/viewApiRequest";
 import viewPunishment from "./modals/viewPunishment";
 import viewYoutubeVideo from "./modals/viewYoutubeVideo";
 
@@ -19,6 +18,7 @@ import { useImportAlbumStore } from "@/stores/importAlbum";
 import { useManageStationStore } from "@/stores/manageStation";
 import { useRemoveAccountStore } from "@/stores/removeAccount";
 import { useReportStore } from "@/stores/report";
+import { useViewApiRequestStore } from "@/stores/viewApiRequest";
 
 const state = {
 	modals: {},
@@ -37,13 +37,13 @@ const piniaStores = [
 	"importAlbum",
 	"manageStation",
 	"removeAccount",
-	"report"
+	"report",
+	"viewApiRequest"
 ];
 
 const modalModules = {
 	whatIsNew,
 	viewReport,
-	viewApiRequest,
 	viewPunishment,
 	viewYoutubeVideo
 };
@@ -143,6 +143,9 @@ const mutations = {
 				case "report":
 					store = useReportStore({ modalUuid: uuid });
 					break;
+				case "viewApiRequest":
+					store = useViewApiRequestStore({ modalUuid: uuid });
+					break;
 				default:
 					break;
 			}

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

@@ -1,25 +0,0 @@
-/* eslint no-param-reassign: 0 */
-
-export default {
-	namespaced: true,
-	state: {
-		requestId: null,
-		request: {},
-		removeAction: null
-	},
-	getters: {},
-	actions: {
-		init: ({ commit }, data) => commit("init", data),
-		viewApiRequest: ({ commit }, request) =>
-			commit("viewApiRequest", request)
-	},
-	mutations: {
-		init(state, { requestId, removeAction }) {
-			state.requestId = requestId;
-			state.removeAction = removeAction;
-		},
-		viewApiRequest(state, request) {
-			state.request = request;
-		}
-	}
-};

frontend/src/stores/viewApiRequest.ts

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