UIIN-3099: Run history.replace once during component mount and update…

… to avoid URL rewriting.
folio-org · Nov 1, 2024 · 85002d4 · 85002d4
1 parent a7cbfe3
commit 85002d4
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change history for ui-inventory
 
+## [12.0.1] (IN PROGRESS)
+
+* Run `history.replace` once during component mount and update to avoid URL rewriting. Refs UIIN-3099.
+
 ## [12.0.0](https://github.com/folio-org/ui-inventory/tree/v12.0.0) (2024-10-31)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v11.0.5...v12.0.0)
 

diff --git a/src/components/InstancesList/InstancesList.js b/src/components/InstancesList/InstancesList.js
@@ -222,9 +222,9 @@ class InstancesList extends React.Component {
   componentDidMount() {
     const {
       history,
+      location: _location,
       getParams,
       data,
-      updateLocation,
     } = this.props;
 
     const params = getParams();
@@ -250,17 +250,20 @@ class InstancesList extends React.Component {
 
     this.processLastSearchTermsOnMount();
 
-    this.applyDefaultStaffSuppressFilter();
+    const searchParams = new URLSearchParams(_location.search);
 
-    if (params.sort !== defaultSort) {
-      updateLocation({ sort: defaultSort }, { replace: true });
+    const isStaffSuppressFilterChanged = this.applyDefaultStaffSuppressFilter(searchParams);
+
+    if (params.sort !== defaultSort || isStaffSuppressFilterChanged) {
+      searchParams.set('sort', defaultSort);
+      this.redirectToSearchParams(searchParams);
     }
   }
 
   componentDidUpdate(prevProps) {
     const {
       data,
-      updateLocation,
+      location,
       segment,
     } = this.props;
     const sortBy = this.getSortFromParams();
@@ -281,13 +284,18 @@ class InstancesList extends React.Component {
       setItem(`${this.props.namespace}.${this.props.segment}.lastOpenRecord`, null);
     }
 
+    const searchParams = new URLSearchParams(location.search);
+
+    let isStaffSuppressFilterChanged = false;
+
     if (prevProps.segment !== this.props.segment) {
-      this.applyDefaultStaffSuppressFilter();
+      isStaffSuppressFilterChanged = this.applyDefaultStaffSuppressFilter(searchParams);
     }
 
-    // it is missing after reset button is hit
-    if (!sortBy) {
-      updateLocation({ sort: data.displaySettings.defaultSort }, { replace: true });
+    // `sort` is missing after reset button is hit
+    if (!sortBy || isStaffSuppressFilterChanged) {
+      searchParams.set('sort', data.displaySettings.defaultSort);
+      this.redirectToSearchParams(searchParams);
     }
   }
 
@@ -324,15 +332,11 @@ class InstancesList extends React.Component {
     });
   }
 
-  applyDefaultStaffSuppressFilter = () => {
-    const { location } = this.props;
-
+  applyDefaultStaffSuppressFilter = (searchParams) => {
     if (JSON.parse(sessionStorage.getItem(USER_TOUCHED_STAFF_SUPPRESS_STORAGE_KEY))) {
-      return;
+      return false;
     }
 
-    const searchParams = new URLSearchParams(location.search);
-
     const filters = searchParams.get('filters');
 
     const staffSuppressFalse = `${FACETS.STAFF_SUPPRESS}.false`;
@@ -342,9 +346,8 @@ class InstancesList extends React.Component {
       const newFiltersValue = addFilter(filters, staffSuppressFalse);
 
       searchParams.set('filters', newFiltersValue);
-      this.redirectToSearchParams(searchParams);
 
-      return;
+      return true;
     }
 
     const isStaffSuppressFilterAvailable = this.props.stripes.hasPerm('ui-inventory.instance.staff-suppressed-records.view');
@@ -354,8 +357,11 @@ class InstancesList extends React.Component {
       const newFiltersValue = replaceFilter(filters, staffSuppressTrue, staffSuppressFalse);
 
       searchParams.set('filters', newFiltersValue);
-      this.redirectToSearchParams(searchParams);
+
+      return true;
     }
+
+    return false;
   }
 
   getInstanceIdFromLocation = (location) => {

diff --git a/src/components/InstancesList/InstancesList.test.js b/src/components/InstancesList/InstancesList.test.js
@@ -206,11 +206,11 @@ describe('InstancesList', () => {
 
         renderInstancesList({ segment: 'instances' });
 
-        await waitFor(() => expect(history.replace).toHaveBeenCalledWith({
+        expect(history.replace).toHaveBeenLastCalledWith({
           pathname: '/',
-          search: 'filters=staffSuppress.false',
+          search: 'filters=staffSuppress.false&sort=contributors',
           state: undefined,
-        }));
+        });
       });
     });
 
@@ -231,11 +231,11 @@ describe('InstancesList', () => {
             },
           });
 
-          await waitFor(() => expect(history.replace).toHaveBeenCalledWith({
+          expect(history.replace).toHaveBeenLastCalledWith({
             pathname: '/',
-            search: 'filters=staffSuppress.false',
+            search: 'filters=staffSuppress.false&sort=contributors',
             state: undefined,
-          }));
+          });
         });
       });
     });
@@ -315,7 +315,7 @@ describe('InstancesList', () => {
 
           await waitFor(() => expect(history.replace).toHaveBeenCalledWith({
             pathname: '/',
-            search: 'segment=holdings&filters=staffSuppress.false',
+            search: 'segment=holdings&filters=staffSuppress.false&sort=contributors',
             state: undefined,
           }));
         });
@@ -361,7 +361,11 @@ describe('InstancesList', () => {
             },
           });
 
-          expect(history.replace).toHaveBeenLastCalledWith('/inventory?filters=staffSuppress.false&sort=relevance');
+          expect(history.replace).toHaveBeenLastCalledWith({
+            pathname: '/inventory',
+            search: 'filters=staffSuppress.false&sort=relevance',
+            state: undefined,
+          });
         });
       });
 
@@ -518,7 +522,11 @@ describe('InstancesList', () => {
         fireEvent.change(screen.getByRole('textbox', { name: 'Search' }), { target: { value: 'test' } });
         fireEvent.click(screen.getByRole('button', { name: 'Reset all' }));
 
-        expect(history.replace).toHaveBeenLastCalledWith('/?filters=staffSuppress.false&sort=relevance');
+        expect(history.replace).toHaveBeenLastCalledWith({
+          pathname: '/',
+          search: 'filters=staffSuppress.false&sort=relevance',
+          state: undefined,
+        });
       });
     });