Merge pull request #130 from EnigmaVSSUT/dev-v2

feat: debouncing

src/app/events/components/EventList.jsx

@@ -9,6 +9,7 @@ import EventCard from "./EventCard";
 import useDatePicker from "../../../shared/store/useDatePicker";
 import { useEffect, useState } from "react";
 import { HighlightOff } from "@mui/icons-material";
+import { useDebounce } from "../../../hooks/useDebounce";
 
 const datalist1 = [
 	{
@@ -37,6 +38,7 @@ export default function EventList() {
 	const [result, setResult] = useState([]);
 	const [value, setValue] = useState("");
 	const pickedDate = useDatePicker((state) => state.pickedDate);
+	const debouncedQuery = useDebounce(value, 100);
 
 	useEffect(() => {
 		if (pickedDate !== "") {
@@ -49,10 +51,10 @@ export default function EventList() {
 		}
 	}, [pickedDate]);
 
-	const filterDataList = () => {
-		if (value.trim() === "" && pickedDate === "") {
+	const filterDataList = (debouncedQuery) => {
+		if (debouncedQuery === "" && pickedDate === "") {
 			setResult(totalData);
-		} else if (pickedDate !== "" && value === "") {
+		} else if (pickedDate !== "" && debouncedQuery === "") {
 			setResult([])
 			const filtered = totalData.filter(
 				(item) =>
@@ -69,6 +71,10 @@ export default function EventList() {
 		}
 	};
 
+	useEffect(() => {
+			filterDataList(debouncedQuery);
+	}, [debouncedQuery]);
+
 	return (
 		<Stack
 			gap={3}

src/hooks/useDebounce.js

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