diff --git a/geonode_mapstore_client/client/js/actions/gnfiltersPanel.js b/geonode_mapstore_client/client/js/actions/gnfiltersPanel.js new file mode 100644 index 0000000000..748a779703 --- /dev/null +++ b/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 + }; +} diff --git a/geonode_mapstore_client/client/js/apps/gn-home.jsx b/geonode_mapstore_client/client/js/apps/gn-home.jsx index 94e4b25b93..89a77b99f2 100644 --- a/geonode_mapstore_client/client/js/apps/gn-home.jsx +++ b/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: { diff --git a/geonode_mapstore_client/client/js/reducers/gnfiltersPanel.js b/geonode_mapstore_client/client/js/reducers/gnfiltersPanel.js new file mode 100644 index 0000000000..99016d4ac0 --- /dev/null +++ b/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; diff --git a/geonode_mapstore_client/client/js/routes/Detail.jsx b/geonode_mapstore_client/client/js/routes/Detail.jsx index 5d9ec3dc03..cb0c6ad958 100644 --- a/geonode_mapstore_client/client/js/routes/Detail.jsx +++ b/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; diff --git a/geonode_mapstore_client/client/js/routes/Home.jsx b/geonode_mapstore_client/client/js/routes/Home.jsx index 9073c23036..1e96dfa744 100644 --- a/geonode_mapstore_client/client/js/routes/Home.jsx +++ b/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({
- {showFilterForm &&
- + 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));