diff --git a/src/pages/homepage/components/Applications/Applications.tsx b/src/pages/homepage/components/Applications/Applications.tsx index 6bb76f8..b1558b8 100644 --- a/src/pages/homepage/components/Applications/Applications.tsx +++ b/src/pages/homepage/components/Applications/Applications.tsx @@ -34,6 +34,8 @@ function Applications({ contentType }: { contentType: string[] }) { return -1; case 'Custom': return a.index > b.index ? 1 : -1; + default: + return 0; } }) ?.filter( diff --git a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx index f8857bf..c4b3114 100644 --- a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx +++ b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx @@ -47,6 +47,8 @@ function Bookmarks({ contentType }: { contentType: string[] }) { return -1; case 'Custom': return a.categoryIndex > b.categoryIndex ? 1 : -1; + default: + return 0; } }) ?.filter( @@ -84,18 +86,21 @@ function Bookmarks({ contentType }: { contentType: string[] }) { gridTemplateColumns: `repeat(${bookmarkDensity}, 1fr)`, }} > - {groups.map((category: BookmarkGroup) => { - return ( - bookmark.category === category.categoryName, - )} - bookmarkScale={bookmarkScale} - /> - ); - })} + {groups + .filter((category: BookmarkGroup) => category.enabled === 1) + .map((category: BookmarkGroup) => { + return ( + + bookmark.category === category.categoryName, + )} + bookmarkScale={bookmarkScale} + /> + ); + })} )} diff --git a/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx index 62639a7..3c7bc72 100644 --- a/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx +++ b/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(bookmarkItem); + const [groups, setGroups] = useState([]); const [update, setUpdate] = useState({}); 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 ( - + - { - 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)} /> diff --git a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx index eceb24c..7727df5 100644 --- a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx +++ b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx @@ -15,15 +15,14 @@ import { Stack, Text, TextInput, - Tooltip, } from '@mantine/core'; import { isNotEmpty, useForm } from '@mantine/form'; import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; -import { DeleteItemModal } from 'components'; +import { DeleteItemModal, ManagementPill } from 'components'; import { useCommonHooks, useMutationAPI } from 'hooks'; import { useEffect, useState } from 'react'; import { FaChevronLeft } from 'react-icons/fa'; -import { FiPlus, FiTrash } from 'react-icons/fi'; +import { FiPlus } from 'react-icons/fi'; import { buttonClasses, cardClasses, popoverClasses, textInputClasses } from 'styles'; import type { Bookmark, BookmarkGroup } from 'types'; import BookmarkSettingsItem from './BookmarkSettingsItem'; @@ -145,7 +144,7 @@ function DebouncedGroupSettingsItem({ mt={'-1.5rem'} > - + - - { - openModal(); - }} - > - - - + {bookmarks.length} + - - - {bookmarks.length} - - + + + ) => { + setUpdate({ + ...group, + enabled: event.target.checked ? 1 : 0, + }); + }} + openModal={openModal} + /> + {(provided: DroppableProvided) => ( - + {bookmarks.map((bookmark: Bookmark) => ( t.backgroundImage), ), diff --git a/src/types/bookmarkGroup.ts b/src/types/bookmarkGroup.ts index 284aa3b..68490ca 100644 --- a/src/types/bookmarkGroup.ts +++ b/src/types/bookmarkGroup.ts @@ -3,4 +3,5 @@ export interface BookmarkGroup { categoryName: string; categoryIndex: number; filterName: string; + enabled: number; }