Fix geosolutions-it#10894 Persist resources gird previous filters on …

…navigation
allyoucanmap · Feb 28, 2025 · f743537 · f743537
1 parent 6aafe3a
commit f743537
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 19 deletions.
diff --git a/web/client/plugins/ResourcesCatalog/containers/ResourcesGrid.jsx b/web/client/plugins/ResourcesCatalog/containers/ResourcesGrid.jsx
@@ -27,7 +27,8 @@ import {
     getMonitoredStateSelector,
     getRouterLocation,
     getCurrentPage,
-    getSearch
+    getSearch,
+    getCurrentParams
 } from '../selectors/resources';
 import { push } from 'connected-react-router';
 import useQueryResourcesByLocation from '../hooks/useQueryResourcesByLocation';
@@ -99,7 +100,8 @@ function ResourcesGrid({
     getResourceStatus,
     formatHref,
     getResourceTypesInfo,
-    getResourceId
+    getResourceId,
+    storedParams
 }) {
 
     const { query } = url.parse(location.search, true);
@@ -123,7 +125,8 @@ function ResourcesGrid({
         user,
         queryPage,
         onReset: () => onResetSearch(id),
-        search
+        search,
+        storedParams
     });
 
     const {
@@ -262,7 +265,8 @@ const ConnectedResourcesGrid = connect(
         error: getResourcesError,
         isFirstRequest: getIsFirstRequest,
         page: getCurrentPage,
-        search: getSearch
+        search: getSearch,
+        storedParams: getCurrentParams
     }),
     {
         onPush: push,

diff --git a/web/client/plugins/ResourcesCatalog/hooks/__tests__/useQueryResourcesByLocation-test.js b/web/client/plugins/ResourcesCatalog/hooks/__tests__/useQueryResourcesByLocation-test.js
@@ -269,4 +269,26 @@ describe('useQueryResourcesByLocation', () => {
         />, document.getElementById("container"));
         Simulate.click(document.querySelector('#clear'));
     });
+
+    it('should use stored parameter on initialization', (done) => {
+        ReactDOM.render(<Component
+            id="catalog"
+            pageSize={12}
+            storedParams={{ f: ['map'] }}
+            request={() => {
+                return Promise.resolve({
+                    resources: []
+                });
+            }}
+            location={{
+                pathname: '/',
+                search: '/',
+                hash: ''
+            }}
+            onPush={({ search }) => {
+                expect(search).toBe('?f=map');
+                done();
+            }}
+        />, document.getElementById("container"));
+    });
 });
diff --git a/web/client/plugins/ResourcesCatalog/hooks/useQueryResourcesByLocation.js b/web/client/plugins/ResourcesCatalog/hooks/useQueryResourcesByLocation.js
@@ -7,15 +7,12 @@
  */
 
 import { useRef, useEffect } from 'react';
-import isArray from 'lodash/isArray';
-import omit from 'lodash/omit';
-import isEqual from 'lodash/isEqual';
 import url from 'url';
 import axios from '../../../libs/ajax';
-import castArray from 'lodash/castArray';
 import uniq from 'lodash/uniq';
 import { clearQueryParams } from '../utils/ResourcesFiltersUtils';
 import useIsMounted from '../../../hooks/useIsMounted';
