fx<search> improving search invitation to listern to typing event

atlp-rwanda · Oct 17, 2024 · 569d20e · 569d20e
1 parent 7d95521
commit 569d20e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/pages/invitation.tsx b/src/pages/invitation.tsx
@@ -280,6 +280,14 @@ function Invitation() {
     fetchInvitations({ variables: { query: searchQuery } });
   };
 
+  useEffect(() => {
+    const delayDebounceFn = setTimeout(() => {
+      handleSearch();
+    }, 500);
+
+    return () => clearTimeout(delayDebounceFn);
+  }, [searchQuery]);
+
 
   useEffect(() => {
     if (selectedRole || selectedStatus) {
@@ -324,8 +332,6 @@ const handleStatusChange=(e:React.ChangeEvent<HTMLSelectElement>)=>{
     setSelectedRow(selectedRow === row ? null : row);
   };
 
-  const disabledSearch = !searchQuery.trim();
-
   interface EmailInputProps {
     email: string;
     setEmail: (email: string) => void;
@@ -820,21 +826,19 @@ setSortBy(sortBy)
           The “Search bar” below enables you to effortlessly check the status of
           sent invitations.
           <br />
-          Simply type in the email or name of the invitee in the search bar to
+          Simply type in the email, or role of the invitee or status of the invitation in the search bar to
           instantly retrieve real-time updates.
         </p>
 
         {/* Search form */}
         <div className='block lg:flex justify-between items-center'>
             <div className="flex flex-row md:flex-row gap-2 md:gap-2 md:w-[50%] w-full">
-              <div className="relative flex-1 text-black ">
+              <div className="relative flex-1 text-black">
                 <input
                   type="text"
                   id="search"
                   value={searchQuery}
-                  onChange={(e) => {
-                    setSearchQuery(e.target.value)
-                  }}
+                  onChange={(e) => setSearchQuery(e.target.value)}
                   placeholder="Search by email, role or status of the invitation."
                   className="border border-gray-300 outline-none bg-transparent rounded-md pl-10 pr-4 py-1 w-full dark:text-white hover:border-[#7258ce] dark:text:text-white sm:text-normal text-md dark:bg-[#04122F]"
                 />

diff --git a/src/queries/invitation.queries.tsx b/src/queries/invitation.queries.tsx
@@ -18,8 +18,8 @@ export const GET_ALL_INVITATIONS = gql`
 `;
 
 export const GET_INVITATIONS = gql`
-  query GetInvitations($query: String!, $limit: Int, $offset: Int,$orgToken: String!,$sortBy:Int) {
-    getInvitations(query: $query, limit: $limit, offset: $offset,orgToken: $orgToken,,sortBy:$sortBy) {
+  query GetInvitations($query: String!, $limit: Int, $offset: Int,$orgToken: String!) {
+    getInvitations(query: $query, limit: $limit, offset: $offset,orgToken: $orgToken) {
       invitations {
         invitees {
           email