diff --git a/components/widgets/index.js b/components/widgets/index.js index 81482034b2..9ba14957f5 100644 --- a/components/widgets/index.js +++ b/components/widgets/index.js @@ -93,7 +93,7 @@ class WidgetsContainer extends PureComponent { if (!isEqual(category, prevProps.category)) { setActiveWidget(null); - setWidgetsCategory(category || 'summary'); + setWidgetsCategory(category); } if (location.type === 'global' && prevProps.location?.type !== 'global') { @@ -155,7 +155,7 @@ class WidgetsContainer extends PureComponent { allDatasets = [...allDatasets, ...widgetDatasets]; } - setWidgetsCategory(this.props?.category || 'summary'); + setWidgetsCategory(this.props?.category); setMapSettings({ datasets: allDatasets, diff --git a/components/widgets/reducers.js b/components/widgets/reducers.js index 080ef7795b..573c4659be 100644 --- a/components/widgets/reducers.js +++ b/components/widgets/reducers.js @@ -44,7 +44,7 @@ const setShowMap = (state, { payload }) => ({ const setWidgetsCategory = (state, { payload }) => ({ ...state, - category: payload, + category: payload || initialState.category, }); const setWidgetsSettings = (state, { payload }) => ({ diff --git a/components/widgets/selectors.js b/components/widgets/selectors.js index c007fbdfb0..3b183c868c 100644 --- a/components/widgets/selectors.js +++ b/components/widgets/selectors.js @@ -66,12 +66,11 @@ const handleWidgetProxy = (widgets, settings) => { const isAuthenticated = (state) => state?.myGfw?.data?.loggedIn || false; +export const selectGroupBySubcategory = (state, { groupBySubcategory }) => + groupBySubcategory; export const selectLocation = (state) => state.location && state.location.payload; - -export const getCategory = (state) => - state.location && state?.location?.query?.category; - +export const getCategory = (state) => state?.widgets?.category; export const selectIsTrase = (state) => state.location?.query?.trase; export const selectRouteType = (state) => state.location && state.location.pathname; @@ -107,9 +106,7 @@ export const selectPolynameWhitelist = (state) => export const selectEmbed = (state, { embed }) => embed; export const selectSimple = (state, { simple }) => simple; export const selectAnalysis = (state, { analysis }) => analysis; -export const selectCategory = (state) => - (state.location && state.location.query && state.location.query.category) || - 'summary'; +export const selectCategory = (state) => state?.widgets?.category; export const selectModalClosing = (state) => state.modalMeta && state.modalMeta.closing; export const selectNonGlobalDatasets = (state) => @@ -175,8 +172,11 @@ export const getLocationData = createSelector( [getLocationObj, getAllLocationData, selectPolynameWhitelist], (locationObj, allLocationData, polynamesWhitelist) => { const { type, adminLevel, locationLabel, adm0, adm1, areaId } = locationObj; - const { adm0: adm0Data, adm1: adm1Data, adm2: adm2Data } = - allLocationData || {}; + const { + adm0: adm0Data, + adm1: adm1Data, + adm2: adm2Data, + } = allLocationData || {}; let parent = {}; let parentData = adm0Data; @@ -363,21 +363,10 @@ export const getWidgetCategories = createSelector( ) ); -export const getActiveCategory = createSelector( - [selectCategory, getWidgetCategories], - (activeCategory, widgetCats) => { - if (!widgetCats) { - return null; - } - - return widgetCats.includes(activeCategory) ? activeCategory : 'summary'; - } -); - export const filterWidgetsByCategory = createSelector( [ filterWidgetsByLocation, - getActiveCategory, + selectCategory, selectAnalysis, selectEmbed, selectActiveWidget, @@ -649,8 +638,9 @@ export const getWidgets = createSelector( export const getWidgetsGroupedBySubcategory = createSelector( [getCategory, getWidgets], (category, widgets) => { - const subcategories = CATEGORIES.find(({ value }) => value === category) - ?.subcategories; + const subcategories = CATEGORIES.find( + ({ value }) => value === category + )?.subcategories; if (!widgets || !subcategories) return []; @@ -677,16 +667,26 @@ export const getWidgetsGroupedBySubcategory = createSelector( ); export const getActiveWidget = createSelector( - [getWidgets, selectActiveWidget, selectAnalysis], - (widgets, activeWidgetKey, analysis) => { + [ + getWidgets, + getWidgetsGroupedBySubcategory, + selectActiveWidget, + selectAnalysis, + selectGroupBySubcategory, + ], + (widgets, widgetGroups, activeWidgetKey, analysis, groupBySubcategory) => { if (!widgets || analysis) return null; - if (!activeWidgetKey) return widgets[0]; + + if (!activeWidgetKey) { + return groupBySubcategory ? widgetGroups[0]?.widgets[0] : widgets[0]; + } + return widgets.find((w) => w.widget === activeWidgetKey); } ); export const getNoDataMessage = createSelector( - [getGeodescriberTitleFull, getActiveCategory], + [getGeodescriberTitleFull, selectCategory], (title, category) => { if (!title || !category) return 'No data available'; if (!category) return `No data available for ${title}`; diff --git a/layouts/dashboards/components/global-sentence/selectors.js b/layouts/dashboards/components/global-sentence/selectors.js index 3646312a47..375af04c8c 100644 --- a/layouts/dashboards/components/global-sentence/selectors.js +++ b/layouts/dashboards/components/global-sentence/selectors.js @@ -1,6 +1,6 @@ import { createStructuredSelector } from 'reselect'; -import { getActiveCategory } from 'components/widgets/selectors'; +import { selectCategory } from 'components/widgets/selectors'; import { selectLocation, @@ -12,5 +12,5 @@ export const getGlobalSentenceProps = createStructuredSelector({ loading: selectLoading, location: selectLocation, locationNames: getAdminsSelected, - category: getActiveCategory, + category: selectCategory, }); diff --git a/layouts/dashboards/selectors.js b/layouts/dashboards/selectors.js index a013abc7b8..5c526cc431 100644 --- a/layouts/dashboards/selectors.js +++ b/layouts/dashboards/selectors.js @@ -6,7 +6,7 @@ import { encodeQueryParams } from 'utils/url'; import { filterWidgetsByLocation, getWidgetCategories, - getActiveCategory, + selectCategory, } from 'components/widgets/selectors'; import { getActiveArea } from 'providers/areas-provider/selectors'; @@ -17,9 +17,6 @@ const selectShowMap = (state) => state.widgets?.showMap; const selectLocation = (state) => state.location; const selectLocationType = (state) => state.location && state.location.payload && state.location.payload.type; -const selectCategory = (state) => - (state.location && state.location.query && state.location.query.category) || - 'summary'; export const selectQuery = (state) => state.location && state.location.query; export const getEmbed = createSelector( @@ -44,7 +41,7 @@ export const getNoWidgetsMessage = createSelector( ); export const getLinks = createSelector( - [getWidgetCategories, getActiveCategory, selectLocation], + [getWidgetCategories, selectCategory, selectLocation], (widgetCats, activeCategory, location) => { const serializePayload = Object.values(location.payload).filter( (p) => p && p.toString().length @@ -59,6 +56,8 @@ export const getLinks = createSelector( ...(category.value === 'summary' && { category: undefined, }), + widget: null, + scrollTo: null, }); return encodedQueryString.length > 0 ? `?${encodedQueryString}` : ''; } @@ -96,7 +95,7 @@ export const getLinks = createSelector( export const getDashboardsProps = createStructuredSelector({ showMapMobile: selectShowMap, - category: getActiveCategory, + category: selectCategory, links: getLinks, widgetAnchor: getWidgetAnchor, noWidgetsMessage: getNoWidgetsMessage, diff --git a/pages/dashboards/[[...location]].js b/pages/dashboards/[[...location]].js index a939acff7d..f9fa9cd0ee 100644 --- a/pages/dashboards/[[...location]].js +++ b/pages/dashboards/[[...location]].js @@ -282,18 +282,18 @@ const DashboardsPage = (props) => { countryData, } = props; - useEffect(() => { - const { - map, - modalMeta, - dashboardPrompts, - category, - areaOfInterestModal, - showMap, - widget, - ...widgets - } = decodeQueryParams(query) || {}; + const { + map, + modalMeta, + dashboardPrompts, + category, + areaOfInterestModal, + showMap, + widget, + ...widgets + } = decodeQueryParams(query) || {}; + useEffect(() => { if (map) { dispatch(setMapSettings(map)); } @@ -310,10 +310,6 @@ const DashboardsPage = (props) => { dispatch(setWidgetsSettings(widgets)); } - if (category) { - dispatch(setWidgetsCategory(category)); - } - if (showMap) { dispatch(setShowMap(showMap)); } @@ -332,24 +328,30 @@ const DashboardsPage = (props) => { } }, [fullPathname, isFallback]); + useEffect(() => { + dispatch(setWidgetsCategory(category)); + }, [category]); + // when setting the query params from the URL we need to make sure we don't render the map // on the server otherwise the DOM will be out of sync useEffect(() => { if (!ready) { setReady(true); } - }); + }, []); return ( - + {ready && ( + + )} ); };