smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Search bar fixes and performance updates

Browse Source
This commit is contained in:
Sean Edmunds
2026-01-08 12:53:50 -06:00
parent 38285943cd
commit 93ea28f968
20 changed files with 376 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/settings/components/Bookmarks/Bookmarks.tsx
View File

@@ -33,14 +33,10 @@ const BookmarkSettings = () => {
},
});
const bookmarksEndpoint = 'api/bookmarks';
const {
data: bookmarkData,
isFetched: bookmarkDataIsFetched,
isFetching: bookmarkDataIsFetching,
} = useQueryAPI({
const { data: bookmarkData, isFetching: bookmarkDataIsFetching } = useQueryAPI({
endpoint: bookmarksEndpoint,
});
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
const bookmarks = bookmarkData || [];
const categoriesEndpoint = 'api/bookmarkCategories';
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: categoriesEndpoint,
@@ -54,7 +50,27 @@ const BookmarkSettings = () => {
const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [isLoading, setIsLoading] = useState(false);
const foundBookmarkGroups = [
...new Set(
bookmarks
.filter(
(a: Bookmark) =>
a.name
.toLowerCase()
.includes((debouncedGroupSearch as string).toLowerCase()) ||
a.url.toLowerCase().includes((debouncedGroupSearch as string).toLowerCase()),
)
.map((a: Bookmark) =>
groupData.find(
(b: BookmarkGroup) =>
b.categoryName.toLowerCase() === a.category.toLowerCase(),
),
),
),
];
const foundGroups = groupData.filter((a: BookmarkGroup) =>
a.categoryName.toLowerCase().includes((debouncedGroupSearch as string).toLowerCase()),
);
const handleClose = () => {
closeModal();
form.reset();
@@ -80,40 +96,8 @@ const BookmarkSettings = () => {
);
}
useEffect(() => {
if (bookmarkData && bookmarkDataIsFetched) {
setBookmarks(bookmarkData);
}
}, [bookmarkDataIsFetched, bookmarkData]);
useEffect(() => {
if (groupData && groupsIsFetched) {
const foundBookmarkGroups = [
...new Set(
bookmarks
.filter(
(a: Bookmark) =>
a.name
.toLowerCase()
.includes((debouncedGroupSearch as string).toLowerCase()) ||
a.url
.toLowerCase()
.includes((debouncedGroupSearch as string).toLowerCase()),
)
.map((a: Bookmark) =>
groupData.find(
(b: BookmarkGroup) =>
b.categoryName.toLowerCase() === a.category.toLowerCase(),
),
),
),
];
const foundGroups = groupData.filter((a: BookmarkGroup) =>
a.categoryName
.toLowerCase()
.includes((debouncedGroupSearch as string).toLowerCase()),
);
const groupList = [...new Set([...foundBookmarkGroups, ...foundGroups])].sort(
(a: BookmarkGroup, b: BookmarkGroup) =>
a.categoryIndex > b.categoryIndex ? 1 : -1,

19
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -16,11 +16,15 @@ function DebouncedBookmarkItem({
const { handleDelete, isMobile, theme } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
const { data: groupData } = useQueryAPI({
endpoint: 'api/bookmarkCategories',
});
const [bookmark, setBookmark] = useState<Bookmark>(bookmarkItem);
const [groups, setGroups] = useState<BookmarkGroup[]>([]);
const groups: BookmarkGroup[] =
groupData.sort(
(a: BookmarkGroup, b: BookmarkGroup) =>
a.categoryName.toLocaleLowerCase() > b.categoryName.toLocaleLowerCase(),
) || [];
const [update, setUpdate] = useState<any>({});
const [debounced] = useDebouncedValue(update, 1000);
const handleClose = () => {
@@ -39,17 +43,6 @@ function DebouncedBookmarkItem({
}
}, [update]);
useEffect(() => {
if (groupData) {
setGroups(
groupData.sort(
(a: BookmarkGroup, b: BookmarkGroup) =>
a.categoryName.toLocaleLowerCase() > b.categoryName.toLocaleLowerCase(),
),
);
}
}, [groupData, groupsIsFetched]);
return (
<Card
p={isMobile ? 'xl' : undefined}