add search for contact book (#100)

apps/web/src/app/(dashboard)/contacts/contact-books-list.tsx

@@ -7,14 +7,30 @@ import Link from "next/link";
 import EditContactBook from "./edit-contact-book";
 import { useRouter } from "next/navigation";
 import { motion } from "framer-motion";
+import { useUrlState } from "~/hooks/useUrlState";
+import { Input } from "@unsend/ui/src/input";
+import { useDebouncedCallback } from "use-debounce";
 
 export default function ContactBooksList() {
-  const contactBooksQuery = api.contacts.getContactBooks.useQuery();
+  const [search, setSearch] = useUrlState("search");
+  const contactBooksQuery = api.contacts.getContactBooks.useQuery({
+    search: search ?? undefined,
+  });
 
   const router = useRouter();
 
+  const debouncedSearch = useDebouncedCallback((value: string) => {
+    setSearch(value);
+  }, 1000);
+
   return (
     <div className="mt-10">
+      <Input
+        placeholder="Search contact book"
+        className="w-[300px] mr-4 mb-4"
+        defaultValue={search ?? ""}
+        onChange={(e) => debouncedSearch(e.target.value)}
+      />
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 ">
         {contactBooksQuery.data?.map((contactBook) => (
           <motion.div

apps/web/src/server/api/routers/contacts.ts

@@ -9,18 +9,23 @@ import {
 import * as contactService from "~/server/service/contact-service";
 
 export const contactsRouter = createTRPCRouter({
-  getContactBooks: teamProcedure.query(async ({ ctx: { db, team } }) => {
+  getContactBooks: teamProcedure
-    return db.contactBook.findMany({
+    .input(z.object({ search: z.string().optional() }))
-      where: {
+    .query(async ({ ctx: { db, team }, input }) => {
-        teamId: team.id,
+      return db.contactBook.findMany({
-      },
+        where: {
-      include: {
+          teamId: team.id,
-        _count: {
+          ...(input.search
-          select: { contacts: true },
+            ? { name: { contains: input.search, mode: "insensitive" } }
+            : {}),
         },
-      },
+        include: {
-    });
+          _count: {
-  }),
+            select: { contacts: true },
+          },
+        },
+      });
+    }),
 
   createContactBook: teamProcedure
     .input(