Implement pagination and enhanced search functionality for user data

Author: druvkotwani

client/src/app/components/Navbar.tsx

@@ -35,21 +35,21 @@ const Navbar: React.FC<NavbarProps> = ({
 
       {/* Search */}
       {searchBarPresent && (
-        <form className="">
-          <div className="relative flex ">
+        <form className="" onSubmit={(e) => e.preventDefault()}>
+          <div className="relative flex items-center">
             <input
               value={search}
               onChange={(e) => setSearch && setSearch(e.target.value)}
               type="text"
-              placeholder="Search by username"
-              className="bg-[#1f1f1f] sm:w-[260px] w-[100px] font-sourcecodepro text-white rounded px-4 py-3  focus:outline-none pl-10"
+              placeholder="Search by name"
+              className="bg-[#1f1f1f] sm:w-[260px] w-[100px] font-sourcecodepro text-white rounded-l px-4 py-3 focus:outline-none pl-10"
             />
             <Image
               src="/assets/icons/search.svg"
               alt="Search Icon"
               width={20}
               height={20}
-              className="absolute left-2 -translate-y-1/2 top-1/2 "
+              className="absolute left-2 -translate-y-1/2 top-1/2"
             />
           </div>
         </form>

client/src/app/page.tsx

@@ -5,7 +5,7 @@ import Navbar from "./components/Navbar";
 import Card from "./components/Card";
 import Footer from "./components/Footer";
 import GenerateStats from "./components/GenerateStats";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState, useMemo } from "react";
 import PromotionCard from "./components/PromotionCard";
 import { DataContext } from "./context/DataContext";
 import { ToastContainer } from "react-toastify";
@@ -18,21 +18,62 @@ export default function Home() {
   const [loading, setLoading] = useState(true);
   const [showStats, setShowStats] = useState(false);
   const [sortBy, setSortBy] = useState("default");
+  const [pagination, setPagination] = useState({
+    currentPage: 1,
+    totalPages: 1,
+    totalItems: 0,
+    limit: 11,
+  });
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
 
-  const fetchData = async () => {
+  // Debounce search input to avoid too many requests
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(search);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [search]);
+
+  // Reset pagination when search changes
+  useEffect(() => {
+    setPagination((prev) => ({ ...prev, currentPage: 1 }));
+  }, [debouncedSearch]);
+
+  const fetchData = async (page = 1) => {
     try {
-      const res = await fetch("/api/fetchdata");
-      const data = await res.json();
-      setDatas(data.data);
+      setLoading(true);
+      const queryParams = new URLSearchParams();
+
+      if (debouncedSearch) {
+        queryParams.append("search", debouncedSearch);
+      }
+
+      queryParams.append("page", page.toString());
+      queryParams.append("limit", pagination.limit.toString());
+      queryParams.append("sortBy", sortBy);
+
+      const res = await fetch(`/api/fetchdata?${queryParams.toString()}`);
+      const response = await res.json();
+
+      setDatas(response.data);
+      setPagination({
+        currentPage: response.pagination.page,
+        totalPages: response.pagination.totalPages,
+        totalItems: response.pagination.total,
+        limit: response.pagination.limit,
+      });
       setLoading(false);
     } catch (error) {
       console.error("Error fetching messages:", error);
+      setLoading(false);
     }
   };
 
   useEffect(() => {
-    fetchData();
-  }, [datas && datas.length]);
+    fetchData(pagination.currentPage);
+  }, [debouncedSearch, pagination.currentPage, pagination.limit, sortBy]);
 
   useEffect(() => {
     setTimeout(() => {
@@ -42,22 +83,13 @@ export default function Home() {
 
   const handleSortChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setSortBy(e.target.value);
+    // Reset to first page when sorting changes
+    setPagination((prev) => ({ ...prev, currentPage: 1 }));
   };
 
-  const searchedData = datas?.filter((data: any) =>
-    data.profileData.fullName.toLowerCase().includes(search.toLowerCase())
-  );
-  const sorting = (data: any[]) => {
-    switch (sortBy) {
-      case "question-solved":
-        return data.slice().sort((a, b) => b.totalSolved - a.totalSolved);
-      case "default":
-      default:
-        return data.slice().sort((a, b) => {
-          return (
-            new Date(b.timeStamp).getTime() - new Date(a.timeStamp).getTime()
-          );
-        });
+  const handlePageChange = (newPage: number) => {
+    if (newPage > 0 && newPage <= pagination.totalPages) {
+      setPagination((prev) => ({ ...prev, currentPage: newPage }));
     }
   };
 
@@ -106,17 +138,80 @@ export default function Home() {
         <PromotionCard />
         {loading ? (
           <>
-            {Array.from({ length: 6 }, (_, i) => (
+            {Array.from({ length: 8 }, (_, i) => (
               <Skeleton key={i} />
             ))}
           </>
         ) : (
-          sorting(searchedData).map((userData: any, index: number) => (
-            <Card userData={userData} index={index} key={index} />
+          datas?.map((userData: any, index: number) => (
+            <Card
+              userData={userData}
+              index={index}
+              key={userData._id || index}
+            />
           ))
         )}
       </div>
 
+      {/* Pagination Controls */}
+      {!loading && pagination.totalPages > 1 && (
+        <div className="flex justify-center mt-12 mb-16 max-w-7xl mx-auto">
+          <div className="flex space-x-2 items-center font-sourcecodepro">
+            <button
+              onClick={() => handlePageChange(pagination.currentPage - 1)}
+              disabled={pagination.currentPage === 1}
+              className="px-4 py-2 rounded-md border border-gray-600 bg-[#0e0e0e] text-white disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Previous
+            </button>
+
+            <div className="flex space-x-2">
+              {Array.from(
+                { length: Math.min(5, pagination.totalPages) },
+                (_, i) => {
+                  // Show 5 pages around current page
+                  let pageNum = 1;
+                  if (pagination.totalPages <= 5) {
+                    pageNum = i + 1;
+                  } else if (pagination.currentPage <= 3) {
+                    pageNum = i + 1;
+                  } else if (
+                    pagination.currentPage >=
+                    pagination.totalPages - 2
+                  ) {
+                    pageNum = pagination.totalPages - 4 + i;
+                  } else {
+                    pageNum = pagination.currentPage - 2 + i;
+                  }
+
+                  return (
+                    <button
+                      key={pageNum}
+                      onClick={() => handlePageChange(pageNum)}
+                      className={`w-10 h-10 rounded-md ${
+                        pagination.currentPage === pageNum
+                          ? "bg-gradient-to-r from-[#cb42b2] to-[#ecf576] text-black font-bold"
+                          : "border border-gray-600 bg-[#0e0e0e] text-white"
+                      }`}
+                    >
+                      {pageNum}
+                    </button>
+                  );
+                }
+              )}
+            </div>
+
+            <button
+              onClick={() => handlePageChange(pagination.currentPage + 1)}
+              disabled={pagination.currentPage === pagination.totalPages}
+              className="px-4 py-2 rounded-md border border-gray-600 bg-[#0e0e0e] text-white disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+
       <Footer />
 
       <ToastContainer

client/src/pages/api/fetchdata.ts

@@ -4,14 +4,56 @@ import UserData from "../../models/userdata";
 
 export default async function handler(req: any, res: any) {
   const { method } = req;
+  const { search, page = 1, limit = 11, sortBy = "default" } = req.query;
 
   await connectToDatabase();
 
   switch (method) {
     case "GET":
       try {
-        const messages = await UserData.find({});
-        res.status(200).json({ success: true, data: messages });
+        const pageNumber = parseInt(page as string);
+        const limitNumber = parseInt(limit as string);
+        const skip = (pageNumber - 1) * limitNumber;
+
+        // Build the query based on search parameter
+        let query = {};
+        if (search) {
+          query = {
+            "profileData.fullName": { $regex: search, $options: "i" },
+          };
+        }
+
+        // Determine sort options based on sortBy parameter
+        let sortOptions = {};
+        switch (sortBy) {
+          case "question-solved":
+            sortOptions = { totalSolved: -1 }; // -1 for descending order
+            break;
+          case "default":
+          default:
+            sortOptions = { timeStamp: -1 }; // Sort by timestamp descending (newest first)
+            break;
+        }
+
+        // Get total count for pagination
+        const totalItems = await UserData.countDocuments(query);
+
+        // Fetch data with pagination and sorting
+        const messages = await UserData.find(query)
+          .sort(sortOptions)
+          .skip(skip)
+          .limit(limitNumber);
+
+        res.status(200).json({
+          success: true,
+          data: messages,
+          pagination: {
+            total: totalItems,
+            page: pageNumber,
+            limit: limitNumber,
+            totalPages: Math.ceil(totalItems / limitNumber),
+          },
+        });
       } catch (error) {
         res.status(400).json({ success: false, error });
       }