using custom debounce for searach and que navigation

Author: cbvora

app/page.tsx

@@ -4,16 +4,18 @@ import { useState } from "react";
 import type { NextPage } from "next";
 import NameLink from "@azure-fundamentals/components/NameLink";
 import exams from "@azure-fundamentals/lib/exams.json";
+import useDebounce from "@azure-fundamentals/hooks/useDebounce";
 
 const Home: NextPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
+  const debouncedSearchTerm = useDebounce(searchTerm, 300); // 300ms debounce delay
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(event.target.value);
   };
 
   const filteredExams = exams.filter((exam) =>
-    exam.name.toLowerCase().includes(searchTerm.toLowerCase()),
+    exam.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase()),
   );
 
   return (

components/NumberInputComponent.tsx

@@ -0,0 +1,40 @@
+import useDebounce from "@azure-fundamentals/hooks/useDebounce";
+import { useState, useEffect } from "react";
+
+interface Props {
+  totalQuestions: number;
+  currentQuestionIndex: number;
+  handleNextQuestion: (index: number) => void;
+}
+
+const NumberInputComponent: React.FC<Props> = ({
+  totalQuestions,
+  currentQuestionIndex,
+  handleNextQuestion,
+}) => {
+  const [inputValue, setInputValue] = useState(currentQuestionIndex);
+  const debouncedInputValue = useDebounce(inputValue, 1000);
+
+  useEffect(() => {
+    if (debouncedInputValue !== currentQuestionIndex) {
+      handleNextQuestion(debouncedInputValue);
+    }
+  }, [debouncedInputValue, currentQuestionIndex, handleNextQuestion]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(Number(e.target.value));
+  };
+
+  return (
+    <input
+      className="w-[40px] text-white rounded-l-md border outline-0 border-slate-700 bg-slate-900 text-center text-md [-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none"
+      type="number"
+      min={0}
+      max={totalQuestions}
+      value={inputValue}
+      onChange={handleChange}
+    />
+  );
+};
+
+export default NumberInputComponent;

components/QuizForm.tsx

@@ -4,6 +4,7 @@ import { Question } from "./types";
 import Image from "next/image";
 import SelectionInput from "./SelectionInput";
 import { Button } from "./Button";
+import NumberInputComponent from "./NumberInputComponent";
 
 type Props = {
   isLoading: boolean;
@@ -218,15 +219,10 @@ const QuizForm: FC<Props> = ({
             <span className="absolute text-white opacity-10 font-bold text-6xl bottom-0 -z-[1] select-none">
               Q&A
             </span>
-            <input
-              className="w-[40px] text-white rounded-l-md border outline-0 border-slate-700 bg-slate-900 text-center text-md [-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none"
-              type="number"
-              min={0}
-              max={totalQuestions}
-              value={currentQuestionIndex}
-              onChange={(e) => {
-                handleNextQuestion(Number(e.target.value));
-              }}
+            <NumberInputComponent
+              totalQuestions={totalQuestions}
+              currentQuestionIndex={currentQuestionIndex}
+              handleNextQuestion={handleNextQuestion}
             />
             <p className="text-white text-md font-semibold text-center w-[40px] rounded-r-md border bg-slate-800 border-slate-700">
               {totalQuestions}

hooks/useDebounce.tsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;