refactor: Converted station VueX store to Pinia store

frontend/src/components/PlaylistTabBase.vue

@@ -2,9 +2,11 @@
 import { defineAsyncComponent, ref, reactive, computed, onMounted } from "vue";
 import { useStore } from "vuex";
 import Toast from "toasters";
+import { storeToRefs } from "pinia";
 import ws from "@/ws";
 
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useStationStore } from "@/stores/station";
 import { useModalState } from "@/vuex_helpers";
 
 import useSortablePlaylists from "@/composables/useSortablePlaylists";
@@ -30,6 +32,7 @@ const emit = defineEmits(["selected"]);
 const store = useStore();
 
 const { socket } = useWebsocketsStore();
+const stationStore = useStationStore();
 
 const tab = ref("current");
 const search = reactive({
@@ -58,7 +61,8 @@ const {
 const loggedIn = computed(() => store.state.user.auth.loggedIn);
 const role = computed(() => store.state.user.auth.role);
 const userId = computed(() => store.state.user.auth.userId);
-const autoRequest = computed(() => store.state.station.autoRequest);
+
+const { autoRequest } = storeToRefs(stationStore);
 
 const { autofill } = useModalState("modals/manageStation/MODAL_UUID", {
 	modalUuid: props.modalUuid
@@ -68,7 +72,7 @@ const station = computed({
 	get() {
 		if (props.sector === "manageStation")
 			return store.state.modals.manageStation[props.modalUuid].station;
-		return store.state.station.station;
+		return stationStore.station;
 	},
 	set(station) {
 		if (props.sector === "manageStation")
@@ -76,7 +80,7 @@ const station = computed({
 				`modals/manageStation/${props.modalUuid}/updateStation`,
 				station
 			);
-		else store.commit("station/updateStation", station);
+		else stationStore.updateStation(station);
 	}
 });
 
@@ -84,7 +88,7 @@ const blacklist = computed({
 	get() {
 		if (props.sector === "manageStation")
 			return store.state.modals.manageStation[props.modalUuid].blacklist;
-		return store.state.station.blacklist;
+		return stationStore.blacklist;
 	},
 	set(blacklist) {
 		if (props.sector === "manageStation")
@@ -92,7 +96,7 @@ const blacklist = computed({
 				`modals/manageStation/${props.modalUuid}/setBlacklist`,
 				blacklist
 			);
-		else store.commit("station/setBlacklist", blacklist);
+		else stationStore.setBlacklist(blacklist);
 	}
 });
 
@@ -106,10 +110,9 @@ const openModal = payload =>
 	store.dispatch("modalVisibility/openModal", payload);
 const setPlaylists = payload =>
 	store.dispatch("user/playlists/setPlaylists", payload);
-const addPlaylistToAutoRequest = payload =>
-	store.dispatch("station/addPlaylistToAutoRequest", payload);
-const removePlaylistFromAutoRequest = payload =>
-	store.dispatch("station/removePlaylistFromAutoRequest", payload);
+
+const { addPlaylistToAutoRequest, removePlaylistFromAutoRequest } =
+	stationStore;
 
 const init = () => {
 	socket.dispatch("playlists.indexMyPlaylists", res => {

frontend/src/components/Queue.vue

@@ -4,6 +4,7 @@ import { defineAsyncComponent, ref, computed, onUpdated } from "vue";
 import { Sortable } from "sortablejs-vue3";
 import Toast from "toasters";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useStationStore } from "@/stores/station";
 
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")
@@ -21,6 +22,7 @@ const userId = computed(() => store.state.user.auth.userId);
 const userRole = computed(() => store.state.user.auth.role);
 
 const { socket } = useWebsocketsStore();
+const stationStore = useStationStore();
 
 const repositionSongInList = payload => {
 	if (props.sector === "manageStation")
@@ -29,7 +31,7 @@ const repositionSongInList = payload => {
 			payload
 		);
 
-	return store.dispatch("station/repositionSongInList", payload);
+	return stationStore.repositionSongInList(payload);
 };
 
 const actionableButtonVisible = ref(false);
@@ -40,7 +42,7 @@ const station = computed({
 	get: () => {
 		if (props.sector === "manageStation")
 			return store.state.modals.manageStation[props.modalUuid].station;
-		return store.state.station.station;
+		return stationStore.station;
 	},
 	set: station => {
 		if (props.sector === "manageStation")
@@ -48,7 +50,7 @@ const station = computed({
 				`modals/manageStation/${props.modalUuid}/updateStation`,
 				station
 			);
-		else store.commit("station/updateStation", station);
+		else stationStore.updateStation(station);
 	}
 });
 
@@ -56,7 +58,7 @@ const queue = computed({
 	get: () => {
 		if (props.sector === "manageStation")
 			return store.state.modals.manageStation[props.modalUuid].songsList;
-		return store.state.station.songsList;
+		return stationStore.songsList;
 	},
 	set: queue => {
 		if (props.sector === "manageStation")
@@ -64,7 +66,7 @@ const queue = computed({
 				`modals/manageStation/${props.modalUuid}/updateSongsList`,
 				queue
 			);
-		else store.commit("station/updateSongsList", queue);
+		else stationStore.updateSongsList(queue);
 	}
 });
 

frontend/src/components/Request.vue

@@ -3,6 +3,7 @@ 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 useSearchYoutube from "@/composables/useSearchYoutube";
 import useSearchMusare from "@/composables/useSearchMusare";
 
@@ -21,6 +22,7 @@ const { youtubeSearch, searchForSongs, loadMoreSongs } = useSearchYoutube();
 const { musareSearch, searchForMusareSongs } = useSearchMusare();
 
 const { socket } = useWebsocketsStore();
+const stationStore = useStationStore();
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" },
@@ -40,7 +42,7 @@ const station = computed({
 	get() {
 		if (props.sector === "manageStation")
 			return store.state.modals.manageStation[props.modalUuid].station;
-		return store.state.station.station;
+		return stationStore.station;
 	},
 	set(station) {
 		if (props.sector === "manageStation")
@@ -48,7 +50,7 @@ const station = computed({
 				`modals/manageStation/${props.modalUuid}/updateStation`,
 				station
 			);
-		else store.commit("station/updateStation", station);
+		else stationStore.updateStation(station);
 	}
 });
 // const blacklist = computed({
@@ -56,7 +58,7 @@ const station = computed({
 // 		if (props.sector === "manageStation")
 // 			return store.state.modals.manageStation[props.modalUuid]
 // 				.blacklist;
-// 		return store.state.station.blacklist;
+// 		return stationStore.blacklist;
 // 	},
 // 	set(blacklist) {
 // 		if (props.sector === "manageStation")
@@ -64,14 +66,14 @@ const station = computed({
 // 				`modals/manageStation/${props.modalUuid}/setBlacklist`,
 // 				blacklist
 // 			);
-// 		else store.commit("station/setBlacklist", blacklist);
+// 		else stationStore.setBlacklist(blacklist);
 // 	}
 // });
 const songsList = computed({
 	get() {
 		if (props.sector === "manageStation")
 			return store.state.modals.manageStation[props.modalUuid].songsList;
-		return store.state.station.songsList;
+		return stationStore.songsList;
 	},
 	set(songsList) {
 		if (props.sector === "manageStation")
@@ -79,7 +81,7 @@ const songsList = computed({
 				`modals/manageStation/${props.modalUuid}/updateSongsList`,
 				songsList
 			);
-		else store.commit("station/updateSongsList", songsList);
+		else stationStore.updateSongsList(songsList);
 	}
 });
 const musareResultsLeftCount = computed(

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

@@ -9,7 +9,9 @@ import {
 } from "vue";
 import { Sortable } from "sortablejs-vue3";
 import Toast from "toasters";
+import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useStationStore } from "@/stores/station";
 import { useModalState, useModalActions } from "@/vuex_helpers";
 import ws from "@/ws";
 import utils from "@/utils";
@@ -29,12 +31,14 @@ const props = defineProps({
 
 const store = useStore();
 
-const station = computed(() => store.state.station);
 const loggedIn = computed(() => store.state.user.auth.loggedIn);
 const userId = computed(() => store.state.user.auth.userId);
 const userRole = computed(() => store.state.user.auth.role);
 
 const { socket } = useWebsocketsStore();
+const stationStore = useStationStore();
+
+const { station } = storeToRefs(stationStore);
 
 const drag = ref(false);
 const apiDomain = ref("");

frontend/src/pages/Station/Sidebar/Users.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { useStore } from "vuex";
 import { useRoute } from "vue-router";
-import { defineAsyncComponent, ref, computed, onMounted } from "vue";
+import { defineAsyncComponent, ref, onMounted } from "vue";
 import Toast from "toasters";
+import { storeToRefs } from "pinia";
+import { useStationStore } from "@/stores/station";
 
 const ProfilePicture = defineAsyncComponent(
 	() => import("@/components/ProfilePicture.vue")
 );
 
-const store = useStore();
+const stationStore = useStationStore();
 const route = useRoute();
 
 const notesUri = ref("");
 const frontendDomain = ref("");
 
-const users = computed(() => store.state.station.users);
-const userCount = computed(() => store.state.station.userCount);
+const { users, userCount } = storeToRefs(stationStore);
 
 async function copyToClipboard() {
 	try {

frontend/src/pages/Station/Sidebar/index.vue

@@ -2,7 +2,8 @@
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
 import { defineAsyncComponent, computed, watch, onMounted } from "vue";
-
+import { storeToRefs } from "pinia";
+import { useStationStore } from "@/stores/station";
 import useTabQueryHandler from "@/composables/useTabQueryHandler";
 
 const Queue = defineAsyncComponent(() => import("@/components/Queue.vue"));
@@ -13,14 +14,16 @@ const Request = defineAsyncComponent(() => import("@/components/Request.vue"));
 
 const store = useStore();
 const route = useRoute();
+const stationStore = useStationStore();
 
 const { tab, showTab } = useTabQueryHandler("queue");
 
-const station = computed(() => store.state.station.station);
 const userId = computed(() => store.state.user.auth.userId);
 const loggedIn = computed(() => store.state.user.auth.loggedIn);
 const role = computed(() => store.state.user.auth.rol);
 
+const { station } = storeToRefs(stationStore);
+
 const isOwner = () =>
 	loggedIn.value && station.value && userId.value === station.value.owner;
 const isAdmin = () => loggedIn.value && role.value === "admin";

frontend/src/pages/Station/index.vue

@@ -10,9 +10,11 @@ import {
 import { useStore } from "vuex";
 import { useRoute, useRouter } from "vue-router";
 import Toast from "toasters";
+import { storeToRefs } from "pinia";
 import { ContentLoader } from "vue-content-loader";
 import canAutoPlay from "can-autoplay";
 import { useWebsocketsStore } from "@/stores/websockets";
+import { useStationStore } from "@/stores/station";
 import aw from "@/aw";
 import ms from "@/ms";
 import ws from "@/ws";
@@ -41,6 +43,7 @@ const route = useRoute();
 const router = useRouter();
 
 const { socket } = useWebsocketsStore();
+const stationStore = useStationStore();
 
 // TODO this might need a different place, like onMounted
 const isApple = ref(
@@ -93,16 +96,6 @@ const activeModals = computed(() => store.state.modalVisibility.activeModals);
 // TODO fix this if it still has some use, as this is no longer accurate
 // const video = computed(() => store.state.modals.editSong);
 
-const station = computed(() => store.state.station.station);
-const currentSong = computed(() => store.state.station.currentSong);
-const nextSong = computed(() => store.state.station.nextSong);
-const songsList = computed(() => store.state.station.songsList);
-const stationPaused = computed(() => store.state.station.stationPaused);
-const localPaused = computed(() => store.state.station.localPaused);
-const noSong = computed(() => store.state.station.noSong);
-const autoRequest = computed(() => store.state.station.autoRequest);
-const autoRequestLock = computed(() => store.state.station.autoRequestLock);
-
 const loggedIn = computed(() => store.state.user.auth.loggedIn);
 const userId = computed(() => store.state.user.auth.userId);
 const role = computed(() => store.state.user.auth.role);
@@ -111,6 +104,18 @@ const autoSkipDisliked = computed(
 	() => store.state.user.preferences.autoSkipDisliked
 );
 
+const {
+	station,
+	currentSong,
+	nextSong,
+	songsList,
+	stationPaused,
+	localPaused,
+	noSong,
+	autoRequest,
+	autoRequestLock
+} = storeToRefs(stationStore);
+
 const skipVotesLoaded = computed(
 	() =>
 		!noSong.value &&
@@ -139,39 +144,27 @@ const currentUserQueueSongs = computed(
 		).length
 );
 
-const joinStation = payload => store.dispatch("station/joinStation", payload);
-const leaveStation = payload => store.dispatch("station/leaveStation", payload);
-const updateStation = payload =>
-	store.dispatch("station/updateStation", payload);
-const updateUserCount = payload =>
-	store.dispatch("station/updateUserCount", payload);
-const updateUsers = payload => store.dispatch("station/updateUsers", payload);
-const updateCurrentSong = payload =>
-	store.dispatch("station/updateCurrentSong", payload);
-const updateNextSong = payload =>
-	store.dispatch("station/updateNextSong", payload);
-const updateSongsList = payload =>
-	store.dispatch("station/updateSongsList", payload);
-const repositionSongInList = payload =>
-	store.dispatch("station/repositionSongInList", payload);
-const updateStationPaused = payload =>
-	store.dispatch("station/updateStationPaused", payload);
-const updateLocalPaused = payload =>
-	store.dispatch("station/updateLocalPaused", payload);
-const updateNoSong = payload => store.dispatch("station/updateNoSong", payload);
-const updateIfStationIsFavorited = payload =>
-	store.dispatch("station/updateIfStationIsFavorited", payload);
-const setAutofillPlaylists = payload =>
-	store.dispatch("station/setAutofillPlaylists", payload);
-const setBlacklist = payload => store.dispatch("station/setBlacklist", payload);
-const updateCurrentSongRatings = payload =>
-	store.dispatch("station/updateCurrentSongRatings", payload);
-const updateOwnCurrentSongRatings = payload =>
-	store.dispatch("station/updateOwnCurrentSongRatings", payload);
-const updateCurrentSongSkipVotes = payload =>
-	store.dispatch("station/updateCurrentSongSkipVotes", payload);
-const updateAutoRequestLock = payload =>
-	store.dispatch("station/updateAutoRequestLock", payload);
+const {
+	joinStation,
+	leaveStation,
+	updateStation,
+	updateUserCount,
+	updateUsers,
+	updateCurrentSong,
+	updateNextSong,
+	updateSongsList,
+	repositionSongInList,
+	updateStationPaused,
+	updateLocalPaused,
+	updateNoSong,
+	updateIfStationIsFavorited,
+	setAutofillPlaylists,
+	setBlacklist,
+	updateCurrentSongRatings,
+	updateOwnCurrentSongRatings,
+	updateCurrentSongSkipVotes,
+	updateAutoRequestLock
+} = stationStore;
 
 // TODO fix this if it still has some use
 // const stopVideo = payload =>

frontend/src/store/index.ts

@@ -3,7 +3,6 @@ import { createStore } from "vuex";
 
 import user from "./modules/user";
 import modalVisibility from "./modules/modalVisibility";
-import station from "./modules/station";
 import admin from "./modules/admin";
 
 const emptyModule = {
@@ -13,7 +12,6 @@ const emptyModule = {
 export default createStore({
 	modules: {
 		user,
-		station,
 		admin,
 		modalVisibility,
 		modals: {

frontend/src/store/modules/station.ts

@@ -1,216 +0,0 @@
-/* eslint no-param-reassign: 0 */
-
-const state = {
-	station: {},
-	autoRequest: [],
-	autoRequestLock: false,
-	editing: {},
-	userCount: 0,
-	users: {
-		loggedIn: [],
-		loggedOut: []
-	},
-	currentSong: {},
-	nextSong: null,
-	songsList: [],
-	stationPaused: true,
-	localPaused: false,
-	noSong: true,
-	autofill: [],
-	blacklist: []
-};
-
-const getters = {};
-
-const actions = {
-	joinStation: ({ commit }, station) => {
-		commit("joinStation", station);
-	},
-	leaveStation: ({ commit }, station) => {
-		commit("leaveStation", station);
-	},
-	editStation: ({ commit }, station) => {
-		commit("editStation", station);
-	},
-	updateStation: ({ commit }, station) => {
-		commit("updateStation", station);
-	},
-	updateUserCount: ({ commit }, userCount) => {
-		commit("updateUserCount", userCount);
-	},
-	updateUsers: ({ commit }, users) => {
-		commit("updateUsers", users);
-	},
-	updateCurrentSong: ({ commit }, currentSong) => {
-		commit("updateCurrentSong", currentSong);
-	},
-	updateNextSong: ({ commit }, nextSong) => {
-		commit("updateNextSong", nextSong);
-	},
-	updateSongsList: ({ commit }, songsList) => {
-		commit("updateSongsList", songsList);
-	},
-	repositionSongInList: ({ commit }, song) => {
-		commit("repositionSongInList", song);
-	},
-	updateStationPaused: ({ commit }, stationPaused) => {
-		commit("updateStationPaused", stationPaused);
-	},
-	updateLocalPaused: ({ commit }, localPaused) => {
-		commit("updateLocalPaused", localPaused);
-	},
-	updateNoSong: ({ commit }, noSong) => {
-		commit("updateNoSong", noSong);
-	},
-	updateAutoRequest: ({ commit }, playlists) => {
-		commit("updateAutoRequest", playlists);
-	},
-	updateAutoRequestLock: ({ commit }, lock) => {
-		commit("updateAutoRequestLock", lock);
-	},
-	updateIfStationIsFavorited: ({ commit }, { isFavorited }) => {
-		commit("updateIfStationIsFavorited", isFavorited);
-	},
-	setAutofillPlaylists: ({ commit }, autofillPlaylists) => {
-		commit("setAutofillPlaylists", autofillPlaylists);
-	},
-	setBlacklist: ({ commit }, blacklist) => {
-		commit("setBlacklist", blacklist);
-	},
-	updateCurrentSongRatings: ({ commit }, songRatings) => {
-		commit("updateCurrentSongRatings", songRatings);
-	},
-	updateOwnCurrentSongRatings: ({ commit }, ownSongRatings) => {
-		commit("updateOwnCurrentSongRatings", ownSongRatings);
-	},
-	updateCurrentSongSkipVotes: (
-		{ commit },
-		{ skipVotes, skipVotesCurrent }
-	) => {
-		commit("updateCurrentSongSkipVotes", { skipVotes, skipVotesCurrent });
-	},
-	addPlaylistToAutoRequest: ({ commit }, playlist) => {
-		commit("addPlaylistToAutoRequest", playlist);
-	},
-	removePlaylistFromAutoRequest: ({ commit }, playlistId) => {
-		commit("removePlaylistFromAutoRequest", playlistId);
-	}
-};
-
-const mutations = {
-	joinStation(state, station) {
-		state.station = { ...station };
-	},
-	leaveStation(state) {
-		state.station = {};
-		state.autoRequest = [];
-		state.autoRequestLock = false;
-		state.editing = {};
-		state.userCount = 0;
-		state.users = {
-			loggedIn: [],
-			loggedOut: []
-		};
-		state.currentSong = {};
-		state.nextSong = null;
-		state.songsList = [];
-		state.stationPaused = true;
-		state.localPaused = false;
-		state.noSong = true;
-		state.autofill = [];
-		state.blacklist = [];
-	},
-	editStation(state, station) {
-		state.editing = { ...station };
-	},
-	updateStation(state, station) {
-		state.station = { ...state.station, ...station };
-	},
-	updateUserCount(state, userCount) {
-		state.userCount = userCount;
-	},
-	updateUsers(state, users) {
-		state.users = users;
-	},
-	updateCurrentSong(state, currentSong) {
-		state.currentSong = currentSong;
-	},
-	updateNextSong(state, nextSong) {
-		state.nextSong = nextSong;
-	},
-	updateSongsList(state, songsList) {
-		state.songsList = songsList;
-	},
-	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;
-	},
-	updateLocalPaused(state, localPaused) {
-		state.localPaused = localPaused;
-	},
-	updateNoSong(state, noSong) {
-		state.noSong = noSong;
-	},
-	updateAutoRequest(state, playlists) {
-		state.autoRequest = playlists;
-	},
-	updateAutoRequestLock(state, lock) {
-		state.autoRequestLock = lock;
-	},
-	updateIfStationIsFavorited(state, isFavorited) {
-		state.station.isFavorited = isFavorited;
-	},
-	setAutofillPlaylists(state, autofillPlaylists) {
-		state.autofill = JSON.parse(JSON.stringify(autofillPlaylists));
-	},
-	setBlacklist(state, blacklist) {
-		state.blacklist = JSON.parse(JSON.stringify(blacklist));
-	},
-	updateCurrentSongRatings(state, songRatings) {
-		state.currentSong.likes = songRatings.likes;
-		state.currentSong.dislikes = songRatings.dislikes;
-	},
-	updateOwnCurrentSongRatings(state, ownSongRatings) {
-		state.currentSong.liked = ownSongRatings.liked;
-		state.currentSong.disliked = ownSongRatings.disliked;
-	},
-	updateCurrentSongSkipVotes(state, { skipVotes, skipVotesCurrent }) {
-		state.currentSong.skipVotes = skipVotes;
-		if (skipVotesCurrent !== null)
-			state.currentSong.skipVotesCurrent = skipVotesCurrent;
-	},
-	addPlaylistToAutoRequest(state, playlist) {
-		state.autoRequest.push(playlist);
-	},
-	removePlaylistFromAutoRequest(state, playlistId) {
-		state.autoRequest.forEach((playlist, index) => {
-			if (playlist._id === playlistId) {
-				state.autoRequest.splice(index, 1);
-			}
-		});
-	}
-};
-
-export default {
-	namespaced: true,
-	state,
-	getters,
-	actions,
-	mutations
-};

frontend/src/stores/station.ts

@@ -0,0 +1,130 @@
+import { defineStore } from "pinia";
+
+// TODO fix/decide eslint rule properly
+// eslint-disable-next-line
+export const useStationStore = defineStore("station", {
+	state: () => ({
+		station: {},
+		autoRequest: [],
+		autoRequestLock: false,
+		editing: {},
+		userCount: 0,
+		users: {
+			loggedIn: [],
+			loggedOut: []
+		},
+		currentSong: {},
+		nextSong: null,
+		songsList: [],
+		stationPaused: true,
+		localPaused: false,
+		noSong: true,
+		autofill: [],
+		blacklist: []
+	}),
+	actions: {
+		joinStation(station) {
+			this.station = { ...station };
+		},
+		leaveStation() {
+			this.station = {};
+			this.autoRequest = [];
+			this.autoRequestLock = false;
+			this.editing = {};
+			this.userCount = 0;
+			this.users = {
+				loggedIn: [],
+				loggedOut: []
+			};
+			this.currentSong = {};
+			this.nextSong = null;
+			this.songsList = [];
+			this.stationPaused = true;
+			this.localPaused = false;
+			this.noSong = true;
+			this.autofill = [];
+			this.blacklist = [];
+		},
+		editStation(station) {
+			this.editing = { ...station };
+		},
+		updateStation(station) {
+			this.station = { ...this.station, ...station };
+		},
+		updateUserCount(userCount) {
+			this.userCount = userCount;
+		},
+		updateUsers(users) {
+			this.users = users;
+		},
+		updateCurrentSong(currentSong) {
+			this.currentSong = currentSong;
+		},
+		updateNextSong(nextSong) {
+			this.nextSong = nextSong;
+		},
+		updateSongsList(songsList) {
+			this.songsList = songsList;
+		},
+		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;
+		},
+		updateLocalPaused(localPaused) {
+			this.localPaused = localPaused;
+		},
+		updateNoSong(noSong) {
+			this.noSong = noSong;
+		},
+		updateAutoRequest(playlists) {
+			this.autoRequest = playlists;
+		},
+		updateAutoRequestLock(lock) {
+			this.autoRequestLock = lock;
+		},
+		updateIfStationIsFavorited(isFavorited) {
+			this.station.isFavorited = isFavorited;
+		},
+		setAutofillPlaylists(autofillPlaylists) {
+			this.autofill = JSON.parse(JSON.stringify(autofillPlaylists));
+		},
+		setBlacklist(blacklist) {
+			this.blacklist = JSON.parse(JSON.stringify(blacklist));
+		},
+		updateCurrentSongRatings(songRatings) {
+			this.currentSong.likes = songRatings.likes;
+			this.currentSong.dislikes = songRatings.dislikes;
+		},
+		updateOwnCurrentSongRatings(ownSongRatings) {
+			this.currentSong.liked = ownSongRatings.liked;
+			this.currentSong.disliked = ownSongRatings.disliked;
+		},
+		updateCurrentSongSkipVotes({ skipVotes, skipVotesCurrent }) {
+			this.currentSong.skipVotes = skipVotes;
+			if (skipVotesCurrent !== null)
+				this.currentSong.skipVotesCurrent = skipVotesCurrent;
+		},
+		addPlaylistToAutoRequest(playlist) {
+			this.autoRequest.push(playlist);
+		},
+		removePlaylistFromAutoRequest(playlistId) {
+			this.autoRequest.forEach((playlist, index) => {
+				if (playlist._id === playlistId) {
+					this.autoRequest.splice(index, 1);
+				}
+			});
+		}
+	}
+});