feat(web): search document handler

apps/web/src/app/(app)/@admin/documents/dropzone.tsx

@@ -2,10 +2,12 @@
 
 import type { Document } from "@/server/api/routers/documents/documents.schema";
 import { useRef, useState } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { api } from "@/trpc/react";
 import { Dropzone, PDF_MIME_TYPE } from "@mantine/dropzone";
 import { Spinner } from "@nextui-org/react";
 import { FaUpload, FaXmark } from "react-icons/fa6";
+import { useDebounceCallback } from "usehooks-ts";
 
 import { Button } from "@tanya.in/ui/button";
 import { Input } from "@tanya.in/ui/form";
@@ -20,6 +22,16 @@ export function DropzoneContainer({
 }) {
   const openRef = useRef<() => void>(null);
 
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const searchHandler = useDebounceCallback((search: string) => {
+    const params = new URLSearchParams(searchParams);
+    search ? params.set("search", search) : params.delete("search");
+
+    router.replace(`${pathname}?${params.toString()}`);
+  }, 500);
+
   const [loading, setLoading] = useState(false);
   api.documents.get.useQuery(undefined, { initialData });
   const utils = api.useUtils();
@@ -29,8 +41,11 @@ export function DropzoneContainer({
       <div className="flex flex-wrap items-center justify-between gap-4">
         <Input
           className="max-w-sm"
-          placeholder="Search files"
-          classNames={{ inputWrapper: "dark:bg-content2 bg-content1" }}
+          placeholder="Search documents"
+          onChange={(e) => searchHandler(e.target.value)}
+          defaultValue={searchParams.get("search") ?? ""}
+          isClearable
+          onClear={() => searchHandler("")}
         />
         <Button color="primary" onClick={() => openRef.current?.()}>
           Upload New Document

apps/web/src/app/(app)/@admin/documents/page.tsx

@@ -2,15 +2,24 @@ import { api } from "@/trpc/server";
 
 import "@mantine/dropzone/styles.css";
 
+import { Card, CardContent, CardHeader, CardTitle } from "@tanya.in/ui/card";
+
 import { DropzoneContainer } from "./dropzone";
 
 export default async function DocumentsPage() {
   const documents = await api.documents.get();
 
   return (
     <div className="flex flex-1 flex-col gap-4">
-      <h3 className="font-semibold">All Documents</h3>
-      <DropzoneContainer initialData={documents} />
+      <Card className="w-full">
+        <CardHeader>
+          <CardTitle>Documents</CardTitle>
+        </CardHeader>
+
+        <CardContent className="space-y-8">
+          <DropzoneContainer initialData={documents} />
+        </CardContent>
+      </Card>
     </div>
   );
 }

apps/web/src/app/(app)/@admin/documents/table.tsx

@@ -2,6 +2,7 @@
 
 import type { Document } from "@/server/api/routers/documents/documents.schema";
 import React from "react";
+import { useSearchParams } from "next/navigation";
 import { api } from "@/trpc/react";
 import {
   Chip,
@@ -47,10 +48,13 @@ export function DocumentsTable() {
   const { isOpen, onOpenChange, onOpen } = useDisclosure();
   const [selectedDocument, setSelectedDocument] = React.useState<Document>();
 
-  const { data, isLoading, isFetching } = api.documents.get.useQuery();
+  const { data, isFetching } = api.documents.get.useQuery();
   const deleteDocument = api.documents.delete.useMutation();
   const utils = api.useUtils();
 
+  const searchParams = useSearchParams();
+  const search = searchParams.get("search") ?? "";
+
   const renderCell = React.useCallback(
     (file: Document, columnKey: ColumnKey) => {
       switch (columnKey) {
@@ -125,7 +129,7 @@ export function DocumentsTable() {
       <Table
         aria-label="Documents Table"
         classNames={{
-          wrapper: "min-h-[31rem] relative",
+          wrapper: "min-h-[31rem] relative p-0",
         }}
       >
         <TableHeader columns={columns}>
@@ -140,15 +144,18 @@ export function DocumentsTable() {
           )}
         </TableHeader>
         <TableBody
-          items={data ?? []}
+          items={data?.filter((item) =>
+            search
+              ? item.name.toLowerCase().includes(search.toLowerCase()) ||
+                item.filename.toLowerCase().includes(search.toLowerCase())
+              : true,
+          )}
           emptyContent={
-            !isLoading && (
-              <p>
-                No documents found <br /> Drag and drop a document to upload
-              </p>
-            )
+            <p>
+              No documents found <br /> Drag and drop a document to upload
+            </p>
           }
-          isLoading={isLoading || isFetching}
+          isLoading={isFetching}
           loadingContent={
             <Spinner className="absolute inset-0 bg-overlay/20 dark:bg-overlay/70" />
           }