region/country dashboard in store

src/client/store/metadata/extraReducers/getDashboardReducer.ts

@@ -1,14 +1,23 @@
 import { ActionReducerMapBuilder } from '@reduxjs/toolkit'
 
+import { Areas } from 'meta/area'
+
 import { getDashboard } from 'client/store/metadata/actions/getDashboard'
 import { MetadataState } from 'client/store/metadata/state'
 
 export const getDashboardReducer = (builder: ActionReducerMapBuilder<MetadataState>): void => {
   builder.addCase(getDashboard.fulfilled, (state, action) => {
-    const { assessmentName, cycleName } = action.meta.arg
+    const { assessmentName, cycleName, countryIso } = action.meta.arg
     if (!state.dashboard[assessmentName]) {
       state.dashboard[assessmentName] = {}
     }
-    state.dashboard[assessmentName][cycleName] = action.payload
+
+    if (!state.dashboard[assessmentName][cycleName]) {
+      state.dashboard[assessmentName][cycleName] = { region: undefined, country: undefined }
+    }
+
+    const key = Areas.isISOCountry(countryIso) ? 'country' : 'region'
+
+    state.dashboard[assessmentName][cycleName][key] = action.payload
   })
 }

src/client/store/metadata/hooks/useDashboardItems.ts

@@ -1,10 +1,12 @@
+import { Areas } from 'meta/area'
 import { DashboardItem } from 'meta/dashboard'
 
 import { MetadataSelectors } from 'client/store/metadata/selectors'
 import { useAppSelector } from 'client/store/store'
-import { useCycleRouteParams } from 'client/hooks/useRouteParams'
+import { useCountryRouteParams } from 'client/hooks/useRouteParams'
 
 export const useDashboardItems = (): Array<DashboardItem> => {
-  const { assessmentName, cycleName } = useCycleRouteParams()
-  return useAppSelector((state) => MetadataSelectors.getDashboard(state, assessmentName, cycleName))
+  const { assessmentName, cycleName, countryIso } = useCountryRouteParams()
+  const key = Areas.isISOCountry(countryIso) ? 'country' : 'region'
+  return useAppSelector((state) => MetadataSelectors.getDashboard(state, assessmentName, cycleName)?.[key])
 }

src/client/store/metadata/hooks/useGetDashboard.ts

@@ -4,12 +4,16 @@ import { useAppDispatch } from 'client/store'
 import { useCountryRouteParams } from 'client/hooks/useRouteParams'
 
 import { MetadataActions } from '../slice'
+import { useDashboardItems } from './useDashboardItems'
 
 export const useGetDashboard = () => {
   const dispatch = useAppDispatch()
   const { assessmentName, cycleName, countryIso } = useCountryRouteParams()
+  const dashboardItems = useDashboardItems()
 
   useEffect(() => {
-    dispatch(MetadataActions.getDashboard({ assessmentName, cycleName, countryIso }))
-  }, [assessmentName, cycleName, countryIso, dispatch])
+    if (!dashboardItems) {
+      dispatch(MetadataActions.getDashboard({ assessmentName, cycleName, countryIso }))
+    }
+  }, [assessmentName, cycleName, countryIso, dispatch, dashboardItems])
 }

src/client/store/metadata/state.ts

@@ -2,10 +2,15 @@ import { AssessmentName, CycleName, Section, TableSection } from 'meta/assessmen
 import { SectionName } from 'meta/assessment/section'
 import { DashboardItem } from 'meta/dashboard'
 
+type DashboardState = Record<
+  AssessmentName,
+  Record<CycleName, { region: Array<DashboardItem>; country: Array<DashboardItem> }>
+>
+
 export interface MetadataState {
   sections: Record<AssessmentName, Record<CycleName, Array<Section>>>
   tableSections: Record<AssessmentName, Record<CycleName, Record<SectionName, Array<TableSection>>>>
-  dashboard: Record<AssessmentName, Record<CycleName, Array<DashboardItem>>>
+  dashboard: DashboardState
 }
 
 export const initialState: MetadataState = {