From 7e34317946c9cd330c1d700afb72ad037d3dca61 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 26 Sep 2023 11:44:16 +0100 Subject: [PATCH 1/9] Auto styling changes (prettier / eslint) --- components/widgets/selectors.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/components/widgets/selectors.js b/components/widgets/selectors.js index c007fbdfb0..d9bafae25b 100644 --- a/components/widgets/selectors.js +++ b/components/widgets/selectors.js @@ -175,8 +175,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; @@ -649,8 +652,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 []; From 7194c6f55a9257671c9c1afdaf1ce6c8c7553567 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 26 Sep 2023 11:59:08 +0100 Subject: [PATCH 2/9] Fix Dashboard categories links retaining info about the selected widget and scrolling --- layouts/dashboards/selectors.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/layouts/dashboards/selectors.js b/layouts/dashboards/selectors.js index a013abc7b8..22bda038a7 100644 --- a/layouts/dashboards/selectors.js +++ b/layouts/dashboards/selectors.js @@ -59,6 +59,8 @@ export const getLinks = createSelector( ...(category.value === 'summary' && { category: undefined, }), + widget: null, + scrollTo: null, }); return encodedQueryString.length > 0 ? `?${encodedQueryString}` : ''; } From 2f061168694e6a53683c7d777dd54d2db19788fc Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 26 Sep 2023 11:43:11 +0100 Subject: [PATCH 3/9] Load the dashboards only when data/store is synced with URL params --- pages/dashboards/[[...location]].js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/pages/dashboards/[[...location]].js b/pages/dashboards/[[...location]].js index a939acff7d..e54f852502 100644 --- a/pages/dashboards/[[...location]].js +++ b/pages/dashboards/[[...location]].js @@ -345,11 +345,13 @@ const DashboardsPage = (props) => { - + {ready && ( + + )} ); }; From 4d34699747e0adbb2d37a22ced8f8029bd477e71 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 26 Sep 2023 11:50:26 +0100 Subject: [PATCH 4/9] Widget selectors to use category set and not the url --- components/widgets/selectors.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/components/widgets/selectors.js b/components/widgets/selectors.js index d9bafae25b..e50d9811dc 100644 --- a/components/widgets/selectors.js +++ b/components/widgets/selectors.js @@ -68,10 +68,7 @@ const isAuthenticated = (state) => state?.myGfw?.data?.loggedIn || false; 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 +104,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 || 'summary'; export const selectModalClosing = (state) => state.modalMeta && state.modalMeta.closing; export const selectNonGlobalDatasets = (state) => From cbd8636cd6fb40bd9807df7a40507a4498cbf76d Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 26 Sep 2023 12:37:14 +0100 Subject: [PATCH 5/9] Set widgets category when dashboard page loads and update when query param changes --- pages/dashboards/[[...location]].js | 30 ++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/pages/dashboards/[[...location]].js b/pages/dashboards/[[...location]].js index e54f852502..3590944040 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,6 +328,10 @@ 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(() => { From 433f19c9dcd4019f9c545d4956947737e2f95fff Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 26 Sep 2023 13:01:18 +0100 Subject: [PATCH 6/9] Use widgets category as source of truth (and remove redundant/confusing dashboard one) --- components/widgets/selectors.js | 15 ++------------- .../components/global-sentence/selectors.js | 4 ++-- layouts/dashboards/selectors.js | 9 +++------ 3 files changed, 7 insertions(+), 21 deletions(-) diff --git a/components/widgets/selectors.js b/components/widgets/selectors.js index e50d9811dc..371bc8bda5 100644 --- a/components/widgets/selectors.js +++ b/components/widgets/selectors.js @@ -361,21 +361,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, @@ -685,7 +674,7 @@ export const getActiveWidget = createSelector( ); 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 22bda038a7..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 @@ -98,7 +95,7 @@ export const getLinks = createSelector( export const getDashboardsProps = createStructuredSelector({ showMapMobile: selectShowMap, - category: getActiveCategory, + category: selectCategory, links: getLinks, widgetAnchor: getWidgetAnchor, noWidgetsMessage: getNoWidgetsMessage, From a4f3d976c03d8172d0a9b532968a605649c52abe Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 26 Sep 2023 13:18:33 +0100 Subject: [PATCH 7/9] Ensure that when no dashboard/widget category is set, "summary" is returned as default --- components/widgets/index.js | 4 ++-- components/widgets/reducers.js | 2 +- components/widgets/selectors.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) 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 371bc8bda5..8ea6190e7c 100644 --- a/components/widgets/selectors.js +++ b/components/widgets/selectors.js @@ -104,7 +104,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?.widgets?.category || 'summary'; +export const selectCategory = (state) => state?.widgets?.category; export const selectModalClosing = (state) => state.modalMeta && state.modalMeta.closing; export const selectNonGlobalDatasets = (state) => From 05abedddeb286aa850122b3bcc0b9e80d917cb47 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 26 Sep 2023 15:16:18 +0100 Subject: [PATCH 8/9] Fix dashboard widget highlighting when no activeWidget is set and there are multiple subcategories --- components/widgets/selectors.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/components/widgets/selectors.js b/components/widgets/selectors.js index 8ea6190e7c..3b183c868c 100644 --- a/components/widgets/selectors.js +++ b/components/widgets/selectors.js @@ -66,6 +66,8 @@ 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?.widgets?.category; @@ -665,10 +667,20 @@ 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); } ); From bfb591293ae1c7209a29b526a9fe314328853bd8 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Wed, 27 Sep 2023 13:10:32 +0100 Subject: [PATCH 9/9] Fix dashboard page missing a dependency array in useEffect (will prevent 1 re-render) --- pages/dashboards/[[...location]].js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/dashboards/[[...location]].js b/pages/dashboards/[[...location]].js index 3590944040..f9fa9cd0ee 100644 --- a/pages/dashboards/[[...location]].js +++ b/pages/dashboards/[[...location]].js @@ -338,7 +338,7 @@ const DashboardsPage = (props) => { if (!ready) { setReady(true); } - }); + }, []); return (