WoL Update

src/pages/homepage/components/SettingsButton.tsx

@@ -4,11 +4,12 @@ import {
 	Group,
 	Menu,
 	MultiSelect,
+	Select,
 	Stack,
 	Text,
 	Tooltip,
 } from '@mantine/core';
-import { runWakeCommand, useCommonHooks, useQueryAPI } from 'hooks';
+import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiMenu, FiMonitor, FiSettings, FiShuffle } from 'react-icons/fi';
@@ -23,6 +24,7 @@ import {
 
 function SettingsButton() {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
+	const { mutateAsync: wakeRequest } = useMutationAPI();
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
 	const navigate = useNavigate();
 	const {
@@ -36,19 +38,30 @@ function SettingsButton() {
 		bookmarkFilter,
 		setBookmarkFilter,
 		isMobile,
+		wolClients,
 		notify,
 	} = useCommonHooks();
 
+	const [selectedClient, setSelectedClient] = useState<any>(wolClients?.[0]);
+
+	const handleWakeRequest = () => {
+		wakeRequest({
+			method: 'POST',
+			endpoint: 'api/wakeClient',
+			body: selectedClient || wolClients?.[0],
+		});
+	};
+
 	useEffect(() => {
 		if (data) {
-			const list: [any] =
-				data.map((category: any) => {
-					return { value: category.filterName, label: category.filterName };
-				}) || [];
+			const list: [any] = data.map((category: any) => {
+				return { value: category.filterName, label: category.filterName };
+			});
 			list.unshift({ value: 'All', label: 'All' });
 			setCategories(list);
 		}
 	}, [data, isFetched]);
+
 	return (
 		<Menu
 			classNames={menuClasses}
@@ -88,16 +101,35 @@ function SettingsButton() {
 							<Button
 								classNames={buttonClasses}
 								className={buttonClasses.wakeButton}
+								disabled={!wolClients?.length}
 								onClick={() => {
-									runWakeCommand();
+									handleWakeRequest();
 									notify('Wake command sent');
 								}}
 							>
 								<Stack gap={0} align='center'>
 									<FiMonitor size={40} />
-									<Text>Dakota</Text>
 								</Stack>
 							</Button>
+							<Select
+								labelProps={{ display: 'none' }}
+								placeholder='Pick a host...'
+								defaultValue={wolClients?.[0]?.hostname}
+								data={
+									wolClients?.map((wolClient: any) => {
+										return {
+											value: wolClient.hostname,
+											label: `${wolClient.hostname} (${wolClient.macAddress})`,
+											hostname: wolClient.hostname,
+											macAddress: wolClient.macAddress,
+										};
+									}) || []
+								}
+								classNames={selectClasses}
+								comboboxProps={{ withinPortal: false }}
+								onChange={(_value, option: any) => setSelectedClient(option)}
+								onLoad={(option: any) => setSelectedClient(option)}
+							/>
 						</Stack>
 						<Stack
 							gap={0}