refactor: Converted whatIsNew Vuex store to Pinia store

frontend/src/components/modals/WhatIsNew.vue

@@ -1,22 +1,17 @@
 <script setup lang="ts">
-import { useStore } from "vuex";
 import { onMounted, onBeforeUnmount } from "vue";
-
+import { storeToRefs } from "pinia";
 import { formatDistance } from "date-fns";
 import { marked } from "marked";
 import dompurify from "dompurify";
-
-import { useModalState } from "@/vuex_helpers";
-
-const store = useStore();
+import { useWhatIsNewStore } from "@/stores/whatIsNew";
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });
 
-const { news } = useModalState("modals/whatIsNew/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
+const whatIsNewStore = useWhatIsNewStore(props);
+const { news } = storeToRefs(whatIsNewStore);
 
 onMounted(() => {
 	marked.use({
@@ -32,8 +27,8 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-	// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-	store.unregisterModule(["modals", "whatIsNew", props.modalUuid]);
+	// Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
+	whatIsNewStore.$dispose();
 });
 
 const { sanitize } = dompurify;

frontend/src/store/index.ts

@@ -3,18 +3,12 @@ import { createStore } from "vuex";
 
 import modalVisibility from "./modules/modalVisibility";
 
-const emptyModule = {
-	namespaced: true
-};
-
 export default createStore({
 	modules: {
 		modalVisibility,
 		modals: {
 			namespaced: true,
-			modules: {
-				whatIsNew: emptyModule
-			}
+			modules: {}
 		}
 	},
 	strict: false

frontend/src/store/modules/modalVisibility.ts

@@ -1,8 +1,6 @@
 /* eslint no-param-reassign: 0 */
 import ws from "@/ws";
 
-import whatIsNew from "./modals/whatIsNew";
-
 import { useEditUserStore } from "@/stores/editUser";
 import { useEditSongStore } from "@/stores/editSong";
 import { useEditSongsStore } from "@/stores/editSongs";
@@ -19,6 +17,7 @@ import { useViewApiRequestStore } from "@/stores/viewApiRequest";
 import { useViewPunishmentStore } from "@/stores/viewPunishment";
 import { useViewReportStore } from "@/stores/viewReport";
 import { useViewYoutubeVideoStore } from "@/stores/viewYoutubeVideo";
+import { useWhatIsNewStore } from "@/stores/whatIsNew";
 
 const state = {
 	modals: {},
@@ -41,12 +40,11 @@ const piniaStores = [
 	"viewApiRequest",
 	"viewPunishment",
 	"viewReport",
-	"viewYoutubeVideo"
+	"viewYoutubeVideo",
+	"whatIsNew"
 ];
 
-const modalModules = {
-	whatIsNew
-};
+const modalModules = {};
 
 const getters = {};
 
@@ -155,6 +153,9 @@ const mutations = {
 				case "viewYoutubeVideo":
 					store = useViewYoutubeVideoStore({ modalUuid: uuid });
 					break;
+				case "whatIsNew":
+					store = useWhatIsNewStore({ modalUuid: uuid });
+					break;
 				default:
 					break;
 			}

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

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

frontend/src/stores/whatIsNew.ts

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