refactor: Removed mixins and fixed $store/$route conversions

frontend/src/components/Request.vue

@@ -4,8 +4,6 @@ import { useStore } from "vuex";
 
 import Toast from "toasters";
 
-// import SearchYoutube from "@/mixins/SearchYoutube.vue";
-// import SearchMusare from "@/mixins/SearchMusare.vue";
 import useSearchYoutube from "@/composables/useSearchYoutube";
 import useSearchMusare from "@/composables/useSearchMusare";
 
@@ -42,49 +40,47 @@ const tabs = ref({});
 const station = computed({
 	get() {
 		if (props.sector === "manageStation")
-			return this.$store.state.modals.manageStation[props.modalUuid]
-				.station;
-		return this.$store.state.station.station;
+			return store.state.modals.manageStation[props.modalUuid].station;
+		return store.state.station.station;
 	},
 	set(station) {
 		if (props.sector === "manageStation")
-			this.$store.commit(
+			store.commit(
 				`modals/manageStation/${props.modalUuid}/updateStation`,
 				station
 			);
-		else this.$store.commit("station/updateStation", station);
+		else store.commit("station/updateStation", station);
 	}
 });
 // const blacklist = computed({
 // 	get() {
 // 		if (props.sector === "manageStation")
-// 			return this.$store.state.modals.manageStation[props.modalUuid]
+// 			return store.state.modals.manageStation[props.modalUuid]
 // 				.blacklist;
-// 		return this.$store.state.station.blacklist;
+// 		return store.state.station.blacklist;
 // 	},
 // 	set(blacklist) {
 // 		if (props.sector === "manageStation")
-// 			this.$store.commit(
+// 			store.commit(
 // 				`modals/manageStation/${props.modalUuid}/setBlacklist`,
 // 				blacklist
 // 			);
-// 		else this.$store.commit("station/setBlacklist", blacklist);
+// 		else store.commit("station/setBlacklist", blacklist);
 // 	}
 // });
 const songsList = computed({
 	get() {
 		if (props.sector === "manageStation")
-			return this.$store.state.modals.manageStation[props.modalUuid]
-				.songsList;
-		return this.$store.state.station.songsList;
+			return store.state.modals.manageStation[props.modalUuid].songsList;
+		return store.state.station.songsList;
 	},
 	set(songsList) {
 		if (props.sector === "manageStation")
-			this.$store.commit(
+			store.commit(
 				`modals/manageStation/${props.modalUuid}/updateSongsList`,
 				songsList
 			);
-		else this.$store.commit("station/updateSongsList", songsList);
+		else store.commit("station/updateSongsList", songsList);
 	}
 });
 const musareResultsLeftCount = computed(

frontend/src/mixins/SearchMusare.vue

@@ -1,88 +0,0 @@
-<script>
-import Toast from "toasters";
-
-export default {
-	data() {
-		return {
-			musareSearch: {
-				query: "",
-				searchedQuery: "",
-				page: 0,
-				count: 0,
-				resultsLeft: 0,
-				results: []
-			}
-		};
-	},
-	computed: {
-		resultsLeftCount() {
-			return this.musareSearch.count - this.musareSearch.results.length;
-		},
-		nextPageResultsCount() {
-			return Math.min(this.musareSearch.pageSize, this.resultsLeftCount);
-		}
-	},
-	methods: {
-		searchForMusareSongs(page, toast = true) {
-			if (
-				this.musareSearch.page >= page ||
-				this.musareSearch.searchedQuery !== this.musareSearch.query
-			) {
-				this.musareSearch.results = [];
-				this.musareSearch.page = 0;
-				this.musareSearch.count = 0;
-				this.musareSearch.resultsLeft = 0;
-				this.musareSearch.pageSize = 0;
-			}
-
-			this.musareSearch.searchedQuery = this.musareSearch.query;
-			this.socket.dispatch(
-				"songs.searchOfficial",
-				this.musareSearch.query,
-				page,
-				res => {
-					if (res.status === "success") {
-						const { data } = res;
-						const { count, pageSize, songs } = data;
-
-						const newSongs = songs.map(song => ({
-							isAddedToQueue: false,
-							...song
-						}));
-
-						this.musareSearch.results = [
-							...this.musareSearch.results,
-							...newSongs
-						];
-						this.musareSearch.page = page;
-						this.musareSearch.count = count;
-						this.musareSearch.resultsLeft =
-							count - this.musareSearch.results.length;
-						this.musareSearch.pageSize = pageSize;
-					} else if (res.status === "error") {
-						this.musareSearch.results = [];
-						this.musareSearch.page = 0;
-						this.musareSearch.count = 0;
-						this.musareSearch.resultsLeft = 0;
-						this.musareSearch.pageSize = 0;
-						if (toast) new Toast(res.message);
-					}
-				}
-			);
-		},
-		addMusareSongToPlaylist(id, index) {
-			this.socket.dispatch(
-				"playlists.addSongToPlaylist",
-				false,
-				id,
-				this.playlist._id,
-				res => {
-					new Toast(res.message);
-					if (res.status === "success")
-						this.musareSearch.results[index].isAddedToQueue = true;
-				}
-			);
-		}
-	}
-};
-</script>

frontend/src/mixins/SearchYoutube.vue

@@ -1,99 +0,0 @@
-<script>
-import Toast from "toasters";
-
-export default {
-	data() {
-		return {
-			youtubeSearch: {
-				songs: {
-					results: [],
-					query: "",
-					nextPageToken: ""
-				},
-				playlist: {
-					query: "",
-					isImportingOnlyMusic: true
-				}
-			}
-		};
-	},
-	methods: {
-		searchForSongs() {
-			let { query } = this.youtubeSearch.songs;
-
-			if (query.indexOf("&index=") !== -1) {
-				query = query.split("&index=");
-				query.pop();
-				query = query.join("");
-			}
-
-			if (query.indexOf("&list=") !== -1) {
-				query = query.split("&list=");
-				query.pop();
-				query = query.join("");
-			}
-
-			this.socket.dispatch("apis.searchYoutube", query, res => {
-				if (res.status === "success") {
-					this.youtubeSearch.songs.nextPageToken =
-						res.data.nextPageToken;
-					this.youtubeSearch.songs.results = [];
-
-					res.data.items.forEach(result => {
-						this.youtubeSearch.songs.results.push({
-							id: result.id.videoId,
-							url: `https://www.youtube.com/watch?v=${this.id}`,
-							title: result.snippet.title,
-							thumbnail: result.snippet.thumbnails.default.url,
-							channelId: result.snippet.channelId,
-							channelTitle: result.snippet.channelTitle,
-							isAddedToQueue: false
-						});
-					});
-				} else if (res.status === "error") new Toast(res.message);
-			});
-		},
-		loadMoreSongs() {
-			this.socket.dispatch(
-				"apis.searchYoutubeForPage",
-				this.youtubeSearch.songs.query,
-				this.youtubeSearch.songs.nextPageToken,
-				res => {
-					if (res.status === "success") {
-						this.youtubeSearch.songs.nextPageToken =
-							res.data.nextPageToken;
-
-						res.data.items.forEach(result => {
-							this.youtubeSearch.songs.results.push({
-								id: result.id.videoId,
-								url: `https://www.youtube.com/watch?v=${this.id}`,
-								title: result.snippet.title,
-								thumbnail:
-									result.snippet.thumbnails.default.url,
-								channelId: result.snippet.channelId,
-								channelTitle: result.snippet.channelTitle,
-								isAddedToQueue: false
-							});
-						});
-					} else if (res.status === "error") new Toast(res.message);
-				}
-			);
-		},
-		addYouTubeSongToPlaylist(id, index) {
-			this.socket.dispatch(
-				"playlists.addSongToPlaylist",
-				false,
-				id,
-				this.playlist._id,
-				res => {
-					new Toast(res.message);
-					if (res.status === "success")
-						this.youtubeSearch.songs.results[
-							index
-						].isAddedToQueue = true;
-				}
-			);
-		}
-	}
-};
-</script>

frontend/src/mixins/SortablePlaylists.vue

@@ -1,155 +0,0 @@
-<script>
-import { mapState, mapActions } from "vuex";
-import Toast from "toasters";
-import draggable from "vuedraggable";
-
-export default {
-	components: { draggable },
-	data() {
-		return {
-			orderOfPlaylists: [],
-			drag: false
-		};
-	},
-	computed: {
-		playlists: {
-			get() {
-				return this.$store.state.user.playlists.playlists;
-			},
-			set(playlists) {
-				this.$store.commit("user/playlists/updatePlaylists", playlists);
-			}
-		},
-		...mapState({
-			station: state => state.station.station,
-			myUserId: state => state.user.auth.userId
-		}),
-		dragOptions() {
-			return {
-				animation: 200,
-				group: "playlists",
-				disabled: this.myUserId !== this.userId,
-				ghostClass: "draggable-list-ghost"
-			};
-		}
-	},
-	mounted() {
-		this.socket.on(
-			"event:playlist.created",
-			res => this.addPlaylist(res.data.playlist),
-			{ replaceable: true }
-		);
-
-		this.socket.on(
-			"event:playlist.deleted",
-			res => this.removePlaylist(res.data.playlistId),
-			{ replaceable: true }
-		);
-
-		this.socket.on(
-			"event:playlist.song.added",
-			res => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === res.data.playlistId) {
-						this.playlists[index].songs.push(res.data.song);
-					}
-				});
-			},
-			{ replaceable: true }
-		);
-
-		this.socket.on(
-			"event:playlist.song.removed",
-			res => {
-				this.playlists.forEach((playlist, playlistIndex) => {
-					if (playlist._id === res.data.playlistId) {
-						this.playlists[playlistIndex].songs.forEach(
-							(song, songIndex) => {
-								if (song.youtubeId === res.data.youtubeId) {
-									this.playlists[playlistIndex].songs.splice(
-										songIndex,
-										1
-									);
-								}
-							}
-						);
-					}
-				});
-			},
-			{ replaceable: true }
-		);
-
-		this.socket.on(
-			"event:playlist.displayName.updated",
-			res => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === res.data.playlistId) {
-						this.playlists[index].displayName =
-							res.data.displayName;
-					}
-				});
-			},
-			{ replaceable: true }
-		);
-
-		this.socket.on(
-			"event:playlist.privacy.updated",
-			res => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === res.data.playlist._id) {
-						this.playlists[index].privacy =
-							res.data.playlist.privacy;
-					}
-				});
-			},
-			{ replaceable: true }
-		);
-
-		this.socket.on(
-			"event:user.orderOfPlaylists.updated",
-			res => {
-				const sortedPlaylists = [];
-
-				this.playlists.forEach(playlist => {
-					sortedPlaylists[res.data.order.indexOf(playlist._id)] =
-						playlist;
-				});
-
-				this.playlists = sortedPlaylists;
-				this.orderOfPlaylists = this.calculatePlaylistOrder();
-			},
-			{ replaceable: true }
-		);
-	},
-	methods: {
-		calculatePlaylistOrder() {
-			const calculatedOrder = [];
-			this.playlists.forEach(playlist =>
-				calculatedOrder.push(playlist._id)
-			);
-
-			return calculatedOrder;
-		},
-		savePlaylistOrder() {
-			const recalculatedOrder = this.calculatePlaylistOrder();
-			if (
-				JSON.stringify(this.orderOfPlaylists) ===
-				JSON.stringify(recalculatedOrder)
-			)
-				return; // nothing has changed
-
-			this.socket.dispatch(
-				"users.updateOrderOfPlaylists",
-				recalculatedOrder,
-				res => {
-					if (res.status === "error") return new Toast(res.message);
-
-					this.orderOfPlaylists = this.calculatePlaylistOrder(); // new order in regards to the database
-					return new Toast(res.message);
-				}
-			);
-		},
-		...mapActions("user/playlists", ["addPlaylist", "removePlaylist"])
-	}
-};
-</script>

