refactor: Converted importAlbum Vuex store to Pinia store

frontend/src/components/modals/ImportAlbum.vue

@@ -10,8 +10,9 @@ import {
 } from "vue";
 import Toast from "toasters";
 import { Sortable } from "sortablejs-vue3";
+import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
-import { useModalState, useModalActions } from "@/vuex_helpers";
+import { useImportAlbumStore } from "@/stores/importAlbum";
 import ws from "@/ws";
 
 const SongItem = defineAsyncComponent(
@@ -26,13 +27,9 @@ const store = useStore();
 
 const { socket } = useWebsocketsStore();
 
-const modalState = useModalState("modals/importAlbum/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
-const discogsTab = computed(() => modalState.discogsTab);
-const discogsAlbum = computed(() => modalState.discogsAlbum);
-const prefillDiscogs = computed(() => modalState.prefillDiscogs);
-
+const importAlbumStore = useImportAlbumStore(props);
+const { discogsTab, discogsAlbum, prefillDiscogs } =
+	storeToRefs(importAlbumStore);
 const {
 	toggleDiscogsAlbum,
 	setPlaylistSongs,
@@ -40,22 +37,8 @@ const {
 	selectDiscogsAlbum,
 	resetPlaylistSongs,
 	updatePlaylistSong
-} = useModalActions(
-	"modals/importAlbum/MODAL_UUID",
-	[
-		"toggleDiscogsAlbum",
-		"setPlaylistSongs",
-		"updatePlaylistSongs",
-		"selectDiscogsAlbum",
-		"updateEditingSongs",
-		"resetPlaylistSongs",
-		"togglePrefillDiscogs",
-		"updatePlaylistSong"
-	],
-	{
-		modalUuid: props.modalUuid
-	}
-);
+} = importAlbumStore;
+
 const openModal = payload =>
 	store.dispatch("modalVisibility/openModal", payload);
 
@@ -77,21 +60,15 @@ const discogs = ref({
 const discogsTabs = ref([]);
 
 const playlistSongs = computed({
-	get: () => store.state.modals.importAlbum[props.modalUuid].playlistSongs,
-	set: playlistSongs => {
-		store.commit(
-			`modals/importAlbum/${props.modalUuid}/updatePlaylistSongs`,
-			playlistSongs
-		);
+	get: () => importAlbumStore.playlistSongs,
+	set: value => {
+		importAlbumStore.updatePlaylistSongs(value);
 	}
 });
 const localPrefillDiscogs = computed({
-	get: () => store.state.modals.importAlbum[props.modalUuid].prefillDiscogs,
-	set: prefillDiscogs => {
-		store.commit(
-			`modals/importAlbum/${props.modalUuid}/updatePrefillDiscogs`,
-			prefillDiscogs
-		);
+	get: () => importAlbumStore.prefillDiscogs,
+	set: value => {
+		importAlbumStore.updatePrefillDiscogs(value);
 	}
 });
 
@@ -100,10 +77,7 @@ const showDiscogsTab = tab => {
 		discogsTabs.value[`discogs-${tab}-tab`].scrollIntoView({
 			block: "nearest"
 		});
-	return store.dispatch(
-		`modals/importAlbum/${props.modalUuid}/showDiscogsTab`,
-		tab
-	);
+	return importAlbumStore.showDiscogsTab(tab);
 };
 
 const init = () => {
@@ -381,8 +355,8 @@ onBeforeUnmount(() => {
 	setPlaylistSongs([]);
 	showDiscogsTab("search");
 	socket.dispatch("apis.leaveRoom", "import-album");
-	// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-	store.unregisterModule(["modals", "importAlbum", props.modalUuid]);
+	// Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
+	importAlbumStore.$dispose();
 });
 </script>
 

frontend/src/store/index.ts

@@ -13,7 +13,6 @@ export default createStore({
 		modals: {
 			namespaced: true,
 			modules: {
-				importAlbum: emptyModule,
 				manageStation: emptyModule,
 				whatIsNew: emptyModule,
 				viewApiRequest: emptyModule,

frontend/src/store/modules/modalVisibility.ts

@@ -7,7 +7,6 @@ import report from "./modals/report";
 import viewReport from "./modals/viewReport";
 import viewApiRequest from "./modals/viewApiRequest";
 import viewPunishment from "./modals/viewPunishment";
-import importAlbum from "./modals/importAlbum";
 import viewYoutubeVideo from "./modals/viewYoutubeVideo";
 import removeAccount from "./modals/removeAccount";
 
@@ -19,6 +18,7 @@ import { useConfirmStore } from "@/stores/confirm";
 import { useCreateStationStore } from "@/stores/createStation";
 import { useEditNewsStore } from "@/stores/editNews";
 import { useEditPlaylistStore } from "@/stores/editPlaylist";
+import { useImportAlbumStore } from "@/stores/importAlbum";
 
 const state = {
 	modals: {},
@@ -33,7 +33,8 @@ const piniaStores = [
 	"confirm",
 	"createStation",
 	"editNews",
-	"editPlaylist"
+	"editPlaylist",
+	"importAlbum"
 ];
 
 const modalModules = {
@@ -43,7 +44,6 @@ const modalModules = {
 	viewReport,
 	viewApiRequest,
 	viewPunishment,
-	importAlbum,
 	viewYoutubeVideo,
 	removeAccount
 };
@@ -131,6 +131,9 @@ const mutations = {
 				case "editPlaylist":
 					store = useEditPlaylistStore({ modalUuid: uuid });
 					break;
+				case "importAlbum":
+					store = useImportAlbumStore({ modalUuid: uuid });
+					break;
 				default:
 					break;
 			}

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

@@ -1,85 +0,0 @@
-/* eslint no-param-reassign: 0 */
-
-export default {
-	namespaced: true,
-	state: {
-		discogsAlbum: {},
-		originalPlaylistSongs: [],
-		playlistSongs: [],
-		editingSongs: false,
-		discogsTab: "search",
-		prefillDiscogs: false
-	},
-	getters: {},
-	actions: {
-		init: ({ commit }, data) => commit("init", data),
-		showDiscogsTab: ({ commit }, tab) => commit("showDiscogsTab", tab),
-		selectDiscogsAlbum: ({ commit }, discogsAlbum) =>
-			commit("selectDiscogsAlbum", discogsAlbum),
-		toggleDiscogsAlbum: ({ commit }) => {
-			commit("toggleDiscogsAlbum");
-		},
-		setPlaylistSongs: ({ commit }, playlistSongs) =>
-			commit("setPlaylistSongs", playlistSongs),
-		updatePlaylistSongs: ({ commit }, playlistSongs) =>
-			commit("updatePlaylistSongs", playlistSongs),
-		updateEditingSongs: ({ commit }, editingSongs) =>
-			commit("updateEditingSongs", editingSongs),
-		resetPlaylistSongs: ({ commit }) => commit("resetPlaylistSongs"),
-		updatePrefillDiscogs: ({ commit }, updatedPrefill) =>
-			commit("updatePrefillDiscogs", updatedPrefill),
-		updatePlaylistSong: ({ commit }, updatedSong) =>
-			commit("updatePlaylistSong", updatedSong)
-	},
-	mutations: {
-		init(state, { songs }) {
-			state.originalPlaylistSongs = JSON.parse(JSON.stringify(songs));
-			state.playlistSongs = JSON.parse(JSON.stringify(songs));
-		},
-		showDiscogsTab(state, tab) {
-			state.discogsTab = tab;
-		},
-		selectDiscogsAlbum(state, discogsAlbum) {
-			state.discogsAlbum = JSON.parse(JSON.stringify(discogsAlbum));
-			if (state.discogsAlbum && state.discogsAlbum.tracks) {
-				state.tracks = state.discogsAlbum.tracks.map(track => ({
-					...track,
-					songs: []
-				}));
-			}
-		},
-		toggleDiscogsAlbum(state) {
-			state.discogsAlbum.expanded = !state.discogsAlbum.expanded;
-		},
-		setPlaylistSongs(state, playlistSongs) {
-			state.originalPlaylistSongs = JSON.parse(
-				JSON.stringify(playlistSongs)
-			);
-			state.playlistSongs = JSON.parse(JSON.stringify(playlistSongs));
-		},
-		updatePlaylistSongs(state, playlistSongs) {
-			state.playlistSongs = JSON.parse(JSON.stringify(playlistSongs));
-		},
-		updateEditingSongs(state, editingSongs) {
-			state.editingSongs = editingSongs;
-		},
-		resetPlaylistSongs(state) {
-			state.playlistSongs = JSON.parse(
-				JSON.stringify(state.originalPlaylistSongs)
-			);
-		},
-		updatePrefillDiscogs(state, updatedPrefill) {
-			state.prefillDiscogs = updatedPrefill;
-		},
-		updatePlaylistSong(state, updatedSong) {
-			state.playlistSongs.forEach((song, index) => {
-				if (song._id === updatedSong._id)
-					state.playlistSongs[index] = updatedSong;
-			});
-			state.originalPlaylistSongs.forEach((song, index) => {
-				if (song._id === updatedSong._id)
-					state.originalPlaylistSongs[index] = updatedSong;
-			});
-		}
-	}
-};

frontend/src/stores/importAlbum.ts

@@ -0,0 +1,68 @@
+import { defineStore } from "pinia";
+
+// TODO fix/decide eslint rule properly
+// eslint-disable-next-line
+export const useImportAlbumStore = props => {
+	const { modalUuid } = props;
+	return defineStore(`importAlbum-${modalUuid}`, {
+		state: () => ({
+			discogsAlbum: {},
+			originalPlaylistSongs: [],
+			playlistSongs: [],
+			editingSongs: false,
+			discogsTab: "search",
+			prefillDiscogs: false
+		}),
+		actions: {
+			init({ songs }) {
+				this.originalPlaylistSongs = JSON.parse(JSON.stringify(songs));
+				this.playlistSongs = JSON.parse(JSON.stringify(songs));
+			},
+			showDiscogsTab(tab) {
+				this.discogsTab = tab;
+			},
+			selectDiscogsAlbum(discogsAlbum) {
+				this.discogsAlbum = JSON.parse(JSON.stringify(discogsAlbum));
+				if (this.discogsAlbum && this.discogsAlbum.tracks) {
+					this.tracks = this.discogsAlbum.tracks.map(track => ({
+						...track,
+						songs: []
+					}));
+				}
+			},
+			toggleDiscogsAlbum() {
+				this.discogsAlbum.expanded = !this.discogsAlbum.expanded;
+			},
+			setPlaylistSongs(playlistSongs) {
+				this.originalPlaylistSongs = JSON.parse(
+					JSON.stringify(playlistSongs)
+				);
+				this.playlistSongs = JSON.parse(JSON.stringify(playlistSongs));
+			},
+			updatePlaylistSongs(playlistSongs) {
+				this.playlistSongs = JSON.parse(JSON.stringify(playlistSongs));
+			},
+			updateEditingSongs(editingSongs) {
+				this.editingSongs = editingSongs;
+			},
+			resetPlaylistSongs() {
+				this.playlistSongs = JSON.parse(
+					JSON.stringify(this.originalPlaylistSongs)
+				);
+			},
+			updatePrefillDiscogs(updatedPrefill) {
+				this.prefillDiscogs = updatedPrefill;
+			},
+			updatePlaylistSong(updatedSong) {
+				this.playlistSongs.forEach((song, index) => {
+					if (song._id === updatedSong._id)
+						this.playlistSongs[index] = updatedSong;
+				});
+				this.originalPlaylistSongs.forEach((song, index) => {
+					if (song._id === updatedSong._id)
+						this.originalPlaylistSongs[index] = updatedSong;
+				});
+			}
+		}
+	})();
+};