Application adding bugfix; consolidated Settings headers

src/pages/settings/components/Messages/Messages.tsx

@@ -1,27 +1,18 @@
-import {
-	Button,
-	Card,
-	Divider,
-	Grid,
-	GridCol,
-	Group,
-	Modal,
-	Stack,
-	TextInput,
-} from '@mantine/core';
+import { Button, Divider, Grid, GridCol, Group, Stack, TextInput } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import DebouncedMessage from 'pages/settings/components/Messages/DebouncedMessage';
 import { useEffect, useState } from 'react';
-import { cardClasses, modalClasses, textInputClasses } from 'styles';
+import { textInputClasses } from 'styles';
 import type { Message } from 'types';
+import AddItemModal from '../Shared/AddItemModal';
 import SettingsHeader from '../Shared/SettingsHeader';
 const MessageSettings = () => {
 	const endpoint = 'api/messages';
 	const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
-	const { isMobile, modalStyle } = useCommonHooks();
+	const { isMobile } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [messages, setMessages] = useState<Message[]>([]);
 	const [newMessage, setNewMessage] = useState('');
@@ -32,6 +23,12 @@ const MessageSettings = () => {
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 
+	const handleClose = () => {
+		setNewMessage('');
+		setNewMessageError('');
+		closeModal();
+	};
+
 	useEffect(() => {
 		if (messageData && isMessagesFetched) {
 			setMessages(
@@ -50,74 +47,53 @@ const MessageSettings = () => {
 
 	return (
 		<Stack w={'100%'}>
-			<Modal.Root
-				size={'60%'}
-				className={modalClasses.helpModal}
-				classNames={modalClasses}
-				opened={modalOpened}
-				fullScreen={isMobile}
-				onClose={() => {
-					closeModal();
-				}}
-				style={modalStyle}
-				closeOnEscape
-				closeOnClickOutside
-			>
-				<Modal.Overlay />
-				<Modal.Content>
-					<Modal.Header>
-						<Modal.Title>Add a new message</Modal.Title>
-						<Modal.CloseButton />
-					</Modal.Header>
-					<Modal.Body pb={'2rem'}>
-						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
-							<Stack gap={0} w={'100%'} align='center'>
-								<TextInput
-									label='Message text'
-									autoFocus={!isMobile}
-									w={'75%'}
-									className={textInputClasses.settingsItem}
-									classNames={textInputClasses}
-									onChange={(event) => {
-										setNewMessage(event.target.value);
-									}}
-									error={newMessageError}
-								/>
-								<Divider color='black' my='lg' />
-								<Group pos={'absolute'} bottom={8}>
-									<Button
-										color={'green'}
-										styles={{ label: { color: 'black' } }}
-										onClick={() => {
-											if (newMessage) {
-												mutateAsync({
-													method: 'POST',
-													endpoint: endpoint,
-													body: { message: newMessage },
-												});
-												closeModal();
-											} else {
-												setNewMessageError('Please enter a message');
-											}
-										}}
-									>
-										Save
-									</Button>
-									<Button
-										color={'red'}
-										styles={{ label: { color: 'black' } }}
-										onClick={() => {
-											closeModal();
-										}}
-									>
-										Cancel
-									</Button>
-								</Group>
-							</Stack>
-						</Card>
-					</Modal.Body>
-				</Modal.Content>
-			</Modal.Root>
+			<AddItemModal
+				modalOpened={modalOpened}
+				handleClose={handleClose}
+				title={'Add a new message'}
+				body={
+					<Stack gap={0} w={'100%'} align='center'>
+						<TextInput
+							label='Message text'
+							autoFocus={!isMobile}
+							w={'75%'}
+							className={textInputClasses.settingsItem}
+							classNames={textInputClasses}
+							onChange={(event) => {
+								setNewMessage(event.target.value);
+							}}
+							error={newMessageError}
+						/>
+						<Divider color='black' my='lg' />
+						<Group pos={'absolute'} bottom={8}>
+							<Button
+								color={'green'}
+								styles={{ label: { color: 'black' } }}
+								onClick={() => {
+									if (newMessage) {
+										mutateAsync({
+											method: 'POST',
+											endpoint: endpoint,
+											body: { message: newMessage },
+										}).then(handleClose);
+									} else {
+										setNewMessageError('Please enter a message');
+									}
+								}}
+							>
+								Save
+							</Button>
+							<Button
+								color={'red'}
+								styles={{ label: { color: 'black' } }}
+								onClick={handleClose}
+							>
+								Cancel
+							</Button>
+						</Group>
+					</Stack>
+				}
+			/>
 			<SettingsHeader
 				setDragging={undefined}
 				openModal={openModal}