Merge pull request #6 from AqViolet/master

Debounce added

Author: NishantGupt786

package.json

@@ -17,11 +17,14 @@
     "bcrypt": "^5.1.1",
     "cloudinary": "^2.2.0",
     "cryptr": "^6.3.0",
+    "debounce": "^2.1.1",
     "file-saver": "^2.0.5",
     "geist": "^1.3.0",
     "gridfs-stream": "^1.1.1",
     "jose": "^5.4.1",
     "jszip": "^3.10.1",
+    "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.395.0",
     "mongodb": "^6.7.0",
     "mongoose": "^8.4.1",
@@ -37,6 +40,7 @@
     "react-dom": "^18.3.0",
     "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.4.1",
+    "use-debounce": "^10.0.3",
     "zod": "^3.23.3"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,9 +1,10 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import axios from "axios";
 import { Search } from "lucide-react";
 import Cryptr from "cryptr";
+import debounce from 'debounce';
 import { useRouter } from "next/navigation";  
 
 const cryptr = new Cryptr(
@@ -16,29 +17,39 @@ const SearchBar = () => {
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const [error, setError] = useState<string | null>(null);
 
-  const handleSearchChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const text = e.target.value;
-    setSearchText(text);
 
-    if (text.length > 1) {
-      try {
-        const searchResponse = await axios.get("/api/search", {
-          params: { text },
-        });
-
-        const { res: encryptedSearchResponse } = searchResponse.data;
-        const decryptedSearchResponse = cryptr.decrypt(encryptedSearchResponse);
-        // console.log("Decrypted Search Response:", decryptedSearchResponse);
-
-        const { subjects } = JSON.parse(decryptedSearchResponse);
-        const suggestionList = subjects.map((subjectObj: { subject: string }) => subjectObj.subject);
-        setSuggestions(suggestionList);
-      } catch (error) {
-        setError("Error fetching suggestions");
+ 
+  const debouncedSearch = useCallback(
+    debounce(async (text: string) => {
+      if (text.length > 1) {
+
+        try {
+          const searchResponse = await axios.get("http://localhost:3000/api/search", {
+            params: { text },
+          });
+
+          const { res: encryptedSearchResponse } = searchResponse.data;
+          const decryptedSearchResponse = cryptr.decrypt(encryptedSearchResponse);
+          // console.log("Decrypted Search Response:", decryptedSearchResponse);
+
+          const { subjects } = JSON.parse(decryptedSearchResponse);
+          const suggestionList = subjects.map((subjectObj: { subject: string }) => subjectObj.subject);
+          setSuggestions(suggestionList);
+        } catch (error) {
+          setError("Error fetching suggestions");
+
+        }
+      } else {
+        setSuggestions([]);
       }
-    } else {
-      setSuggestions([]);
-    }
+    }, 1000), 
+    []
+  );
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value;
+    setSearchText(text);
+    debouncedSearch(text); 
   };
 
   const handleSelectSuggestion = async (suggestion: string) => {