Clean up and typing

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

@@ -14,8 +14,8 @@ import { IconTrash } from '@tabler/icons-react';
 import { useCommonHooks } from 'hooks';
 import { cardClasses, modalClasses, textInputClasses } from 'styles';
 
-function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
-	const { theme, isMobile } = useCommonHooks();
+function DebouncedMessage({ label, message, setMessage }: any) {
+	const { theme, isMobile, modalStyle, handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	return (
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
@@ -28,14 +28,7 @@ function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
 				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})`,
-				}}
+				style={modalStyle}
 				closeOnEscape
 				closeOnClickOutside
 			>
@@ -65,7 +58,7 @@ function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
 									color={'red'}
 									styles={{ label: { color: 'black' } }}
 									onClick={() => {
-										handleDelete(message);
+										handleDelete(message, 'api/messages');
 										closeModal();
 									}}
 								>

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

@@ -24,14 +24,15 @@ import {
 	textClasses,
 	textInputClasses,
 } from 'styles';
+import type { Message } from 'types';
 const MessageSettings = () => {
 	const endpoint = 'api/messages';
 	const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({
-		endpoint: 'api/messages',
+		endpoint: endpoint,
 	});
-	const { theme, isMobile } = useCommonHooks();
+	const { theme, isMobile, modalStyle } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
-	const [messages, setMessages] = useState<any>([]);
+	const [messages, setMessages] = useState<Message[]>([]);
 	const [newMessage, setNewMessage] = useState('');
 	const [newMessageError, setNewMessageError] = useState<string>('');
 	const [message, setMessage] = useState({});
@@ -40,14 +41,10 @@ const MessageSettings = () => {
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	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.filter((m: any) =>
+				messageData.filter((m: Message) =>
 					m.message.toLowerCase().includes(debouncedSearch.toLowerCase()),
 				),
 			);
@@ -71,14 +68,7 @@ const MessageSettings = () => {
 				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})`,
-				}}
+				style={modalStyle}
 				closeOnEscape
 				closeOnClickOutside
 			>
@@ -203,13 +193,12 @@ const MessageSettings = () => {
 			</Group>
 			<Stack w={'100%'} align='center'>
 				<Grid w={'75%'}>
-					{messages?.map((message: any) => (
+					{messages?.map((message: Message) => (
 						<GridCol span={isMobile ? 12 : 6} key={message.id}>
 							<DebouncedMessage
 								label={`ID# ${message.id}`}
 								message={message}
 								setMessage={setMessage}
-								handleDelete={handleDelete}
 							/>
 						</GridCol>
 					))}