Refactor

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

@@ -0,0 +1,67 @@
+import { Stack, Text } from '@mantine/core';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
+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]);
+	return (
+		<>
+			{groupsIsFetched &&
+				linksIsFetched &&
+				categories?.length > 0 &&
+				contentType.length > 0 && (
+					<Stack id='links' style={{ gap: 0 }}>
+						<Text className={textClasses.sectionTitle} classNames={textClasses}>
+							Bookmarks
+						</Text>
+						<Stack
+							style={{
+								display: 'grid',
+								flexWrap: 'nowrap',
+								gridColumnGap: '20px',
+								gridRowGap: '0px',
+								gridTemplateColumns: isMobile ? '1fr 1fr' : '1fr 1fr 1fr 1fr 1fr',
+								gridTemplateRows: 'auto',
+							}}
+						>
+							{categories.map((category: any) => {
+								if (
+									contentType.includes(category.filterName) ||
+									contentType.includes('All')
+								) {
+									return (
+										<LinkGroups
+											key={category.id}
+											category={category.categoryName}
+											links={bookmarks.filter(
+												(bookmark: any) => bookmark.category === category.categoryName,
+											)}
+											isMobile={isMobile}
+										/>
+									);
+								}
+							})}
+						</Stack>
+					</Stack>
+				)}
+		</>
+	);
+}
+
+export default Links;