Merge pull request #430 from VEuPathDB/bug/membership-table-search-fi…

…lter

Reset paging if number of filtered rows obviates currentPage

packages/libs/eda/src/lib/core/components/filter/TableFilter.tsx

@@ -240,12 +240,21 @@ export function TableFilter({
   );
 
   const handleSearch = useCallback(
-    (_: unknown, searchTerm: string) => {
+    /**
+     * shouldResetPaging is true when the number of filtered rows is no longer enough to render
+     * rows on the currentPage
+     *
+     * Example:
+     *  We are on page 3 and each page has 50 rows. If our search returns 100 or less rows, page 3
+     *  would no longer have any rows to display. Thus, we reset the currentPage to 1.
+     */
+    (_: unknown, searchTerm: string, shouldResetPaging: boolean = false) => {
       analysisState.setVariableUISettings((currentState) => ({
         ...currentState,
         [uiStateKey]: {
           ...uiState,
           searchTerm,
+          ...(shouldResetPaging ? { currentPage: 1 } : {}),
         },
       }));
     },

packages/libs/wdk-client/src/Components/AttributeFilter/MembershipField.jsx

@@ -390,6 +390,23 @@ class MembershipTable extends React.PureComponent {
   }
 
   handleSearchTermChange(searchTerm) {
+    // When we are not on page 1, we need to determine if our currentPage position remains viable
+    // or if it should get reset to page 1 (see note in TableFilter.tsx's handleSearch callback definition)
+    if (this.props.activeFieldState.currentPage !== 1) {
+      const numberOfFilteredRows = filterBySearchTerm(
+        this.getRows(),
+        searchTerm
+      ).length;
+      const shouldResetPaging =
+        numberOfFilteredRows <=
+        this.props.activeFieldState.rowsPerPage *
+          (this.props.activeFieldState.currentPage - 1);
+      this.props.onMemberSearch(
+        this.props.activeField,
+        searchTerm,
+        shouldResetPaging
+      );
+    }
     this.props.onMemberSearch(this.props.activeField, searchTerm);
   }