Clean up and typing

src/pages/settings/components/WoL/WolClients.tsx

@@ -24,6 +24,7 @@ import {
 	textClasses,
 	textInputClasses,
 } from 'styles';
+import type { WolClient } from 'types';
 import DebouncedWolClient from './DebouncedWolClient';
 import WolClientSettingsItem from './WolClientSettingsItem';
 
@@ -32,23 +33,22 @@ const WolClientSettings = () => {
 	const { data: wolClientsData, isFetched: wolClientsIsFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
-	const [wolClients, setWolClients] = useState<any>([]);
+	const [wolClients, setWolClients] = useState<WolClient[]>([]);
 	const { mutateAsync } = useMutationAPI();
-	const { theme, isMobile } = useCommonHooks();
-	const [newWolClient, setNewWolClient] = useState<any>({
+	const { theme, isMobile, modalStyle } = useCommonHooks();
+	const [newWolClient, setNewWolClient] = useState<WolClient>({
+		id: undefined,
 		hostname: '',
 		macAddress: '',
 	});
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
-	const handleDelete = (application: any) => {
-		mutateAsync({ method: 'DELETE', endpoint: endpoint, body: application });
-	};
+
 	useEffect(() => {
 		if (wolClientsData && wolClientsIsFetched) {
 			setWolClients(
-				wolClientsData.filter((a: any) =>
+				wolClientsData.filter((a: WolClient) =>
 					a.hostname.toLowerCase().includes(debouncedSearch.toLowerCase()),
 				),
 			);
@@ -66,14 +66,7 @@ const WolClientSettings = () => {
 				onClose={() => {
 					closeModal();
 				}}
-				style={{
-					'--color-text-pri': theme.primaryColor,
-					'--color-text-acc': theme.accentColor,
-					'--color-background': theme.backgroundColor,
-					'--color-border': theme.borderColor,
-					'--color-search-background': theme.searchColor,
-					'--image-background': `url(${theme.backgroundImage})`,
-				}}
+				style={modalStyle}
 				closeOnEscape
 				closeOnClickOutside
 			>
@@ -210,7 +203,7 @@ const WolClientSettings = () => {
 			</Group>
 			<Stack w={'100%'} align='center'>
 				<Grid columns={18} w={'75%'}>
-					{wolClients?.map((client: any) => (
+					{wolClients?.map((client: WolClient) => (
 						<GridCol span={isMobile ? 18 : 6} key={client.id}>
 							<Popover withArrow withOverlay withinPortal={false}>
 								<Popover.Target>
@@ -223,7 +216,7 @@ const WolClientSettings = () => {
 									</Box>
 								</Popover.Target>
 								<Popover.Dropdown>
-									<DebouncedWolClient wolClient={client} handleDelete={handleDelete} />
+									<DebouncedWolClient wolClient={client} />
 								</Popover.Dropdown>
 							</Popover>
 						</GridCol>