From 94aee7da5c834f63fde9ae6c5dc0a9e69f9a6e37 Mon Sep 17 00:00:00 2001
From: rodainaelsawy <rodainaahmed711@gmail.com>
Date: Wed, 12 Nov 2025 01:09:35 +0200
Subject: [PATCH] task 3 done

---
 client/src/pages/AllPerks.jsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/AllPerks.jsx b/client/src/pages/AllPerks.jsx
index c35e719..b47caf1 100644
--- a/client/src/pages/AllPerks.jsx
+++ b/client/src/pages/AllPerks.jsx
@@ -29,6 +29,19 @@ export default function AllPerks() {
  * useEffect Hook #2: Auto-search on Input Change
 
 */
+  // useEffect Hook #1: Initial Data Loading
+  useEffect(() => {
+    loadAllPerks()
+  }, [])
+
+  // useEffect Hook #2: Auto-search on Input Change (debounced)
+  useEffect(() => {
+    const delay = setTimeout(() => {
+      loadAllPerks()
+    }, 500) // delay 500ms for smoother typing
+    return () => clearTimeout(delay)
+  }, [searchQuery, merchantFilter])
+
 
   
   useEffect(() => {
@@ -136,6 +149,8 @@ export default function AllPerks() {
                 type="text"
                 className="input"
                 placeholder="Enter perk name..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
                 
               />
               <p className="text-xs text-zinc-500 mt-1">
@@ -151,7 +166,8 @@ export default function AllPerks() {
               </label>
               <select
                 className="input"
-                
+                value={merchantFilter}
+                onChange={(e) => setMerchantFilter(e.target.value)}
               >
                 <option value="">All Merchants</option>