refactor: Converted editPlaylist Vuex store to Pinia store

frontend/src/components/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref, watch, onMounted } from "vue";
-import { useModalState } from "@/vuex_helpers";
+import { storeToRefs } from "pinia";
 import useSearchYoutube from "@/composables/useSearchYoutube";
 import useSearchMusare from "@/composables/useSearchMusare";
+import { useEditPlaylistStore } from "@/stores/editPlaylist";
 
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")
@@ -15,12 +16,8 @@ const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });
 
-const { playlistId, playlist } = useModalState(
-	"modals/editPlaylist/MODAL_UUID",
-	{
-		modalUuid: props.modalUuid
-	}
-);
+const editPlaylistStore = useEditPlaylistStore(props);
+const { playlistId, playlist } = storeToRefs(editPlaylistStore);
 
 const sitename = ref("Musare");
 
@@ -43,7 +40,7 @@ watch(
 	() => youtubeSearch.value.songs.results,
 	songs => {
 		songs.forEach((searchItem, index) =>
-			playlist.songs.find(song => {
+			playlist.value.songs.find(song => {
 				if (song.youtubeId === searchItem.id)
 					youtubeSearch.value.songs.results[index].isAddedToQueue =
 						true;
@@ -56,7 +53,7 @@ watch(
 	() => musareSearch.value.results,
 	songs => {
 		songs.forEach((searchItem, index) =>
-			playlist.songs.find(song => {
+			playlist.value.songs.find(song => {
 				if (song._id === searchItem._id)
 					musareSearch.value.results[index].isAddedToQueue = true;
 
@@ -66,10 +63,10 @@ watch(
 	}
 );
 watch(
-	() => playlist.songs,
+	() => playlist.value.songs,
 	() => {
 		youtubeSearch.value.songs.results.forEach((searchItem, index) =>
-			playlist.songs.find(song => {
+			playlist.value.songs.find(song => {
 				youtubeSearch.value.songs.results[index].isAddedToQueue = false;
 				if (song.youtubeId === searchItem.id)
 					youtubeSearch.value.songs.results[index].isAddedToQueue =
@@ -79,7 +76,7 @@ watch(
 			})
 		);
 		musareSearch.value.results.forEach((searchItem, index) =>
-			playlist.songs.find(song => {
+			playlist.value.songs.find(song => {
 				musareSearch.value.results[index].isAddedToQueue = false;
 				if (song.youtubeId === searchItem.youtubeId)
 					musareSearch.value.results[index].isAddedToQueue = true;

frontend/src/components/modals/EditPlaylist/Tabs/ImportPlaylists.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import Toast from "toasters";
-import { useModalState } from "@/vuex_helpers";
+import { storeToRefs } from "pinia";
 import useSearchYoutube from "@/composables/useSearchYoutube";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useLongJobsStore } from "@/stores/longJobs";
+import { useEditPlaylistStore } from "@/stores/editPlaylist";
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
@@ -12,10 +12,8 @@ const props = defineProps({
 
 const { socket } = useWebsocketsStore();
 
-const modalState = useModalState("modals/editPlaylist/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
-const playlist = computed(() => modalState.playlist);
+const editPlaylistStore = useEditPlaylistStore(props);
+const { playlist } = storeToRefs(editPlaylistStore);
 
 const { setJob } = useLongJobsStore();
 

frontend/src/components/modals/EditPlaylist/Tabs/Settings.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import Toast from "toasters";
 import { storeToRefs } from "pinia";
-import { useModalState } from "@/vuex_helpers";
 import validation from "@/validation";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useUserAuthStore } from "@/stores/userAuth";
+import { useEditPlaylistStore } from "@/stores/editPlaylist";
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
@@ -16,10 +15,8 @@ const { userId, role: userRole } = storeToRefs(userAuthStore);
 
 const { socket } = useWebsocketsStore();
 
-const modalState = useModalState("modals/editPlaylist/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
-const playlist = computed(() => modalState.playlist);
+const editPlaylistStore = useEditPlaylistStore(props);
+const { playlist } = storeToRefs(editPlaylistStore);
 
 const isEditable = () =>
 	(playlist.value.type === "user" ||

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

@@ -11,9 +11,9 @@ import { Sortable } from "sortablejs-vue3";
 import Toast from "toasters";
 import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useEditPlaylistStore } from "@/stores/editPlaylist";
 import { useStationStore } from "@/stores/station";
 import { useUserAuthStore } from "@/stores/userAuth";
-import { useModalState, useModalActions } from "@/vuex_helpers";
 import ws from "@/ws";
 import utils from "@/utils";
 
@@ -33,6 +33,7 @@ const props = defineProps({
 const store = useStore();
 
 const { socket } = useWebsocketsStore();
+const editPlaylistStore = useEditPlaylistStore(props);
 const stationStore = useStationStore();
 const userAuthStore = useUserAuthStore();
 
@@ -46,42 +47,21 @@ const tabs = ref([]);
 const songItems = ref([]);
 
 const playlistSongs = computed({
-	get: () => store.state.modals.editPlaylist[props.modalUuid].playlist.songs,
+	get: () => editPlaylistStore.playlist.songs,
 	set: value => {
-		store.commit(
-			`modals/editPlaylist/${props.modalUuid}/updatePlaylistSongs`,
-			value
-		);
+		editPlaylistStore.updatePlaylistSongs(value);
 	}
 });
 
-const modalState = useModalState("modals/editPlaylist/MODAL_UUID", {
-	modalUuid: props.modalUuid
-});
-const playlistId = computed(() => modalState.playlistId);
-const tab = computed(() => modalState.tab);
-const playlist = computed(() => modalState.playlist);
-
+const { playlistId, tab, playlist } = storeToRefs(editPlaylistStore);
 const { setPlaylist, clearPlaylist, addSong, removeSong, repositionedSong } =
-	useModalActions(
-		"modals/editPlaylist/MODAL_UUID",
-		[
-			"setPlaylist",
-			"clearPlaylist",
-			"addSong",
-			"removeSong",
-			"repositionedSong"
-		],
-		{
-			modalUuid: props.modalUuid
-		}
-	);
+	editPlaylistStore;
 
 const closeCurrentModal = () =>
 	store.dispatch("modalVisibility/closeCurrentModal");
 const showTab = payload => {
 	tabs.value[`${payload}-tab`].scrollIntoView({ block: "nearest" });
-	store.dispatch(`modals/editPlaylist/${props.modalUuid}/showTab`, payload);
+	editPlaylistStore.showTab(payload);
 };
 
 const isEditable = () =>
@@ -323,8 +303,8 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
 	clearPlaylist();
-	// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-	store.unregisterModule(["modals", "editPlaylist", props.modalUuid]);
+	// Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
+	editPlaylistStore.$dispose();
 });
 </script>
 

frontend/src/store/index.ts

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

frontend/src/store/modules/modalVisibility.ts

@@ -3,7 +3,6 @@ import ws from "@/ws";
 
 import whatIsNew from "./modals/whatIsNew";
 import manageStation from "./modals/manageStation";
-import editPlaylist from "./modals/editPlaylist";
 import report from "./modals/report";
 import viewReport from "./modals/viewReport";
 import viewApiRequest from "./modals/viewApiRequest";
@@ -19,6 +18,7 @@ import { useBulkActionsStore } from "@/stores/bulkActions";
 import { useConfirmStore } from "@/stores/confirm";
 import { useCreateStationStore } from "@/stores/createStation";
 import { useEditNewsStore } from "@/stores/editNews";
+import { useEditPlaylistStore } from "@/stores/editPlaylist";
 
 const state = {
 	modals: {},
@@ -32,13 +32,13 @@ const piniaStores = [
 	"bulkActions",
 	"confirm",
 	"createStation",
-	"editNews"
+	"editNews",
+	"editPlaylist"
 ];
 
 const modalModules = {
 	whatIsNew,
 	manageStation,
-	editPlaylist,
 	report,
 	viewReport,
 	viewApiRequest,
@@ -128,6 +128,9 @@ const mutations = {
 				case "editNews":
 					store = useEditNewsStore({ modalUuid: uuid });
 					break;
+				case "editPlaylist":
+					store = useEditPlaylistStore({ modalUuid: uuid });
+					break;
 				default:
 					break;
 			}

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

@@ -1,61 +0,0 @@
-/* eslint no-param-reassign: 0 */
-
-export default {
-	namespaced: true,
-	state: {
-		playlistId: null,
-		tab: "settings",
-		playlist: { songs: [] }
-	},
-	getters: {},
-	actions: {
-		init: ({ commit }, data) => commit("init", data),
-		showTab: ({ commit }, tab) => commit("showTab", tab),
-		setPlaylist: ({ commit }, playlist) => commit("setPlaylist", playlist),
-		clearPlaylist: ({ commit }) => commit("clearPlaylist"),
-		addSong: ({ commit }, song) => commit("addSong", song),
-		removeSong: ({ commit }, youtubeId) => commit("removeSong", youtubeId),
-		updatePlaylistSongs: ({ commit }, playlistSongs) =>
-			commit("updatePlaylistSongs", playlistSongs),
-		repositionedSong: ({ commit }, song) => commit("repositionedSong", song)
-	},
-	mutations: {
-		init(state, { playlistId }) {
-			state.playlistId = playlistId;
-		},
-		showTab(state, tab) {
-			state.tab = tab;
-		},
-		setPlaylist(state, playlist) {
-			state.playlist = { ...playlist };
-			state.playlist.songs.sort((a, b) => a.position - b.position);
-		},
-		clearPlaylist(state) {
-			state.playlist = { songs: [] };
-		},
-		addSong(state, song) {
-			state.playlist.songs.push(song);
-		},
-		removeSong(state, youtubeId) {
-			state.playlist.songs = state.playlist.songs.filter(
-				song => song.youtubeId !== youtubeId
-			);
-		},
-		updatePlaylistSongs(state, playlistSongs) {
-			state.playlist.songs = playlistSongs;
-		},
-		repositionedSong(state, song) {
-			if (
-				state.playlist.songs[song.newIndex] &&
-				state.playlist.songs[song.newIndex].youtubeId === song.youtubeId
-			)
-				return;
-
-			state.playlist.songs.splice(
-				song.newIndex,
-				0,
-				state.playlist.songs.splice(song.oldIndex, 1)[0]
-			);
-		}
-	}
-};

frontend/src/stores/editPlaylist.ts

@@ -0,0 +1,54 @@
+import { defineStore } from "pinia";
+
+// TODO fix/decide eslint rule properly
+// eslint-disable-next-line
+export const useEditPlaylistStore = props => {
+	const { modalUuid } = props;
+	return defineStore(`editPlaylist-${modalUuid}`, {
+		state: () => ({
+			playlistId: null,
+			tab: "settings",
+			playlist: { songs: [] }
+		}),
+		actions: {
+			init({ playlistId }) {
+				this.playlistId = playlistId;
+			},
+			showTab(tab) {
+				this.tab = tab;
+			},
+			setPlaylist(playlist) {
+				this.playlist = { ...playlist };
+				this.playlist.songs.sort((a, b) => a.position - b.position);
+			},
+			clearPlaylist() {
+				this.playlist = { songs: [] };
+			},
+			addSong(song) {
+				this.playlist.songs.push(song);
+			},
+			removeSong(youtubeId) {
+				this.playlist.songs = this.playlist.songs.filter(
+					song => song.youtubeId !== youtubeId
+				);
+			},
+			updatePlaylistSongs(playlistSongs) {
+				this.playlist.songs = playlistSongs;
+			},
+			repositionedSong(song) {
+				if (
+					this.playlist.songs[song.newIndex] &&
+					this.playlist.songs[song.newIndex].youtubeId ===
+						song.youtubeId
+				)
+					return;
+
+				this.playlist.songs.splice(
+					song.newIndex,
+					0,
+					this.playlist.songs.splice(song.oldIndex, 1)[0]
+				);
+			}
+		}
+	})();
+};