diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index cfe1175ef..32a387a61 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -35,7 +35,8 @@ jobs: ] extra_plugins: | "@semantic-release/commit-analyzer" - "@semantic-release/release-notes-generator" + "@semantic-release/release-notes-generator@10.0.3" "@semantic-release/github" env: GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + RUNNER_DEBUG: 1 diff --git a/src/app/components/Charts/Eligibility/DotChart/index.tsx b/src/app/components/Charts/Eligibility/DotChart/index.tsx index 376329d4c..5c8cf9ed1 100644 --- a/src/app/components/Charts/Eligibility/DotChart/index.tsx +++ b/src/app/components/Charts/Eligibility/DotChart/index.tsx @@ -156,7 +156,7 @@ export function DotChart(props: DotChartProps) { } `} > - Eligibility + {get(cmsData, "componentsChartsEligibility.eligibility", "")}
- Country Detail Page + {get(cmsData, "componentsChartsGeomap.countryDetail", "")}
)} diff --git a/src/app/components/Charts/Investments/TimeCycle/components/tooltip/index.tsx b/src/app/components/Charts/Investments/TimeCycle/components/tooltip/index.tsx index 96733070f..0196df863 100644 --- a/src/app/components/Charts/Investments/TimeCycle/components/tooltip/index.tsx +++ b/src/app/components/Charts/Investments/TimeCycle/components/tooltip/index.tsx @@ -27,7 +27,8 @@ export function InvestmentsTimeCycleTooltip(props: any) { font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif; `} > - Year {props.indexValue} + {get(cmsData, "componentsChartsInvestments.year", "")}{" "} + {props.indexValue}
- {get(cmsData, "componentsChartsInvestments.totalAmount", "")}:{" "} + {get(cmsData, "componentsChartsInvestments.totalAmount", "")}{" "} {formatFinancialValue(totalInvestmentValue)} @@ -185,7 +185,8 @@ export function InvestmentsTimeCycle(props: InvestmentsTimeCycleProps) { } `} > - Investments - {props.type || "Disbursement"} + {get(cmsData, "componentsChartsInvestments.investments", "")}{" "} + {props.type || "Disbursement"}
{formatFinancialValue(totalInvestmentValue)} diff --git a/src/app/components/Charts/common/dialogBox/index.tsx b/src/app/components/Charts/common/dialogBox/index.tsx index 56054cb1f..05acc9754 100644 --- a/src/app/components/Charts/common/dialogBox/index.tsx +++ b/src/app/components/Charts/common/dialogBox/index.tsx @@ -1,4 +1,6 @@ import React from "react"; +import get from "lodash/get"; +import { useCMSData } from "app/hooks/useCMSData"; import { useStoreActions } from "app/state/store/hooks"; import { overlaycss, @@ -27,7 +29,7 @@ export default function ReRouteDialogBox(props: Props) { const clearDataPathSteps = useStoreActions( (actions) => actions.DataPathSteps.clear ); - + const cmsData = useCMSData({ returnData: true }); const handleYesClick = () => { clearDataPathSteps(); if (props.handleClick) { @@ -47,21 +49,28 @@ export default function ReRouteDialogBox(props: Props) { margin: 0; `} > - You are navigating to a {props.display.pageType || "grant"} page. + {get(cmsData, "componentsDialogBox.navigating", "")}{" "} + {props.display.pageType || "grant"}{" "} + {get(cmsData, "componentsDialogBox.page", "")}

- New pathway will be formed according to your new search. + {get(cmsData, "componentsDialogBox.info", "")}

- Continue to {props.display.pageType || "grant"} page? + + {" "} + {get(cmsData, "componentsDialogBox.continueToPage", "")}{" "} + {props.display.pageType || "grant"}{" "} + {get(cmsData, "componentsDialogBox.pageRequest", "")} +

