refactor: Converted longJobs VueX store into a Pinia store

frontend/src/components/LongJobs.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useStore } from "vuex";
 import { defineAsyncComponent, ref, computed, onMounted } from "vue";
+import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useLongJobsStore } from "@/stores/longJobs";
 
 const FloatingBox = defineAsyncComponent(
 	() => import("@/components/FloatingBox.vue")
@@ -12,15 +14,12 @@ const store = useStore();
 const body = ref(document.body);
 
 const loggedIn = computed(() => store.state.user.auth.loggedIn);
-const activeJobs = computed(() => store.state.longJobs.activeJobs);
 
 const { socket } = useWebsocketsStore();
 
-const setJob = payload => store.dispatch("longJobs/setJob", payload);
-
-const setJobs = payload => store.dispatch("longJobs/setJobs", payload);
-
-const removeJob = payload => store.dispatch("longJobs/removeJob", payload);
+const longJobsStore = useLongJobsStore();
+const { activeJobs } = storeToRefs(longJobsStore);
+const { setJob, setJobs, removeJob } = longJobsStore;
 
 const remove = job => {
 	if (job.status === "success" || job.status === "error") {

frontend/src/components/RunJobDropdown.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useStore } from "vuex";
 import { ref } from "vue";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useLongJobsStore } from "@/stores/longJobs";
 
 defineProps({
 	jobs: { type: Array, default: () => [] }
@@ -9,11 +9,9 @@ defineProps({
 
 const showJobDropdown = ref(false);
 
-const store = useStore();
-
 const { socket } = useWebsocketsStore();
 
-const setJob = payload => store.dispatch("longJobs/setJob", payload);
+const { setJob } = useLongJobsStore();
 
 const runJob = job => {
 	let id;

frontend/src/components/modals/BulkActions.vue

@@ -3,6 +3,7 @@ import { useStore } from "vuex";
 import { ref, defineAsyncComponent, onMounted, onBeforeUnmount } from "vue";
 import Toast from "toasters";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useLongJobsStore } from "@/stores/longJobs";
 import { useModalState } from "@/vuex_helpers";
 import ws from "@/ws";
 
@@ -18,7 +19,8 @@ const store = useStore();
 
 const closeCurrentModal = () =>
 	store.dispatch("modalVisibility/closeCurrentModal");
-const setJob = payload => store.dispatch("longJobs/setJob", payload);
+
+const { setJob } = useLongJobsStore();
 
 const { socket } = useWebsocketsStore();
 

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

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import { useStore } from "vuex";
 import { computed } from "vue";
 import Toast from "toasters";
 import { useModalState } from "@/vuex_helpers";
 import useSearchYoutube from "@/composables/useSearchYoutube";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useLongJobsStore } from "@/stores/longJobs";
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });
 
-const store = useStore();
-
 const { socket } = useWebsocketsStore();
 
 const modalState = useModalState("modals/editPlaylist/MODAL_UUID", {
@@ -19,7 +17,7 @@ const modalState = useModalState("modals/editPlaylist/MODAL_UUID", {
 });
 const playlist = computed(() => modalState.playlist);
 
-const setJob = payload => store.dispatch("longJobs/setJob", payload);
+const { setJob } = useLongJobsStore();
 
 const { youtubeSearch } = useSearchYoutube();
 

frontend/src/pages/Admin/Songs/Import.vue

@@ -4,6 +4,7 @@ import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import Toast from "toasters";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useLongJobsStore } from "@/stores/longJobs";
 
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
@@ -238,7 +239,7 @@ const events = ref({
 const openModal = payload =>
 	store.dispatch("modalVisibility/openModal", payload);
 
-const setJob = payload => store.dispatch("longJobs/setJob", payload);
+const { setJob } = useLongJobsStore();
 
 const openAdvancedTable = importJob => {
 	const filter = {

frontend/src/pages/Admin/Songs/index.vue

@@ -4,6 +4,7 @@ import { useStore } from "vuex";
 import { useRoute } from "vue-router";
 import Toast from "toasters";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useLongJobsStore } from "@/stores/longJobs";
 
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
@@ -15,7 +16,7 @@ const RunJobDropdown = defineAsyncComponent(
 const store = useStore();
 const route = useRoute();
 
-const setJob = payload => store.dispatch("longJobs/setJob", payload);
+const { setJob } = useLongJobsStore();
 
 const { socket } = useWebsocketsStore();
 

frontend/src/pages/Admin/YouTube/Videos.vue

@@ -3,6 +3,7 @@ import { defineAsyncComponent, ref } from "vue";
 import { useStore } from "vuex";
 import Toast from "toasters";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useLongJobsStore } from "@/stores/longJobs";
 
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
@@ -13,7 +14,7 @@ const RunJobDropdown = defineAsyncComponent(
 
 const store = useStore();
 
-const setJob = payload => store.dispatch("longJobs/setJob", payload);
+const { setJob } = useLongJobsStore();
 
 const { socket } = useWebsocketsStore();
 

frontend/src/store/index.ts

@@ -5,7 +5,6 @@ import user from "./modules/user";
 import modalVisibility from "./modules/modalVisibility";
 import station from "./modules/station";
 import admin from "./modules/admin";
-import longJobs from "./modules/longJobs";
 
 const emptyModule = {
 	namespaced: true
@@ -37,8 +36,7 @@ export default createStore({
 				viewYoutubeVideo: emptyModule,
 				removeAccount: emptyModule
 			}
-		},
-		longJobs
+		}
 	},
 	strict: false
 });

frontend/src/store/modules/longJobs.ts

@@ -1,56 +0,0 @@
-/* eslint no-param-reassign: 0 */
-
-const state = {
-	activeJobs: [],
-	removedJobIds: []
-};
-
-const getters = {};
-
-const actions = {
-	setJob: ({ commit }, job) => commit("setJob", job),
-	setJobs: ({ commit }, jobs) => commit("setJobs", jobs),
-	removeJob: ({ commit }, job) => commit("removeJob", job)
-};
-
-const mutations = {
-	setJob(state, { id, name, status, message }) {
-		if (state.removedJobIds.indexOf(id) === -1)
-			if (!state.activeJobs.find(activeJob => activeJob.id === id))
-				state.activeJobs.push({
-					id,
-					name,
-					status,
-					message
-				});
-			else
-				state.activeJobs.forEach((activeJob, index) => {
-					if (activeJob.id === id) {
-						state.activeJobs[index] = {
-							...state.activeJobs[index],
-							status,
-							message
-						};
-					}
-				});
-	},
-	setJobs(state, jobs) {
-		state.activeJobs = jobs;
-	},
-	removeJob(state, jobId) {
-		state.activeJobs.forEach((activeJob, index) => {
-			if (activeJob.id === jobId) {
-				state.activeJobs.splice(index, 1);
-				state.removedJobIds.push(jobId);
-			}
-		});
-	}
-};
-
-export default {
-	namespaced: true,
-	state,
-	getters,
-	actions,
-	mutations
-};

frontend/src/stores/longJobs.ts

@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+
+// TODO fix/decide eslint rule properly
+// eslint-disable-next-line
+export const useLongJobsStore = defineStore("longJobs", {
+	state: () => ({
+		activeJobs: [],
+		removedJobIds: []
+	}),
+	actions: {
+		setJob({ id, name, status, message }) {
+			if (this.removedJobIds.indexOf(id) === -1)
+				if (!this.activeJobs.find(activeJob => activeJob.id === id))
+					this.activeJobs.push({
+						id,
+						name,
+						status,
+						message
+					});
+				else
+					this.activeJobs.forEach((activeJob, index) => {
+						if (activeJob.id === id) {
+							this.activeJobs[index] = {
+								...this.activeJobs[index],
+								status,
+								message
+							};
+						}
+					});
+		},
+		setJobs(jobs) {
+			this.activeJobs = jobs;
+		},
+		removeJob(jobId) {
+			this.activeJobs.forEach((activeJob, index) => {
+				if (activeJob.id === jobId) {
+					this.activeJobs.splice(index, 1);
+					this.removedJobIds.push(jobId);
+				}
+			});
+		}
+	}
+});