Form updates

src/pages/settings/components/Search/SearchProviders.tsx

@@ -9,6 +9,7 @@ import {
 	Stack,
 	TextInput,
 } from '@mantine/core';
+import { isNotEmpty, useForm } from '@mantine/form';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
@@ -27,6 +28,14 @@ const SearchProviderSettings = () => {
 		url: '',
 		prefix: '',
 	};
+	const form = useForm({
+		initialValues: defaultProvider,
+		validate: {
+			name: isNotEmpty('Name is required'),
+			url: isNotEmpty('URL is required'),
+			prefix: isNotEmpty('Prefix is required'),
+		},
+	});
 	const endpoint = 'api/providers';
 	const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
 		endpoint: endpoint,
@@ -34,7 +43,6 @@ const SearchProviderSettings = () => {
 	const [providers, setProviders] = useState<Provider[]>([]);
 	const { isMobile } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
-	const [newProvider, setNewProvider] = useState<Provider>(defaultProvider);
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -42,8 +50,8 @@ const SearchProviderSettings = () => {
 	const [isLoading, setIsLoading] = useState(false);
 
 	const handleClose = () => {
-		setNewProvider(defaultProvider);
 		closeModal();
+		form.reset();
 	};
 
 	useEffect(() => {
@@ -70,74 +78,68 @@ const SearchProviderSettings = () => {
 				handleClose={handleClose}
 				title={'Add a new Search Provider'}
 				body={
-					<Stack gap={0} w={'100%'} align='center'>
-						<Stack w={'100%'} align='center'>
-							<Group w={'100%'} justify='center'>
+					<form
+						onSubmit={form.onSubmit((values) => {
+							mutateAsync({
+								method: 'POST',
+								endpoint: endpoint,
+								body: values,
+							});
+							handleClose();
+						})}
+					>
+						<Stack gap={0} w={'100%'} align='center'>
+							<Stack w={'100%'} align='center'>
+								<Group w={'100%'} justify='center'>
+									<TextInput
+										key={form.key('name')}
+										{...form.getInputProps('name')}
+										label={'Name'}
+										placeholder='Google'
+										className={textInputClasses.settingsItem}
+										classNames={textInputClasses}
+										withAsterisk
+									/>
+									<TextInput
+										key={form.key('prefix')}
+										{...form.getInputProps('prefix')}
+										label={'Prefix'}
+										placeholder='/g'
+										className={textInputClasses.settingsItem}
+										classNames={textInputClasses}
+										withAsterisk
+									/>
+								</Group>
 								<TextInput
-									label={'Name'}
+									key={form.key('url')}
+									{...form.getInputProps('url')}
+									label={'Url'}
+									placeholder='https://www.google.com/search?q='
 									className={textInputClasses.settingsItem}
+									w={'64%'}
 									classNames={textInputClasses}
-									defaultValue={newProvider.name}
-									onChange={(event) => {
-										setNewProvider({
-											...newProvider,
-											name: event.target.value,
-										});
-									}}
-								/>
-								<TextInput
-									label={'Prefix'}
-									className={textInputClasses.settingsItem}
-									classNames={textInputClasses}
-									defaultValue={newProvider.prefix}
-									onChange={(event) => {
-										setNewProvider({
-											...newProvider,
-											prefix: event.target.value,
-										});
-									}}
+									withAsterisk
 								/>
+							</Stack>
+							<Divider color='black' my='lg' />
+							<Group pos={'absolute'} bottom={8}>
+								<Button
+									type='submit'
+									color={'green'}
+									styles={{ label: { color: 'black' } }}
+								>
+									Save
+								</Button>
+								<Button
+									color={'red'}
+									styles={{ label: { color: 'black' } }}
+									onClick={handleClose}
+								>
+									Cancel
+								</Button>
 							</Group>
-							<TextInput
-								label={'Url'}
-								className={textInputClasses.settingsItem}
-								w={isMobile ? '64%' : '100%'}
-								classNames={textInputClasses}
-								defaultValue={newProvider.url}
-								onChange={(event) => {
-									setNewProvider({
-										...newProvider,
-										url: event.target.value,
-									});
-								}}
-							/>
 						</Stack>
-						<Divider color='black' my='lg' />
-						<Group pos={'absolute'} bottom={8}>
-							<Button
-								color={'green'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									if (newProvider) {
-										mutateAsync({
-											method: 'POST',
-											endpoint: endpoint,
-											body: newProvider,
-										}).then(handleClose);
-									}
-								}}
-							>
-								Save
-							</Button>
-							<Button
-								color={'red'}
-								styles={{ label: { color: 'black' } }}
-								onClick={handleClose}
-							>
-								Cancel
-							</Button>
-						</Group>
-					</Stack>
+					</form>
 				}
 			/>
 			<SettingsHeader