refactor: Further eslint and *.vue consistency tweaks

frontend/.eslintrc

@@ -8,12 +8,13 @@
 	},
 	"parser": "vue-eslint-parser",
 	"parserOptions": {
-		"ecmaVersion": 2018,
+		"ecmaVersion": 2021,
 		"sourceType": "module",
 		"requireConfigFile": false,
 		"parser": "@typescript-eslint/parser"
 	},
 	"extends": [
+		"airbnb-base",
 		"plugin:vue/vue3-strongly-recommended",
 		"eslint:recommended",
 		"prettier",
@@ -38,8 +39,10 @@
 		"no-multi-assign": 0,
 		"no-shadow": 0,
 		"no-new": 0,
+		"no-param-reassign": 0,
 		"import/no-unresolved": 0,
 		"import/extensions": 0,
+		"import/prefer-default-export": 0,
 		"prettier/prettier": [
 			"error"
 		],

frontend/src/components/ActivityItem.vue

@@ -33,10 +33,10 @@ const messageStripped = computed(() => {
 	return message;
 });
 
-function getMessagePartType(messagePart) {
-	return messagePart.substring(1, messagePart.indexOf(">"));
-}
-function getMessagePartText(messagePart) {
+const getMessagePartType = messagePart =>
+	messagePart.substring(1, messagePart.indexOf(">"));
+
+const getMessagePartText = messagePart => {
 	let message = messagePart;
 
 	message = message.replace(/<reportId>(.*)<\/reportId>/g, "report");
@@ -45,9 +45,9 @@ function getMessagePartText(messagePart) {
 	message = message.replace(/<stationId>(.*)<\/stationId>/g, `$1`);
 
 	return message;
-}
+};
 
-function getIcon() {
+const getIcon = () => {
 	const icons = {
 		/** User */
 		user__joined: "account_circle",
@@ -89,7 +89,7 @@ function getIcon() {
 	};
 
 	return icons[props.activity.type];
-}
+};
 
 onMounted(() => {
 	if (props.activity.type === "station__edit_theme")

frontend/src/components/SongItem.vue

@@ -44,14 +44,15 @@ const { loggedIn, role: userRole } = storeToRefs(userAuthStore);
 
 const { openModal } = useModalsStore();
 
-function formatRequestedAt() {
+const formatRequestedAt = () => {
 	if (props.requestedBy && props.song.requestedAt)
 		formatedRequestedAt.value = formatDistance(
 			parseISO(props.song.requestedAt),
 			new Date()
 		);
-}
-function formatArtists() {
+};
+
+const formatArtists = () => {
 	if (props.song.artists.length === 1) {
 		return props.song.artists[0];
 	}
@@ -64,8 +65,9 @@ function formatArtists() {
 			.join(", ")} & ${props.song.artists.slice(-1)}`;
 	}
 	return null;
-}
-function hideTippyElements() {
+};
+
+const hideTippyElements = () => {
 	songActions.value.tippy.hide();
 
 	setTimeout(
@@ -75,21 +77,24 @@ function hideTippyElements() {
 			),
 		500
 	);
-}
-function hoverTippy() {
+};
+
+const hoverTippy = () => {
 	hoveredTippy.value = true;
-}
-function report(song) {
+};
+
+const report = song => {
 	hideTippyElements();
 	openModal({ modal: "report", data: { song } });
-}
-function edit(song) {
+};
+
+const edit = song => {
 	hideTippyElements();
 	openModal({
 		modal: "editSong",
 		data: { song }
 	});
-}
+};
 
 onMounted(() => {
 	if (props.requestedBy) {

frontend/src/components/StationInfoBox.vue

@@ -19,48 +19,49 @@ const { loggedIn, userId, role } = storeToRefs(userAuthStore);
 
 const { openModal } = useModalsStore();
 
-function isOwnerOnly() {
-	return loggedIn.value && userId.value === props.station.owner;
-}
-function isAdminOnly() {
-	return loggedIn.value && role.value === "admin";
-}
-function isOwnerOrAdmin() {
-	return isOwnerOnly() || isAdminOnly();
-}
+const isOwnerOnly = () =>
+	loggedIn.value && userId.value === props.station.owner;
+
+const isAdminOnly = () => loggedIn.value && role.value === "admin";
 
-function resumeStation() {
+const isOwnerOrAdmin = () => isOwnerOnly() || isAdminOnly();
+
+const resumeStation = () => {
 	socket.dispatch("stations.resume", props.station._id, data => {
 		if (data.status !== "success") new Toast(`Error: ${data.message}`);
 		else new Toast("Successfully resumed the station.");
 	});
-}
-function pauseStation() {
+};
+
+const pauseStation = () => {
 	socket.dispatch("stations.pause", props.station._id, data => {
 		if (data.status !== "success") new Toast(`Error: ${data.message}`);
 		else new Toast("Successfully paused the station.");
 	});
-}
-function skipStation() {
+};
+
+const skipStation = () => {
 	socket.dispatch("stations.forceSkip", props.station._id, data => {
 		if (data.status !== "success") new Toast(`Error: ${data.message}`);
 		else new Toast("Successfully skipped the station's current song.");
 	});
-}
-function favoriteStation() {
+};
+
+const favoriteStation = () => {
 	socket.dispatch("stations.favoriteStation", props.station._id, res => {
 		if (res.status === "success") {
 			new Toast("Successfully favorited station.");
 		} else new Toast(res.message);
 	});
-}
-function unfavoriteStation() {
+};
+
+const unfavoriteStation = () => {
 	socket.dispatch("stations.unfavoriteStation", props.station._id, res => {
 		if (res.status === "success") {
 			new Toast("Successfully unfavorited station.");
 		} else new Toast(res.message);
 	});
-}
+};
 </script>
 
 <template>

frontend/src/components/global/QuickConfirm.vue

@@ -9,6 +9,7 @@ const emit = defineEmits(["confirm"]);
 
 const clickedOnce = ref(false);
 const body = ref(document.body);
+const quickConfirm = ref();
 
 const confirm = event => {
 	if (
@@ -23,7 +24,7 @@ const confirm = event => {
 	clickedOnce.value = false;
 	emit("confirm");
 	setTimeout(() => {
-		ref("confirm").tippy.hide();
+		quickConfirm.value.tippy.hide();
 	}, 25);
 };
 

frontend/src/composables/useReports.ts

@@ -2,8 +2,8 @@ import Toast from "toasters";
 import ws from "@/ws";
 
 export const useReports = () => {
-	const resolveReport = ({ reportId, value }) => {
-		return new Promise((resolve, reject) => {
+	const resolveReport = ({ reportId, value }) =>
+		new Promise((resolve, reject) => {
 			ws.socket.dispatch("reports.resolve", reportId, value, res => {
 				new Toast(res.message);
 				if (res.status === "success")
@@ -11,10 +11,9 @@ export const useReports = () => {
 				return reject(new Error(res.message));
 			});
 		});
-	};
 
-	const removeReport = reportId => {
-		return new Promise((resolve, reject) => {
+	const removeReport = reportId =>
+		new Promise((resolve, reject) => {
 			ws.socket.dispatch("reports.remove", reportId, res => {
 				new Toast(res.message);
 				if (res.status === "success")
@@ -22,7 +21,6 @@ export const useReports = () => {
 				return reject(new Error(res.message));
 			});
 		});
-	};
 
 	return {
 		resolveReport,

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

@@ -17,7 +17,7 @@ const frontendDomain = ref("");
 
 const { users, userCount } = storeToRefs(stationStore);
 
-async function copyToClipboard() {
+const copyToClipboard = async () => {
 	try {
 		await navigator.clipboard.writeText(
 			frontendDomain.value + route.fullPath
@@ -25,7 +25,7 @@ async function copyToClipboard() {
 	} catch (err) {
 		new Toast("Failed to copy to clipboard.");
 	}
-}
+};
 
 onMounted(async () => {
 	frontendDomain.value = await lofig.get("frontendDomain");

frontend/src/pages/Station/index.vue

@@ -76,7 +76,7 @@ const activityWatchVideoLastStatus = ref("");
 const activityWatchVideoLastYouTubeId = ref("");
 // const activityWatchVideoLastStartDuration = ref("");
 const nextCurrentSong = ref(null);
-const editSongModalWatcher = ref(null);
+// const editSongModalWatcher = ref(null);
 // const beforeEditSongModalLocalPaused = ref(null);
 const socketConnected = ref(null);
 const persistentToastCheckerInterval = ref(null);
@@ -1375,7 +1375,7 @@ onBeforeUnmount(() => {
 		keyboardShortcuts.unregisterShortcut(shortcutName);
 	});
 
-	editSongModalWatcher.value(); // removes the watcher
+	// editSongModalWatcher.value(); // removes the watcher
 
 	clearInterval(activityWatchVideoDataInterval.value);
 	clearTimeout(window.stationNextSongTimeout);

frontend/src/stores/userAuth.ts

@@ -23,9 +23,9 @@ export const useUserAuthStore = defineStore("userAuth", {
 				const { username, email, password, recaptchaToken } = user;
 
 				if (!email || !username || !password)
-					return reject(new Error("Please fill in all fields"));
+					reject(new Error("Please fill in all fields"));
 				else if (!validation.isLength(email, 3, 254))
-					return reject(
+					reject(
 						new Error(
 							"Email must have between 3 and 254 characters."
 						)
@@ -34,39 +34,39 @@ export const useUserAuthStore = defineStore("userAuth", {
 					email.indexOf("@") !== email.lastIndexOf("@") ||
 					!validation.regex.emailSimple.test(email)
 				)
-					return reject(new Error("Invalid email format."));
+					reject(new Error("Invalid email format."));
 				else if (!validation.isLength(username, 2, 32))
-					return reject(
+					reject(
 						new Error(
 							"Username must have between 2 and 32 characters."
 						)
 					);
 				else if (!validation.regex.azAZ09_.test(username))
-					return reject(
+					reject(
 						new Error(
 							"Invalid username format. Allowed characters: a-z, A-Z, 0-9 and _."
 						)
 					);
 				else if (username.replaceAll(/[_]/g, "").length === 0)
-					return reject(
+					reject(
 						new Error(
 							"Invalid username format. Allowed characters: a-z, A-Z, 0-9 and _, and there has to be at least one letter or number."
 						)
 					);
 				else if (!validation.isLength(password, 6, 200))
-					return reject(
+					reject(
 						new Error(
 							"Password must have between 6 and 200 characters."
 						)
 					);
 				else if (!validation.regex.password.test(password))
-					return reject(
+					reject(
 						new Error(
 							"Invalid password format. Must have one lowercase letter, one uppercase letter, one number and one special character."
 						)
 					);
 				else
-					return ws.socket.dispatch(
+					ws.socket.dispatch(
 						"users.register",
 						username,
 						email,