- No + {get(cmsData, "componentsDialogBox.no", "")}
diff --git a/src/app/components/PageHeader/components/filterbar/index.tsx b/src/app/components/PageHeader/components/filterbar/index.tsx index 480ce3eed..36ebc8aab 100644 --- a/src/app/components/PageHeader/components/filterbar/index.tsx +++ b/src/app/components/PageHeader/components/filterbar/index.tsx @@ -105,7 +105,9 @@ export function MobileFilterBar() { return (
-
Your selections
+
+ {get(cmsData, "componentsPageHeader.mobileFilterBar", "")} +
{chips.map((chip: any) => { return ; diff --git a/src/app/components/Table/Expandable/Toolbar.tsx b/src/app/components/Table/Expandable/Toolbar.tsx index dcb1c48c5..d80766361 100644 --- a/src/app/components/Table/Expandable/Toolbar.tsx +++ b/src/app/components/Table/Expandable/Toolbar.tsx @@ -6,6 +6,7 @@ import { exportCSV } from "app/utils/exportCSV"; import Toolbar from "@material-ui/core/Toolbar"; import Popover from "@material-ui/core/Popover"; import CloseIcon from "@material-ui/icons/Close"; +import { useCMSData } from "app/hooks/useCMSData"; import SearchIcon from "@material-ui/icons/Search"; import IconButton from "@material-ui/core/IconButton"; import { useStoreState } from "app/state/store/hooks"; @@ -29,7 +30,7 @@ export function TableToolbar(props: TableToolbarProps) { const location = useLocation(); const params = useParams<{ code?: string }>(); const vizData = useGetAllVizData(); - + const cmsData = useCMSData({ returnData: true }); const searchInputRef = React.useRef(null); const [anchorEl, setAnchorEl] = React.useState( null @@ -249,7 +250,7 @@ export function TableToolbar(props: TableToolbarProps) { margin-bottom: 20px; `} > - Show columns + {get(cmsData, "componentsTable.showColumns", "")}
{props.columns.map((c, index) => ( diff --git a/src/app/components/Table/Expandable/index.tsx b/src/app/components/Table/Expandable/index.tsx index 55a229c89..1a0e5f08f 100644 --- a/src/app/components/Table/Expandable/index.tsx +++ b/src/app/components/Table/Expandable/index.tsx @@ -1,8 +1,10 @@ import React from "react"; +import get from "lodash/get"; import filter from "lodash/filter"; import { appColors } from "app/theme"; import findIndex from "lodash/findIndex"; import Table from "@material-ui/core/Table"; +import { useCMSData } from "app/hooks/useCMSData"; import Collapse from "@material-ui/core/Collapse"; import TableRow from "@material-ui/core/TableRow"; import TableHead from "@material-ui/core/TableHead"; @@ -200,6 +202,7 @@ function Row(props: { export function ExpandableTable(props: ExpandableTableProps) { const [toolbarCols, setToolbarCols] = React.useState([]); + const cmsData = useCMSData({ returnData: true }); function onColumnViewSelectionChange(e: React.ChangeEvent) { const updatedToolbarCols = [...toolbarCols]; @@ -219,7 +222,7 @@ export function ExpandableTable(props: ExpandableTableProps) { return ( get(state.AllocationsPeriods.data, "data", []) as string[] ); @@ -22,7 +25,7 @@ export function AllocationsPeriods() { return ( ({ diff --git a/src/app/components/ToolBoxPanel/components/donormaptypes/index.tsx b/src/app/components/ToolBoxPanel/components/donormaptypes/index.tsx index f5cde4a61..2594268d6 100644 --- a/src/app/components/ToolBoxPanel/components/donormaptypes/index.tsx +++ b/src/app/components/ToolBoxPanel/components/donormaptypes/index.tsx @@ -1,8 +1,11 @@ import React from "react"; +import get from "lodash/get"; +import { useCMSData } from "app/hooks/useCMSData"; import { useStoreState, useStoreActions } from "app/state/store/hooks"; import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby"; export function ToolBoxPanelDonorMapTypes() { + const cmsData = useCMSData({ returnData: true }); const checked = useStoreState( (state) => state.ToolBoxPanelDonorMapTypeState.value ); @@ -12,7 +15,7 @@ export function ToolBoxPanelDonorMapTypes() { return ( state.ToolBoxPanelDonorMapViewState.value ); @@ -12,7 +15,7 @@ export function ToolBoxPanelDonorViews() { return ( state.ToolBoxPanelEligibilityAdvancedCheckboxState.value ); @@ -46,7 +49,7 @@ export function ToolBoxPanelEligibilityAdvanced() { } `} > - Advanced + {get(cmsData, "componentsSidebar.advancedLabel", "")} } - label="Show disease burden and income level" + label={get(cmsData, "componentsSidebar.showDiseaseLabel", "")} />
); diff --git a/src/app/components/ToolBoxPanel/components/eligibilityyear/index.tsx b/src/app/components/ToolBoxPanel/components/eligibilityyear/index.tsx index 64fecfdf6..dc7608bfd 100644 --- a/src/app/components/ToolBoxPanel/components/eligibilityyear/index.tsx +++ b/src/app/components/ToolBoxPanel/components/eligibilityyear/index.tsx @@ -1,9 +1,11 @@ import React from "react"; import get from "lodash/get"; +import { useCMSData } from "app/hooks/useCMSData"; import { useStoreState, useStoreActions } from "app/state/store/hooks"; import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby"; export function EligibilityYear() { + const cmsData = useCMSData({ returnData: true }); const dataYearOptions = useStoreState( (state) => get(state.EligibilityYears.data, "data", []) as string[] ); @@ -15,13 +17,14 @@ export function EligibilityYear() { (actions) => actions.ToolBoxPanelEligibilityYearState.setValue ); - React.useEffect(() => setSelectedYear(get(dataYearOptions, "[0]", "2020")), [ - dataYearOptions, - ]); + React.useEffect( + () => setSelectedYear(get(dataYearOptions, "[0]", "2020")), + [dataYearOptions] + ); return ( ({ diff --git a/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx b/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx index 2715af402..9ce58f4ed 100644 --- a/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx +++ b/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx @@ -1,11 +1,14 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */ import React from "react"; +import get from "lodash/get"; import find from "lodash/find"; import remove from "lodash/remove"; import isEqual from "lodash/isEqual"; +import { appColors } from "app/theme"; import { useRecoilState } from "recoil"; import findIndex from "lodash/findIndex"; +import { useCMSData } from "app/hooks/useCMSData"; import Checkbox from "@material-ui/core/Checkbox"; import { ResetIcon } from "app/assets/icons/Reset"; import { SearchIcon } from "app/assets/icons/Search"; @@ -20,7 +23,6 @@ import { FilterGroupProps, FilterOptionProps, } from "app/components/ToolBoxPanel/components/filters/data"; -import { appColors } from "app/theme"; interface ExpandedFilterGroupProps extends FilterGroupModel, FilterGroupProps { goBack: () => void; @@ -29,7 +31,7 @@ interface ExpandedFilterGroupProps extends FilterGroupModel, FilterGroupProps { export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) { const [value, setValue] = React.useState(""); const [allSelected, setAllSelected] = React.useState(false); - + const cmsData = useCMSData({ returnData: true }); const [optionsToShow, setOptionsToShow] = React.useState(props.options); const [expandedGroup] = useRecoilState(filterExpandedGroup); const { @@ -461,7 +463,7 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) { font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif; `} > - Apply + {get(cmsData, "componentsSidebar.applyButton", "")} )} diff --git a/src/app/components/ToolBoxPanel/components/filters/data.ts b/src/app/components/ToolBoxPanel/components/filters/data.ts index dd1942ecb..c7356fb22 100644 --- a/src/app/components/ToolBoxPanel/components/filters/data.ts +++ b/src/app/components/ToolBoxPanel/components/filters/data.ts @@ -1,4 +1,4 @@ -import { filter } from "lodash"; +import filter from "lodash/filter"; export interface FilterGroupOptionModel { label: string; diff --git a/src/app/components/ToolBoxPanel/components/filters/index.tsx b/src/app/components/ToolBoxPanel/components/filters/index.tsx index 029834e93..1fe38e71e 100644 --- a/src/app/components/ToolBoxPanel/components/filters/index.tsx +++ b/src/app/components/ToolBoxPanel/components/filters/index.tsx @@ -4,6 +4,7 @@ import isEqual from "lodash/isEqual"; import { appColors } from "app/theme"; import { useRecoilState } from "recoil"; import Button from "@material-ui/core/Button"; +import { useCMSData } from "app/hooks/useCMSData"; import { ResetIcon } from "app/assets/icons/Reset"; import { filterExpandedGroup } from "app/state/recoil/atoms"; import { useFilterOptions } from "app/hooks/useFilterOptions"; @@ -19,7 +20,7 @@ interface ToolBoxPanelFiltersProps { export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) { const filterOptions = useFilterOptions({ returnFilterOptions: true }); - + const cmsData = useCMSData({ returnData: true }); const [expandedGroup, setExpandedGroup] = useRecoilState(filterExpandedGroup); const actions = useStoreActions((store) => store.AppliedFiltersState); const data = useStoreState((state) => state.AppliedFiltersState); @@ -95,7 +96,7 @@ export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) { } `} > - Filters + {get(cmsData, "componentsSidebar.filters", "")} {props.groups.map((group: FilterGroupProps) => ( diff --git a/src/app/components/ToolBoxPanel/components/grantperiods/index.tsx b/src/app/components/ToolBoxPanel/components/grantperiods/index.tsx index 8620f1951..9f33a9e6a 100644 --- a/src/app/components/ToolBoxPanel/components/grantperiods/index.tsx +++ b/src/app/components/ToolBoxPanel/components/grantperiods/index.tsx @@ -1,6 +1,7 @@ import React from "react"; import get from "lodash/get"; import find from "lodash/find"; +import { useCMSData } from "app/hooks/useCMSData"; import { useStoreState } from "app/state/store/hooks"; import { useParams, useHistory } from "react-router-dom"; import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby"; @@ -14,6 +15,7 @@ interface GrantDetailPeriod { export function GrantImplementationPeriods() { const history = useHistory(); const params = useParams<{ code: string; period: string; vizType: string }>(); + const cmsData = useCMSData({ returnData: true }); const periods = useStoreState( (state) => @@ -42,7 +44,7 @@ export function GrantImplementationPeriods() { return ( ({ diff --git a/src/app/components/ToolBoxPanel/components/iconbuttons/index.tsx b/src/app/components/ToolBoxPanel/components/iconbuttons/index.tsx index 01dcbab33..55a2d71b0 100644 --- a/src/app/components/ToolBoxPanel/components/iconbuttons/index.tsx +++ b/src/app/components/ToolBoxPanel/components/iconbuttons/index.tsx @@ -4,6 +4,7 @@ import get from "lodash/get"; import { CSVLink } from "react-csv"; import { appColors } from "app/theme"; import Snackbar from "@material-ui/core/Snackbar"; +import { useCMSData } from "app/hooks/useCMSData"; import MenuItem from "@material-ui/core/MenuItem"; import { useStoreState } from "app/state/store/hooks"; import IconButton from "@material-ui/core/IconButton"; @@ -108,6 +109,8 @@ export function ToolBoxPanelIconButtons(props: ToolBoxPanelIconButtonsProps) { const location = useLocation(); const csvLinkRef = React.useRef(); const params = useParams<{ code?: string }>(); + const cmsData = useCMSData({ returnData: true }); + const vizData = useGetAllVizData(); const [openSnackbar, setOpenSnackbar] = React.useState(false); const [allAvailableGrants, setAllAvailableGrants] = React.useState([]); @@ -172,7 +175,7 @@ export function ToolBoxPanelIconButtons(props: ToolBoxPanelIconButtonsProps) { font-size: 12px !important; `} > - CSV + {get(cmsData, "componentsSidebar.csvIcon", "")} , ]; @@ -215,7 +218,7 @@ export function ToolBoxPanelIconButtons(props: ToolBoxPanelIconButtonsProps) { padding: 6px 12px !important; `} > - CSV + {get(cmsData, "componentsSidebar.csvIcon", "")} , ]; @@ -253,7 +256,7 @@ export function ToolBoxPanelIconButtons(props: ToolBoxPanelIconButtonsProps) { padding: 6px 12px !important; `} > - PNG + {get(cmsData, "componentsSidebar.pngIcon", "")} ); @@ -284,7 +287,7 @@ export function ToolBoxPanelIconButtons(props: ToolBoxPanelIconButtonsProps) { padding: 6px 12px !important; `} > - SVG + {get(cmsData, "componentsSidebar.svgIcon", "")} ); diff --git a/src/app/components/ToolBoxPanel/components/pf-reportingperiods/index.tsx b/src/app/components/ToolBoxPanel/components/pf-reportingperiods/index.tsx index 621f4ec9c..cc68a32bc 100644 --- a/src/app/components/ToolBoxPanel/components/pf-reportingperiods/index.tsx +++ b/src/app/components/ToolBoxPanel/components/pf-reportingperiods/index.tsx @@ -1,10 +1,12 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */ import React from "react"; +import get from "lodash/get"; +import { appColors } from "app/theme"; +import { useCMSData } from "app/hooks/useCMSData"; import useMeasure from "react-use/lib/useMeasure"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import Draggable, { DraggableEvent, DraggableData } from "react-draggable"; -import { appColors } from "app/theme"; export interface PerformanceFrameworkReportingPeriodsProps { periods: string[][]; @@ -14,7 +16,7 @@ export function PerformanceFrameworkReportingPeriods( props: PerformanceFrameworkReportingPeriodsProps ) { const [ref, { width }] = useMeasure(); - + const cmsData = useCMSData({ returnData: true }); const setSelected = useStoreActions( (store) => store.ToolBoxPanelPFPeriodState.setValue ); @@ -53,7 +55,7 @@ export function PerformanceFrameworkReportingPeriods( } `} > - Reporting Period + {get(cmsData, "componentsSidebar.reportingPeriodLabel", "")}
get(state.ResultsYears.data, "data", []) as string[] ); @@ -15,13 +17,14 @@ export function ResultsYear() { (actions) => actions.ToolBoxPanelResultsYearState.setValue ); - React.useEffect(() => setSelectedYear(get(dataYearOptions, "[0]", "2020")), [ - dataYearOptions, - ]); + React.useEffect( + () => setSelectedYear(get(dataYearOptions, "[0]", "2020")), + [dataYearOptions] + ); return ( ({ diff --git a/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx b/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx index 04b22bb09..eec3c1ff7 100644 --- a/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx +++ b/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx @@ -1,9 +1,12 @@ import React from "react"; import get from "lodash/get"; import find from "lodash/find"; +import { useRecoilState } from "recoil"; import { useUpdateEffect } from "react-use"; import { useMediaQuery } from "@material-ui/core"; +import { useCMSData } from "app/hooks/useCMSData"; import { useParams, useHistory } from "react-router-dom"; +import { filterExpandedGroup } from "app/state/recoil/atoms"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { ResultsYear } from "app/components/ToolBoxPanel/components/resultsyear"; import { ToolBoxPanelFilters } from "app/components/ToolBoxPanel/components/filters"; @@ -24,8 +27,6 @@ import { ViewModel, getControlItems, } from "app/components/ToolBoxPanel/utils/getControlItems"; -import { useRecoilState } from "recoil"; -import { filterExpandedGroup } from "app/state/recoil/atoms"; interface SubToolBoxPanelProps { filterGroups: FilterGroupProps[]; @@ -40,6 +41,8 @@ export function SubToolBoxPanel(props: SubToolBoxPanelProps) { vizType: string; subType?: string; }>(); + const cmsData = useCMSData({ returnData: true }); + const isMobile = useMediaQuery("(max-width: 767px)"); const [selectedView, setSelectedView] = React.useState(""); const [controlItems, setControlItems] = React.useState<{ @@ -197,7 +200,7 @@ export function SubToolBoxPanel(props: SubToolBoxPanelProps) { )} {controlItems.views.length > 0 && !isMobile && ( 0 && ( (null); + const cmsData = useCMSData({ returnData: true }); const [expandedGroup] = useRecoilState(filterExpandedGroup); @@ -184,7 +187,7 @@ export function ToolBoxPanel(props: ToolBoxPanelProps) { font-family: GothamNarrow-Bold; `} > - Toolbox + {get(cmsData, "componentsSidebar.toolbox", "")}
state.cms.componentsAppBar.data ); + const componentsTableCMSAction = useStoreActions( + (actions) => actions.cms.componentsTable.fetch + ); + const componentsTableCMSData = useStoreState( + (state) => state.cms.componentsTable.data + ); + const componentsDialogBoxCMSAction = useStoreActions( + (actions) => actions.cms.componentsDialogBox.fetch + ); + const componentsDialogBoxCMSData = useStoreState( + (state) => state.cms.componentsDialogBox.data + ); const componentsChartsBudgetsCMSAction = useStoreActions( (actions) => actions.cms.componentsChartsBudgets.fetch ); @@ -122,6 +134,13 @@ export function useCMSData(props: UseCMSDataProps) { const componentsSlideInPanelCMSData = useStoreState( (state) => state.cms.componentsSlideInPanel.data ); + const componentsSidebarCMSAction = useStoreActions( + (actions) => actions.cms.componentsSidebar.fetch + ); + const componentsSidebarCMSData = useStoreState( + (state) => state.cms.componentsSidebar.data + ); + // MODULES const modulesAboutCMSAction = useStoreActions( (actions) => actions.cms.modulesAbout.fetch @@ -170,6 +189,8 @@ export function useCMSData(props: UseCMSDataProps) { if (props.loadData) { // COMPONENTS componentsAppBarCMSAction({ isCMSfetch: true }); + componentsTableCMSAction({ isCMSfetch: true }); + componentsDialogBoxCMSAction({ isCMSfetch: true }); componentsChartsBudgetsCMSAction({ isCMSfetch: true }); componentsChartsCommonCMSAction({ isCMSfetch: true }); componentsChartsEligibilityCMSAction({ isCMSfetch: true }); @@ -187,6 +208,7 @@ export function useCMSData(props: UseCMSDataProps) { componentsPerformanceFrameworkComponentsCMSAction({ isCMSfetch: true }); componentsSearchCMSAction({ isCMSfetch: true }); componentsSlideInPanelCMSAction({ isCMSfetch: true }); + componentsSidebarCMSAction({ isCMSfetch: true }); // MODULES modulesAboutCMSAction({ isCMSfetch: true }); modulesCommonCMSAction({ isCMSfetch: true }); @@ -207,6 +229,14 @@ export function useCMSData(props: UseCMSDataProps) { key: "componentsAppBar", data: componentsAppBarCMSData || {}, }, + { + key: "componentsTable", + data: componentsTableCMSData || {}, + }, + { + key: "componentsDialogBox", + data: componentsDialogBoxCMSData || {}, + }, { key: "componentsChartsBudgets", data: componentsChartsBudgetsCMSData || {}, @@ -275,6 +305,10 @@ export function useCMSData(props: UseCMSDataProps) { key: "componentsSlideInPanel", data: componentsSlideInPanelCMSData || {}, }, + { + key: "componentsSidebar", + data: componentsSidebarCMSData || {}, + }, // MODULES { key: "modulesAbout", @@ -340,6 +374,8 @@ export function useCMSData(props: UseCMSDataProps) { }, [ // COMPONENTS componentsAppBarCMSData, + componentsTableCMSData, + componentsDialogBoxCMSData, componentsChartsBudgetsCMSData, componentsChartsCommonCMSData, componentsChartsEligibilityCMSData, @@ -357,6 +393,7 @@ export function useCMSData(props: UseCMSDataProps) { componentsPerformanceFrameworkComponentsCMSData, componentsSearchCMSData, componentsSlideInPanelCMSData, + componentsSidebarCMSData, // MODULES modulesAboutCMSData, modulesCommonCMSData, diff --git a/src/app/modules/country-detail-module/sub-modules/overview/index.tsx b/src/app/modules/country-detail-module/sub-modules/overview/index.tsx index 5139c6c05..00100e59d 100644 --- a/src/app/modules/country-detail-module/sub-modules/overview/index.tsx +++ b/src/app/modules/country-detail-module/sub-modules/overview/index.tsx @@ -154,7 +154,14 @@ export function LocationDetailOverviewModule(props: Props) { } `} > - Coordinating Mechanism Contacts + + {" "} + {get( + cmsData, + "modulesCountryDetail.mechanismContactsLabel", + "" + )} + @@ -279,7 +286,12 @@ export function LocationDetailOverviewModule(props: Props) { font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif; `} > - Principal Recipients in {locationInfoData.locationName} + {get( + cmsData, + "modulesCountryDetail.PrincipalRecipientsLabel", + "" + )}{" "} + {locationInfoData.locationName}
-

Country overview description

+

+ {" "} + {get(cmsData, "modulesCountryDetail.countryOverviewTitle", "")} +

{parse(countrySummaryCMSData)} {notesDisclaimersCMSData && parse(notesDisclaimersCMSData)}
@@ -399,14 +414,14 @@ export function LocationDetailOverviewModule(props: Props) { font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif; `} > - Investment + {get(cmsData, "modulesCountryDetail.investments", "")}
- Comparison between disbursed, commited and signed amounts + {get(cmsData, "modulesCountryDetail.radialVizDescription", "")}
diff --git a/src/app/modules/documents-module/index.tsx b/src/app/modules/documents-module/index.tsx index f0be10dc7..6279b2944 100644 --- a/src/app/modules/documents-module/index.tsx +++ b/src/app/modules/documents-module/index.tsx @@ -7,6 +7,7 @@ import { useTitle, useDebounce, useUpdateEffect } from "react-use"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; /* project */ import { appColors } from "app/theme"; +import { useCMSData } from "app/hooks/useCMSData"; import { PageHeader } from "app/components/PageHeader"; import { ToolBoxPanel } from "app/components/ToolBoxPanel"; import { PageLoader } from "app/modules/common/page-loader"; @@ -22,6 +23,7 @@ export default function DocumentsModule() { const vizWrapperRef = React.useRef(null); const [search, setSearch] = React.useState(""); const isMobile = useMediaQuery("(max-width: 767px)"); + const cmsData = useCMSData({ returnData: true }); const [openToolboxPanel, setOpenToolboxPanel] = React.useState(!isMobile); const addDataPathSteps = useStoreActions( @@ -125,7 +127,9 @@ export default function DocumentsModule() { `} > - + @@ -224,7 +227,7 @@ export function GrantsList(props: GrantsListProps) {
{item.title}
- Principal Recipient:{" "} + {get(cmsData, "modulesGrants.principalRecipient", "")}:{" "} {item.recipientName} {item.recipientShortName && ` (${item.recipientShortName})`} @@ -280,7 +283,7 @@ export function GrantsList(props: GrantsListProps) { sans-serif; `} > - Disbursed ·{" "} + {get(cmsData, "modulesGrants.disbursed", "")}·{" "} {((item.disbursed * 100) / item.committed).toFixed(2)}%
{formatFinancialValue(item.disbursed)}
@@ -319,7 +322,7 @@ export function GrantsList(props: GrantsListProps) { sans-serif; `} > - Committed + {get(cmsData, "modulesGrants.committed", "")}
{formatFinancialValue(item.committed)}
@@ -338,7 +341,7 @@ export function GrantsList(props: GrantsListProps) { sans-serif; `} > - Signed + {get(cmsData, "modulesGrants.signed", "")}
{formatFinancialValue(item.signed)}
diff --git a/src/app/modules/results-module/components/List/index.tsx b/src/app/modules/results-module/components/List/index.tsx index c7af566a0..7d29f690a 100644 --- a/src/app/modules/results-module/components/List/index.tsx +++ b/src/app/modules/results-module/components/List/index.tsx @@ -1,8 +1,10 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */ import React from "react"; +import get from "lodash/get"; import Grid from "@material-ui/core/Grid"; import { useHistory } from "react-router-dom"; +import { useCMSData } from "app/hooks/useCMSData"; import { useMediaQuery } from "@material-ui/core"; import { ComponentIcon } from "app/assets/icons/Component"; import { TriangleXSIcon } from "app/assets/icons/TriangleXS"; @@ -33,6 +35,7 @@ export function ResultsList(props: ResultsListProps) { function ResultsListItem(props: ResultListItemModel) { const history = useHistory(); + const cmsData = useCMSData({ returnData: true }); const [expand, setExpand] = React.useState(false); const isMobile = useMediaQuery("(max-width: 767px)"); const isLocationDetail = history.location.pathname.indexOf("/location/") > -1; @@ -100,7 +103,7 @@ function ResultsListItem(props: ResultListItemModel) { } > -
See more
+
{get(cmsData, "ModulesResult.seeMore", "")}
)} @@ -116,7 +119,7 @@ function ResultsListItem(props: ResultListItemModel) { }} > -
See more
+
{get(cmsData, "ModulesResult.seeMore", "")}
{props.geoLocations.map( diff --git a/src/app/modules/results-module/datalist.tsx b/src/app/modules/results-module/datalist.tsx index 162309d6e..dd5adc5da 100644 --- a/src/app/modules/results-module/datalist.tsx +++ b/src/app/modules/results-module/datalist.tsx @@ -1,5 +1,7 @@ import React from "react"; +import get from "lodash/get"; /* project */ +import { useCMSData } from "app/hooks/useCMSData"; import { PageLoader } from "app/modules/common/page-loader"; import { Search } from "app/modules/grants-module/components/Search"; import { ResultListItemModel } from "app/modules/results-module/data"; @@ -15,6 +17,7 @@ export const DataList = (props: { openToolboxPanel: boolean; pushValue: number; }) => { + const cmsData = useCMSData({ returnData: true }); return ( <> {props.isLoading && } @@ -52,7 +55,7 @@ export const DataList = (props: { font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif; `} > - Year {props.selectedYear} + {get(cmsData, "ModulesResult.year", "")} {props.selectedYear}
diff --git a/src/app/modules/results-module/index.tsx b/src/app/modules/results-module/index.tsx index 99de08412..80e0ac990 100644 --- a/src/app/modules/results-module/index.tsx +++ b/src/app/modules/results-module/index.tsx @@ -9,6 +9,7 @@ import useMediaQuery from "@material-ui/core/useMediaQuery"; import { useTitle, useDebounce, useUpdateEffect } from "react-use"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; /* project */ +import { useCMSData } from "app/hooks/useCMSData"; import { PageHeader } from "app/components/PageHeader"; import { ToolBoxPanel } from "app/components/ToolBoxPanel"; import { DataList } from "app/modules/results-module/datalist"; @@ -22,6 +23,7 @@ export default function ResultsModule() { useTitle("The Data Explorer - Results"); const location = useLocation(); const vizWrapperRef = React.useRef(null); + const cmsData = useCMSData({ returnData: true }); const [search, setSearch] = React.useState(""); const isMobile = useMediaQuery("(max-width: 767px)"); const [openToolboxPanel, setOpenToolboxPanel] = React.useState(!isMobile); @@ -145,7 +147,7 @@ export default function ResultsModule() { `} > - + store.AllocationsGeomap.fetch); const data = useStoreState( @@ -153,7 +155,10 @@ export function AllocationsGeoMap(props: Props) { `} >
- Allocations | {selectedPeriod} + + {get(cmsData, "componentsChartsInvestments.notAvailable", "")}{" "} + {selectedPeriod} +
-
0 USD
+
+ {get( + cmsData, + "componentsChartsInvestments.defaultFinancialValue", + "" + )} +
{formatFinancialValue(maxValue)}
@@ -209,7 +220,9 @@ export function AllocationsGeoMap(props: Props) { font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif; `} /> -
N/A
+
+ {get(cmsData, "componentsChartsInvestments.notAvailable", "")} +
)} diff --git a/src/app/modules/viz-module/sub-modules/allocations/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/index.tsx index dfaa4bdd1..31a95090c 100644 --- a/src/app/modules/viz-module/sub-modules/allocations/index.tsx +++ b/src/app/modules/viz-module/sub-modules/allocations/index.tsx @@ -12,6 +12,7 @@ import ReactApexCharts from "react-apexcharts"; import { useTitle, useMeasure } from "react-use"; import useMediaQuery from "@material-ui/core/useMediaQuery"; /* project */ +import { useCMSData } from "app/hooks/useCMSData"; import { isTouchDevice } from "app/utils/isTouchDevice"; import { getIso3FromName } from "app/utils/getIso3FromName"; import { PageLoader } from "app/modules/common/page-loader"; @@ -39,7 +40,7 @@ interface AllocationsModuleProps { export function AllocationsModule(props: AllocationsModuleProps) { useTitle(`The Data Explorer -${props.code ? " Location" : ""} Allocations`); - + const cmsData = useCMSData({ returnData: true }); const history = useHistory(); const selectedPeriod = useStoreState( @@ -480,7 +481,11 @@ export function AllocationsModule(props: AllocationsModuleProps) { { const name = node.split("-")[0]; const code = getIso3FromName(name); @@ -539,7 +544,8 @@ export function AllocationsModule(props: AllocationsModuleProps) { } `} > - Allocations | {selectedPeriod} + {get(cmsData, "componentsChartsInvestments.allocations", "")}{" "} + {selectedPeriod}
{formatFinancialValue(total)}
diff --git a/src/app/modules/viz-module/sub-modules/allocations/table/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/table/index.tsx index e6446f260..913da6dce 100644 --- a/src/app/modules/viz-module/sub-modules/allocations/table/index.tsx +++ b/src/app/modules/viz-module/sub-modules/allocations/table/index.tsx @@ -2,6 +2,7 @@ import React from "react"; import get from "lodash/get"; import filter from "lodash/filter"; import useTitle from "react-use/lib/useTitle"; +import { useCMSData } from "app/hooks/useCMSData"; import useDebounce from "react-use/lib/useDebounce"; import { SimpleTable } from "app/components/Table/Simple"; import { PageLoader } from "app/modules/common/page-loader"; @@ -18,7 +19,7 @@ interface AllocationsTableProps { export function AllocationsTableModule(props: AllocationsTableProps) { useTitle(`The Data Explorer -${props.code ? " Location" : ""} Allocations`); - + const cmsData = useCMSData({ returnData: true }); const [search, setSearch] = React.useState(""); const [sortBy, setSortBy] = React.useState("name ASC"); @@ -86,7 +87,7 @@ export function AllocationsTableModule(props: AllocationsTableProps) { return ( (null); @@ -158,7 +160,7 @@ export function BudgetsFlowModule(props: BudgetsFlowModuleProps) { vizComponent = ( { @@ -239,7 +241,7 @@ export function BudgetsFlowModule(props: BudgetsFlowModuleProps) { margin-top: -9px; `} > - Budget + {get(cmsData, "componentsChartsBudgets.budget", "")}

- Budgets + + {get(cmsData, "componentsChartsBudgets.geomapLabelBudgets", "")} +
-
0 USD
+
+ {get(cmsData, "componentsChartsBudgets.geomapDefaultValue", "")} +
{formatFinancialValue(maxValue)}
@@ -246,7 +251,7 @@ export function BudgetsGeoMap(props: Props) { font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif; `} > - N/A + {get(cmsData, "componentsChartsBudgets.notAvailable", "")} diff --git a/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx b/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx index b9d7b4579..91d944985 100644 --- a/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx +++ b/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx @@ -146,7 +146,7 @@ export function BudgetsTimeCycleModule(props: BudgetsTimeCycleModuleProps) { vizComponent = ( { diff --git a/src/app/modules/viz-module/sub-modules/eligibility/index.tsx b/src/app/modules/viz-module/sub-modules/eligibility/index.tsx index c10560d47..05eed75d7 100644 --- a/src/app/modules/viz-module/sub-modules/eligibility/index.tsx +++ b/src/app/modules/viz-module/sub-modules/eligibility/index.tsx @@ -7,6 +7,7 @@ import { useHistory } from "react-router-dom"; import useTitle from "react-use/lib/useTitle"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; /* project */ +import { useCMSData } from "app/hooks/useCMSData"; import { PageLoader } from "app/modules/common/page-loader"; import { DotChart } from "app/components/Charts/Eligibility/DotChart"; import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters"; @@ -14,7 +15,7 @@ import { DotChartModel } from "app/components/Charts/Eligibility/DotChart/data"; export function EligibilityModule() { useTitle("The Data Explorer - Eligibility"); - + const cmsData = useCMSData({ returnData: true }); const history = useHistory(); const dataPathSteps = useStoreState((state) => state.DataPathSteps.steps); @@ -71,7 +72,7 @@ export function EligibilityModule() { return ( ); diff --git a/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/generic.tsx index 1c0d422a0..1e1cc5b66 100644 --- a/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/generic.tsx +++ b/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/generic.tsx @@ -9,6 +9,7 @@ import TablePagination from "@material-ui/core/TablePagination"; import { useDebounce, useTitle, useUpdateEffect } from "react-use"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; /* project */ +import { useCMSData } from "app/hooks/useCMSData"; import { PageLoader } from "app/modules/common/page-loader"; import { SimpleTableRow } from "app/components/Table/Simple/data"; import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters"; @@ -34,7 +35,7 @@ function getTableData(data: DotChartModel[]): SimpleTableRow[] { export function GenericEligibilityWrapper() { useTitle("The Data Explorer - Eligibility"); - + const cmsData = useCMSData({ returnData: true }); const history = useHistory(); const [search, setSearch] = React.useState(""); @@ -170,7 +171,7 @@ export function GenericEligibilityWrapper() { font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif; `} > - Year {selectedYear} + {get(cmsData, "componentsChartsEligibility.year", "")} {selectedYear}
diff --git a/src/app/modules/viz-module/sub-modules/eligibility/table/index.tsx b/src/app/modules/viz-module/sub-modules/eligibility/table/index.tsx index 3f2d7e435..bcbf3cb05 100644 --- a/src/app/modules/viz-module/sub-modules/eligibility/table/index.tsx +++ b/src/app/modules/viz-module/sub-modules/eligibility/table/index.tsx @@ -1,6 +1,8 @@ /* third-party */ import React from "react"; +import get from "lodash/get"; /* project */ +import { useCMSData } from "app/hooks/useCMSData"; import { SimpleTable } from "app/components/Table/Simple"; import { PageLoader } from "app/modules/common/page-loader"; import { @@ -19,6 +21,7 @@ interface EligibilityTableProps { } export function EligibilityTable(props: EligibilityTableProps) { + const cmsData = useCMSData({ returnData: true }); if (props.isLoading) { return ; } @@ -28,7 +31,7 @@ export function EligibilityTable(props: EligibilityTableProps) { search={props.search} sortBy={props.sortBy} rows={props.data} - title="Eligibility" + title={get(cmsData, "componentsTable.eligibiltyTitle", "")} columns={props.columns} onSearchChange={props.setSearch} onSortByChange={props.setSortBy} diff --git a/src/app/modules/viz-module/sub-modules/investments/disbursed/index.tsx b/src/app/modules/viz-module/sub-modules/investments/disbursed/index.tsx index 414fa02ac..55ca7afcd 100644 --- a/src/app/modules/viz-module/sub-modules/investments/disbursed/index.tsx +++ b/src/app/modules/viz-module/sub-modules/investments/disbursed/index.tsx @@ -1,5 +1,6 @@ /* third-party */ import React from "react"; +import get from "lodash/get"; import find from "lodash/find"; import maxBy from "lodash/maxBy"; import sumBy from "lodash/sumBy"; @@ -12,6 +13,7 @@ import { useHistory } from "react-router-dom"; import useMediaQuery from "@material-ui/core/useMediaQuery"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; /* project */ +import { useCMSData } from "app/hooks/useCMSData"; import { PageLoader } from "app/modules/common/page-loader"; import { getNameFromIso3 } from "app/utils/getIso3FromName"; import ReRouteDialogBox from "app/components/Charts/common/dialogBox"; @@ -72,7 +74,7 @@ export function InvestmentsDisbursedModule( const isMobile = useMediaQuery("(max-width: 767px)"); const history = useHistory(); - + const cmsData = useCMSData({ returnData: true }); const [treemapData, setTreemapData] = React.useState< DisbursementsTreemapDataItem[] >(props.data); @@ -289,7 +291,8 @@ export function InvestmentsDisbursedModule( } `} > - Investments - {props.type || "Disbursement"} + {get(cmsData, "componentsChartsInvestments.investments", "")}{" "} + {props.type || "Disbursement"}
{formatFinancialValue(totalValue)} @@ -298,7 +301,11 @@ export function InvestmentsDisbursedModule( )} {isMobile && ( - Total amount: {formatFinancialValue(totalValue)} + + {" "} + {get(cmsData, "componentsChartsInvestments.totalAmount", "")}{" "} + {formatFinancialValue(totalValue)} + )} diff --git a/src/app/modules/viz-module/sub-modules/investments/geomap/index.tsx b/src/app/modules/viz-module/sub-modules/investments/geomap/index.tsx index 84c265d83..b8c5de5e2 100644 --- a/src/app/modules/viz-module/sub-modules/investments/geomap/index.tsx +++ b/src/app/modules/viz-module/sub-modules/investments/geomap/index.tsx @@ -9,6 +9,7 @@ import useTitle from "react-use/lib/useTitle"; import { useHistory } from "react-router-dom"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; /* project */ +import { useCMSData } from "app/hooks/useCMSData"; import { GeoMap } from "app/components/Charts/GeoMap"; import { PageLoader } from "app/modules/common/page-loader"; import { formatFinancialValue } from "app/utils/formatFinancialValue"; @@ -23,7 +24,7 @@ interface Props { export function InvestmentsGeoMap(props: Props) { useTitle("The Data Explorer - Investments/Map"); - + const cmsData = useCMSData({ returnData: true }); const history = useHistory(); // api call & data @@ -227,7 +228,14 @@ export function InvestmentsGeoMap(props: Props) { justify-content: space-between; `} > -
0 USD
+
+ {" "} + {get( + cmsData, + "componentsChartsInvestments.defaultFinancialValue", + "" + )} +
{formatFinancialValue(maxValue)}
@@ -268,7 +276,7 @@ export function InvestmentsGeoMap(props: Props) { font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif; `} > - N/A + {get(cmsData, "componentsChartsInvestments.notAvailable", "")} diff --git a/src/app/modules/viz-module/sub-modules/investments/table/index.tsx b/src/app/modules/viz-module/sub-modules/investments/table/index.tsx index 6e96c6d54..b65ae9edc 100644 --- a/src/app/modules/viz-module/sub-modules/investments/table/index.tsx +++ b/src/app/modules/viz-module/sub-modules/investments/table/index.tsx @@ -1,6 +1,8 @@ /* third-party */ import React from "react"; +import get from "lodash/get"; /* project */ +import { useCMSData } from "app/hooks/useCMSData"; import { SimpleTable } from "app/components/Table/Simple"; import { PageLoader } from "app/modules/common/page-loader"; import { SimpleTableRow } from "app/components/Table/Simple/data"; @@ -15,13 +17,14 @@ interface InvestmentsTableProps { } export function InvestmentsTable(props: InvestmentsTableProps) { + const csmData = useCMSData({ returnData: true }); if (props.isLoading) { return ; } return ( []; @@ -41,7 +41,7 @@ export function InvestmentsTimeCycleModule( props: InvestmentsTimeCycleModuleProps ) { const history = useHistory(); - + const cmsData = useCMSData({ returnData: true }); const [xsTooltipData, setXsTooltipData] = React.useState(null); @@ -152,7 +152,11 @@ export function InvestmentsTimeCycleModule( { if (props.setDrilldownVizSelected) { @@ -178,7 +182,11 @@ export function InvestmentsTimeCycleModule( { const idSplits = node.split("-"); diff --git a/src/app/modules/viz-module/sub-modules/pledgescontributions/geomap/index.tsx b/src/app/modules/viz-module/sub-modules/pledgescontributions/geomap/index.tsx index 25ac7dd19..c84789f0b 100644 --- a/src/app/modules/viz-module/sub-modules/pledgescontributions/geomap/index.tsx +++ b/src/app/modules/viz-module/sub-modules/pledgescontributions/geomap/index.tsx @@ -10,6 +10,7 @@ import { useHistory } from "react-router-dom"; import useTitle from "react-use/lib/useTitle"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; /* project */ +import { useCMSData } from "app/hooks/useCMSData"; import { GeoMap } from "app/components/Charts/GeoMap"; import { PageLoader } from "app/modules/common/page-loader"; import { GeoMapPinMarker } from "app/components/Charts/GeoMap/data"; @@ -18,7 +19,7 @@ import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters"; export function PledgesContributionsGeoMap() { useTitle("The Data Explorer - Pledges & Contributions GeoMap"); - + const cmsData = useCMSData({ returnData: true }); const history = useHistory(); const valueType = useStoreState( @@ -185,7 +186,7 @@ export function PledgesContributionsGeoMap() { justify-content: space-between; `} > -
0 USD
+
{get(cmsData, "componentsChartsGeomap.minRange")}
{formatFinancialValue(maxValue)}
@@ -226,7 +227,7 @@ export function PledgesContributionsGeoMap() { font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif; `} > - N/A + {get(cmsData, "componentsChartsGeomap.notAvailable")} diff --git a/src/app/modules/viz-module/sub-modules/pledgescontributions/table/index.tsx b/src/app/modules/viz-module/sub-modules/pledgescontributions/table/index.tsx index d1b4be068..9301daadb 100644 --- a/src/app/modules/viz-module/sub-modules/pledgescontributions/table/index.tsx +++ b/src/app/modules/viz-module/sub-modules/pledgescontributions/table/index.tsx @@ -9,6 +9,7 @@ import TablePagination from "@material-ui/core/TablePagination"; import { useDebounce, useTitle, useUpdateEffect } from "react-use"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; /* project */ +import { useCMSData } from "app/hooks/useCMSData"; import { SimpleTable } from "app/components/Table/Simple"; import { PageLoader } from "app/modules/common/page-loader"; import { SimpleTableRow } from "app/components/Table/Simple/data"; @@ -16,7 +17,7 @@ import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters"; export function PledgesContributionsTable() { useTitle("The Data Explorer - Pledges & Contributions Table"); - + const cmsData = useCMSData({ returnData: true }); const history = useHistory(); const [page, setPage] = React.useState(0); @@ -125,7 +126,7 @@ export function PledgesContributionsTable() { return ( <> {}} /> diff --git a/src/app/modules/viz-module/sub-modules/pledgescontributions/treemap/index.tsx b/src/app/modules/viz-module/sub-modules/pledgescontributions/treemap/index.tsx index 8d0d04547..0228c01d3 100644 --- a/src/app/modules/viz-module/sub-modules/pledgescontributions/treemap/index.tsx +++ b/src/app/modules/viz-module/sub-modules/pledgescontributions/treemap/index.tsx @@ -12,16 +12,17 @@ import { TreeMapNodeDatum } from "@nivo/treemap"; import { useTitle, useUpdateEffect } from "react-use"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; /* project */ +import { appColors } from "app/theme"; +import { useCMSData } from "app/hooks/useCMSData"; import { PageLoader } from "app/modules/common/page-loader"; import { formatFinancialValue } from "app/utils/formatFinancialValue"; import { BudgetsTreemap } from "app/components/Charts/Budgets/Treemap"; import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters"; import { BudgetsTreemapDataItem } from "app/components/Charts/Budgets/Treemap/data"; -import { appColors } from "app/theme"; export function PledgesContributionsTreemap() { useTitle("The Data Explorer - Pledges & Contributions/Treemap"); - + const cmsData = useCMSData({ returnData: true }); const history = useHistory(); const [vizSelected, setVizSelected] = React.useState( @@ -160,7 +161,7 @@ export function PledgesContributionsTreemap() { } `} > - Donors {valueType}s + {get(cmsData, "componentsChartsPledges.donors", "")} {valueType}s
{formatFinancialValue(totalBudget)} diff --git a/src/app/state/api/action-reducers/cms/componentsDialogBox.ts b/src/app/state/api/action-reducers/cms/componentsDialogBox.ts new file mode 100644 index 000000000..f5dae9379 --- /dev/null +++ b/src/app/state/api/action-reducers/cms/componentsDialogBox.ts @@ -0,0 +1,10 @@ +import { APIModel } from "app/state/api"; +import { CMSApiCallModel } from "app/state/api/interfaces"; + +const componentsDialogBox: CMSApiCallModel = { + ...APIModel( + `${process.env.REACT_APP_CMS_API}/singletons/get/componentsDialogBox?token=${process.env.REACT_APP_CMS_TOKEN}` + ), +}; + +export default componentsDialogBox; diff --git a/src/app/state/api/action-reducers/cms/componentsSidebar.ts b/src/app/state/api/action-reducers/cms/componentsSidebar.ts new file mode 100644 index 000000000..80e7f26c3 --- /dev/null +++ b/src/app/state/api/action-reducers/cms/componentsSidebar.ts @@ -0,0 +1,10 @@ +import { APIModel } from "app/state/api"; +import { CMSApiCallModel } from "app/state/api/interfaces"; + +const componentsSidebar: CMSApiCallModel = { + ...APIModel( + `${process.env.REACT_APP_CMS_API}/singletons/get/componentsSidebar?token=${process.env.REACT_APP_CMS_TOKEN}` + ), +}; + +export default componentsSidebar; diff --git a/src/app/state/api/action-reducers/cms/componentsTable.ts b/src/app/state/api/action-reducers/cms/componentsTable.ts new file mode 100644 index 000000000..923606dd3 --- /dev/null +++ b/src/app/state/api/action-reducers/cms/componentsTable.ts @@ -0,0 +1,10 @@ +import { APIModel } from "app/state/api"; +import { CMSApiCallModel } from "app/state/api/interfaces"; + +const componentsTable: CMSApiCallModel = { + ...APIModel( + `${process.env.REACT_APP_CMS_API}/singletons/get/componentsTable?token=${process.env.REACT_APP_CMS_TOKEN}` + ), +}; + +export default componentsTable; diff --git a/src/app/state/api/interfaces/index.ts b/src/app/state/api/interfaces/index.ts index dcf49b921..fce3ff012 100644 --- a/src/app/state/api/interfaces/index.ts +++ b/src/app/state/api/interfaces/index.ts @@ -259,6 +259,9 @@ export interface StoreModel { // CMS cms: { componentsAppBar: CMSApiCallModel; + componentsTable: CMSApiCallModel; + componentsDialogBox: CMSApiCallModel; + componentsChartsBudgets: CMSApiCallModel; componentsChartsCommon: CMSApiCallModel; componentsChartsEligibility: CMSApiCallModel; @@ -276,6 +279,8 @@ export interface StoreModel { componentsPerformanceFrameworkComponents: CMSApiCallModel; componentsSearch: CMSApiCallModel; componentsSlideInPanel: CMSApiCallModel; + componentsSidebar: CMSApiCallModel; + modulesLanding: CMSApiCallModel; modulesAbout: CMSApiCallModel; modulesCommon: CMSApiCallModel; diff --git a/src/app/state/store/index.ts b/src/app/state/store/index.ts index 1df7443f3..780de4ece 100644 --- a/src/app/state/store/index.ts +++ b/src/app/state/store/index.ts @@ -170,6 +170,9 @@ import { DataPathStepsState, } from "../api/action-reducers/sync/dataPath"; import PledgesContributionsTable from "../api/action-reducers/viz/pledgesContributionsTable"; +import componentsSidebar from "../api/action-reducers/cms/componentsSidebar"; +import componentsTable from "../api/action-reducers/cms/componentsTable"; +import componentsDialogBox from "../api/action-reducers/cms/componentsDialogBox"; const storeContent: StoreModel = { // data viz api @@ -337,6 +340,9 @@ const storeContent: StoreModel = { // CMS API cms: { componentsAppBar: persist(componentsAppBar), + componentsTable: persist(componentsTable), + componentsDialogBox: persist(componentsDialogBox), + componentsChartsBudgets: persist(componentsChartsBudgets), componentsChartsCommon: persist(componentsChartsCommon), componentsChartsEligibility: persist(componentsChartsEligibility), @@ -358,6 +364,7 @@ const storeContent: StoreModel = { ), componentsSearch: persist(componentsSearch), componentsSlideInPanel: persist(componentsSlideInPanel), + componentsSidebar: persist(componentsSidebar), modulesLanding: persist(modulesLanding), modulesAbout: persist(modulesAbout), modulesCommon: persist(modulesCommon),