New settings pages

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

@@ -0,0 +1,154 @@
+import {
+	Button,
+	Divider,
+	Grid,
+	GridCol,
+	Group,
+	Modal,
+	Stack,
+	Text,
+	TextInput,
+} from '@mantine/core';
+import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
+import DebouncedMessage from 'components/Shared/DebouncedMessage';
+import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
+import { FiPlus } from 'react-icons/fi';
+import { buttonClasses, modalClasses, textClasses, textInputClasses } from 'styles';
+const MessageSettings = () => {
+	const endpoint = 'api/messages';
+	const {
+		data: messageData,
+		isFetching: isMessagesFetching,
+		isFetched: isMessagesFetched,
+		isLoading: isMessagesLoading,
+	} = useQueryAPI({
+		endpoint: 'api/messages',
+	});
+	const { theme } = useCommonHooks();
+	const { mutateAsync } = useMutationAPI();
+	const [messages, setMessages] = useState<any>([]);
+	const [newMessage, setNewMessage] = useState('');
+	const [newMessageError, setNewMessageError] = useState<string>('');
+	const [message, setMessage] = useState({});
+	const [debounced] = useDebouncedValue(message, 1000);
+	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
+
+	const handleDelete = (message: any) => {
+		mutateAsync({ method: 'DELETE', endpoint: endpoint, body: message });
+	};
+
+	useEffect(() => {
+		if (messageData && isMessagesFetched) {
+			setMessages(messageData);
+		}
+	}, [messageData, isMessagesFetched]);
+
+	useEffect(() => {
+		if (Object.keys(debounced).length) {
+			mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced });
+		}
+	}, [debounced]);
+
+	return (
+		<Stack>
+			<Modal.Root
+				size={'60%'}
+				className={modalClasses.helpModal}
+				classNames={modalClasses}
+				opened={modalOpened}
+				onClose={() => {
+					closeModal();
+				}}
+				style={{
+					'--color-text-pri': theme.primaryColor,
+					'--color-text-acc': theme.accentColor,
+					'--color-background': theme.backgroundColor,
+					'--color-border': theme.borderColor,
+					'--color-search-background': theme.searchColor,
+					'--image-background': `url(${theme.backgroundImage})`,
+				}}
+				closeOnEscape
+				closeOnClickOutside
+			>
+				<Modal.Overlay />
+				<Modal.Content>
+					<Modal.Header>
+						<Modal.Title>Add a new message</Modal.Title>
+						<Modal.CloseButton />
+					</Modal.Header>
+					<Modal.Body pb={'2rem'}>
+						<Stack gap={0} w={'100%'} align='center'>
+							<TextInput
+								autoFocus
+								w={'75%'}
+								className={textInputClasses.settingsItem}
+								classNames={textInputClasses}
+								onChange={(event) => {
+									setNewMessage(event.target.value);
+								}}
+								error={newMessageError}
+							/>
+							<Divider color='black' my='sm' />
+							<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>
+					</Modal.Body>
+				</Modal.Content>
+			</Modal.Root>
+			<Group align='center'>
+				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+					Messages
+				</Text>
+				<Button
+					mt={'1.5rem'}
+					className={buttonClasses.tableButton}
+					classNames={buttonClasses}
+					onClick={openModal}
+				>
+					<FiPlus />
+				</Button>
+			</Group>
+			<Grid>
+				{messages?.map((message: any) => (
+					<GridCol span={6} key={message.id}>
+						<DebouncedMessage
+							label={`ID# ${message.id}`}
+							message={message}
+							setMessage={setMessage}
+							handleDelete={handleDelete}
+						/>
+					</GridCol>
+				))}
+			</Grid>
+		</Stack>
+	);
+};
+export default MessageSettings;