feat(search): implement search functionality with debounced input and results display

Author: tyronejosee

src/actions/resources.ts

@@ -48,6 +48,31 @@ export const getResourcesByCategory = async (
   return data;
 };
 
+export const searchResources = async (
+  query: string,
+): Promise<ResourceList[]> => {
+  const supabase = await createClient();
+  const { data, error } = await supabase
+    .from("resources")
+    .select(
+      `
+    id,
+    name,
+    slug,
+    image,
+    tags,
+    category:categories (id, name, slug, created_at)
+    `,
+    )
+    .or(`name.ilike.%${query}%,slug.ilike.%${query}%`)
+    .order("name", { ascending: true })
+    .limit(20);
+
+  if (error) throw new Error(error.message);
+  // @ts-ignore - supabase returns an array, but we want to return a single object
+  return data;
+};
+
 export const getResourceBySlug = async (
   slug: string,
 ): Promise<Resource | null> => {

src/app/(public)/search/page.tsx

@@ -0,0 +1,39 @@
+import { redirect } from "next/navigation";
+import { searchResources } from "@/actions/resources";
+import { ResourceList } from "@/components/resources";
+import { Heading } from "@/components/ui";
+import { PROJECT_NAME, HOME_PATH } from "@/config/constants";
+
+type Props = {
+  searchParams: Promise<{ query?: string }>;
+};
+
+export async function generateMetadata({ searchParams }: Props) {
+  const resolvedSearchParams = await searchParams;
+  const query = resolvedSearchParams?.query ?? "";
+
+  return {
+    title: `${query ? `Results for "${query}"` : "Explore"} - ${PROJECT_NAME}`,
+  };
+}
+
+export default async function SearchPage({ searchParams }: Props) {
+  const resolvedSearchParams = await searchParams;
+  const query = resolvedSearchParams?.query?.trim();
+  if (!query) redirect(HOME_PATH);
+  const results = await searchResources(query);
+
+  const renderResources = () => {
+    if (results.length === 0) {
+      return <p className="text-gray-500">No results found</p>;
+    }
+    return <ResourceList resources={results} />;
+  };
+
+  return (
+    <section className="max-w-screen-2xl mx-auto text-center py-6 px-6">
+      <Heading title={`Results for "${query}"`} />
+      {renderResources()}
+    </section>
+  );
+}

src/components/layout/index.ts

@@ -1,4 +1,5 @@
 export { default as EmptyList } from "./empty-list";
 export { default as Footer } from "./footer";
 export { default as Navbar } from "./navbar";
+export { default as SearchBar } from "./search-bar";
 export { default as Sidebar } from "./sidebar";

src/components/layout/search-bar.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Input, Kbd } from "@heroui/react";
+import { Search } from "lucide-react";
+import { HOME_PATH } from "@/config/constants";
+import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
+
+export default function SearchBar() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [query, setQuery] = useState(searchParams.get("query") || "");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  const debouncedPush = useDebouncedCallback((value: string) => {
+    if (value.trim()) {
+      router.push(`/search?query=${value}`);
+    } else {
+      router.push(HOME_PATH);
+    }
+  }, 400);
+
+  const handleSearchChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const searchValue = e.target.value;
+      setQuery(searchValue);
+      debouncedPush(searchValue);
+    },
+    [debouncedPush],
+  );
+
+  return (
+    <form onSubmit={(e) => e.preventDefault()}>
+      <Input
+        ref={inputRef}
+        size="sm"
+        radius="sm"
+        variant="bordered"
+        placeholder="Search resources..."
+        value={query}
+        onChange={handleSearchChange}
+        aria-label="Search"
+        className="w-full"
+        classNames={{
+          inputWrapper:
+            "border-2 border-neutral-200 dark:border-neutral-800 text-neutral-950 dark:text-white shadow-none",
+          input:
+            "placeholder:text-neutral-400 dark:placeholder:text-neutral-600",
+        }}
+        startContent={<Search size={20} />}
+        endContent={
+          <Kbd
+            keys={["command"]}
+            classNames={{
+              base: "bg-neutral-200 dark:bg-neutral-800 px-1 py-0 rounded-sm text-xs",
+            }}
+          >
+            K
+          </Kbd>
+        }
+      />
+    </form>
+  );
+}

src/components/layout/sidebar.tsx

@@ -2,9 +2,10 @@
 
 import type { Category } from "@/types";
 
+import { Suspense } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Accordion, AccordionItem, Input, Kbd } from "@heroui/react";
+import { Accordion, AccordionItem, Input, Kbd, Skeleton } from "@heroui/react";
 import {
   BadgeInfo,
   BookOpen,
@@ -13,9 +14,8 @@ import {
   Folder,
   HeartHandshake,
   Origami,
-  Search,
 } from "lucide-react";
-import { Footer } from "@/components/layout";
+import { Footer, SearchBar } from "@/components/layout";
 import { HOME_PATH, PROJECT_NAME } from "@/config/constants";
 
 type Props = {
@@ -39,30 +39,9 @@ export default function Sidebar({ categories }: Props) {
           </div>
         </Link>
       </header>
-      <Input
-        size="sm"
-        radius="sm"
-        variant="bordered"
-        placeholder="Search resources..."
-        // value={search}
-        // onChange={(e) => setSearch(e.target.value)}
-        className="w-full"
-        classNames={{
-          inputWrapper:
-            "border-2 border-neutral-200 dark:border-neutral-800 text-neutral-950 dark:text-white shadow-none",
-        }}
-        startContent={<Search size={20} />}
-        endContent={
-          <Kbd
-            keys={["command"]}
-            classNames={{
-              base: "bg-neutral-200 dark:bg-neutral-800 px-1 py-0 rounded-sm text-xs",
-            }}
-          >
-            K
-          </Kbd>
-        }
-      />
+      <Suspense fallback={<Skeleton className="h-10 w-full rounded-xl" />}>
+        <SearchBar />
+      </Suspense>
 
       <nav className="overflow-hidden relative text-sm">
         <ul className="styled-scrollbar flex h-[calc(100vh-60px)] flex-col overflow-y-scroll dark:text-white">

src/hooks/use-debounced-callback.ts

@@ -0,0 +1,30 @@
+import { useRef, useEffect, useCallback } from "react";
+
+export function useDebouncedCallback<T extends (...args: any[]) => void>(
+  callback: T,
+  delay: number,
+) {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const debouncedFn = useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return debouncedFn;
+}