+import { isEmpty, isEqual, isArray, omit, castArray } from 'lodash';
 
 const cleanParams = (params, exclude = ['d']) => {
     return Object.keys(params)
@@ -71,6 +68,7 @@ const mergeParams = (params, defaultQuery) => {
  * @param {bool} props.queryPage if true adds the page to the location query
  * @param {object} props.search search object action, { id, params }, { id, clear } or { id, refresh }
  * @param {func} props.onReset callback to reset the search action
+ * @param {object} props.storedParams query parameter stored in a persisted state (no location query)
  * @return {object} { search, clear } search and clear functions
  */
 const useQueryResourcesByLocation = ({
@@ -87,7 +85,8 @@ const useQueryResourcesByLocation = ({
     user,
     queryPage,
     search,
-    onReset = () => {}
+    onReset = () => {},
+    storedParams
 }) => {
 
     const _prevLocation = useRef();
@@ -161,12 +160,16 @@ const useQueryResourcesByLocation = ({
     const _queryPage = useRef();
     _queryPage.current = queryPage;
 
+    const init = useRef();
+
     useEffect(() => {
-        const [currentParams, currentPage] = getParams(location.search);
-        requestResources.current({
-            ...currentParams,
-            ...(_queryPage.current && { page: currentPage })
-        });
+        if (init.current) {
+            const [currentParams, currentPage] = getParams(location.search);
+            requestResources.current({
+                ...currentParams,
+                ...(_queryPage.current && { page: currentPage })
+            });
+        }
     }, [pageSize, JSON.stringify(defaultQuery), user]);
 
     useEffect(() => {
@@ -212,6 +215,18 @@ const useQueryResourcesByLocation = ({
         handleSearch(newParams);
     }
 
+    // restore previous params on initialization
+    useEffect(() => {
+        if (!init.current) {
+            // exclude page to avoid missing page error
+            const { page, ...currentParams } = storedParams || {};
+            if (!isEmpty(currentParams)) {
+                handleSearch(currentParams);
+            }
+            init.current = true;
+        }
+    }, [storedParams]);
+
     useEffect(() => {
         if (search?.id) {
             if (search.clear) {

diff --git a/web/client/plugins/ResourcesCatalog/reducers/resources.js b/web/client/plugins/ResourcesCatalog/reducers/resources.js
@@ -58,14 +58,15 @@ function resources(state = defaultState, action) {
         });
     }
     case UPDATE_RESOURCES_METADATA: {
-        return setStateById(state, action, {
+        return setStateById(state, action, (stateId) => ({
+            ...stateId,
             total: action.metadata.total,
             isNextPageAvailable: action.metadata.isNextPageAvailable,
             error: action.metadata.error,
             ...(action.metadata.params &&
                 {
                     params: action.metadata.params,
-                    previousParams: state.params,
+                    previousParams: stateId?.params,
                     nextParams: null
                 }),
             ...(!isNil(action.metadata.locationSearch) &&
@@ -76,7 +77,7 @@ function resources(state = defaultState, action) {
                 {
                     locationPathname: action.metadata.locationPathname
                 })
-        });
+        }));
     }
     case LOADING_RESOURCES: {
         return setStateById(state, action, {

diff --git a/web/client/plugins/ResourcesCatalog/selectors/__tests__/resources-test.js b/web/client/plugins/ResourcesCatalog/selectors/__tests__/resources-test.js
@@ -17,7 +17,8 @@ import {
     getSelectedResource,
     getShowDetails,
     getCurrentPage,
-    getSearch
+    getSearch,
+    getCurrentParams
 } from '../resources';
 import expect from 'expect';
 
@@ -73,4 +74,9 @@ describe('resources selectors', () => {
         expect(getSearch()).toBe(null);
         expect(getSearch({ resources: { search: { q: 'a' }  } }, { id: 'catalog' })).toEqual({ q: 'a' });
     });
+    it('getCurrentParams', () => {
+        expect(getCurrentParams()).toBe(undefined);
+        expect(getCurrentParams({ resources: { sections: { catalog: { params: { page: 2 } } } } }, { id: 'catalog' })).toEqual({ page: 2 });
+        expect(getCurrentParams({ resources: { sections: { catalog: { params: { page: 3 } } } } }, { resourcesGridId: 'catalog' })).toEqual({ page: 3 });
+    });
 });
diff --git a/web/client/plugins/ResourcesCatalog/selectors/resources.js b/web/client/plugins/ResourcesCatalog/selectors/resources.js
@@ -41,7 +41,8 @@ const getSelectedResourceState = (state, props) => {
 export const getInitialSelectedResource = (state, props) => getSelectedResourceState(state, props)?.initialSelectedResource;
 export const getSelectedResource = (state, props) => getSelectedResourceState(state, props)?.selectedResource;
 export const getShowDetails = (state, props) => !!getStatePart(state, props)?.showDetails;
-export const getCurrentPage = (state, props) => getStatePart(state, props)?.params?.page ?? 1;
+export const getCurrentParams = (state, props) => getStatePart(state, props)?.params;
+export const getCurrentPage = (state, props) => getCurrentParams(state, props)?.page ?? 1;
 export const getSearch = (state) => state?.resources?.search || null;
 
 export const getMonitoredStateSelector =  state => getMonitoredState(state, getConfigProp('monitorState'));