Updated WoL Settings

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

@@ -15,7 +15,6 @@ import {
 } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
-import AppItem from 'pages/homepage/components/Applications/AppItem';
 import { useEffect, useState } from 'react';
 import { FiHelpCircle, FiPlus } from 'react-icons/fi';
 import {
@@ -25,6 +24,7 @@ import {
 	textClasses,
 	textInputClasses,
 } from 'styles';
+import AppSettingsItem from './AppSettingsItem';
 import DebouncedApplication from './DebouncedApplication';
 
 const ApplicationSettings = () => {
@@ -34,9 +34,6 @@ const ApplicationSettings = () => {
 	});
 	const [applicationData, setApplicationData] = useState<any>([]);
 	const { theme } = useCommonHooks();
-	const [application, setApplication] = useState<any>({});
-	const [update, setUpdate] = useState({});
-	const [debounced] = useDebouncedValue(update, 1000);
 	const [newApplication, setNewApplication] = useState<any>({
 		name: '',
 		url: '',
@@ -62,18 +59,6 @@ const ApplicationSettings = () => {
 		}
 	}, [apps, isAppsFetching, debouncedSearch]);
 
-	useEffect(() => {
-		if (Object.keys(debounced).length) {
-			mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced });
-		}
-	}, [debounced]);
-
-	useEffect(() => {
-		if (update !== application && Object.keys(update).length > 0) {
-			setApplication(update);
-		}
-	}, [update]);
-
 	return (
 		<Stack w={'100%'}>
 			<Modal.Root
@@ -103,71 +88,79 @@ const ApplicationSettings = () => {
 					</Modal.Header>
 					<Modal.Body pb={'2rem'}>
 						<Stack gap={0} w={'100%'} align='center'>
-							<TextInput
-								label='Name'
-								autoFocus
-								w={'75%'}
-								className={textInputClasses.settingsItem}
-								classNames={textInputClasses}
-								onChange={(event) => {
-									setNewApplication({
-										...newApplication,
-										name: event.target.value,
-									});
-								}}
-							/>
-							<TextInput
-								label='URL'
-								autoFocus
-								w={'75%'}
-								className={textInputClasses.settingsItem}
-								classNames={textInputClasses}
-								onChange={(event) => {
-									setNewApplication({
-										...newApplication,
-										url: event.target.value,
-									});
-								}}
-							/>
-							<TextInput
-								label='Icon'
-								autoFocus
-								w={'75%'}
-								className={textInputClasses.settingsItem}
-								classNames={textInputClasses}
-								onChange={(event) => {
-									setNewApplication({
-										...newApplication,
-										icon: event.target.value,
-									});
-								}}
-							/>
-							<TextInput
-								label='Base URL'
-								autoFocus
-								w={'75%'}
-								className={textInputClasses.settingsItem}
-								classNames={textInputClasses}
-								onChange={(event) => {
-									setNewApplication({
-										...newApplication,
-										baseUrl: event.target.value,
-									});
-								}}
-							/>
-							<TextInput
-								label='Filter Name'
-								autoFocus
-								w={'75%'}
-								className={textInputClasses.settingsItem}
-								classNames={textInputClasses}
-								onChange={(event) => {
-									setNewApplication({
-										...newApplication,
-										filterName: event.target.value,
-									});
-								}}
-							/>
+							<Group w={'100%'} justify='center'>
+								<TextInput
+									label={'Name'}
+									className={textInputClasses.settingsItem}
+									pt={16}
+									classNames={textInputClasses}
+									defaultValue={newApplication.name}
+									onChange={(event) => {
+										setNewApplication({
+											...newApplication,
+											name: event.target.value,
+										});
+									}}
+								/>
+								<TextInput
+									label={'Base URL'}
+									className={textInputClasses.settingsItem}
+									pt={16}
+									classNames={textInputClasses}
+									defaultValue={newApplication.baseUrl}
+									onChange={(event) => {
+										setNewApplication({
+											...newApplication,
+											baseUrl: event.target.value,
+										});
+									}}
+								/>
+							</Group>
+							<Group w={'100%'} justify='center'>
+								<TextInput
+									label={'URL'}
+									className={textInputClasses.settingsItem}
+									w={'59%'}
+									pt={16}
+									classNames={textInputClasses}
+									defaultValue={newApplication.url}
+									onChange={(event) => {
+										setNewApplication({
+											...newApplication,
+											url: event.target.value,
+										});
+									}}
+								/>
+							</Group>
+							<Group w={'100%'} justify='center'>
+								<TextInput
+									label={'Icon'}
+									className={textInputClasses.settingsItem}
+									pt={16}
+									classNames={textInputClasses}
+									defaultValue={newApplication.icon}
+									onChange={(event) => {
+										setNewApplication({
+											...newApplication,
+											icon: event.target.value,
+										});
+									}}
+								/>
+								<TextInput
+									label={'Filter'}
+									className={textInputClasses.settingsItem}
+									pt={16}
+									classNames={textInputClasses}
+									defaultValue={newApplication.filterName}
+									onChange={(event) => {
+										setNewApplication({
+											...newApplication,
+											filterName: event.target.value,
+										});
+									}}
+								/>
+							</Group>
+
 							<Divider color='black' my='sm' />
 							<Group pos={'absolute'} bottom={8}>
 								<Button
@@ -262,20 +255,18 @@ const ApplicationSettings = () => {
 			<Stack w={'100%'} align='center'>
 				<Grid columns={18} w={'75%'}>
 					{applicationData?.map((application: any) => (
-						<GridCol span={3} key={application.id}>
+						<GridCol span={6} key={application.id}>
 							<Popover withArrow withOverlay withinPortal={false}>
 								<Popover.Target>
 									<Box
 										onClick={(e) => {
 											e.stopPropagation();
-											e.preventDefault();
 										}}
 									>
-										<AppItem
+										<AppSettingsItem
 											url={application.url}
 											icon={application.icon}
 											name={application.name}
-											linkDisabled
 										/>
 									</Box>
 								</Popover.Target>
@@ -283,7 +274,6 @@ const ApplicationSettings = () => {
 									<DebouncedApplication
 										application={application}
 										handleDelete={handleDelete}
-										setApplication={setUpdate}
 									/>
 								</Popover.Dropdown>
 							</Popover>