Client - Filter panel state should be consistent with the latest user…

… action (#127)

geonode_mapstore_client/client/js/actions/gnfiltersPanel.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2021, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export const ON_TOGGLE_FILTER = 'GEONODE:ON_TOGGLE_FILTER';
+
+export function toggleFiltersPanel() {
+    return {
+        type: ON_TOGGLE_FILTER
+    };
+}

geonode_mapstore_client/client/js/apps/gn-home.jsx

@@ -21,6 +21,7 @@ import gnsearch from '@js/reducers/gnsearch';
 import gnresource from '@js/reducers/gnresource';
 import gnsearchEpics from '@js/epics/gnsearch';
 import gnlocaleEpics from '@js/epics/gnlocale';
+import gnfiltersPanel from '@js/reducers/gnfiltersPanel';
 
 import {
     getConfiguration,
@@ -102,6 +103,7 @@ Promise.all([
             appReducers: {
                 gnsearch,
                 gnresource,
+                gnfiltersPanel,
                 security
             },
             appEpics: {

geonode_mapstore_client/client/js/reducers/gnfiltersPanel.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2021, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+import { ON_TOGGLE_FILTER } from '@js/actions/gnfiltersPanel';
+
+const gnfiltersPanel =  (state = {isToggle: false}, action) => {
+    switch (action.type) {
+    case ON_TOGGLE_FILTER:
+        return {
+            ...state,
+            isToggle: !state.isToggle
+        };
+    default:
+        return state;
+    }
+};
+
+export default gnfiltersPanel;

geonode_mapstore_client/client/js/routes/Detail.jsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import Home from '@js/routes/Home';
 
 
-const DetailRoute = connect(() => ({ hideHero: true })
+const DetailRoute = connect(() => ({ hideHero: true, isFilterForm: false })
 )((Home));
 
 export default DetailRoute;

geonode_mapstore_client/client/js/routes/Home.jsx

@@ -44,6 +44,9 @@ import {
     getOwners
 } from '@js/api/geonode/v1';
 import { getResourceTypes } from '@js/api/geonode/v2';
+import  { toggleFiltersPanel }  from '@js/actions/gnfiltersPanel';
+
+
 const DEFAULT_SUGGESTIONS = [];
 const DEFAULT_RESOURCES = [];
 const REDIRECT_NOT_ALLOWED = ['/', '/search/'];
@@ -73,6 +76,18 @@ const ConnectedSearchBar = connect(
 )(SearchBar);
 
 
+const ConnectedFilterForm = connect(
+    createSelector([
+        state => state?.gnfiltersPanel?.isToggle || false
+    ], (isToggle) => ({
+        isToggle
+    })),
+    {
+        onToggleFilters: toggleFiltersPanel
+    }
+)(FilterForm);
+
+
 const CardGridWithMessageId = ({ query, user, isFirstRequest, ...props }) => {
     const hasResources = props.resources?.length > 0;
     const hasFilter = Object.keys(query || {}).filter(key => key !== 'sort').length > 0;
@@ -171,6 +186,8 @@ function Home({
     theme,
     params,
     onSearch,
+    onToggleFilters,
+    isToggle,
     menu,
     navbar,
     footer,
@@ -234,13 +251,16 @@ function Home({
         heroNodeHeight
     };
 
-    const [showFilterForm, setShowFilterForm] = useState(isFilterForm || false);
+    const [showFilterForm, setShowFilterForm] = useState( (isFilterForm && isToggle) || false);
 
     const handleShowFilterForm = () => {
-        setShowFilterForm(!showFilterForm);
         if (!REDIRECT_NOT_ALLOWED.includes(location.pathname)) {
             window.location = `#/search/${location.search}`;
+            return;
         }
+        setShowFilterForm(!showFilterForm);
+        onToggleFilters();
+
     };
 
     function handleUpdate(newParams, pathname) {
@@ -391,8 +411,8 @@ function Home({
 
                 <div className="gn-container">
                     <div className="gn-row">
-                    {showFilterForm && <div ref={filterFormNode} id="gn-filter-form-container" className={`gn-filter-form-container`}>
-                             <FilterForm
+                        {showFilterForm && <div ref={filterFormNode} id="gn-filter-form-container" className={`gn-filter-form-container`}>
+                            <ConnectedFilterForm
                                 key="gn-filter-form"
                                 id="gn-filter-form"
                                 styleContanierForm={ hideHero ? { marginTop: dimensions.brandNavbarHeight, top: (filterFormOffset + dimensions.brandNavbarHeight), maxHeight: stickyFiltersMaxHeight } :
@@ -507,16 +527,19 @@ const ConnectedHome = connect(
     createSelector([
         state => state?.gnsearch?.params || DEFAULT_PARAMS,
         state => state?.security?.user || null,
-        state => state?.gnresource?.data || null
-    ], (params, user, resource) => ({
+        state => state?.gnresource?.data || null,
+        state => state?.gnfiltersPanel?.isToggle || false
+    ], (params, user, resource, isToggle) => ({
         params,
         user,
-        resource
+        resource,
+        isToggle
 
     })),
     {
         onSearch: searchResources,
-        onSelect: requestResource
+        onSelect: requestResource,
+        onToggleFilters: toggleFiltersPanel
     }
 )(withResizeDetector(Home));