refactor: Converted editNews Vuex store to Pinia store

frontend/src/components/modals/EditNews.vue

@@ -5,8 +5,9 @@ import { marked } from "marked";
 import DOMPurify from "dompurify";
 import Toast from "toasters";
 import { formatDistance } from "date-fns";
-import { useModalState } from "@/vuex_helpers";
+import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useEditNewsStore } from "@/stores/editNews";
 import ws from "@/ws";
 
 const SaveButton = defineAsyncComponent(
@@ -21,9 +22,8 @@ const store = useStore();
 
 const { socket } = useWebsocketsStore();
 
-const { createNews, newsId } = useModalState("modals/editNews/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
+const editNewsStore = useEditNewsStore(props);
+const { createNews, newsId } = storeToRefs(editNewsStore);
 
 const closeCurrentModal = () =>
 	store.dispatch("modalVisibility/closeCurrentModal");
@@ -37,8 +37,8 @@ const createdBy = ref();
 const createdAt = ref(0);
 
 const init = () => {
-	if (newsId && !createNews) {
-		socket.dispatch(`news.getNewsFromId`, newsId, res => {
+	if (newsId && !createNews.value) {
+		socket.dispatch(`news.getNewsFromId`, newsId.value, res => {
 			if (res.status === "success") {
 				markdown.value = res.data.news.markdown;
 				status.value = res.data.news.status;
@@ -110,7 +110,7 @@ const update = close => {
 
 	return socket.dispatch(
 		"news.update",
-		newsId,
+		newsId.value,
 		{
 			title,
 			markdown: markdown.value,
@@ -125,8 +125,8 @@ const update = close => {
 };
 
 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
+	editNewsStore.$dispose();
 });
 
 onMounted(() => {

frontend/src/store/index.ts

@@ -17,7 +17,6 @@ export default createStore({
 				editPlaylist: emptyModule,
 				manageStation: emptyModule,
 				whatIsNew: emptyModule,
-				editNews: emptyModule,
 				viewApiRequest: emptyModule,
 				viewPunishment: emptyModule,
 				report: emptyModule,

frontend/src/store/modules/modalVisibility.ts

@@ -2,7 +2,6 @@
 import ws from "@/ws";
 
 import whatIsNew from "./modals/whatIsNew";
-import editNews from "./modals/editNews";
 import manageStation from "./modals/manageStation";
 import editPlaylist from "./modals/editPlaylist";
 import report from "./modals/report";
@@ -19,6 +18,7 @@ import { useEditSongsStore } from "@/stores/editSongs";
 import { useBulkActionsStore } from "@/stores/bulkActions";
 import { useConfirmStore } from "@/stores/confirm";
 import { useCreateStationStore } from "@/stores/createStation";
+import { useEditNewsStore } from "@/stores/editNews";
 
 const state = {
 	modals: {},
@@ -31,12 +31,12 @@ const piniaStores = [
 	"editSongs",
 	"bulkActions",
 	"confirm",
-	"createStation"
+	"createStation",
+	"editNews"
 ];
 
 const modalModules = {
 	whatIsNew,
-	editNews,
 	manageStation,
 	editPlaylist,
 	report,
@@ -125,6 +125,9 @@ const mutations = {
 				case "createStation":
 					store = useCreateStationStore({ modalUuid: uuid });
 					break;
+				case "editNews":
+					store = useEditNewsStore({ modalUuid: uuid });
+					break;
 				default:
 					break;
 			}

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

@@ -1,21 +0,0 @@
-/* eslint no-param-reassign: 0 */
-
-export default {
-	namespaced: true,
-	state: () => ({
-		createNews: false,
-		newsId: null,
-		sector: "admin"
-	}),
-	getters: {},
-	actions: {
-		init: ({ commit }, data) => commit("init", data)
-	},
-	mutations: {
-		init(state, { createNews, newsId, sector }) {
-			if (createNews) state.createNews = createNews;
-			if (newsId) state.newsId = newsId;
-			if (sector) state.sector = sector;
-		}
-	}
-};

frontend/src/stores/editNews.ts

@@ -0,0 +1,21 @@
+import { defineStore } from "pinia";
+
+// TODO fix/decide eslint rule properly
+// eslint-disable-next-line
+export const useEditNewsStore = props => {
+	const { modalUuid } = props;
+	return defineStore(`editNews-${modalUuid}`, {
+		state: () => ({
+			createNews: false,
+			newsId: null,
+			sector: "admin"
+		}),
+		actions: {
+			init({ createNews, newsId, sector }) {
+				if (createNews) this.createNews = createNews;
+				if (newsId) this.newsId = newsId;
+				if (sector) this.sector = sector;
+			}
+		}
+	})();
+};