(fix) Independent searching for each tab in patient list table (#683)

* fix patient list search feature experience

* new updates

Author: Jexsie

packages/esm-patient-list-app/src/patient-list-list/patient-list-list.component.tsx

@@ -38,8 +38,14 @@ function usePatientListFilterForCurrentTab(selectedTab: number, search: string)
 const PatientListList: React.FC = () => {
   const { t } = useTranslation();
   const [selectedTab, setSelectedTab] = useState<number>(TabIndices.STARRED_LISTS);
-  const [searchString, setSearchString] = useState('');
-  const patientListFilter = usePatientListFilterForCurrentTab(selectedTab, searchString);
+  const [searchTerms, setSearchTerms] = useState({
+    [TabIndices.STARRED_LISTS]: '',
+    [TabIndices.SYSTEM_LISTS]: '',
+    [TabIndices.MY_LISTS]: '',
+    [TabIndices.ALL_LISTS]: '',
+  });
+  const currentSearchTerm = searchTerms[selectedTab];
+  const patientListFilter = usePatientListFilterForCurrentTab(selectedTab, currentSearchTerm);
   const { patientLists, isLoading, isValidating, error, mutate } = useAllPatientLists(patientListFilter);
   const { search } = useLocation();
   const createNewList =
@@ -81,6 +87,13 @@ const PatientListList: React.FC = () => {
         { id: 4, key: 'isStarred', header: '' },
       ];
 
+  const handleSearch = (searchString: string) => {
+    setSearchTerms((prevSearchTerms) => ({
+      ...prevSearchTerms,
+      [selectedTab]: searchString,
+    }));
+  };
+
   return (
     <main className={`omrs-main-content ${styles.patientListListPage}`}>
       <section className={styles.patientListList}>
@@ -123,8 +136,8 @@ const PatientListList: React.FC = () => {
             isValidating={isValidating}
             headers={tableHeaders}
             patientLists={patientLists}
-            searchString={searchString}
-            setSearchString={setSearchString}
+            searchTerm={currentSearchTerm}
+            setSearchTerm={handleSearch}
             refetch={mutate}
             error={error}
           />

packages/esm-patient-list-app/src/patient-list-list/patient-list-table.component.tsx

@@ -44,8 +44,8 @@ interface PatientListTableContainerProps {
   handleCreate?: () => void;
   error: Error;
   isValidating: boolean;
-  searchString: string;
-  setSearchString: (searchString) => void;
+  searchTerm: string;
+  setSearchTerm: (searchString: string) => void;
 }
 
 const PatientListTableContainer: React.FC<PatientListTableContainerProps> = ({
@@ -58,8 +58,8 @@ const PatientListTableContainer: React.FC<PatientListTableContainerProps> = ({
   handleCreate,
   error,
   isValidating,
-  searchString,
-  setSearchString,
+  searchTerm,
+  setSearchTerm,
 }) => {
   const { t } = useTranslation();
   const userId = useSession()?.user.uuid;
@@ -86,7 +86,7 @@ const PatientListTableContainer: React.FC<PatientListTableContainerProps> = ({
   const { paginated, goTo, results, currentPage } = usePagination(sortedData, pageSize);
 
   const handleSearch = (str) => {
-    setSearchString(str);
+    setSearchTerm(str);
     goTo(1);
   };
 
@@ -101,9 +101,8 @@ const PatientListTableContainer: React.FC<PatientListTableContainerProps> = ({
             size={isDesktop(layout) ? 'sm' : 'lg'}
             className={styles.search}
             onChange={(evnt) => handleSearch(evnt.target.value)}
-            defaultValue={searchString}
+            value={searchTerm}
             placeholder={t('searchThisList', 'Search this list')}
-            currentSearchTerm={searchString}
           />
         </Layer>
       </div>