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;

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

@@ -0,0 +1,25 @@
+import { Stack, Text } from '@mantine/core';
+import { textClasses } from 'styles';
+import LinkItem from './LinkItem';
+
+function LinkGroups({ links, category, isMobile }: any) {
+	return (
+		<Stack
+			style={{
+				marginBottom: '0em',
+				display: 'block',
+				lineHeight: '1.5rem',
+				overflow: 'hidden',
+			}}
+		>
+			<Text className={textClasses.linkCategory} classNames={textClasses}>
+				{category}
+			</Text>
+			{links?.map((link: any) => (
+				<LinkItem key={link.name} link={link} isMobile={isMobile} />
+			))}
+		</Stack>
+	);
+}
+
+export default LinkGroups;

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

@@ -0,0 +1,18 @@
+import { Text } from '@mantine/core';
+import { textClasses } from 'styles';
+
+function LinkItem({ link }: any) {
+	return (
+		<Text
+			className={textClasses.linkItem}
+			classNames={textClasses}
+			component='a'
+			href={link.url}
+			style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+		>
+			{link.name}
+		</Text>
+	);
+}
+
+export default LinkItem;