refactor: Converted manageStation Vuex store to Pinia store

frontend/src/components/PlaylistTabBase.vue

@@ -9,7 +9,7 @@ import { useWebsocketsStore } from "@/stores/websockets";
 import { useStationStore } from "@/stores/station";
 import { useUserAuthStore } from "@/stores/userAuth";
 import { useUserPlaylistsStore } from "@/stores/userPlaylists";
-import { useModalState } from "@/vuex_helpers";
+import { useManageStationStore } from "@/stores/manageStation";
 
 import useSortablePlaylists from "@/composables/useSortablePlaylists";
 
@@ -64,39 +64,31 @@ const {
 const { loggedIn, role, userId } = storeToRefs(userAuthStore);
 const { autoRequest } = storeToRefs(stationStore);
 
-const { autofill } = useModalState("modals/manageStation/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
+const manageStationStore = useManageStationStore(props);
+const { autofill } = storeToRefs(manageStationStore);
 
 const station = computed({
 	get() {
-		if (props.sector === "manageStation")
-			return store.state.modals.manageStation[props.modalUuid].station;
+		if (props.sector === "manageStation") return manageStationStore.station;
 		return stationStore.station;
 	},
-	set(station) {
+	set(value) {
 		if (props.sector === "manageStation")
-			store.commit(
-				`modals/manageStation/${props.modalUuid}/updateStation`,
-				station
-			);
-		else stationStore.updateStation(station);
+			manageStationStore.updateStation(value);
+		else stationStore.updateStation(value);
 	}
 });
 
 const blacklist = computed({
 	get() {
 		if (props.sector === "manageStation")
-			return store.state.modals.manageStation[props.modalUuid].blacklist;
+			return manageStationStore.blacklist;
 		return stationStore.blacklist;
 	},
-	set(blacklist) {
+	set(value) {
 		if (props.sector === "manageStation")
-			store.commit(
-				`modals/manageStation/${props.modalUuid}/setBlacklist`,
-				blacklist
-			);
-		else stationStore.setBlacklist(blacklist);
+			manageStationStore.setBlacklist(value);
+		else stationStore.setBlacklist(value);
 	}
 });
 
@@ -171,7 +163,7 @@ const label = (tense = "future", typeOverwrite = null, capitalize = false) => {
 const selectedPlaylists = typeOverwrite => {
 	const type = typeOverwrite || props.type;
 
-	if (type === "autofill") return autofill;
+	if (type === "autofill") return autofill.value;
 	if (type === "blacklist") return blacklist.value;
 	if (type === "autorequest") return autoRequest.value;
 	return [];

frontend/src/components/Queue.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useStore } from "vuex";
 import { defineAsyncComponent, ref, computed, onUpdated } from "vue";
 import { Sortable } from "sortablejs-vue3";
 import Toast from "toasters";
@@ -7,6 +6,7 @@ import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useStationStore } from "@/stores/station";
 import { useUserAuthStore } from "@/stores/userAuth";
+import { useManageStationStore } from "@/stores/manageStation";
 
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")
@@ -17,21 +17,16 @@ const props = defineProps({
 	sector: { type: String, default: "station" }
 });
 
-const store = useStore();
-
 const { socket } = useWebsocketsStore();
 const stationStore = useStationStore();
 const userAuthStore = useUserAuthStore();
+const manageStationStore = useManageStationStore(props);
 
 const { loggedIn, userId, role: userRole } = storeToRefs(userAuthStore);
 
 const repositionSongInList = payload => {
 	if (props.sector === "manageStation")
-		return store.dispatch(
-			"modals/manageStation/repositionSongInList",
-			payload
-		);
-
+		return manageStationStore.repositionSongInList(payload);
 	return stationStore.repositionSongInList(payload);
 };
 
@@ -41,33 +36,26 @@ const songItems = ref([]);
 
 const station = computed({
 	get: () => {
-		if (props.sector === "manageStation")
-			return store.state.modals.manageStation[props.modalUuid].station;
+		if (props.sector === "manageStation") return manageStationStore.station;
 		return stationStore.station;
 	},
-	set: station => {
+	set: value => {
 		if (props.sector === "manageStation")
-			store.commit(
-				`modals/manageStation/${props.modalUuid}/updateStation`,
-				station
-			);
-		else stationStore.updateStation(station);
+			manageStationStore.updateStation(value);
+		else stationStore.updateStation(value);
 	}
 });
 
 const queue = computed({
 	get: () => {
 		if (props.sector === "manageStation")
-			return store.state.modals.manageStation[props.modalUuid].songsList;
+			return manageStationStore.songsList;
 		return stationStore.songsList;
 	},
-	set: queue => {
+	set: value => {
 		if (props.sector === "manageStation")
-			store.commit(
-				`modals/manageStation/${props.modalUuid}/updateSongsList`,
-				queue
-			);
-		else stationStore.updateSongsList(queue);
+			manageStationStore.updateSongsList(value);
+		else stationStore.updateSongsList(value);
 	}
 });
 

frontend/src/components/Request.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref, computed, onMounted } from "vue";
-import { useStore } from "vuex";
 import Toast from "toasters";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useStationStore } from "@/stores/station";
+import { useManageStationStore } from "@/stores/manageStation";
 import useSearchYoutube from "@/composables/useSearchYoutube";
 import useSearchMusare from "@/composables/useSearchMusare";
 
@@ -17,67 +17,55 @@ const PlaylistTabBase = defineAsyncComponent(
 	() => import("@/components/PlaylistTabBase.vue")
 );
 
-const store = useStore();
-const { youtubeSearch, searchForSongs, loadMoreSongs } = useSearchYoutube();
-const { musareSearch, searchForMusareSongs } = useSearchMusare();
-
-const { socket } = useWebsocketsStore();
-const stationStore = useStationStore();
-
 const props = defineProps({
 	modalUuid: { type: String, default: "" },
 	sector: { type: String, default: "station" },
 	disableAutoRequest: { type: Boolean, default: false }
 });
 
+const { youtubeSearch, searchForSongs, loadMoreSongs } = useSearchYoutube();
+const { musareSearch, searchForMusareSongs } = useSearchMusare();
+
+const { socket } = useWebsocketsStore();
+const stationStore = useStationStore();
+const manageStationStore = useManageStationStore(props);
+
 const tab = ref("songs");
 const sitename = ref("Musare");
 const tabs = ref({});
 
 const station = computed({
 	get() {
-		if (props.sector === "manageStation")
-			return store.state.modals.manageStation[props.modalUuid].station;
+		if (props.sector === "manageStation") return manageStationStore.station;
 		return stationStore.station;
 	},
-	set(station) {
+	set(value) {
 		if (props.sector === "manageStation")
-			store.commit(
-				`modals/manageStation/${props.modalUuid}/updateStation`,
-				station
-			);
-		else stationStore.updateStation(station);
+			manageStationStore.updateStation(value);
+		else stationStore.updateStation(value);
 	}
 });
 // const blacklist = computed({
 // 	get() {
-// 		if (props.sector === "manageStation")
-// 			return store.state.modals.manageStation[props.modalUuid]
-// 				.blacklist;
+// 		if (props.sector === "manageStation") return manageStationStore.blacklist;
 // 		return stationStore.blacklist;
 // 	},
-// 	set(blacklist) {
+// 	set(value) {
 // 		if (props.sector === "manageStation")
-// 			store.commit(
-// 				`modals/manageStation/${props.modalUuid}/setBlacklist`,
-// 				blacklist
-// 			);
-// 		else stationStore.setBlacklist(blacklist);
+// 			manageStationStore.setBlacklist(value);
+// 		else stationStore.setBlacklist(value);
 // 	}
 // });
 const songsList = computed({
 	get() {
 		if (props.sector === "manageStation")
-			return store.state.modals.manageStation[props.modalUuid].songsList;
+			return manageStationStore.songsList;
 		return stationStore.songsList;
 	},
-	set(songsList) {
+	set(value) {
 		if (props.sector === "manageStation")
-			store.commit(
-				`modals/manageStation/${props.modalUuid}/updateSongsList`,
-				songsList
-			);
-		else stationStore.updateSongsList(songsList);
+			manageStationStore.updateSongsList(value);
+		else stationStore.updateSongsList(value);
 	}
 });
 const musareResultsLeftCount = computed(

frontend/src/components/modals/ManageStation/Settings.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import Toast from "toasters";
-import { useModalState, useModalActions } from "@/vuex_helpers";
+import { storeToRefs } from "pinia";
 import validation from "@/validation";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useManageStationStore } from "@/stores/manageStation";
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
@@ -11,18 +12,9 @@ const props = defineProps({
 
 const { socket } = useWebsocketsStore();
 
-const modalState = useModalState("modals/manageStation/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
-const station = computed(() => modalState.station);
-
-const { editStation } = useModalActions(
-	"modals/manageStation/MODAL_UUID",
-	["editStation"],
-	{
-		modalUuid: props.modalUuid
-	}
-);
+const manageStationStore = useManageStationStore(props);
+const { station } = storeToRefs(manageStationStore);
+const { editStation } = manageStationStore;
 
 const localStation = ref({
 	name: "",

frontend/src/components/modals/ManageStation/index.vue

@@ -3,16 +3,15 @@ import { useStore } from "vuex";
 import {
 	defineAsyncComponent,
 	ref,
-	computed,
 	watch,
 	onMounted,
 	onBeforeUnmount
 } from "vue";
 import Toast from "toasters";
 import { storeToRefs } from "pinia";
-import { useModalState, useModalActions } from "@/vuex_helpers";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useUserAuthStore } from "@/stores/userAuth";
+import { useManageStationStore } from "@/stores/manageStation";
 
 const Queue = defineAsyncComponent(() => import("@/components/Queue.vue"));
 const SongItem = defineAsyncComponent(
@@ -33,26 +32,25 @@ const props = defineProps({
 
 const store = useStore();
 
+const tabs = ref([]);
+
 const userAuthStore = useUserAuthStore();
 const { loggedIn, userId, role } = storeToRefs(userAuthStore);
 
 const { socket } = useWebsocketsStore();
 
-const modalState = useModalState("modals/manageStation/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
-const stationId = computed(() => modalState.stationId);
-const sector = computed(() => modalState.sector);
-const tab = computed(() => modalState.tab);
-const station = computed(() => modalState.station);
-const stationPlaylist = computed(() => modalState.stationPlaylist);
-const autofill = computed(() => modalState.autofill);
-const blacklist = computed(() => modalState.blacklist);
-const stationPaused = computed(() => modalState.stationPaused);
-const currentSong = computed(() => modalState.currentSong);
-
-const tabs = ref([]);
-
+const manageStationStore = useManageStationStore(props);
+const {
+	stationId,
+	sector,
+	tab,
+	station,
+	stationPlaylist,
+	autofill,
+	blacklist,
+	stationPaused,
+	currentSong
+} = storeToRefs(manageStationStore);
 const {
 	editStation,
 	setAutofillPlaylists,
@@ -65,25 +63,7 @@ const {
 	updateCurrentSong,
 	updateStation,
 	updateIsFavorited
-} = useModalActions(
-	"modals/manageStation/MODAL_UUID",
-	[
-		"editStation",
-		"setAutofillPlaylists",
-		"setBlacklist",
-		"clearStation",
-		"updateSongsList",
-		"updateStationPlaylist",
-		"repositionSongInList",
-		"updateStationPaused",
-		"updateCurrentSong",
-		"updateStation",
-		"updateIsFavorited"
-	],
-	{
-		modalUuid: props.modalUuid
-	}
-);
+} = manageStationStore;
 
 const closeCurrentModal = () =>
 	store.dispatch("modalVisibility/closeCurrentModal");
@@ -91,7 +71,7 @@ const closeCurrentModal = () =>
 const showTab = payload => {
 	if (tabs.value[`${payload}-tab`])
 		tabs.value[`${payload}-tab`].scrollIntoView({ block: "nearest" });
-	store.dispatch(`modals/manageStation/${props.modalUuid}/showTab`, payload);
+	manageStationStore.showTab(payload);
 };
 
 const isOwner = () =>
@@ -407,8 +387,8 @@ onBeforeUnmount(() => {
 	if (isOwnerOrAdmin()) showTab("settings");
 	clearStation();
 
-	// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-	store.unregisterModule(["modals", "manageStation", props.modalUuid]);
+	// Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
+	manageStationStore.$dispose();
 });
 </script>
 

frontend/src/store/index.ts

@@ -13,7 +13,6 @@ export default createStore({
 		modals: {
 			namespaced: true,
 			modules: {
-				manageStation: emptyModule,
 				whatIsNew: 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 manageStation from "./modals/manageStation";
 import report from "./modals/report";
 import viewReport from "./modals/viewReport";
 import viewApiRequest from "./modals/viewApiRequest";
@@ -19,6 +18,7 @@ import { useCreateStationStore } from "@/stores/createStation";
 import { useEditNewsStore } from "@/stores/editNews";
 import { useEditPlaylistStore } from "@/stores/editPlaylist";
 import { useImportAlbumStore } from "@/stores/importAlbum";
+import { useManageStationStore } from "@/stores/manageStation";
 
 const state = {
 	modals: {},
@@ -34,12 +34,12 @@ const piniaStores = [
 	"createStation",
 	"editNews",
 	"editPlaylist",
-	"importAlbum"
+	"importAlbum",
+	"manageStation"
 ];
 
 const modalModules = {
 	whatIsNew,
-	manageStation,
 	report,
 	viewReport,
 	viewApiRequest,
@@ -134,11 +134,14 @@ const mutations = {
 				case "importAlbum":
 					store = useImportAlbumStore({ modalUuid: uuid });
 					break;
+				case "manageStation":
+					store = useManageStationStore({ modalUuid: uuid });
+					break;
 				default:
 					break;
 			}
 
-			if (data) store.init(data);
+			if (typeof store.init === "function" && data) store.init(data);
 		} else if (modalModules[modal]) {
 			this.registerModule(["modals", modal, uuid], modalModules[modal]);
 			if (data) this.dispatch(`modals/${modal}/${uuid}/init`, data);

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

@@ -1,18 +0,0 @@
-/* eslint no-param-reassign: 0 */
-
-export default {
-	namespaced: true,
-	state: {
-		editImportedSongs: false
-	},
-	getters: {},
-	actions: {
-		updateEditImportedSongs: ({ commit }, editImportedSongs) =>
-			commit("updateEditImportedSongs", editImportedSongs)
-	},
-	mutations: {
-		updateEditImportedSongs(state, editImportedSongs) {
-			state.editImportedSongs = editImportedSongs;
-		}
-	}
-};

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

@@ -1,104 +0,0 @@
-/* eslint no-param-reassign: 0 */
-
-export default {
-	namespaced: true,
-	state: {
-		stationId: null,
-		sector: "admin",
-		tab: "settings",
-		station: {},
-		stationPlaylist: { songs: [] },
-		autofill: [],
-		blacklist: [],
-		songsList: [],
-		stationPaused: true,
-		currentSong: {}
-	},
-	getters: {},
-	actions: {
-		init: ({ commit }, data) => commit("init", data),
-		showTab: ({ commit }, tab) => commit("showTab", tab),
-		editStation: ({ commit }, station) => commit("editStation", station),
-		setAutofillPlaylists: ({ commit }, autofillPlaylists) =>
-			commit("setAutofillPlaylists", autofillPlaylists),
-		setBlacklist: ({ commit }, blacklist) =>
-			commit("setBlacklist", blacklist),
-		clearStation: ({ commit }) => commit("clearStation"),
-		updateSongsList: ({ commit }, songsList) =>
-			commit("updateSongsList", songsList),
-		updateStationPlaylist: ({ commit }, stationPlaylist) =>
-			commit("updateStationPlaylist", stationPlaylist),
-		repositionSongInList: ({ commit }, song) =>
-			commit("repositionSongInList", song),
-		updateStationPaused: ({ commit }, stationPaused) =>
-			commit("updateStationPaused", stationPaused),
-		updateCurrentSong: ({ commit }, currentSong) =>
-			commit("updateCurrentSong", currentSong),
-		updateStation: ({ commit }, station) =>
-			commit("updateStation", station),
-		updateIsFavorited: ({ commit }, isFavorited) =>
-			commit("updateIsFavorited", isFavorited)
-	},
-	mutations: {
-		init(state, { stationId, sector }) {
-			state.stationId = stationId;
-			if (sector) state.sector = sector;
-		},
-		showTab(state, tab) {
-			state.tab = tab;
-		},
-		editStation(state, station) {
-			state.station = JSON.parse(JSON.stringify(station));
-		},
-		setAutofillPlaylists(state, autofillPlaylists) {
-			state.autofill = JSON.parse(JSON.stringify(autofillPlaylists));
-		},
-		setBlacklist(state, blacklist) {
-			state.blacklist = JSON.parse(JSON.stringify(blacklist));
-		},
-		clearStation(state) {
-			state.station = {};
-			state.stationPlaylist = { songs: [] };
-			state.autofill = [];
-			state.blacklist = [];
-			state.songsList = [];
-			state.stationPaused = true;
-			state.currentSong = {};
-		},
-		updateSongsList(state, songsList) {
-			state.songsList = songsList;
-		},
-		updateStationPlaylist(state, stationPlaylist) {
-			state.stationPlaylist = stationPlaylist;
-		},
-		repositionSongInList(state, song) {
-			if (
-				state.songsList[song.newIndex] &&
-				state.songsList[song.newIndex].youtubeId === song.youtubeId
-			)
-				return;
-
-			const { songsList } = state;
-
-			songsList.splice(
-				song.newIndex,
-				0,
-				songsList.splice(song.oldIndex, 1)[0]
-			);
-
-			state.songsList = songsList;
-		},
-		updateStationPaused(state, stationPaused) {
-			state.stationPaused = stationPaused;
-		},
-		updateCurrentSong(state, currentSong) {
-			state.currentSong = currentSong;
-		},
-		updateStation(state, station) {
-			state.station = { ...state.station, ...station };
-		},
-		updateIsFavorited(state, isFavorited) {
-			state.station.isFavorited = isFavorited;
-		}
-	}
-};

frontend/src/stores/manageStation.ts

@@ -0,0 +1,79 @@
+import { defineStore } from "pinia";
+
+// TODO fix/decide eslint rule properly
+// eslint-disable-next-line
+export const useManageStationStore = props => {
+	const { modalUuid } = props;
+	return defineStore(`manageStation-${modalUuid}`, {
+		state: () => ({
+			stationId: null,
+			sector: "admin",
+			tab: "settings",
+			station: {},
+			stationPlaylist: { songs: [] },
+			autofill: [],
+			blacklist: [],
+			songsList: [],
+			stationPaused: true,
+			currentSong: {}
+		}),
+		actions: {
+			init({ stationId, sector }) {
+				this.stationId = stationId;
+				if (sector) this.sector = sector;
+			},
+			showTab(tab) {
+				this.tab = tab;
+			},
+			editStation(station) {
+				this.station = JSON.parse(JSON.stringify(station));
+			},
+			setAutofillPlaylists(autofillPlaylists) {
+				this.autofill = JSON.parse(JSON.stringify(autofillPlaylists));
+			},
+			setBlacklist(blacklist) {
+				this.blacklist = JSON.parse(JSON.stringify(blacklist));
+			},
+			clearStation() {
+				this.station = {};
+				this.stationPlaylist = { songs: [] };
+				this.autofill = [];
+				this.blacklist = [];
+				this.songsList = [];
+				this.stationPaused = true;
+				this.currentSong = {};
+			},
+			updateSongsList(songsList) {
+				this.songsList = songsList;
+			},
+			updateStationPlaylist(stationPlaylist) {
+				this.stationPlaylist = stationPlaylist;
+			},
+			repositionSongInList(song) {
+				if (
+					this.songsList[song.newIndex] &&
+					this.songsList[song.newIndex].youtubeId === song.youtubeId
+				)
+					return;
+
+				this.songsList.splice(
+					song.newIndex,
+					0,
+					this.songsList.splice(song.oldIndex, 1)[0]
+				);
+			},
+			updateStationPaused(stationPaused) {
+				this.stationPaused = stationPaused;
+			},
+			updateCurrentSong(currentSong) {
+				this.currentSong = currentSong;
+			},
+			updateStation(station) {
+				this.station = { ...this.station, ...station };
+			},
+			updateIsFavorited(isFavorited) {
+				this.station.isFavorited = isFavorited;
+			}
+		}
+	})();
+};