feature: Change top nav to include search and move add link to a modal

1 files changed, 73 insertions, 0 deletions

diff --git a/packages/web/lib/hooks/bookmark-search.ts b/packages/web/lib/hooks/bookmark-search.ts
new file mode 100644
index 00000000..738e1bd8
--- /dev/null
+++ b/packages/web/lib/hooks/bookmark-search.ts
@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+import { api } from "@/lib/trpc";
+import { useRouter, useSearchParams } from "next/navigation";
+import { keepPreviousData } from "@tanstack/react-query";
+
+function useSearchQuery() {
+  const searchParams = useSearchParams();
+  const searchQuery = searchParams.get("q") || "";
+  return { searchQuery };
+}
+
+export function useDoBookmarkSearch() {
+  const router = useRouter();
+  const { searchQuery } = useSearchQuery();
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | undefined>();
+
+  useEffect(() => {
+    return () => {
+      if (!timeoutId) {
+        return;
+      }
+      clearTimeout(timeoutId);
+    };
+  }, [timeoutId]);
+
+  const doSearch = (val: string) => {
+    setTimeoutId(undefined);
+    router.replace(`/dashboard/search?q=${val}`);
+  };
+
+  const debounceSearch = (val: string) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    const id = setTimeout(() => {
+      doSearch(val);
+    }, 200);
+    setTimeoutId(id);
+  };
+
+  return {
+    doSearch,
+    debounceSearch,
+    searchQuery,
+  };
+}
+
+export function useBookmarkSearch() {
+  const { searchQuery } = useSearchQuery();
+
+  const { data, isPending, isPlaceholderData, error } =
+    api.bookmarks.searchBookmarks.useQuery(
+      {
+        text: searchQuery,
+      },
+      {
+        placeholderData: keepPreviousData,
+        gcTime: 0,
+      },
+    );
+
+  if (error) {
+    throw error;
+  }
+
+  return {
+    searchQuery,
+    error,
+    data,
+    isPending,
+    isPlaceholderData,
+  };
+}