Add the date of the last published report to the dashboard view

elias-garcia · Apr 3, 2020 · a8757cf · a8757cf
1 parent 48720a0
commit a8757cf
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/frontend/src/components/routes/dashboard/dashboard.container.ts b/frontend/src/components/routes/dashboard/dashboard.container.ts
@@ -16,6 +16,10 @@ const mapStateToProps = (state: State): DashboardStateProps => ({
   isInitialDataLoading:
     state.dashboard.latestReport.step === "loading" ||
     state.dashboard.accumulatedValues.step === "loading",
+  lastReportUpdate:
+    state.dashboard.latestReport.step !== "successful"
+      ? undefined
+      : state.dashboard.latestReport.result.timestamp,
 });
 
 const mapDispatchToProps = (

diff --git a/frontend/src/components/routes/dashboard/dashboard.styles.ts b/frontend/src/components/routes/dashboard/dashboard.styles.ts
@@ -6,6 +6,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     height: "100%",
     width: "100%",
   },
+  lastReportUpdate: {
+    paddingBottom: theme.spacing(6),
+  },
   widget: {
     paddingBottom: theme.spacing(6),
     "&:last-of-type": {

diff --git a/frontend/src/components/routes/dashboard/dashboard.view.tsx b/frontend/src/components/routes/dashboard/dashboard.view.tsx
@@ -4,9 +4,11 @@ import useStyles from "./dashboard.styles";
 import AccumulatedValuesWidgetContainer from "./components/accumulated-values-widget/accumulated-values-widget.container";
 import ChoroplethWidgetContainer from "./components/choropleth-widget/choropleth-widget.container";
 import LoadingSpinner from "../../shared/loading-spinner/loading-spinner.view";
+import { Typography } from "@material-ui/core";
 
 export interface DashboardStateProps {
   readonly isInitialDataLoading: boolean;
+  readonly lastReportUpdate: string | undefined;
 }
 
 export interface DashboardHandlerProps {
@@ -18,6 +20,7 @@ type DashboardProps = DashboardStateProps & DashboardHandlerProps;
 
 const Dashboard: React.FC<DashboardProps> = ({
   isInitialDataLoading,
+  lastReportUpdate,
   onLoadData,
   onAbortDataLoading,
 }: DashboardProps) => {
@@ -29,12 +32,18 @@ const Dashboard: React.FC<DashboardProps> = ({
     return () => onAbortDataLoading();
   }, [onLoadData, onAbortDataLoading]);
 
-  if (isInitialDataLoading) {
+  if (isInitialDataLoading || !lastReportUpdate) {
     return <LoadingSpinner />;
   }
 
   return (
     <div className={classes.pageLoadedWrapper}>
+      <div className={classes.lastReportUpdate}>
+        <Typography variant="h5">
+          Date of the last published report:&nbsp;
+          {new Date(lastReportUpdate).toLocaleDateString()}
+        </Typography>
+      </div>
       <div className={classes.widget}>
         <AccumulatedValuesWidgetContainer />
       </div>