search site

app/api/sites/get_all/route.ts

@@ -1,15 +1,18 @@
 import { NextRequest, NextResponse } from "next/server";
 import prisma from "@/app/prisma";
+import Fuse from "fuse.js";
 
 interface QueryParams {
     currentPage: number;
     itemPerPage: number;
+    search: string;
 }
 
 export async function GET(request: NextRequest) {
     const { searchParams } = request.nextUrl;
     const currentPage = Number(searchParams.get("currentPage")) || 1;
     const itemPerPage = Number(searchParams.get("itemPerPage")) || 1;
+    const search = searchParams.get("search") || "";
 
     const skip = (currentPage - 1) * itemPerPage;  
     const take = itemPerPage;
@@ -18,8 +21,29 @@ export async function GET(request: NextRequest) {
         const sites = await prisma.site.findMany({
             skip,
             take,
+            where: {
+                name: {
+                    contains: search,
+                    mode: "insensitive",
+                },
+                description: {
+                    contains: search,
+                    mode: "insensitive",
+                },
+            },
+        });
+        const total = await prisma.site.count({
+            where: {
+                name: {
+                    contains: search,
+                    mode: "insensitive",
+                },
+                description: {
+                    contains: search,
+                    mode: "insensitive",
+                },
+            },
         });
-        const total = await prisma.site.count();
         return NextResponse.json({ sites, total, currentPage, itemPerPage }, { status: 200 });
     } catch (error: any) {
         return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });

app/dashboard/sites/SitesPage.tsx

@@ -18,6 +18,7 @@ export default function SitesPage({ username, name }: SitesPageProps) {
     const [currentPage, setCurrentPage] = useState(1);
     const [itemPerPage, setItemPerPage] = useState(5);
     const [total, setTotal] = useState(0);
+    const [search, setSearch] = useState("");
 
     const handlePageChange = (page: number) => {
         setCurrentPage(page);
@@ -27,12 +28,13 @@ export default function SitesPage({ username, name }: SitesPageProps) {
             params: {
                 currentPage,
                 itemPerPage,
+                search,
             },
         }).then((response) => {
             setSites(response.data.sites);
             setTotal(response.data.total);
         });
-    }, [currentPage, itemPerPage]);
+    }, [currentPage, itemPerPage, search]);
     
     return (
         <Sidebar 
@@ -54,7 +56,7 @@ export default function SitesPage({ username, name }: SitesPageProps) {
                 <AddSite />
 
                 <div className="flex gap-2 items-center pt-4">
-                    <input type="text" placeholder="Search..." className="input input-bordered w-full" />
+                    <input type="text" placeholder="Search..." className="input input-bordered w-full" onChange={(e) => setSearch(e.target.value)} />
                     <select defaultValue="Pick a font" className="select w-24" onChange={(e) => setItemPerPage(Number(e.target.value))}>
                         <option disabled={true}>Layout</option>
                         <option value={5}>List</option>