Added Theme Playlists

src/App.tsx

@@ -27,7 +27,11 @@ function App() {
 	const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
 		endpoint: 'api/themes',
 	});
-	const { theme, setTheme, themeName, handleThemeChange } = useCommonHooks();
+	const { data: themePlaylists, isFetched: isThemePlaylistsFetched } = useQueryAPI({
+		endpoint: 'api/themePlaylists',
+	});
+	const { theme, setTheme, themeName, handleThemeChange, currentThemePlaylist } =
+		useCommonHooks();
 	const overrides = createTheme({
 		white: theme?.backgroundColor,
 		fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
@@ -54,14 +58,32 @@ function App() {
 
 	useEffect(() => {
 		if (allThemes && themeName) {
-			if (themeName !== 'random') {
-				const temp = allThemes.find((t: any) => t.name === themeName);
-				setTheme(temp);
+			if (currentThemePlaylist === 'All') {
+				if (themeName !== 'random') {
+					const temp = allThemes.find((t: any) => t.name === themeName);
+					setTheme(temp);
+				} else {
+					handleThemeChange(allThemes, false);
+				}
+			} else if (currentThemePlaylist === 'Time of Day') {
+				const themeList = JSON.parse(
+					themePlaylists.find((t: any) => t.name === currentThemePlaylist).themeList,
+				);
+				setTheme(
+					allThemes.find(
+						(t: any) => t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
+					),
+				);
 			} else {
-				handleThemeChange(allThemes, false);
+				const themeList = JSON.parse(
+					themePlaylists.find((t: any) => t.name === currentThemePlaylist).themeList,
+				);
+				const filteredThemes = allThemes.filter((t: any) => themeList.includes(t.id));
+				setTheme('random');
+				handleThemeChange(filteredThemes, false);
 			}
 		}
-	}, [isAllThemesFetched, themeName]);
+	}, [isAllThemesFetched, themeName, currentThemePlaylist, isThemePlaylistsFetched]);
 
 	return (
 		<>