refactor: Converted createStation Vuex store to Pinia store

frontend/src/components/modals/CreateStation.vue

@@ -2,8 +2,9 @@
 import { useStore } from "vuex";
 import { ref, onBeforeUnmount } from "vue";
 import Toast from "toasters";
+import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
-import { useModalState } from "@/vuex_helpers";
+import { useCreateStationStore } from "@/stores/createStation";
 import validation from "@/validation";
 
 const props = defineProps({
@@ -14,9 +15,8 @@ const store = useStore();
 
 const { socket } = useWebsocketsStore();
 
-const { official } = useModalState("modals/createStation/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
+const createStationStore = useCreateStationStore(props);
+const { official } = storeToRefs(createStationStore);
 
 const closeCurrentModal = () =>
 	store.dispatch("modalVisibility/closeCurrentModal");
@@ -65,7 +65,7 @@ const submitModal = () => {
 		"stations.create",
 		{
 			name,
-			type: official ? "official" : "community",
+			type: official.value ? "official" : "community",
 			displayName,
 			description
 		},
@@ -79,8 +79,8 @@ const submitModal = () => {
 };
 
 onBeforeUnmount(() => {
-	// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-	store.unregisterModule(["modals", "createStation", props.modalUuid]);
+	// Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
+	createStationStore.$dispose();
 });
 </script>
 

frontend/src/store/index.ts

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

frontend/src/store/modules/modalVisibility.ts

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

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

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

frontend/src/stores/createStation.ts

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