Slight refactor

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

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

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

@@ -2,7 +2,7 @@ import { Stack, Text } from '@mantine/core';
 import { textClasses } from 'styles';
 import LinkItem from './LinkItem';
 
-function LinkGroups({ links, category, isMobile }: any) {
+function LinkGroups({ links, category }: any) {
 	return (
 		<Stack
 			style={{
@@ -16,7 +16,7 @@ function LinkGroups({ links, category, isMobile }: any) {
 				{category}
 			</Text>
 			{links?.map((link: any) => (
-				<LinkItem key={link.name} link={link} isMobile={isMobile} />
+				<LinkItem key={link.name} link={link} />
 			))}
 		</Stack>
 	);