refactor: Replaced object key/value with Record types

frontend/src/classes/ListenerHandler.class.ts

@@ -1,10 +1,11 @@
 export default class ListenerHandler extends EventTarget {
-	listeners: {
-		[name: string]: Array<{
+	listeners: Record<
+		string,
+		{
 			cb: (event: any) => void;
 			options: { replaceable: boolean; modalUuid?: string };
-		}>;
-	};
+		}[]
+	>;
 
 	constructor() {
 		super();

frontend/src/classes/SocketHandler.class.ts

@@ -25,24 +25,14 @@ export default class SocketHandler {
 		persist: (() => void)[];
 	};
 
-	CB_REFS: {
-		[key: string]: (...args: any[]) => void;
-	};
+	CB_REFS: Record<string, (...args: any[]) => void>;
 
-	PROGRESS_CB_REFS: {
-		[key: string]: (...args: any[]) => void;
-	};
+	PROGRESS_CB_REFS: Record<string, (...args: any[]) => void>;
 
 	data: {
-		dispatch?: {
-			[key: string]: (...args: any[]) => any;
-		};
-		progress?: {
-			[key: string]: (...args: any[]) => any;
-		};
-		on?: {
-			[key: string]: any;
-		};
+		dispatch?: Record<string, (...args: any[]) => any>;
+		progress?: Record<string, (...args: any[]) => any>;
+		on?: Record<string, any>;
 	}; // Mock only
 
 	executeDispatch: boolean; // Mock only

frontend/src/classes/__mocks__/SocketHandler.class.ts

@@ -6,15 +6,9 @@ export default class SocketHandlerMock {
 	url: string;
 
 	data: {
-		dispatch?: {
-			[key: string]: (...args: any[]) => any;
-		};
-		progress?: {
-			[key: string]: (...args: any[]) => any;
-		};
-		on?: {
-			[key: string]: any;
-		};
+		dispatch?: Record<string, (...args: any[]) => any>;
+		progress?: Record<string, (...args: any[]) => any>;
+		on?: Record<string, any>;
 	};
 
 	onDisconnectCbs: {

frontend/src/components/AdvancedTable.vue

@@ -681,9 +681,7 @@ const getTableSettings = () => {
 			name: string;
 			width: number;
 		}[];
-		columnSort: {
-			[name: string]: string;
-		};
+		columnSort: Record<string, string>;
 		filter: {
 			appliedFilters: TableFilter[];
 			appliedFilterOperator: string;

frontend/src/composables/useForm.ts

@@ -2,19 +2,19 @@ import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import { useModalsStore } from "@/stores/modals";
 
 export const useForm = (
-	inputOptions: {
-		[key: string]:
-			| {
-					value: any;
-					validate?: (value: any) => boolean | string;
-			  }
-			| any;
-	},
+	inputOptions: Record<
+		string,
+		| {
+				value: any;
+				validate?: (value: any) => boolean | string;
+		  }
+		| any
+	>,
 	cb: (
 		response: {
 			status: string;
-			messages: { [key: string]: string };
-			values: { [key: string]: any };
+			messages: Record<string, string>;
+			values: Record<string, any>;
 		},
 		resolve: (value?: undefined) => void,
 		reject: (value: Error) => void
@@ -72,10 +72,7 @@ export const useForm = (
 		return _sourceChanged;
 	});
 
-	const useCallback = (
-		status: string,
-		messages?: { [key: string]: string }
-	) =>
+	const useCallback = (status: string, messages?: Record<string, string>) =>
 		new Promise((resolve, reject: (reason: Error) => void) => {
 			cb(
 				{
@@ -107,7 +104,7 @@ export const useForm = (
 	};
 
 	const validate = () => {
-		const invalid = <{ [key: string]: string[] }>{};
+		const invalid = <Record<string, string[]>>{};
 		Object.entries(inputs.value).forEach(([name, input]) => {
 			input.errors = [];
 			if (
@@ -168,7 +165,7 @@ export const useForm = (
 		}
 	};
 
-	const setValue = (value: { [key: string]: any }, reset?: boolean) => {
+	const setValue = (value: Record<string, any>, reset?: boolean) => {
 		Object.entries(value).forEach(([name, inputValue]) => {
 			if (inputs.value[name]) {
 				inputs.value[name].value = JSON.parse(
@@ -184,7 +181,7 @@ export const useForm = (
 		});
 	};
 
-	const setOriginalValue = (value: { [key: string]: any }) => {
+	const setOriginalValue = (value: Record<string, any>) => {
 		Object.entries(value).forEach(([name, inputValue]) => {
 			if (inputs.value[name]) {
 				if (

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

@@ -23,14 +23,17 @@ const route = useRoute();
 
 const { socket } = useWebsocketsStore();
 
-const quotaStatus = ref<{
-	[key: string]: {
-		title: string;
-		quotaUsed: number;
-		limit: number;
-		quotaExceeded: boolean;
-	};
-}>({});
+const quotaStatus = ref<
+	Record<
+		string,
+		{
+			title: string;
+			quotaUsed: number;
+			limit: number;
+			quotaExceeded: boolean;
+		}
+	>
+>({});
 const fromDate = ref();
 const columnDefault = ref<TableColumn>({
 	sortable: true,

frontend/src/stores/editSong.ts

@@ -24,8 +24,9 @@ export const useEditSongStore = ({ modalUuid }: { modalUuid: string }) =>
 			youtubeIds: string[];
 			songPrefillData: any;
 			form: {
-				inputs: Ref<{
-					[key: string]:
+				inputs: Ref<
+					Record<
+						string,
 						| {
 								value: any;
 								originalValue: any;
@@ -36,15 +37,13 @@ export const useEditSongStore = ({ modalUuid }: { modalUuid: string }) =>
 								required: boolean;
 								ignoreUnsaved: boolean;
 						  }
-						| any;
-				}>;
+						| any
+					>
+				>;
 				unsavedChanges: ComputedRef<string[]>;
 				save: (saveCb?: () => void) => void;
-				setValue: (
-					value: { [key: string]: any },
-					reset?: boolean
-				) => void;
-				setOriginalValue: (value: { [key: string]: any }) => void;
+				setValue: (value: Record<string, any>, reset?: boolean) => void;
+				setOriginalValue: (value: Record<string, any>) => void;
 			};
 		} => ({
 			video: {

frontend/src/stores/manageStation.ts

@@ -17,9 +17,7 @@ export const useManageStationStore = ({ modalUuid }: { modalUuid: string }) =>
 			songsList: Song[];
 			stationPaused: boolean;
 			currentSong: CurrentSong;
-			permissions: {
-				[permission: string]: boolean;
-			};
+			permissions: Record<string, boolean>;
 		} => ({
 			stationId: null,
 			sector: "admin",

frontend/src/stores/modals.ts

@@ -22,12 +22,10 @@ import { useWhatIsNewStore } from "@/stores/whatIsNew";
 
 export const useModalsStore = defineStore("modals", {
 	state: (): {
-		modals: {
-			[key: string]: string;
-		};
+		modals: Record<string, string>;
 		activeModals: string[];
-		preventCloseUnsaved: { [uuid: string]: () => boolean };
-		preventCloseCbs: { [uuid: string]: () => Promise<void> };
+		preventCloseUnsaved: Record<string, () => boolean>;
+		preventCloseCbs: Record<string, () => Promise<void>>;
 	} => ({
 		modals: {},
 		activeModals: [],
@@ -164,9 +162,9 @@ export const useModalsStore = defineStore("modals", {
 
 export const useModalComponents = (
 	baseDirectory: string,
-	map: { [key: string]: string }
+	map: Record<string, string>
 ) => {
-	const modalComponents = <{ [key: string]: string }>{};
+	const modalComponents: Record<string, any> = {};
 	Object.entries(map).forEach(([mapKey, mapValue]) => {
 		modalComponents[mapKey] = defineAsyncComponent(
 			() => import(`@/${baseDirectory}/${mapValue}`)

frontend/src/stores/station.ts

@@ -24,9 +24,7 @@ export const useStationStore = defineStore("station", {
 		autofill: Playlist[];
 		blacklist: Playlist[];
 		mediaModalPlayingAudio: boolean;
-		permissions: {
-			[permission: string]: boolean;
-		};
+		permissions: Record<string, boolean>;
 	} => ({
 		station: {},
 		autoRequest: [],

frontend/src/stores/userAuth.ts

@@ -5,14 +5,12 @@ import { useWebsocketsStore } from "@/stores/websockets";
 
 export const useUserAuthStore = defineStore("userAuth", {
 	state: (): {
-		userIdMap: { [key: string]: { name: string; username: string } };
-		userIdRequested: { [key: string]: boolean };
-		pendingUserIdCallbacks: {
-			[key: string]: ((basicUser: {
-				name: string;
-				username: string;
-			}) => void)[];
-		};
+		userIdMap: Record<string, { name: string; username: string }>;
+		userIdRequested: Record<string, boolean>;
+		pendingUserIdCallbacks: Record<
+			string,
+			((basicUser: { name: string; username: string }) => void)[]
+		>;
 		loggedIn: boolean;
 		role: "user" | "moderator" | "admin";
 		username: string;
@@ -25,9 +23,7 @@ export const useUserAuthStore = defineStore("userAuth", {
 		};
 		gotData: boolean;
 		gotPermissions: boolean;
-		permissions: {
-			[permission: string]: boolean;
-		};
+		permissions: Record<string, boolean>;
 	} => ({
 		userIdMap: {},
 		userIdRequested: {},

frontend/src/types/testContext.d.ts

@@ -6,15 +6,9 @@ declare module "vitest" {
 		wrapper?: VueWrapper;
 		mockSocket?: {
 			data?: {
-				dispatch?: {
-					[key: string]: (...args: any[]) => any;
-				};
-				progress?: {
-					[key: string]: (...args: any[]) => any;
-				};
-				on?: {
-					[key: string]: any;
-				};
+				dispatch?: Record<string, (...args: any[]) => any>;
+				progress?: Record<string, (...args: any[]) => any>;
+				on?: Record<string, any>;
 			};
 			executeDispatch?: boolean;
 		};