enhancement/5999 ohsomeNow stats

frontend/src/components/homepage/messages.js

@@ -170,9 +170,4 @@ 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

@@ -25,16 +25,14 @@ function StatsTimestamp({ messageType }) {
     day: '2-digit',
     hour: 'numeric',
     minute: 'numeric',
-    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   };
 
   return (
     <div>
       <InfoIcon
         className="blue-grey h1 w1 v-mid ml2 pointer"
         data-tip={intl.formatMessage(messages[messageType], {
-          // formattedDate: intl.formatDate(lastUpdated, dateOptions),
-          formattedDate: new Intl.DateTimeFormat('en', dateOptions).format(new Date(lastUpdated)),
+          formattedDate: intl.formatDate(lastUpdated, dateOptions),
           timeZone: intl.timeZone,
         })}
         data-for="ohsome-timestamp"

frontend/src/locales/en.json

@@ -1210,7 +1210,6 @@
   "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

@@ -132,7 +132,6 @@ let ConnectedIntl = (props) => {
       textComponent={React.Fragment}
       messages={getTranslatedMessages(props.locale)}
       timeZone={Intl.DateTimeFormat().resolvedOptions().timeZone}
-      // timeZone="America/Chicago"
     >
       {props.children}
     </IntlProvider>

frontend/src/views/home.js

@@ -1,8 +1,6 @@
-import React, { useState, useEffect } from 'react';
-import ReactTooltip from 'react-tooltip';
+import React from 'react';
 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';
@@ -11,32 +9,9 @@ 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';
+import StatsTimestamp from '../components/statsTimestamp/';
 
 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 />
@@ -50,18 +25,8 @@ export function Home() {
         }
       >
         <StatsSection />
-        <div className="info-ohsome-tooltip">
-          <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 class="cf w-100 relative tr pt3 pr3">
+          <StatsTimestamp messageType="generic" />
         </div>
       </ErrorBoundary>
       <MappingFlow />