From 364e82c7f2f10759b437c0282021d5dfef98c922 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sun, 10 Mar 2024 20:27:59 +0000
Subject: feature: Change top nav to include search and move add link to a
 modal

---
 packages/web/app/dashboard/bookmarks/layout.tsx    |   4 +-
 packages/web/app/dashboard/search/page.tsx         |  68 ++------------
 .../components/dashboard/bookmarks/AddBookmark.tsx | 100 --------------------
 .../dashboard/bookmarks/AddLinkButton.tsx          | 102 +++++++++++++++++++++
 .../web/components/dashboard/bookmarks/TopNav.tsx  |  43 +++++++++
 .../components/dashboard/search/SearchInput.tsx    |  25 +++++
 packages/web/lib/hooks/bookmark-search.ts          |  73 +++++++++++++++
 packages/web/tailwind.config.ts                    |   9 ++
 8 files changed, 262 insertions(+), 162 deletions(-)
 delete mode 100644 packages/web/components/dashboard/bookmarks/AddBookmark.tsx
 create mode 100644 packages/web/components/dashboard/bookmarks/AddLinkButton.tsx
 create mode 100644 packages/web/components/dashboard/bookmarks/TopNav.tsx
 create mode 100644 packages/web/components/dashboard/search/SearchInput.tsx
 create mode 100644 packages/web/lib/hooks/bookmark-search.ts

(limited to 'packages')

