Slight refactor

src/pages/homepage/components/SettingsButton.tsx

@@ -1,19 +1,26 @@
-import { Button, Menu, MultiSelect, NavLink } from '@mantine/core';
-import { useQueryAPI } from 'hooks';
+import { Button, Menu, MultiSelect, NavLink, Switch } from '@mantine/core';
+import { runWakeCommand, useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiMenu, FiMonitor } from 'react-icons/fi';
+import { FiMenu, FiMonitor, FiShuffle } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 import { buttonClasses, menuClasses, navLinkClasses, selectClasses } from 'styles';
 
-function SettingsButton({
-	appFilter,
-	setAppFilter,
-	bookmarkFilter,
-	setBookmarkFilter,
-}: any) {
+function SettingsButton() {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
 	const navigate = useNavigate();
+	const {
+		currentTheme,
+		setCurrentTheme,
+		handleThemeChange,
+		theme,
+		allThemes,
+		appFilter,
+		setAppFilter,
+		bookmarkFilter,
+		setBookmarkFilter,
+	} = useCommonHooks();
+
 	useEffect(() => {
 		if (data) {
 			const list: [any] =
@@ -25,13 +32,6 @@ function SettingsButton({
 		}
 	}, [data, isFetched]);
 
-	function runWakeCommand() {
-		const requestOptions = {
-			method: 'GET',
-			headers: { 'Content-Type': 'application/json' },
-		};
-		fetch(`/${import.meta.env.VITE_BASE_URL}/api/wakeDakota`, requestOptions);
-	}
 	return (
 		<Menu withinPortal={false} withArrow shadow='md' position='top'>
 			<Menu.Target>
@@ -59,6 +59,31 @@ function SettingsButton({
 						className={navLinkClasses.defaultNavLink}
 						classNames={navLinkClasses}
 					/>
+					<NavLink
+						label='Shuffle Themes'
+						leftSection={
+							<Switch
+								labelPosition='left'
+								checked={currentTheme === 'random'}
+								onChange={(e) => {
+									setCurrentTheme(e.target.checked ? 'random' : theme.name);
+								}}
+								color={theme.primaryColor}
+							/>
+						}
+						onClick={() => {}}
+						className={navLinkClasses.defaultNavLink}
+						classNames={navLinkClasses}
+					/>
+					<NavLink
+						label='Random Theme'
+						leftSection={<FiShuffle />}
+						onClick={() => {
+							handleThemeChange(allThemes, true);
+						}}
+						className={navLinkClasses.defaultNavLink}
+						classNames={navLinkClasses}
+					/>
 				</NavLink>
 				<MultiSelect
 					label='App Filter'