fixes #252 The search bar issue

components/searchBar/index.tsx

@@ -32,47 +32,48 @@ export default function SearchBar({
   const router = useRouter();
   const smallScreen = useMediaQuery("(max-width: 800px)");
   const inputRef = useRef<HTMLInputElement>();
+
+  let debounceTimeout: NodeJS.Timeout;
+  let lastInputValue = ""; // Store the last input value
+
   // Input validation
   const [isEmpty, setIsEmpty] = useState(!query);
   const [isError, setIsError] = useState(false);
 
   function handleInput(event: FormEvent) {
-    setQuery((event.target as HTMLInputElement).value);
+    const inputValue = (event.target as HTMLInputElement).value;
+
+    setQuery(inputValue);
 
     // When input value is null, set error & empty state to `true` and do nothing.
-    if (!(event.target as HTMLInputElement).value) {
+    if (!inputValue) {
       setIsEmpty(true);
       setIsError(true);
       return;
     }
 
     // When input value is not null, reset error & empty state to `false`.
-    // And also debounce the router push.
     setIsError(false);
     setIsEmpty(false);
 
-    if (!smallScreen)
-      debounce(() => {
-        router.push(`/search?q=${(event.target as HTMLInputElement).value}`);
-      });
+    if (!smallScreen) {
+      // Store the debounced function in a variable to be able to cancel it later
+      const debouncedFunc = () => {
+        router.push(`/search?q=${inputValue}`);
+      };
+      debounceTimeout = setTimeout(debouncedFunc, 200);
+    }
   }
 
-  function handleSubmit(event?: FormEvent) {
-    if (event) event.preventDefault();
-
-    // When input value is null, set error & empty state to `true` and do nothing.
-    if (!query || !inputRef.current.value) {
-      setIsError(true);
-      setIsEmpty(true);
-      return;
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    // Check if the Backspace key is pressed and the input value becomes empty
+    if (event.key === "Backspace" && lastInputValue === "") {
+      // Navigate back to the initial page
+      router.push("/");
     }
 
-    // When input value is not null, reset error & empty state to `false` and push the route.
-    setIsError(false);
-    setIsEmpty(false);
-
-    // For performance reasons the input on small screens is not controlled
-    router.push(`/search?q=${smallScreen ? inputRef.current.value : query}`);
+    // Update the last input value
+    lastInputValue = (event.target as HTMLInputElement).value;
   }
 
   const searchAdornment = (
@@ -94,6 +95,24 @@ export default function SearchBar({
     }
   }, [router.route]);
 
+  function handleSubmit(event?: FormEvent) {
+    if (event) event.preventDefault();
+
+    // When input value is null, set error & empty state to `true` and do nothing.
+    if (!query || !inputRef.current.value) {
+      setIsError(true);
+      setIsEmpty(true);
+      return;
+    }
+
+    // When input value is not null, reset error & empty state to `false` and push the route.
+    setIsError(false);
+    setIsEmpty(false);
+
+    // For performance reasons the input on small screens is not controlled
+    router.push(`/search?q=${smallScreen ? inputRef.current.value : query}`);
+  }
+
   return (
     <form
       noValidate
@@ -118,6 +137,9 @@ export default function SearchBar({
               endAdornment={searchAdornment}
               inputRef={inputRef}
               error={isError}
+              onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) =>
+                handleKeyDown(event)
+              }
             />
           ) : (
             <OutlinedInput
@@ -129,6 +151,9 @@ export default function SearchBar({
               endAdornment={searchAdornment}
               inputRef={inputRef}
               error={isError}
+              onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) =>
+                handleKeyDown(event)
+              }
             />
           )}
         </FormControl>
@@ -143,6 +168,9 @@ export default function SearchBar({
                 endAdornment={searchAdornment}
                 inputRef={inputRef}
                 error={isError}
+                onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) =>
+                  handleKeyDown(event)
+                }
               />
             ) : (
               <FilledInput
@@ -153,6 +181,9 @@ export default function SearchBar({
                 endAdornment={searchAdornment}
                 inputRef={inputRef}
                 error={isError}
+                onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) =>
+                  handleKeyDown(event)
+                }
               />
             )}
           </>

public/locales/en/categories.json

@@ -37,6 +37,7 @@
     "complementaryfilter": "Complementary Filter",
     "compression": "Compression",
     "computervision": "Computer Vision",
+    "concurrency": "Concurrency",
     "conversions": "Conversions",
     "cosinesimilarity": "Cosine Similarity",
     "cpuschedulingalgorithms": "CPU Scheduling Algorithms",
@@ -97,12 +98,15 @@
     "heap": "Heap",
     "heaps": "Heaps",
     "histogramequalization": "Histogram Equalization",
+    "http": "Http",
     "imageprocessing": "Image Processing",
+    "io": "Io",
     "ipynbcheckpoints": ".Ipynb Checkpoints",
     "knapsack": "Knapsack",
     "leetcode": "Leetcode",
     "levenshtein": "Levenshtein",
     "linearalgebra": "Linear Algebra",
+    "linearprogramming": "Linear Programming",
     "linearregression": "Linear Regression",
     "linkedlist": "Linked List",
     "list": "List",
@@ -112,6 +116,7 @@
     "lstm": "Lstm",
     "machinelearning": "Machine Learning",
     "manacher": "Manacher",
+    "map": "Map",
     "math": "Math",
     "matrix": "Matrix",
     "matrixexponentiation": "Matrix Exponentiation",
@@ -149,6 +154,7 @@
     "password": "Password",
     "patternsearch": "Pattern Search",
     "permutation": "Permutation",
+    "permutations": "Permutations",
     "physics": "Physics",
     "pi": "PI",
     "piecewise": "Piecewise",
@@ -178,6 +184,7 @@
     "segmenttrees": "Segment Trees",
     "sequences": "Sequences",
     "series": "Series",
+    "set": "Set",
     "shufflers": "Shufflers",
     "sieveoferatosthenes": "Sieve of Eratosthenes",
     "slidingwindow": "Sliding Window",
@@ -186,6 +193,7 @@
     "sources": "Sources",
     "spanningtree": "Spanning Tree",
     "specializedstructure": "Specialized Structure",
+    "sqrt": "Sqrt",
     "stablemarriage": "Stable Marriage",
     "stacks": "Stacks",
     "stackwithsinglylinkedlist": "Stack with Singly Linked List",
@@ -197,13 +205,16 @@
     "test": "Test",
     "tests": "Tests",
     "textclassification": "Text Classification",
+    "threads": "Threads",
     "timingfunctions": "Timing-Functions",
+    "tls": "Tls",
     "tree": "Tree",
     "trie": "Trie",
     "tries": "Tries",
     "uint53": "Uint 53",
     "utils": "Utils",
     "vectors": "Vectors",
     "view": "View",
+    "web": "Web",
     "webprogramming": "Web Programming"
 }