Form updates

src/pages/settings/components/Bookmarks/Bookmarks.tsx

@@ -1,5 +1,6 @@
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { Box, Button, Card, Divider, Group, Stack, Text, 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';
@@ -16,6 +17,13 @@ const BookmarkSettings = () => {
 		categoryIndex: 0,
 		filterName: '',
 	};
+	const form = useForm({
+		initialValues: defaultGroup,
+		validate: {
+			categoryName: isNotEmpty('Category name is required'),
+			filterName: isNotEmpty('Filter name is required'),
+		},
+	});
 	const bookmarksEndpoint = 'api/bookmarks';
 	const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
 		endpoint: bookmarksEndpoint,
@@ -27,7 +35,6 @@ const BookmarkSettings = () => {
 	});
 	const [dragging, setDragging] = useState(false);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
-	const [newGroup, setNewGroup] = useState<BookmarkGroup>(defaultGroup);
 	const [groupList, setGroupList] = useState<BookmarkGroup[]>([]);
 	const { isMobile, reorder } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
@@ -37,8 +44,8 @@ const BookmarkSettings = () => {
 	const [isLoading, setIsLoading] = useState(false);
 
 	const handleClose = () => {
-		setNewGroup(defaultGroup);
 		closeModal();
+		form.reset();
 	};
 
 	function onDragEnd(result: any) {
@@ -118,61 +125,60 @@ const BookmarkSettings = () => {
 				handleClose={handleClose}
 				title={'Add a new Bookmark Group'}
 				body={
-					<Stack gap={0} w={'100%'} align='center'>
-						<Group w={'100%'} justify='center'>
-							<TextInput
-								label={'Category Name'}
-								className={textInputClasses.settingsItem}
-								classNames={textInputClasses}
-								defaultValue={newGroup.categoryName}
-								onChange={(event) => {
-									setNewGroup({
-										...newGroup,
-										categoryName: event.target.value,
-									});
-								}}
-							/>
-							<TextInput
-								label={'Filter Name'}
-								className={textInputClasses.settingsItem}
-								classNames={textInputClasses}
-								defaultValue={newGroup.filterName}
-								onChange={(event) => {
-									setNewGroup({
-										...newGroup,
-										filterName: event.target.value,
-									});
-								}}
-							/>
-						</Group>
+					<form
+						onSubmit={form.onSubmit((values) => {
+							mutateAsync({
+								method: 'POST',
+								endpoint: categoriesEndpoint,
+								body: {
+									...values,
+									categoryIndex: groups.length,
+								},
+							});
+							handleClose();
+						})}
+					>
+						<Stack gap={0} w={'100%'} align='center'>
+							<Group w={'100%'} justify='center'>
+								<TextInput
+									key={form.key('categoryName')}
+									{...form.getInputProps('categoryName')}
+									label={'Category Name'}
+									placeholder='Shopping'
+									className={textInputClasses.settingsItem}
+									classNames={textInputClasses}
+									withAsterisk
+								/>
+								<TextInput
+									key={form.key('filterName')}
+									{...form.getInputProps('filterName')}
+									label={'Filter Name'}
+									placeholder='Personal'
+									className={textInputClasses.settingsItem}
+									classNames={textInputClasses}
+									withAsterisk
+								/>
+							</Group>
 
-						<Divider color='black' my='lg' />
-						<Group pos={'absolute'} bottom={8}>
-							<Button
-								color={'green'}
-								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									if (newGroup) {
-										mutateAsync({
-											method: 'POST',
-											endpoint: categoriesEndpoint,
-											body: { ...newGroup, categoryIndex: groups.length },
-										});
-										handleClose();
-									}
-								}}
-							>
-								Save
-							</Button>
-							<Button
-								color={'red'}
-								styles={{ label: { color: 'black' } }}
-								onClick={handleClose}
-							>
-								Cancel
-							</Button>
-						</Group>
-					</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>
+						</Stack>
+					</form>
 				}
 			/>
 			<SettingsHeader