Small refactoring

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

@@ -3,7 +3,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiTrash } from 'react-icons/fi';
+import { FaTrash } from 'react-icons/fa';
 import { cardClasses, textClasses, textInputClasses, toolTipClasses } from 'styles';
 import type { WolClient } from 'types';
 
@@ -19,7 +19,7 @@ function DebouncedWolClient({
 	const { mutateAsync } = useMutationAPI();
 
 	const [client, setClient] = useState<WolClient>(wolClient);
-	const [update, setUpdate] = useState<any>({});
+	const [update, setUpdate] = useState<WolClient>();
 	const [debounced] = useDebouncedValue(update, 1000);
 	const handleClose = () => {
 		setIsOpen(false);
@@ -27,13 +27,13 @@ function DebouncedWolClient({
 	};
 
 	useEffect(() => {
-		if (Object.keys(debounced).length) {
+		if (debounced && Object.keys(debounced).length) {
 			mutateAsync({ method: 'PATCH', endpoint: 'api/WolClients', body: debounced });
 		}
 	}, [debounced]);
 
 	useEffect(() => {
-		if (update !== client && Object.keys(update).length) {
+		if (update && update !== client && Object.keys(update).length) {
 			setClient(update);
 		}
 	}, [update]);
@@ -44,22 +44,24 @@ function DebouncedWolClient({
 			className={cardClasses.settingsItem}
 			classNames={cardClasses}
 		>
-			<DeleteItemModal
-				modalOpened={modalOpened}
-				handleClose={handleClose}
-				handleDelete={() => handleDelete(client, 'api/WolClients')}
-				title={'Delete WoL Client'}
-				body={
-					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
-						<Text>Are you sure you want to delete this WoL Client?</Text>
-						<Text
-							className={textClasses.deleteItem}
-							classNames={textClasses}
-						>{`"${client.hostname}"`}</Text>
-						<Text c='red'>This action cannot be undone!</Text>
-					</Stack>
-				}
-			/>
+			{modalOpened && (
+				<DeleteItemModal
+					modalOpened={modalOpened}
+					handleClose={handleClose}
+					handleDelete={() => handleDelete(client, 'api/WolClients')}
+					title={'Delete WoL Client'}
+					body={
+						<Stack gap={0} w={'100%'} h={'150px'} align='center'>
+							<Text>Are you sure you want to delete this WoL Client?</Text>
+							<Text
+								className={textClasses.deleteItem}
+								classNames={textClasses}
+							>{`"${client.hostname}"`}</Text>
+							<Text c='red'>This action cannot be undone!</Text>
+						</Stack>
+					}
+				/>
+			)}
 			<Tooltip
 				className={toolTipClasses.default}
 				classNames={toolTipClasses}
@@ -73,7 +75,7 @@ function DebouncedWolClient({
 						openModal();
 					}}
 				>
-					<FiTrash color='black' />
+					<FaTrash color='black' />
 				</ActionIcon>
 			</Tooltip>
 			<Group w={'100%'} justify='center'>