Updates to bookmarks

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

@@ -1,10 +1,10 @@
-import { Card, Group, Stack, Text, TextInput } from '@mantine/core';
+import { Card, Group, Select, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal, ManagementPill } from 'components';
-import { useCommonHooks, useMutationAPI } from 'hooks';
+import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, textInputClasses } from 'styles';
-import type { Bookmark } from 'types';
+import { cardClasses, selectClasses, textInputClasses } from 'styles';
+import type { Bookmark, BookmarkGroup } from 'types';
 
 function DebouncedBookmarkItem({
 	bookmarkItem,
@@ -16,8 +16,11 @@ function DebouncedBookmarkItem({
 	const { handleDelete, isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
-
+	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
+		endpoint: 'api/bookmarkCategories',
+	});
 	const [bookmark, setBookmark] = useState<Bookmark>(bookmarkItem);
+	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 	const [update, setUpdate] = useState<any>({});
 	const [debounced] = useDebouncedValue(update, 1000);
 	const handleClose = () => {
@@ -36,6 +39,16 @@ function DebouncedBookmarkItem({
 		}
 	}, [update]);
 
+	useEffect(() => {
+		if (groupData) {
+			setGroups(
+				groupData.sort(
+					(a: BookmarkGroup, b: BookmarkGroup) => a.categoryName > b.categoryName,
+				),
+			);
+		}
+	}, [groupData, groupsIsFetched]);
+
 	return (
 		<Card
 			p={isMobile ? 'xl' : undefined}
@@ -75,7 +88,11 @@ function DebouncedBookmarkItem({
 				}}
 				openModal={openModal}
 			/>
-			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
+			<Group
+				justify='space-between'
+				pos={'relative'}
+				style={{ flexDirection: isMobile ? 'column' : 'row' }}
+			>
 				<TextInput
 					label={'Name'}
 					className={textInputClasses.settingsItem}
@@ -95,16 +112,29 @@ function DebouncedBookmarkItem({
 							: undefined
 					}
 				/>
-				<TextInput
+				<Select
 					label={'Category'}
-					className={textInputClasses.settingsItem}
-					classNames={textInputClasses}
-					defaultValue={bookmark.category}
-					onChange={(event) => {
-						setUpdate({
-							...bookmark,
-							category: event.target.value,
-						});
+					className={selectClasses.settingsItem}
+					classNames={{
+						wrapper: selectClasses.menuSelectWrapper,
+						input: selectClasses.menuSelectInput,
+						label: selectClasses.menuSelectLabel,
+						options: selectClasses.menuSelectOptions,
+						option: selectClasses.menuSelectOption,
+						dropdown: selectClasses.dropdown,
+					}}
+					mt={'.75rem'}
+					limit={100}
+					defaultSearchValue={bookmark?.category}
+					data={groups.map((group) => {
+						return {
+							label: group.categoryName,
+							value: group.categoryName,
+						};
+					})}
+					defaultValue={bookmark?.category}
+					comboboxProps={{
+						zIndex: 3000,
 					}}
 					styles={
 						theme.textShadowsEnabled
@@ -113,6 +143,16 @@ function DebouncedBookmarkItem({
 								}
 							: undefined
 					}
+					onChange={(value: string | null) => {
+						setUpdate({
+							...bookmark,
+							category: value,
+						});
+					}}
+					searchable
+					maxDropdownHeight={175}
+					onDropdownOpen={() => setIsOpen(true)}
+					onDropdownClose={() => setIsOpen(false)}
 				/>
 			</Group>
 			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>