Merge pull request #6 from naxa-developers/enhancement/5999-ohsomeNow…

…-stats

feat: add tooltip to ohsomeNow stats section in homepage

frontend/src/components/homepage/messages.js

@@ -170,4 +170,9 @@ export default defineMessages({
     id: 'home.testimonials.ifrc.bio',
     defaultMessage: 'Remote Coordinator for the IFRC Information Management Team for Cyclone Idai',
   },
+  statsTooltip: {
+    id: 'home.statsTooltip',
+    defaultMessage:
+      'These statistics come from ohsomeNow Stats and were last updated at {formattedDate} ({timeZone}). Missing fields will be made available soon!',
+  },
 });

frontend/src/components/statsTimestamp/index.js

@@ -35,6 +35,7 @@ function StatsTimestamp({ messageType }) {
         data-tip={intl.formatMessage(messages[messageType], {
           // formattedDate: intl.formatDate(lastUpdated, dateOptions),
           formattedDate: new Intl.DateTimeFormat('en', dateOptions).format(new Date(lastUpdated)),
+          timeZone: intl.timeZone,
         })}
         data-for="ohsome-timestamp"
       />

frontend/src/components/statsTimestamp/messages.js

@@ -3,7 +3,8 @@ import { defineMessages } from 'react-intl';
 export default defineMessages({
   generic: {
     id: 'stats.ohsome.timestamp.generic',
-    defaultMessage: 'These statistics come from ohsomeNow Stats and were last updated at {formattedDate}. Missing fields will be made available soon!',
+    defaultMessage:
+      'These statistics come from ohsomeNow Stats and were last updated at {formattedDate} ({timeZone}). Missing fields will be made available soon!',
   },
   project: {
     id: 'stats.ohsome.timestamp.project',

frontend/src/locales/en.json

@@ -616,7 +616,7 @@
   "project.stats.totalEdits": "Total map edits",
   "project.stats.changesets": "Changesets",
   "project.stats.edits": "Edits",
-  "stats.ohsome.timestamp.generic": "These statistics come from ohsomeNow Stats and were last updated at {formattedDate}. Missing fields will be made available soon!",
+  "stats.ohsome.timestamp.generic": "These statistics come from ohsomeNow Stats and were last updated at {formattedDate} ({timeZone}). Missing fields will be made available soon!",
   "stats.ohsome.timestamp.project": "These stats were retrieved using the default changeset comment of the project and were last updated at {formattedDate}",
   "project.tasks.unsaved_map_changes.title": "You have some unsaved map changes",
   "project.tasks.unsaved_map_changes.split": "Save or undo it to be able to split the task",
@@ -1210,6 +1210,7 @@
   "home.contact.thanksError": "One moment, there was a problem sending your message.",
   "home.contact.thanksBody": "You'll be hearing from us soon!",
   "home.contact.thanksProceed": "Proceed",
+  "home.statsTooltip": "These statistics come from ohsomeNow Stats and were last updated at {formattedDate} {timeZone}. Missing fields will be made available soon!",
   "pages.about.description": "The purpose of the Tasking Manager is to divide a large mapping project into smaller tasks that can be completed rapidly and collaboratively, with many people contributing to a collective project goal. The tool shows what needs to be mapped, which areas need to be reviewed and validated for quality assurance and which areas are completed.",
   "pages.about.description2": "This approach allows the distribution of tasks to many individual mappers. It also allows monitoring of project progress and helps to improve the consistency of the mapping (e.g. elements to cover, specific tags to use, etc.)",
   "pages.about.OpenStreetMap.description": "All work is done through {osmLink}. OpenStreetMap is the community-driven free and editable map of the world, supported by the not-for-profit OpenStreetMap Foundation.",

frontend/src/utils/internationalization.js

@@ -131,8 +131,8 @@ let ConnectedIntl = (props) => {
       locale={props.locale ? props.locale.substr(0, 2) : config.DEFAULT_LOCALE}
       textComponent={React.Fragment}
       messages={getTranslatedMessages(props.locale)}
-      // timeZone={Intl.DateTimeFormat().resolvedOptions().timeZone}
-      timeZone="America/Chicago"
+      timeZone={Intl.DateTimeFormat().resolvedOptions().timeZone}
+      // timeZone="America/Chicago"
     >
       {props.children}
     </IntlProvider>

frontend/src/views/home.js

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import ReactTooltip from 'react-tooltip';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 import { Jumbotron, SecondaryJumbotron } from '../components/homepage/jumbotron';
 import { StatsSection } from '../components/homepage/stats';
@@ -9,8 +11,32 @@ import { WhoIsMapping } from '../components/homepage/whoIsMapping';
 import { Testimonials } from '../components/homepage/testimonials';
 import { Alert } from '../components/alert';
 import homeMessages from '../components/homepage/messages';
+import { InfoIcon } from '../components/svgIcons';
+import { fetchExternalJSONAPI } from '../network/genericJSONRequest';
+import { OHSOME_STATS_BASE_URL } from '../config/';
+import messages from '../components/homepage/messages.js';
 
 export function Home() {
+  const intl = useIntl();
+  const [lastUpdated, setLastUpdated] = useState(null);
+
+  useEffect(() => {
+    fetchExternalJSONAPI(`${OHSOME_STATS_BASE_URL}/metadata`)
+      .then((res) => {
+        setLastUpdated(res.result.max_timestamp);
+      })
+      .catch((error) => console.error(error));
+  }, []);
+
+  const dateOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+    hour: 'numeric',
+    minute: 'numeric',
+    // timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  };
+
   return (
     <div className="pull-center">
       <Jumbotron />
@@ -24,6 +50,19 @@ export function Home() {
         }
       >
         <StatsSection />
+        <div>
+          <InfoIcon
+            className="blue-grey h1 w1 v-mid ml2 pointer"
+            data-tip={intl.formatMessage(messages['statsTooltip'], {
+              formattedDate: new Intl.DateTimeFormat('en', dateOptions).format(
+                new Date(lastUpdated),
+              ),
+              timeZone: intl.timeZone,
+            })}
+            data-for="ohsome-timestampx"
+          />
+          <ReactTooltip id="ohsome-timestampx" place="top" className="mw6" effect="solid" />
+        </div>
       </ErrorBoundary>
       <MappingFlow />
       <WhoIsMapping />