New settings pages

src/pages/settings/components/Bookmarks/Bookmarks.tsx

@@ -0,0 +1,53 @@
+import { Stack, Text } from '@mantine/core';
+import { BookmarkColumns, DataTable } from 'components';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
+import { textClasses } from 'styles';
+const BookmarkSettings = () => {
+	const endpoint = 'api/links';
+	const {
+		data: linkData,
+		isFetched: linksIsFetched,
+		isFetching: linksIsFetching,
+		isLoading: linksIsLoading,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+	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.categoryName;
+			});
+			setGroups(groupList);
+		}
+	}, [groupData, groupsIsFetched]);
+
+	return (
+		<Stack>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Bookmarks
+			</Text>
+			<DataTable
+				tableName='Bookmarks'
+				columns={BookmarkColumns(groups)}
+				tableData={bookmarkData}
+				isFetching={linksIsFetching}
+				isLoading={linksIsLoading}
+				endpoint={endpoint}
+			/>
+		</Stack>
+	);
+};
+export default BookmarkSettings;