Single search modal

PalisadoesFoundation · Dec 8, 2023 · 667d722 · 667d722
1 parent 2c972fd
commit 667d722
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 37 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -200,8 +200,7 @@
     "users": "Users",
     "searchName": "Enter Name",
     "searchevent": "Enter Event",
-    "searchFirstName": "Enter First Name",
-    "searchLastName": "Enter Last Name"
+    "searchFullName": "Enter Full Name"
   },
   "userListCard": {
     "joined": "Joined",

diff --git a/src/screens/OrganizationPeople/OrganizationPeople.tsx b/src/screens/OrganizationPeople/OrganizationPeople.tsx
@@ -39,6 +39,8 @@ function organizationPeople(): JSX.Element {
     lastName_contains: '',
   });
 
+  const [fullName, setFullName] = useState('');
+
   const {
     data: memberData,
     loading: memberLoading,
@@ -104,22 +106,31 @@ function organizationPeople(): JSX.Element {
   }
 
   /* istanbul ignore next */
-  const handleFirstNameSearchChange = (filterData: any): void => {
+  const handleFullNameSearchChange = (fullName: string): void => {
     /* istanbul ignore next */
+    const [firstName, lastName] = fullName.split(' ');
+
+    const newFilterData = {
+      firstName_contains: firstName ?? '',
+      lastName_contains: lastName ?? '',
+    };
+
+    setFilterData(newFilterData);
+
     if (state === 0) {
       memberRefetch({
-        ...filterData,
+        ...newFilterData,
         orgId: currentUrl,
       });
     } else if (state === 1) {
       adminRefetch({
-        ...filterData,
+        ...newFilterData,
         orgId: currentUrl,
         admin_for: currentUrl,
       });
     } else {
       usersRefetch({
-        ...filterData,
+        ...newFilterData,
       });
     }
   };
@@ -140,8 +151,8 @@ function organizationPeople(): JSX.Element {
     setPage(0);
   };
 
-  const debouncedHandleFirstNameSearchChange = debounce(
-    handleFirstNameSearchChange
+  const debouncedHandleFullNameSearchChange = debounce(
+    handleFullNameSearchChange
   );
 
   return (
@@ -152,42 +163,17 @@ function organizationPeople(): JSX.Element {
             <div className={styles.sidebar}>
               <div className={styles.sidebarsticky}>
                 <h6 className={styles.searchtitle}>{t('filterByName')}</h6>
-                <Form.Control
-                  type="name"
-                  id="searchname"
-                  placeholder={t('searchFirstName')}
-                  autoComplete="off"
-                  required
-                  value={filterData.firstName_contains}
-                  onChange={(e): void => {
-                    const { value } = e.target;
-
-                    const newFilterData = {
-                      ...filterData,
-                      firstName_contains: value?.trim(),
-                    };
-
-                    setFilterData(newFilterData);
-                    debouncedHandleFirstNameSearchChange(newFilterData);
-                  }}
-                />
                 <Form.Control
                   type="name"
                   id="searchLastName"
-                  placeholder={t('searchLastName')}
+                  placeholder={t('searchFullName')}
                   autoComplete="off"
                   required
-                  value={filterData.lastName_contains}
+                  value={fullName}
                   onChange={(e): void => {
                     const { value } = e.target;
-
-                    const newFilterData = {
-                      ...filterData,
-                      lastName_contains: value?.trim(),
-                    };
-
-                    setFilterData(newFilterData);
-                    debouncedHandleFirstNameSearchChange(newFilterData);
+                    setFullName(value);
+                    debouncedHandleFullNameSearchChange(value);
                   }}
                 />
                 <div