DE-1401 | Implementation - Add latest update

src/app/components/chart-block/components/button-toolbar/index.tsx

@@ -69,9 +69,7 @@ export const ChartBlockButtonToolbar: React.FC<ChartBlockButtonToolbarProps> = (
       <ClickAwayListener onClickAway={handleClose}>
         <Box
           gap="8px"
-          width="100%"
           display="flex"
-          marginTop="40px"
           position="relative"
           flexDirection="row"
           justifyContent="flex-end"

src/app/components/chart-block/data.ts

@@ -7,6 +7,7 @@ export interface ChartBlockProps {
   empty?: boolean;
   subtitle: string;
   loading?: boolean;
+  latestUpdate?: string;
   noSplitText?: boolean;
   showCycleAll?: boolean;
   infoType: InfoPanelType;

src/app/components/chart-block/index.tsx

@@ -160,16 +160,27 @@ export const ChartBlock: React.FC<ChartBlockProps> = (
       >
         {content}
       </Box>
-      {!props.noBottomToolbar && (
-        <Box width="100%">
+      <Box
+        width="100%"
+        display="flex"
+        marginTop="40px"
+        alignItems="center"
+        justifyContent={props.latestUpdate ? "space-between" : "flex-end"}
+      >
+        {props.latestUpdate && (
+          <Typography variant="overline">
+            Latest Update: <b>{props.latestUpdate}</b>
+          </Typography>
+        )}
+        {!props.noBottomToolbar && (
           <ChartBlockButtonToolbar
             blockId={id}
             hashId={props.id}
             infoType={props.infoType}
             chartType={props.dropdownSelected}
           />
-        </Box>
-      )}
+        )}
+      </Box>
     </Box>
   );
 };

src/app/hooks/useGetDatasetLatestUpdate.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import get from "lodash/get";
+import find from "lodash/find";
+import { useStoreState } from "app/state/store/hooks";
+
+export const useGetDatasetLatestUpdate = (props: {
+  dataset:
+    | "allocations"
+    | "budgets"
+    | "disbursements"
+    | "eligibility"
+    | "expenditures"
+    | "funding_requests"
+    | "geographies"
+    | "grants"
+    | "pledges-contributions"
+    | "results";
+}) => {
+  const datasetsLatestUpdate = useStoreState(
+    (state) =>
+      get(state.datasetsLatestUpdate, "data.data", []) as {
+        name: string;
+        date: string;
+      }[]
+  );
+
+  const value = React.useMemo(() => {
+    if (datasetsLatestUpdate) {
+      return find(datasetsLatestUpdate, { name: props.dataset })?.date;
+    }
+    return "";
+  }, [datasetsLatestUpdate, props.dataset]);
+
+  return value;
+};

src/app/hooks/useInitialLoad.tsx

@@ -47,6 +47,9 @@ export const useInitialLoad = () => {
   const fetchStatusFilterOptions = useStoreActions(
     (actions) => actions.StatusFilterOptions.fetch
   );
+  const datasetsLatestUpdate = useStoreActions(
+    (actions) => actions.datasetsLatestUpdate.fetch
+  );
 
   React.useEffect(() => {
     fetchAllocationsCycles({});
@@ -72,6 +75,7 @@ export const useInitialLoad = () => {
     });
     fetchPartnerTypeFilterOptions({});
     fetchStatusFilterOptions({});
+    datasetsLatestUpdate({});
   }, []);
 
   return null;

src/app/pages/datasets/access-to-funding/blocks/block-1/index.tsx

@@ -8,6 +8,7 @@ import { Dropdown } from "app/components/dropdown";
 import { getCMSDataField } from "app/utils/getCMSDataField";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
+import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate";
 
 interface AccessToFundingBlock1Props {
   filterString: string;
@@ -17,6 +18,9 @@ export const AccessToFundingBlock1: React.FC<AccessToFundingBlock1Props> = (
   props: AccessToFundingBlock1Props
 ) => {
   const cmsData = useCMSData({ returnData: true });
+  const latestUpdateDate = useGetDatasetLatestUpdate({
+    dataset: "eligibility",
+  });
 
   const eligibilityYears = useStoreState(
     (state) =>
@@ -155,6 +159,11 @@ export const AccessToFundingBlock1: React.FC<AccessToFundingBlock1Props> = (
             </Box>
           </Grid>
         ))}
+        <Grid item xs={12}>
+          <Typography variant="overline">
+            Latest Update: <b>{latestUpdateDate}</b>
+          </Typography>
+        </Grid>
       </Grid>
     </Box>
   );

src/app/pages/datasets/access-to-funding/blocks/block-2/index.tsx

@@ -13,6 +13,7 @@ import { TableContainer } from "app/components/table-container";
 import { FilterGroupModel } from "app/components/filters/list/data";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { DatasetChartBlock } from "app/pages/datasets/common/chart-block";
+import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate";
 import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters";
 import {
   cellBGColorFormatter,
@@ -29,6 +30,9 @@ export const AccessToFundingBlock2: React.FC<AccessToFundingBlock2Props> = (
 ) => {
   const location = useLocation();
   const cmsData = useCMSData({ returnData: true });
+  const latestUpdateDate = useGetDatasetLatestUpdate({
+    dataset: "eligibility",
+  });
 
   const [chart1AppliedFilters, setChart1AppliedFilters] = React.useState<
     string[]
@@ -223,6 +227,7 @@ export const AccessToFundingBlock2: React.FC<AccessToFundingBlock2Props> = (
         )}
         dropdownItems={[]}
         disableCollapse
+        latestUpdate={latestUpdateDate}
         loading={loadingEligibilityTable}
         filterGroups={props.filterGroups}
         appliedFilters={chart1AppliedFilters}

src/app/pages/datasets/access-to-funding/blocks/block-3/index.tsx

@@ -13,6 +13,7 @@ import { FilterGroupModel } from "app/components/filters/list/data";
 import { TreemapDataItem } from "app/components/charts/treemap/data";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { DatasetChartBlock } from "app/pages/datasets/common/chart-block";
+import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate";
 import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters";
 import { dropdownItemsAllocations } from "app/pages/datasets/access-to-funding/data";
 import {
@@ -30,6 +31,9 @@ export const AccessToFundingBlock3: React.FC<AccessToFundingBlock3Props> = (
 ) => {
   const location = useLocation();
   const cmsData = useCMSData({ returnData: true });
+  const latestUpdateDate = useGetDatasetLatestUpdate({
+    dataset: "allocations",
+  });
 
   const [dropdownSelected, setDropdownSelected] = React.useState(
     dropdownItemsAllocations[0].value
@@ -344,6 +348,7 @@ export const AccessToFundingBlock3: React.FC<AccessToFundingBlock3Props> = (
           "Allocations amounts for countries."
         )}
         dropdownItems={dropdownItemsAllocations}
+        latestUpdate={latestUpdateDate}
         dropdownSelected={dropdownSelected}
         handleDropdownChange={handleSelectionChange}
         loading={loadingAllocations}

src/app/pages/datasets/access-to-funding/blocks/block-4/index.tsx

@@ -10,6 +10,7 @@ import { BarSeriesChart } from "app/components/charts/bar-series";
 import { getRange } from "app/utils/getFinancialValueWithMetricPrefix";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { BarSeriesChartDataItem } from "app/components/charts/bar-series/data";
+import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate";
 
 interface AccessToFundingBlock4Props {
   filterString: string;
@@ -19,6 +20,10 @@ export const AccessToFundingBlock4: React.FC<AccessToFundingBlock4Props> = (
   props: AccessToFundingBlock4Props
 ) => {
   const cmsData = useCMSData({ returnData: true });
+  const latestUpdateDate = useGetDatasetLatestUpdate({
+    dataset: "allocations",
+  });
+
   const keysAllocationsBarSeries = useStoreState(
     (state) =>
       get(state.AccessToFundingAllocationBarSeries, "data.keys", []) as string[]
@@ -123,6 +128,9 @@ export const AccessToFundingBlock4: React.FC<AccessToFundingBlock4Props> = (
           </Box>
         )}
       </Box>
+      <Typography variant="overline">
+        Latest Update: <b>{latestUpdateDate}</b>
+      </Typography>
     </Box>
   );
 };

src/app/pages/datasets/access-to-funding/blocks/block-5/index.tsx

@@ -9,6 +9,7 @@ import { TableContainer } from "app/components/table-container";
 import { FilterGroupModel } from "app/components/filters/list/data";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { DatasetChartBlock } from "app/pages/datasets/common/chart-block";
+import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate";
 import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters";
 import { TABLE_VARIATION_12_COLUMNS as FUNDING_REQUESTS_TABLE_COLUMNS } from "app/components/table/data";
 
@@ -22,6 +23,9 @@ export const AccessToFundingBlock5: React.FC<AccessToFundingBlock5Props> = (
 ) => {
   const location = useLocation();
   const cmsData = useCMSData({ returnData: true });
+  const latestUpdateDate = useGetDatasetLatestUpdate({
+    dataset: "funding_requests",
+  });
 
   const [chart3AppliedFilters, setChart3AppliedFilters] = React.useState<
     string[]
@@ -200,6 +204,7 @@ export const AccessToFundingBlock5: React.FC<AccessToFundingBlock5Props> = (
         )}
         disableCollapse
         dropdownItems={[]}
+        latestUpdate={latestUpdateDate}
         loading={loadingFundingRequestsTable}
         filterGroups={props.filterGroups}
         appliedFilters={chart3AppliedFilters}

src/app/pages/datasets/annual-results/index.tsx

@@ -4,10 +4,10 @@ import uniq from "lodash/uniq";
 import Box from "@mui/material/Box";
 import { useTitle } from "react-use";
 import Divider from "@mui/material/Divider";
-import { Table } from "app/components/table";
 import { useLocation } from "react-router-dom";
 import { RowComponent } from "tabulator-tables";
 import Typography from "@mui/material/Typography";
+import { useCMSData } from "app/hooks/useCMSData";
 import { Dropdown } from "app/components/dropdown";
 import { getCMSDataField } from "app/utils/getCMSDataField";
 import { DatasetPage } from "app/pages/datasets/common/page";
@@ -18,11 +18,11 @@ import { FilterGroupModel } from "app/components/filters/list/data";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { DatasetChartBlock } from "app/pages/datasets/common/chart-block";
 import { HomeResultsStats } from "app/pages/home/components/results-stats";
+import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate";
 import { PolylineTreeDataItem } from "app/components/charts/polyline-tree/data";
 import { ReactComponent as TableIcon } from "app/assets/vectors/Select_Table.svg";
 import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters";
 import { ReactComponent as BarChartIcon } from "app/assets/vectors/Select_BarChart.svg";
-import { useCMSData } from "app/hooks/useCMSData";
 import {
   TABLE_VARIATION_9_COLUMNS,
   TABLE_VARIATION_6_COLUMNS as DOCUMENTS_TABLE_COLUMNS,
@@ -34,9 +34,13 @@ const dropdownItems = [
 ];
 
 export const AnnualResultsPage: React.FC = () => {
-  const cmsData = useCMSData({ returnData: true });
   useTitle("The Data Explorer - Annual Results");
+
   const location = useLocation();
+  const cmsData = useCMSData({ returnData: true });
+  const latestUpdateDate = useGetDatasetLatestUpdate({
+    dataset: "results",
+  });
 
   const [dropdownSelected, setDropdownSelected] = React.useState(
     dropdownItems[0].value
@@ -455,6 +459,7 @@ export const AnnualResultsPage: React.FC = () => {
             subtitle=""
             loading={loadingResults}
             dropdownItems={dropdownItems}
+            latestUpdate={latestUpdateDate}
             dropdownSelected={dropdownSelected}
             handleDropdownChange={handleSelectionChange}
             disableCollapse={dropdownSelected === dropdownItems[1].value}

src/app/pages/datasets/common/chart-block/data.ts

@@ -8,6 +8,7 @@ export interface DatasetChartBlockProps {
   empty?: boolean;
   subtitle: string;
   loading?: boolean;
+  latestUpdate?: string;
   infoType: InfoPanelType;
   appliedFilters: string[];
   children: React.ReactNode;

src/app/pages/datasets/common/chart-block/index.tsx

@@ -223,7 +223,18 @@ export const DatasetChartBlock: React.FC<DatasetChartBlockProps> = (
         >
           {content}
         </Box>
-        <Box width="100%" marginTop="40px">
+        <Box
+          width="100%"
+          display="flex"
+          marginTop="40px"
+          alignItems="center"
+          justifyContent={props.latestUpdate ? "space-between" : "flex-end"}
+        >
+          {props.latestUpdate && (
+            <Typography variant="overline">
+              Latest Update: <b>{props.latestUpdate}</b>
+            </Typography>
+          )}
           <ChartBlockButtonToolbar
             blockId={id}
             hashId={props.id}