Refactored common hooks to reduce api calls

src/pages/settings/components/Messages.tsx

@@ -1,10 +1,25 @@
 import { Stack, Text } from '@mantine/core';
 import { DataTable, MessagesColumns } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 const MessageSettings = () => {
 	const endpoint = 'api/messages';
-	const { messageData, isMessagesFetching, isMessagesLoading } = useCommonHooks();
+	const {
+		data: messageData,
+		isFetching: isMessagesFetching,
+		isFetched: isMessagesFetched,
+		isLoading: isMessagesLoading,
+	} = useQueryAPI({
+		endpoint: 'api/messages',
+	});
+	const [messages, setMessages] = useState<any>([]);
+
+	useEffect(() => {
+		if (messageData && isMessagesFetched) {
+			setMessages(messageData);
+		}
+	}, [messageData, isMessagesFetched]);
 	return (
 		<Stack>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -13,7 +28,7 @@ const MessageSettings = () => {
 			<DataTable
 				tableName='Messages'
 				columns={MessagesColumns()}
-				tableData={messageData}
+				tableData={messages}
 				isFetching={isMessagesFetching}
 				isLoading={isMessagesLoading}
 				endpoint={endpoint}