debounce searchterm

soumitradev · Aug 4, 2023 · 61bacfe · 61bacfe
1 parent e247918
commit 61bacfe
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/TimetableEditMenu.tsx b/src/components/TimetableEditMenu.tsx
@@ -462,7 +462,7 @@ const TimetableEditMenu = ({
                         }`}
                       >
                         {course.clashing && (
-                          <div className="absolute left-0 top-8 py-1 bg-slate-900/60 text-center w-full">
+                          <div className="absolute left-0 top-8 py-1 bg-slate-900/80 text-center w-full">
                             <span className="text-slate-200 font-medium text-md">
                               Clashing with{" "}
                               {course.clashing

diff --git a/src/pages/edit.tsx b/src/pages/edit.tsx
@@ -8,6 +8,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
+import { useDebounce } from "usehooks-ts";
 import {
   LogOut,
   AlertOctagon,
@@ -153,14 +154,15 @@ const Edit = () => {
   const [isVertical, setIsVertical] = useState(false);
 
   const [searchTerm, setSearchTerm] = useState("");
+  const debouncedSearchTerm = useDebounce<string>(searchTerm, 500);
   const courseSearchResults = useMemo(
     () =>
-      (searchTerm === ""
+      (debouncedSearchTerm === ""
         ? courseDetails
         : courseDetails.filter((e) =>
             (e.code + ": " + e.name)
               .toLowerCase()
-              .includes(searchTerm.toLowerCase())
+              .includes(debouncedSearchTerm.toLowerCase())
           )
       ).map((e) => {
         const withClash = e as {
@@ -187,7 +189,7 @@ const Edit = () => {
         withClash.clashing = clashes.length === 0 ? null : clashes;
         return withClash;
       }),
-    [courseDetails, searchTerm, timetableDetails.examTimes]
+    [courseDetails, debouncedSearchTerm, timetableDetails.examTimes]
   );
   const addedCourses = useMemo(
     () =>