fix: Typescript fixes

frontend/src/components/FloatingBox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, defineExpose, nextTick } from "vue";
+import { onMounted, onUnmounted, ref, nextTick } from "vue";
 import { useDragBox } from "@/composables/useDragBox";
 
 const props = defineProps({

frontend/src/components/PlaylistTabBase.vue

@@ -19,7 +19,7 @@ const QuickConfirm = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" },
+	modalUuid: { type: String, required: true },
 	type: {
 		type: String,
 		default: ""

frontend/src/components/Queue.vue

@@ -14,7 +14,7 @@ const QuickConfirm = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" },
+	modalUuid: { type: String, required: true },
 	sector: { type: String, default: "station" }
 });
 

frontend/src/components/Request.vue

@@ -18,7 +18,7 @@ const PlaylistTabBase = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" },
+	modalUuid: { type: String, required: true },
 	sector: { type: String, default: "station" },
 	disableAutoRequest: { type: Boolean, default: false }
 });

frontend/src/components/SaveButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, defineExpose } from "vue";
+import { ref, computed } from "vue";
 
 const props = defineProps({
 	defaultMessage: { type: String, default: "Save Changes" }

frontend/src/components/StationInfoBox.vue

@@ -12,7 +12,7 @@ const props = defineProps({
 	stationPaused: { type: Boolean, default: null },
 	showManageStation: { type: Boolean, default: false },
 	showGoToStation: { type: Boolean, default: false },
-	modalUuid: { type: String, default: "" },
+	modalUuid: { type: String, required: true },
 	sector: { type: String, default: "station" }
 });
 

frontend/src/components/modals/BulkActions.vue

@@ -13,7 +13,7 @@ const AutoSuggest = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const { closeCurrentModal } = useModalsStore();

frontend/src/components/modals/Confirm.vue

@@ -7,7 +7,7 @@ import { useModalsStore } from "@/stores/modals";
 const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const confirmStore = useConfirmStore(props);

frontend/src/components/modals/CreatePlaylist.vue

@@ -8,7 +8,7 @@ import { useModalsStore } from "@/stores/modals";
 const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 
 defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const playlist = ref({

frontend/src/components/modals/CreateStation.vue

@@ -10,7 +10,7 @@ import validation from "@/validation";
 const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const { socket } = useWebsocketsStore();

frontend/src/components/modals/EditNews.vue

@@ -19,7 +19,7 @@ const UserLink = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const { socket } = useWebsocketsStore();

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

@@ -13,7 +13,7 @@ const SearchQueryItem = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const editPlaylistStore = useEditPlaylistStore(props);

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

@@ -7,7 +7,7 @@ import { useLongJobsStore } from "@/stores/longJobs";
 import { useEditPlaylistStore } from "@/stores/editPlaylist";
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const { socket } = useWebsocketsStore();

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

@@ -10,7 +10,7 @@ import { useModalsStore } from "@/stores/modals";
 import { useForm } from "@/composables/useForm";
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const userAuthStore = useUserAuthStore();

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

@@ -30,7 +30,7 @@ const QuickConfirm = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const { socket } = useWebsocketsStore();

frontend/src/components/modals/EditSong/Tabs/Discogs.vue

@@ -9,7 +9,7 @@ import { useEditSongStore } from "@/stores/editSong";
 import { useWebsocketsStore } from "@/stores/websockets";
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" },
+	modalUuid: { type: String, required: true },
 	modalModulePath: {
 		type: String,
 		default: "modals/editSong/MODAL_UUID"

frontend/src/components/modals/EditSong/Tabs/Reports.vue

@@ -12,7 +12,7 @@ const ReportInfoItem = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" },
+	modalUuid: { type: String, required: true },
 	modalModulePath: { type: String, default: "modals/editSong/MODAL_UUID" }
 });
 

frontend/src/components/modals/EditSong/Tabs/Songs.vue

@@ -12,7 +12,7 @@ const SongItem = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" },
+	modalUuid: { type: String, required: true },
 	modalModulePath: { type: String, default: "modals/editSong/MODAL_UUID" }
 });
 

frontend/src/components/modals/EditSong/Tabs/Youtube.vue

@@ -8,7 +8,7 @@ import { useSearchYoutube } from "@/composables/useSearchYoutube";
 import SearchQueryItem from "../../../SearchQueryItem.vue";
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" },
+	modalUuid: { type: String, required: true },
 	modalModulePath: { type: String, default: "modals/editSong/MODAL_UUID" }
 });
 

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

