fix(web): fix query getting rest when bookmark preview is closed. fixes #1521

2 files changed, 24 insertions, 15 deletions

diff --git a/apps/web/lib/hooks/bookmark-search.ts b/apps/web/lib/hooks/bookmark-search.ts
index b6af94ee..0902af44 100644
--- a/apps/web/lib/hooks/bookmark-search.ts
+++ b/apps/web/lib/hooks/bookmark-search.ts
@@ -1,15 +1,12 @@
-import { useEffect, useMemo, useState } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useRef } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useSortOrderStore } from "@/lib/store/useSortOrderStore";
 import { api } from "@/lib/trpc";
 import { keepPreviousData } from "@tanstack/react-query";
 
 import { parseSearchQuery } from "@karakeep/shared/searchQueryParser";
 
-export function useIsSearchPage() {
-  const pathname = usePathname();
-  return pathname.startsWith("/dashboard/search");
-}
+import { useInSearchPageStore } from "../store/useInSearchPageStore";
 
 function useSearchQuery() {
   const searchParams = useSearchParams();
@@ -22,31 +19,30 @@ function useSearchQuery() {
 export function useDoBookmarkSearch() {
   const router = useRouter();
   const { searchQuery, parsedSearchQuery } = useSearchQuery();
-  const isInSearchPage = useIsSearchPage();
-  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | undefined>();
+  const isInSearchPage = useInSearchPageStore((val) => val.inSearchPage);
+  const timeoutId = useRef<NodeJS.Timeout>(null);
 
   useEffect(() => {
     return () => {
-      if (!timeoutId) {
+      if (!timeoutId.current) {
         return;
       }
-      clearTimeout(timeoutId);
+      clearTimeout(timeoutId.current);
     };
   }, [timeoutId]);
 
   const doSearch = (val: string) => {
-    setTimeoutId(undefined);
+    timeoutId.current = null;
     router.replace(`/dashboard/search?q=${encodeURIComponent(val)}`);
   };
 
   const debounceSearch = (val: string) => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
     }
-    const id = setTimeout(() => {
+    timeoutId.current = setTimeout(() => {
       doSearch(val);
     }, 10);
-    setTimeoutId(id);
   };
 
   return {
diff --git a/apps/web/lib/store/useInSearchPageStore.ts b/apps/web/lib/store/useInSearchPageStore.ts
new file mode 100644
index 00000000..c433539d
--- /dev/null
+++ b/apps/web/lib/store/useInSearchPageStore.ts
@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface InSearchPageState {
+  inSearchPage: boolean;
+  setInSearchPage: (inSearchPage: boolean) => void;
+}
+
+export const useInSearchPageStore = create<InSearchPageState>((set) => ({
+  inSearchPage: false,
+  setInSearchPage: (inSearchPage) => {
+    set({ inSearchPage });
+  },
+}));