diff --git a/packages/web/app/dashboard/bookmarks/layout.tsx b/packages/web/app/dashboard/bookmarks/layout.tsx
index 6a588823..71ee143b 100644
--- a/packages/web/app/dashboard/bookmarks/layout.tsx
+++ b/packages/web/app/dashboard/bookmarks/layout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import AddBookmark from "@/components/dashboard/bookmarks/AddBookmark";
+import TopNav from "@/components/dashboard/bookmarks/TopNav";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -14,7 +14,7 @@ export default function BookmarksLayout({
   return (
     <div className="flex h-full flex-col">
       <div>
-        <AddBookmark />
+        <TopNav />
       </div>
       <hr />
       <div className="my-4 flex-1 pb-4">{children}</div>
diff --git a/packages/web/app/dashboard/search/page.tsx b/packages/web/app/dashboard/search/page.tsx
index 514c546d..602f6aa0 100644
--- a/packages/web/app/dashboard/search/page.tsx
+++ b/packages/web/app/dashboard/search/page.tsx
@@ -1,76 +1,24 @@
 "use client";
 
-import { api } from "@/lib/trpc";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
-import { Input } from "@/components/ui/input";
 import Loading from "../bookmarks/loading";
-import { keepPreviousData } from "@tanstack/react-query";
-import { Search } from "lucide-react";
-import { ActionButton } from "@/components/ui/action-button";
 import { Suspense, useRef } from "react";
+import { SearchInput } from "@/components/dashboard/search/SearchInput";
+import { useBookmarkSearch } from "@/lib/hooks/bookmark-search";
 
 function SearchComp() {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const searchQuery = searchParams.get("q") || "";
-
-  const { data, isPending, isPlaceholderData, error } =
-    api.bookmarks.searchBookmarks.useQuery(
-      {
-        text: searchQuery,
-      },
-      {
-        placeholderData: keepPreviousData,
-      },
-    );
-
-  if (error) {
-    throw error;
-  }
+  const { data, isPending, isPlaceholderData } = useBookmarkSearch();
 
   const inputRef: React.MutableRefObject<HTMLInputElement | null> =
     useRef<HTMLInputElement | null>(null);
 
-  let timeoutId: NodeJS.Timeout | undefined;
-
-  // Debounce user input
-  const doSearch = () => {
-    if (!inputRef.current) {
-      return;
-    }
-    router.replace(`${pathname}?q=${inputRef.current.value}`);
-  };
-
-  const onInputChange = () => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      doSearch();
-    }, 200);
-  };
-
   return (
     <div className="container flex flex-col gap-3 p-4">
-      <div className="flex gap-2">
-        <Input
-          ref={inputRef}
-          placeholder="Search"
-          defaultValue={searchQuery}
-          onChange={onInputChange}
-        />
-        <ActionButton
-          loading={isPending || isPlaceholderData}
-          onClick={doSearch}
-        >
-          <span className="flex gap-2">
-            <Search />
-            <span className="my-auto">Search</span>
-          </span>
-        </ActionButton>
-      </div>
+      <SearchInput
+        ref={inputRef}
+        autoFocus={true}
+        loading={isPending || isPlaceholderData}
+      />
       <hr />
       {data ? (
         <BookmarksGrid
diff --git a/packages/web/components/dashboard/bookmarks/AddBookmark.tsx b/packages/web/components/dashboard/bookmarks/AddBookmark.tsx
deleted file mode 100644
index d12fc663..00000000
--- a/packages/web/components/dashboard/bookmarks/AddBookmark.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-"use client";
-
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Pencil, Plus } from "lucide-react";
-import { useForm, SubmitErrorHandler } from "react-hook-form";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "@/components/ui/use-toast";
-import { api } from "@/lib/trpc";
-import { ActionButton } from "@/components/ui/action-button";
-import { Button } from "@/components/ui/button";
-import { BookmarkedTextEditor } from "./BookmarkedTextEditor";
-import { useState } from "react";
-
-function AddText() {
-  const [isEditorOpen, setEditorOpen] = useState(false);
-
-  return (
-    <div className="flex">
-      <BookmarkedTextEditor open={isEditorOpen} setOpen={setEditorOpen} />
-      <Button className="m-auto" onClick={() => setEditorOpen(true)}>
-        <Pencil />
-      </Button>
-    </div>
-  );
-}
-
-function AddLink() {
-  const formSchema = z.object({
-    url: z.string().url({ message: "The link must be a valid URL" }),
-  });
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      url: "",
-    },
-  });
-
-  const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate;
-  const createBookmarkMutator = api.bookmarks.createBookmark.useMutation({
-    onSuccess: () => {
-      invalidateBookmarksCache();
-      form.reset();
-    },
-    onError: () => {
-      toast({ description: "Something went wrong", variant: "destructive" });
-    },
-  });
-
-  const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => {
-    toast({
-      description: Object.values(errors)
-        .map((v) => v.message)
-        .join("\n"),
-      variant: "destructive",
-    });
-  };
-
-  return (
-    <Form {...form}>
-      <form
-        className="flex-grow"
-        onSubmit={form.handleSubmit(
-          (value) =>
-            createBookmarkMutator.mutate({ url: value.url, type: "link" }),
-          onError,
-        )}
-      >
-        <div className="flex w-full items-center space-x-2 py-4">
-          <FormField
-            control={form.control}
-            name="url"
-            render={({ field }) => {
-              return (
-                <FormItem className="flex-1">
-                  <FormControl>
-                    <Input type="text" placeholder="Link" {...field} />
-                  </FormControl>
-                </FormItem>
-              );
-            }}
-          />
-          <ActionButton type="submit" loading={createBookmarkMutator.isPending}>
-            <Plus />
-          </ActionButton>
-        </div>
-      </form>
-    </Form>
-  );
-}
-
-export default function AddBookmark() {
-  return (
-    <div className="container flex gap-2">
-      <AddLink />
-      <AddText />
-    </div>
-  );
-}
diff --git a/packages/web/components/dashboard/bookmarks/AddLinkButton.tsx b/packages/web/components/dashboard/bookmarks/AddLinkButton.tsx
new file mode 100644
index 00000000..5973f909
--- /dev/null
+++ b/packages/web/components/dashboard/bookmarks/AddLinkButton.tsx
@@ -0,0 +1,102 @@
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useForm, SubmitErrorHandler } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
+import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useState } from "react";
+
+export function AddLinkButton({ children }: { children: React.ReactNode }) {
+  const [isOpen, setOpen] = useState(false);
+
+  const formSchema = z.object({
+    url: z.string().url({ message: "The link must be a valid URL" }),
+  });
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      url: "",
+    },
+  });
+
+  const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate;
+  const createBookmarkMutator = api.bookmarks.createBookmark.useMutation({
+    onSuccess: () => {
+      invalidateBookmarksCache();
+      form.reset();
+      setOpen(false);
+    },
+    onError: () => {
+      toast({ description: "Something went wrong", variant: "destructive" });
+    },
+  });
+
+  const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => {
+    toast({
+      description: Object.values(errors)
+        .map((v) => v.message)
+        .join("\n"),
+      variant: "destructive",
+    });
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <Form {...form}>
+          <DialogHeader>
+            <DialogTitle>Add Link</DialogTitle>
+          </DialogHeader>
+          <form
+            className="flex flex-col gap-4"
+            onSubmit={form.handleSubmit(
+              (value) =>
+                createBookmarkMutator.mutate({ url: value.url, type: "link" }),
+              onError,
+            )}
+          >
+            <FormField
+              control={form.control}
+              name="url"
+              render={({ field }) => {
+                return (
+                  <FormItem className="flex-1">
+                    <FormControl>
+                      <Input type="text" placeholder="Link" {...field} />
+                    </FormControl>
+                  </FormItem>
+                );
+              }}
+            />
+            <DialogFooter className="flex-shrink gap-1 sm:justify-end">
+              <DialogClose asChild>
+                <Button type="button" variant="secondary">
+                  Close
+                </Button>
+              </DialogClose>
+              <ActionButton
+                type="submit"
+                loading={createBookmarkMutator.isPending}
+              >
+                Add
+              </ActionButton>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/web/components/dashboard/bookmarks/TopNav.tsx b/packages/web/components/dashboard/bookmarks/TopNav.tsx
new file mode 100644
index 00000000..6c0f18e5
--- /dev/null
+++ b/packages/web/components/dashboard/bookmarks/TopNav.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { Link, NotebookPen } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { BookmarkedTextEditor } from "./BookmarkedTextEditor";
+import { useState } from "react";
+import { AddLinkButton } from "./AddLinkButton";
+import { SearchInput } from "../search/SearchInput";
+
+function AddText() {
+  const [isEditorOpen, setEditorOpen] = useState(false);
+
+  return (
+    <div className="flex">
+      <BookmarkedTextEditor open={isEditorOpen} setOpen={setEditorOpen} />
+      <Button className="m-auto" onClick={() => setEditorOpen(true)}>
+        <NotebookPen />
+      </Button>
+    </div>
+  );
+}
+
+function AddLink() {
+  return (
+    <div className="flex">
+      <AddLinkButton>
+        <Button className="m-auto">
+          <Link />
+        </Button>
+      </AddLinkButton>
+    </div>
+  );
+}
+
+export default function TopNav() {
+  return (
+    <div className="container flex gap-2 py-4">
+      <SearchInput />
+      <AddLink />
+      <AddText />
+    </div>
+  );
+}
diff --git a/packages/web/components/dashboard/search/SearchInput.tsx b/packages/web/components/dashboard/search/SearchInput.tsx
new file mode 100644
index 00000000..73d14c90
--- /dev/null
+++ b/packages/web/components/dashboard/search/SearchInput.tsx
@@ -0,0 +1,25 @@
+import { Input } from "@/components/ui/input";
+import { useDoBookmarkSearch } from "@/lib/hooks/bookmark-search";
+import { cn } from "@/lib/utils";
+import React from "react";
+
+const SearchInput = React.forwardRef<
+  HTMLInputElement,
+  React.HTMLAttributes<HTMLInputElement> & { loading?: boolean }
+>(({ className, loading = false, ...props }, ref) => {
+  const { debounceSearch, searchQuery } = useDoBookmarkSearch();
+
+  return (
+    <Input
+      ref={ref}
+      placeholder="Search"
+      defaultValue={searchQuery}
+      onChange={(e) => debounceSearch(e.target.value)}
+      className={cn(loading ? "animate-pulse-border" : undefined, className)}
+      {...props}
+    />
+  );
+});
+SearchInput.displayName = "SearchInput";
+
+export { SearchInput };
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,
+  };
+}
diff --git a/packages/web/tailwind.config.ts b/packages/web/tailwind.config.ts
index 5797e87d..521ba51c 100644
--- a/packages/web/tailwind.config.ts
+++ b/packages/web/tailwind.config.ts
@@ -67,10 +67,19 @@ const config = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        "pulse-border": {
+          "0%, 100%": {
+            "box-shadow": "0 0 0 0 gray",
+          },
+          "50%": {
+            "box-shadow": "0 0 0 2px gray",
+          },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "pulse-border": "pulse-border 1s ease-in-out infinite",
       },
     },
   },
-- 
cgit v1.2.3-70-g09d2