@@ -44,7 +44,7 @@ const SongThumbnail = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" },
+	modalUuid: { type: String, required: true },
 	modalModulePath: {
 		type: String,
 		default: "modals/editSong/MODAL_UUID"

frontend/src/components/modals/EditUser.vue

@@ -20,7 +20,7 @@ const QuickConfirm = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const editUserStore = useEditUserStore(props);

frontend/src/components/modals/ImportAlbum.vue

@@ -19,7 +19,7 @@ const SongItem = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const { socket } = useWebsocketsStore();

frontend/src/components/modals/ManageStation/Settings.vue

@@ -12,7 +12,7 @@ const InfoIcon = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const { socket } = useWebsocketsStore();

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

@@ -31,7 +31,7 @@ const QuickConfirm = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const tabs = ref([]);

frontend/src/components/modals/RemoveAccount.vue

@@ -14,7 +14,7 @@ const QuickConfirm = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const settingsStore = useSettingsStore();

frontend/src/components/modals/Report.vue

@@ -15,7 +15,7 @@ const ReportInfoItem = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const { socket } = useWebsocketsStore();

frontend/src/components/modals/ViewApiRequest.vue

@@ -14,7 +14,7 @@ const QuickConfirm = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const { socket } = useWebsocketsStore();

frontend/src/components/modals/ViewPunishment.vue

@@ -12,7 +12,7 @@ const PunishmentItem = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const { socket } = useWebsocketsStore();

frontend/src/components/modals/ViewReport.vue

@@ -27,7 +27,7 @@ const QuickConfirm = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const { socket } = useWebsocketsStore();

frontend/src/components/modals/ViewYoutubeVideo.vue

@@ -16,7 +16,7 @@ const SongThumbnail = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const interval = ref(null);

frontend/src/components/modals/WhatIsNew.vue

@@ -12,7 +12,7 @@ const UserLink = defineAsyncComponent(
 );
 
 const props = defineProps({
-	modalUuid: { type: String, default: "" }
+	modalUuid: { type: String, required: true }
 });
 
 const whatIsNewStore = useWhatIsNewStore(props);

frontend/src/pages/Station/index.vue

@@ -1468,6 +1468,9 @@ onBeforeUnmount(() => {
 	socket.dispatch("stations.leave", station.value._id, () => {});
 
 	leaveStation();
+
+	// Delete the Pinia store that was created for this station, after all other cleanup tasks are performed
+	stationStore.$dispose();
 });
 </script>
 

frontend/src/stores/bulkActions.ts

@@ -1,9 +1,7 @@
 import { defineStore } from "pinia";
 
-export const useBulkActionsStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`bulkActions-${modalUuid}`, {
+export const useBulkActionsStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`bulkActions-${modalUuid}`, {
 		state: () => ({
 			type: null
 		}),
@@ -13,4 +11,3 @@ export const useBulkActionsStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/confirm.ts

@@ -1,9 +1,7 @@
 import { defineStore } from "pinia";
 
-export const useConfirmStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`confirm-${modalUuid}`, {
+export const useConfirmStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`confirm-${modalUuid}`, {
 		state: () => ({
 			message: "",
 			onCompleted: null,
@@ -25,4 +23,3 @@ export const useConfirmStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/createStation.ts

@@ -1,9 +1,7 @@
 import { defineStore } from "pinia";
 
-export const useCreateStationStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`createStation-${modalUuid}`, {
+export const useCreateStationStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`createStation-${modalUuid}`, {
 		state: () => ({
 			official: false
 		}),
@@ -13,4 +11,3 @@ export const useCreateStationStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/editNews.ts

@@ -1,9 +1,7 @@
 import { defineStore } from "pinia";
 
-export const useEditNewsStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`editNews-${modalUuid}`, {
+export const useEditNewsStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`editNews-${modalUuid}`, {
 		state: () => ({
 			createNews: false,
 			newsId: null,
@@ -17,4 +15,3 @@ export const useEditNewsStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/editPlaylist.ts

@@ -1,10 +1,8 @@
 import { defineStore } from "pinia";
 import { Playlist } from "@/types/playlist";
 
-export const useEditPlaylistStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`editPlaylist-${modalUuid}`, {
+export const useEditPlaylistStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`editPlaylist-${modalUuid}`, {
 		state: () => ({
 			playlistId: null,
 			tab: "settings",
@@ -51,4 +49,3 @@ export const useEditPlaylistStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/editSong.ts

@@ -2,10 +2,8 @@ import { defineStore } from "pinia";
 import { Song } from "@/types/song";
 import { Report } from "@/types/report";
 
-export const useEditSongStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`editSong-${modalUuid}`, {
+export const useEditSongStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`editSong-${modalUuid}`, {
 		state: () => ({
 			video: {
 				player: null,
@@ -132,4 +130,3 @@ export const useEditSongStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/editUser.ts

@@ -1,10 +1,8 @@
 import { defineStore } from "pinia";
 import { User } from "@/types/user";
 
-export const useEditUserStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`editUser-${modalUuid}`, {
+export const useEditUserStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`editUser-${modalUuid}`, {
 		state: () => ({
 			userId: null,
 			user: <User>{}
@@ -18,4 +16,3 @@ export const useEditUserStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/importAlbum.ts

@@ -1,10 +1,8 @@
 import { defineStore } from "pinia";
 import { Song } from "@/types/song";
 
-export const useImportAlbumStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`importAlbum-${modalUuid}`, {
+export const useImportAlbumStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`importAlbum-${modalUuid}`, {
 		state: () => ({
 			discogsAlbum: <
 				{
@@ -82,4 +80,3 @@ export const useImportAlbumStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/manageStation.ts

@@ -4,10 +4,8 @@ import { Playlist } from "@/types/playlist";
 import { CurrentSong, Song } from "@/types/song";
 import { useWebsocketsStore } from "@/stores/websockets";
 
-export const useManageStationStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`manageStation-${modalUuid}`, {
+export const useManageStationStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`manageStation-${modalUuid}`, {
 		state: () => ({
 			stationId: null,
 			sector: "admin",
@@ -107,4 +105,3 @@ export const useManageStationStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/modals.ts

@@ -22,8 +22,12 @@ import { useWhatIsNewStore } from "@/stores/whatIsNew";
 
 export const useModalsStore = defineStore("modals", {
 	state: () => ({
-		modals: {},
-		activeModals: [],
+		modals: <
+			{
+				[key: string]: string;
+			}
+		>{},
+		activeModals: <string[]>[],
 		preventCloseUnsaved: <{ [uuid: string]: () => boolean }>{},
 		preventCloseCbs: <{ [uuid: string]: () => Promise<void> }>{}
 	}),
@@ -32,9 +36,11 @@ export const useModalsStore = defineStore("modals", {
 			Object.entries(this.modals).forEach(([_uuid, modal]) => {
 				if (uuid === _uuid) {
 					if (modal === "register")
-						lofig.get("recaptcha.enabled").then(enabled => {
-							if (enabled) window.location.reload();
-						});
+						lofig
+							.get("recaptcha.enabled")
+							.then((enabled: boolean) => {
+								if (enabled) window.location.reload();
+							});
 					const close = () => {
 						const { socket } = useWebsocketsStore();
 						socket.destroyModalListeners(uuid);
@@ -64,7 +70,7 @@ export const useModalsStore = defineStore("modals", {
 				}
 			});
 		},
-		openModal(dataOrModal) {
+		openModal(dataOrModal: string | { modal: string; data?: any }) {
 			const uuid = utils.guid();
 
 			let modal;
@@ -153,8 +159,11 @@ export const useModalsStore = defineStore("modals", {
 	}
 });
 
-export const useModalComponents = (baseDirectory, map) => {
-	const modalComponents = {};
+export const useModalComponents = (
+	baseDirectory: string,
+	map: { [key: string]: string }
+) => {
+	const modalComponents = <{ [key: string]: string }>{};
 	Object.entries(map).forEach(([mapKey, mapValue]) => {
 		modalComponents[mapKey] = defineAsyncComponent(
 			() => import(`@/${baseDirectory}/${mapValue}`)

frontend/src/stores/removeAccount.ts

@@ -1,9 +1,7 @@
 import { defineStore } from "pinia";
 
-export const useRemoveAccountStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`removeAccount-${modalUuid}`, {
+export const useRemoveAccountStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`removeAccount-${modalUuid}`, {
 		state: () => ({
 			githubLinkConfirmed: false
 		}),
@@ -13,4 +11,3 @@ export const useRemoveAccountStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/report.ts

@@ -1,10 +1,8 @@
 import { defineStore } from "pinia";
 import { Song } from "@/types/song";
 
-export const useReportStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`report-${modalUuid}`, {
+export const useReportStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`report-${modalUuid}`, {
 		state: () => ({
 			song: <Song>{}
 		}),
@@ -14,4 +12,3 @@ export const useReportStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/viewApiRequest.ts

@@ -1,9 +1,7 @@
 import { defineStore } from "pinia";
 
-export const useViewApiRequestStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`viewApiRequest-${modalUuid}`, {
+export const useViewApiRequestStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`viewApiRequest-${modalUuid}`, {
 		state: () => ({
 			requestId: null,
 			request: {
@@ -26,4 +24,3 @@ export const useViewApiRequestStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/viewPunishment.ts

@@ -1,9 +1,7 @@
 import { defineStore } from "pinia";
 
-export const useViewPunishmentStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`viewPunishment-${modalUuid}`, {
+export const useViewPunishmentStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`viewPunishment-${modalUuid}`, {
 		state: () => ({
 			punishmentId: null,
 			punishment: {
@@ -22,4 +20,3 @@ export const useViewPunishmentStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/viewReport.ts

@@ -1,9 +1,7 @@
 import { defineStore } from "pinia";
 
-export const useViewReportStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`viewReport-${modalUuid}`, {
+export const useViewReportStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`viewReport-${modalUuid}`, {
 		state: () => ({
 			reportId: null
 		}),
@@ -13,4 +11,3 @@ export const useViewReportStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/viewYoutubeVideo.ts

@@ -1,9 +1,11 @@
 import { defineStore } from "pinia";
 
-export const useViewYoutubeVideoStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`viewYoutubeVideo-${modalUuid}`, {
+export const useViewYoutubeVideoStore = ({
+	modalUuid
+}: {
+	modalUuid: string;
+}) =>
+	defineStore(`viewYoutubeVideo-${modalUuid}`, {
 		state: () => ({
 			videoId: null,
 			youtubeId: null,
@@ -80,4 +82,3 @@ export const useViewYoutubeVideoStore = props => {
 			}
 		}
 	})();
-};

frontend/src/stores/whatIsNew.ts

@@ -1,9 +1,7 @@
 import { defineStore } from "pinia";
 
-export const useWhatIsNewStore = props => {
-	const { modalUuid } = props;
-	if (!modalUuid) return null;
-	return defineStore(`whatIsNew-${modalUuid}`, {
+export const useWhatIsNewStore = ({ modalUuid }: { modalUuid: string }) =>
+	defineStore(`whatIsNew-${modalUuid}`, {
 		state: () => ({
 			news: null
 		}),
@@ -13,4 +11,3 @@ export const useWhatIsNewStore = props => {
 			}
 		}
 	})();
-};