Clean up and typing

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

@@ -2,6 +2,7 @@ import { Stack, Text } from '@mantine/core';
 import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
+import type { Bookmark, BookmarkGroup } from 'types';
 import LinkGroups from './LinkGroups';
 
 function Links({ contentType }: any) {
@@ -11,9 +12,9 @@ function Links({ contentType }: any) {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/categories',
 	});
-	const [bookmarkData, setBookmarkData] = useState<any>([]);
-	const [groups, setGroups] = useState([]);
 	const { isMobile } = useCommonHooks();
+	const [bookmarkData, setBookmarkData] = useState<Bookmark[]>([]);
+	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 
 	useEffect(() => {
 		if (linkData && linksIsFetched) {
@@ -23,10 +24,14 @@ function Links({ contentType }: any) {
 
 	useEffect(() => {
 		if (groupData && groupsIsFetched) {
-			const groupList = groupData?.map((category: any) => {
+			const groupList = groupData?.map((category: BookmarkGroup) => {
 				return category;
 			});
-			setGroups(groupList);
+			setGroups(
+				groupList.sort((a: BookmarkGroup, b: BookmarkGroup) =>
+					a.categoryIndex > b.categoryIndex ? 1 : -1,
+				),
+			);
 		}
 	}, [groupData, groupsIsFetched]);
 
@@ -50,24 +55,23 @@ function Links({ contentType }: any) {
 								gridTemplateRows: 'auto',
 							}}
 						>
-							{groups
-								.sort((a: any, b: any) => (a.categoryIndex > b.categoryIndex ? 1 : -1))
-								.map((category: any) => {
-									if (
-										contentType.includes(category.filterName) ||
-										contentType.includes('All')
-									) {
-										return (
-											<LinkGroups
-												key={category.categoryName}
-												category={category.categoryName}
-												links={bookmarkData.filter(
-													(bookmark: any) => bookmark.category === category.categoryName,
-												)}
-											/>
-										);
-									}
-								})}
+							{groups.map((category: BookmarkGroup) => {
+								if (
+									contentType.includes(category.filterName) ||
+									contentType.includes('All')
+								) {
+									return (
+										<LinkGroups
+											key={category.categoryName}
+											category={category.categoryName}
+											links={bookmarkData.filter(
+												(bookmark: Bookmark) =>
+													bookmark.category === category.categoryName,
+											)}
+										/>
+									);
+								}
+							})}
 						</Stack>
 					</Stack>
 				)}

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

@@ -8,8 +8,6 @@ function LinkItem({ link }: any) {
 			classNames={textClasses}
 			component='a'
 			href={link.url}
-			style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
-			w={'min-content'}
 		>
 			{link.name}
 		</Text>