From eef213342ccfb69ae3b41a17ea0eb9674121d08f Mon Sep 17 00:00:00 2001
From: Xiaole Su <suxiaole0223@gmail.com>
Date: Thu, 3 Oct 2024 19:46:32 -0400
Subject: [PATCH] YIPPEE

---
 .../app/_components/search/search-filter.tsx  | 22 ++++++++++++++++---
 packages/api/src/router/role.ts               |  1 +
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/_components/search/search-filter.tsx b/apps/web/src/app/_components/search/search-filter.tsx
index 7e4487f..9a6442c 100644
--- a/apps/web/src/app/_components/search/search-filter.tsx
+++ b/apps/web/src/app/_components/search/search-filter.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useCallback } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -22,10 +24,24 @@ export default function SearchFilter() {
     },
   });
 
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    //value is user's search info
+  const searchParams = useSearchParams()!;
+  const router = useRouter();
+  const pathName = usePathname();
 
-    console.log(values);
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams);
+      params.set(name, value);
+      return params.toString();
+    },
+    [searchParams],
+  );
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    // console.log(searchParams.get("search")); query the user search info
+    router.push(
+      pathName + `/?${createQueryString("search", values.searchText)}`,
+    );
   }
 
   return (
diff --git a/packages/api/src/router/role.ts b/packages/api/src/router/role.ts
index 4d54114..808a459 100644
--- a/packages/api/src/router/role.ts
+++ b/packages/api/src/router/role.ts
@@ -1,4 +1,5 @@
 import type { TRPCRouterRecord } from "@trpc/server";
+import Fuse from "fuse.js";
 import { z } from "zod";
 
 import { desc, eq } from "@cooper/db";