frontend/src/mixins/TabQueryHandler.vue

@@ -1,29 +0,0 @@
-<script>
-export default {
-	methods: {
-		showTab(tab) {
-			const queries = this.$route.query.tab
-				? this.$route.query
-				: { ...this.$route.query, tab };
-
-			queries.tab = tab;
-			this.$route.query.tab = tab;
-			this.tab = this.$route.query.tab;
-
-			// eslint-disable-next-line no-restricted-globals
-			history.pushState(
-				{},
-				null,
-				`${this.$route.path}?${Object.keys(queries)
-					.map(
-						key =>
-							`${encodeURIComponent(key)}=${encodeURIComponent(
-								queries[key]
-							)}`
-					)
-					.join("&")}`
-			);
-		}
-	}
-};
-</script>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useStore } from "vuex";
+import { useRoute } from "vue-router";
 import { defineAsyncComponent, ref, computed, onMounted } from "vue";
 import Toast from "toasters";
 
@@ -8,6 +9,7 @@ const ProfilePicture = defineAsyncComponent(
 );
 
 const store = useStore();
+const route = useRoute();
 
 const notesUri = ref("");
 const frontendDomain = ref("");
@@ -18,7 +20,7 @@ const userCount = computed(() => store.state.station.userCount);
 async function copyToClipboard() {
 	try {
 		await navigator.clipboard.writeText(
-			this.frontendDomain + this.$route.fullPath
+			frontendDomain.value + route.fullPath
 		);
 	} catch (err) {
 		new Toast("Failed to copy to clipboard.");