More typing and fixes

src/pages/settings/components/Theming/ThemeCard.tsx

@@ -16,7 +16,7 @@ function ThemeCard({
 	cardTheme: Theme;
 	handleOpen: (cardTheme: Theme) => void;
 	allThemes: Theme[];
-	themePlaylists: any;
+	themePlaylists: ThemePlaylist[];
 }) {
 	const [hover, setHover] = useState(false);
 	const [shiftEdit, setShiftEdit] = useState<number>(0);
@@ -274,8 +274,8 @@ function ThemeCard({
 							onClick={() => {
 								const themeList = JSON.parse(
 									themePlaylists?.find(
-										(t: ThemePlaylist) => t.name === currentThemePlaylist,
-									).themeList,
+										(t: ThemePlaylist) => t?.name === currentThemePlaylist,
+									)?.themeList ?? '[]',
 								);
 								const filteredThemes = allThemes.filter((t: Theme) =>
 									themeList.includes(t.id),

src/pages/settings/components/Theming/ThemeModal.tsx

@@ -143,7 +143,7 @@ function ThemeModal({
 			<Modal.Content>
 				<Modal.Header style={{ justifyContent: 'center' }}>
 					<Group pos={'absolute'}>
-						<Text>Name:</Text>
+						<Text c={theme.backgroundColor}>Name:</Text>
 						<TextInput
 							className={textInputClasses.default}
 							classNames={textInputClasses}

src/pages/settings/components/Theming/ThemePlaylistCard.tsx

@@ -32,7 +32,6 @@ function ThemePlaylistCard({
 	const themeList = JSON.parse(
 		cardPlaylist.themeList.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
 	);
-
 	return (
 		<Group
 			gap={0}
@@ -253,7 +252,7 @@ function ThemePlaylistCard({
 								<Stack gap={4}>
 									{themeList.length > 0 &&
 										themeList
-											.sort((a: any, b: any) => (a > b ? 1 : -1))
+											.sort((a: number, b: number) => (a > b ? 1 : -1))
 											.map((item: number) => {
 												return (
 													<ThemeMiniCard key={item} item={item} allThemes={allThemes} />

src/pages/settings/components/Theming/ThemePlaylistModal.tsx

@@ -10,7 +10,7 @@ import {
 import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses, textInputClasses } from 'styles';
-import type { Theme } from 'types';
+import type { Theme, ThemePlaylist } from 'types';
 import ThemeMiniCard from './ThemeMiniCard';
 import TimeOfDay from './TimeOfDay';
 
@@ -19,6 +19,7 @@ function ThemePlaylistModal({
 	handleClose,
 	createPlaylist,
 	selectedPlaylist,
+	defaultPlaylist,
 	setSelectedPlaylist,
 	handleSavePlaylist,
 	allThemes,
@@ -26,13 +27,15 @@ function ThemePlaylistModal({
 	opened: boolean;
 	handleClose: () => void;
 	createPlaylist: any;
-	selectedPlaylist: any;
-	setSelectedPlaylist: (selectedPlaylist: any) => void;
+	selectedPlaylist: ThemePlaylist;
+	defaultPlaylist: ThemePlaylist;
+	setSelectedPlaylist: (selectedPlaylist: ThemePlaylist) => void;
 	handleSavePlaylist: () => void;
 	allThemes: Theme[];
 }) {
 	const { theme, isMobile, modalStyle } = useCommonHooks();
-	const [themeList, setThemeList] = useState<any>('[]');
+	const [themeList, setThemeList] = useState<any>([]);
+
 	useEffect(() => {
 		if (selectedPlaylist?.themeList) {
 			setThemeList(JSON.parse(selectedPlaylist?.themeList));
@@ -40,12 +43,8 @@ function ThemePlaylistModal({
 	}, [selectedPlaylist]);
 
 	if (selectedPlaylist?.name === undefined) {
-		setSelectedPlaylist({
-			name: 'New Playlist',
-			themeList: '[]',
-		});
+		setSelectedPlaylist(defaultPlaylist);
 	}
-
 	return (
 		<Modal.Root
 			size={'50%'}
@@ -64,7 +63,7 @@ function ThemePlaylistModal({
 			<Modal.Content>
 				<Modal.Header style={{ justifyContent: 'center' }}>
 					<Group pos={'absolute'}>
-						<Text>Name:</Text>
+						<Text c={theme.backgroundColor}>Name:</Text>
 						<TextInput
 							className={textInputClasses.default}
 							classNames={textInputClasses}
@@ -145,7 +144,7 @@ function ThemePlaylistModal({
 									onClick={() => {
 										handleClose();
 										setThemeList('[]');
-										setSelectedPlaylist({});
+										setSelectedPlaylist(defaultPlaylist);
 									}}
 								>
 									Cancel

src/pages/settings/components/Theming/ThemePlaylists.tsx

@@ -18,9 +18,16 @@ function ThemePlaylists() {
 	const { data: themePlaylists } = useQueryAPI({
 		endpoint: themePlaylistsEndpoint,
 	});
+	const defaultPlaylist = {
+		id: undefined,
+		default: 0,
+		name: 'New Playlist',
+		themeList: '[]',
+	};
 	const { mutateAsync } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
-	const [selectedPlaylist, setSelectedPlaylist] = useState<ThemePlaylist | undefined>();
+	const [selectedPlaylist, setSelectedPlaylist] =
+		useState<ThemePlaylist>(defaultPlaylist);
 	const { currentThemePlaylist, theme, isMobile } = useCommonHooks();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -31,7 +38,7 @@ function ThemePlaylists() {
 	};
 
 	const handleClose = () => {
-		setSelectedPlaylist(undefined);
+		setSelectedPlaylist(defaultPlaylist);
 		close();
 	};
 
@@ -50,6 +57,7 @@ function ThemePlaylists() {
 				opened={opened}
 				handleClose={handleClose}
 				selectedPlaylist={selectedPlaylist}
+				defaultPlaylist={defaultPlaylist}
 				setSelectedPlaylist={setSelectedPlaylist}
 				handleSavePlaylist={handleSavePlaylist}
 				allThemes={allThemes}

src/pages/settings/components/Theming/ThemeSelect.tsx

@@ -1,5 +1,11 @@
-import { Group, Select, Text } from '@mantine/core';
-import type { Theme } from 'types';
+import {
+	type ComboboxItem,
+	type ComboboxLikeRenderOptionInput,
+	Group,
+	Select,
+	Text,
+} from '@mantine/core';
+import type { Theme, ThemePlaylist } from 'types';
 
 function ThemeSelect({
 	allThemes,
@@ -10,14 +16,15 @@ function ThemeSelect({
 	timeIndex,
 }: {
 	allThemes: Theme[];
-	createPlaylist: any;
-	themeList: any;
-	selectedPlaylist: any;
-	index: string;
+	createPlaylist: (arg0: object) => void;
+	themeList: Array<string>;
+	selectedPlaylist: ThemePlaylist;
+	index: number;
 	timeIndex: string;
 }) {
-	const theme = allThemes.find((theme: Theme) => `${theme.id}` === themeList[index]);
-
+	const theme: Theme | undefined = allThemes.find(
+		(theme: Theme) => `${theme.id}` === themeList[index],
+	);
 	return (
 		<Group>
 			<Text w={'100px'}>{timeIndex}</Text>
@@ -34,7 +41,7 @@ function ThemeSelect({
 				})}
 				onChange={(data) => {
 					const newThemeList = themeList;
-					newThemeList[index] = data;
+					newThemeList[index] = data as string;
 					createPlaylist({
 						method: 'PATCH',
 						endpoint: 'api/themePlaylists',
@@ -60,8 +67,10 @@ function ThemeSelect({
 						borderRadius: '8px',
 					},
 				}}
-				renderOption={({ option }: any) => {
-					const theme = allThemes?.find((theme: Theme) => `${theme.id}` === option.value);
+				renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
+					const theme = allThemes?.find(
+						(theme: Theme) => `${theme.id}` === item.option.value,
+					);
 					return (
 						<Group
 							gap={0}
@@ -86,7 +95,10 @@ function ThemeSelect({
 									borderRadius: '8px',
 								}}
 							>
-								{allThemes.find((theme: Theme) => `${theme.id}` === option.value)?.name}
+								{
+									allThemes.find((theme: Theme) => `${theme.id}` === item.option.value)
+										?.name
+								}
 							</Text>
 						</Group>
 					);

src/pages/settings/components/Theming/Themes.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiChevronRight } from 'react-icons/fi';
 import { switchClasses } from 'styles';
-import type { Theme } from 'types';
+import type { Theme, ThemePlaylist } from 'types';
 import SettingsHeader from '../Shared/SettingsHeader';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
@@ -19,9 +19,10 @@ function ThemesSettings() {
 	const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
 		endpoint: backgroundsEndpoint,
 	});
-	const { data: themePlaylists } = useQueryAPI({
+	const { data: themePlaylistData } = useQueryAPI({
 		endpoint: 'api/themePlaylists',
 	});
+	const [themePlaylists, setThemePlaylists] = useState<ThemePlaylist[]>([]);
 	const { mutateAsync } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
@@ -79,6 +80,13 @@ function ThemesSettings() {
 			setBackgroundList(['None', ...backgroundData]);
 		}
 	}, [backgroundData, isBackgroundFetched]);
+
+	useEffect(() => {
+		if (themePlaylistData) {
+			setThemePlaylists(themePlaylistData);
+		}
+	}, [themePlaylistData]);
+
 	return (
 		<Stack w={'100%'} align='center'>
 			<ThemeModal

src/pages/settings/components/Theming/TimeOfDay.tsx

@@ -1,5 +1,5 @@
 import { Stack } from '@mantine/core';
-import type { Theme } from 'types';
+import type { Theme, ThemePlaylist } from 'types';
 import ThemeSelect from './ThemeSelect';
 
 function TimeOfDay({
@@ -7,7 +7,12 @@ function TimeOfDay({
 	themeList,
 	allThemes,
 	selectedPlaylist,
-}: { createPlaylist: any; themeList: any; allThemes: Theme[]; selectedPlaylist: any }) {
+}: {
+	createPlaylist: () => void;
+	themeList: Array<string>;
+	allThemes: Theme[];
+	selectedPlaylist: ThemePlaylist;
+}) {
 	return (
 		<Stack>
 			<ThemeSelect
@@ -15,7 +20,7 @@ function TimeOfDay({
 				createPlaylist={createPlaylist}
 				themeList={themeList}
 				selectedPlaylist={selectedPlaylist}
-				index='0'
+				index={0}
 				timeIndex='00:00 - 05:59'
 			/>
 			<ThemeSelect
@@ -23,7 +28,7 @@ function TimeOfDay({
 				createPlaylist={createPlaylist}
 				themeList={themeList}
 				selectedPlaylist={selectedPlaylist}
-				index='1'
+				index={1}
 				timeIndex='06:00 - 11:59'
 			/>
 			<ThemeSelect
@@ -31,7 +36,7 @@ function TimeOfDay({
 				createPlaylist={createPlaylist}
 				themeList={themeList}
 				selectedPlaylist={selectedPlaylist}
-				index='2'
+				index={2}
 				timeIndex='12:00 - 17:59'
 			/>
 			<ThemeSelect
@@ -39,7 +44,7 @@ function TimeOfDay({
 				createPlaylist={createPlaylist}
 				themeList={themeList}
 				selectedPlaylist={selectedPlaylist}
-				index='3'
+				index={3}
 				timeIndex='18:00 - 23:59'
 			/>
 		</Stack>