Updated WoL Settings

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -9,14 +9,33 @@ import {
 	TextInput,
 	Tooltip,
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { IconTrash } from '@tabler/icons-react';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useMutationAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { cardClasses, modalClasses, textInputClasses } from 'styles';
 
-function DebouncedApplication({ application, handleDelete, setApplication }: any) {
+function DebouncedApplication({ application, handleDelete }: any) {
 	const { theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
+	const { mutateAsync } = useMutationAPI();
+
+	const [app, setApp] = useState<any>(application);
+	const [update, setUpdate] = useState({});
+	const [debounced] = useDebouncedValue(update, 1000);
+
+	useEffect(() => {
+		if (Object.keys(debounced).length) {
+			mutateAsync({ method: 'PATCH', endpoint: 'api/apps', body: debounced });
+		}
+	}, [debounced]);
+
+	useEffect(() => {
+		if (update !== app && Object.keys(update).length) {
+			setApp(update);
+		}
+	}, [update]);
+
 	return (
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 			<Modal.Root
@@ -57,14 +76,14 @@ function DebouncedApplication({ application, handleDelete, setApplication }: any
 									backgroundColor: 'var(--color-text-acc)',
 									color: 'var(--color-background)',
 								}}
-							>{`"${application.name}"`}</Text>
+							>{`"${app.name}"`}</Text>
 							<Text c='red'>This action cannot be undone!</Text>
 							<Group pos={'absolute'} bottom={8}>
 								<Button
 									color={'red'}
 									styles={{ label: { color: 'black' } }}
 									onClick={() => {
-										handleDelete(application);
+										handleDelete(app);
 										closeModal();
 									}}
 								>
@@ -106,10 +125,10 @@ function DebouncedApplication({ application, handleDelete, setApplication }: any
 					className={textInputClasses.settingsItem}
 					pt={16}
 					classNames={textInputClasses}
-					defaultValue={application.name}
+					defaultValue={app.name}
 					onChange={(event) => {
-						setApplication({
-							...application,
+						setUpdate({
+							...app,
 							name: event.target.value,
 						});
 					}}
@@ -119,10 +138,10 @@ function DebouncedApplication({ application, handleDelete, setApplication }: any
 					className={textInputClasses.settingsItem}
 					pt={16}
 					classNames={textInputClasses}
-					defaultValue={application.baseUrl}
+					defaultValue={app.baseUrl}
 					onChange={(event) => {
-						setApplication({
-							...application,
+						setUpdate({
+							...app,
 							baseUrl: event.target.value,
 						});
 					}}
@@ -135,10 +154,10 @@ function DebouncedApplication({ application, handleDelete, setApplication }: any
 					w={'100%'}
 					pt={16}
 					classNames={textInputClasses}
-					defaultValue={application.url}
+					defaultValue={app.url}
 					onChange={(event) => {
-						setApplication({
-							...application,
+						setUpdate({
+							...app,
 							url: event.target.value,
 						});
 					}}
@@ -150,10 +169,10 @@ function DebouncedApplication({ application, handleDelete, setApplication }: any
 					className={textInputClasses.settingsItem}
 					pt={16}
 					classNames={textInputClasses}
-					defaultValue={application.icon}
+					defaultValue={app.icon}
 					onChange={(event) => {
-						setApplication({
-							...application,
+						setUpdate({
+							...app,
 							icon: event.target.value,
 						});
 					}}
@@ -163,10 +182,10 @@ function DebouncedApplication({ application, handleDelete, setApplication }: any
 					className={textInputClasses.settingsItem}
 					pt={16}
 					classNames={textInputClasses}
-					defaultValue={application.filterName}
+					defaultValue={app.filterName}
 					onChange={(event) => {
-						setApplication({
-							...application,
+						setUpdate({
+							...app,
 							filterName: event.target.value,
 						});
 					}}