Refactored common hooks to reduce api calls

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -1,16 +1,40 @@
 import { Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 import LinkGroups from './LinkGroups';
 
 function Links({ contentType }: any) {
-	const { isMobile, linksIsFetched, groupsIsFetched, groupData, bookmarkData } =
-		useCommonHooks();
+	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
+		endpoint: 'api/links',
+	});
+	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
+		endpoint: 'api/categories',
+	});
+	const [bookmarkData, setBookmarkData] = useState<any>([]);
+
+	const [groups, setGroups] = useState([]);
+	useEffect(() => {
+		if (linkData && linksIsFetched) {
+			setBookmarkData(linkData);
+		}
+	}, [linksIsFetched, linkData]);
+
+	useEffect(() => {
+		if (groupData && groupsIsFetched) {
+			const groupList = groupData?.map((category: any) => {
+				return category;
+			});
+			setGroups(groupList);
+		}
+	}, [groupData, groupsIsFetched]);
+	const { isMobile } = useCommonHooks();
+
 	return (
 		<>
 			{groupsIsFetched &&
 				linksIsFetched &&
-				groupData?.length > 0 &&
+				groups?.length > 0 &&
 				contentType.length > 0 && (
 					<Stack id='links' style={{ gap: 0 }}>
 						<Text className={textClasses.sectionTitle} classNames={textClasses}>
@@ -26,7 +50,7 @@ function Links({ contentType }: any) {
 								gridTemplateRows: 'auto',
 							}}
 						>
-							{groupData.map((category: any) => {
+							{groups.map((category: any) => {
 								if (
 									contentType.includes(category.filterName) ||
 									contentType.includes('All')