Render "Data updated" as a relative date

To us humans, "Data updated 3 years ago" is more interpretable than
"Data updated 2020-12-11". Time flies!

package.json

@@ -105,6 +105,7 @@
     "react-hot-loader": "^4.8.4",
     "react-i18next": "^11.15.6",
     "react-icons": "^3.9.0",
+    "react-moment": "^1.1.3",
     "react-redux": "^7.2.6",
     "react-select": "^5.2.2",
     "react-tooltip": "^4.2.10",

src/components/info/byline.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import Moment from 'react-moment';
 import { withTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import moment from "moment";
@@ -12,7 +13,8 @@ import { headerFont } from "../../globalStyles";
  */
 @connect((state) => {
   return {
-    metadata: state.metadata
+    metadata: state.metadata,
+    language: state.general.language
   };
 })
 class Byline extends React.Component {
@@ -23,7 +25,7 @@ class Byline extends React.Component {
         {renderAvatar(t, this.props.metadata)}
         {renderBuildInfo(t, this.props.metadata)}
         {renderMaintainers(t, this.props.metadata)}
-        {renderDataUpdated(t, this.props.metadata)}
+        {renderDataUpdated(t, this.props.metadata, this.props.language)}
         {renderDataProvenance(t, this.props.metadata)}
       </>
     );
@@ -107,11 +109,13 @@ function renderMaintainers(t, metadata) {
  * Returns a React component detailing the date the data was last updated.
  * Renders a <span> containing "Data updated X", where X derives from `metadata.updated`
  */
-function renderDataUpdated(t, metadata) {
+function renderDataUpdated(t, metadata, language) {
   if (moment(metadata.updated).isValid()) {
     return (
       <span>
-        {`${t("Data updated")} ${metadata.updated}. `}
+        {`${t("Data updated")} `}
+        <Moment locale={language} date={metadata.updated} fromNow />
+        {`. `}
       </span>
     );
   }

webpack.config.js

@@ -132,7 +132,7 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze
     "whatwg-fetch",
     "style-loader",
     "@hot-loader/react-dom",
-    "react(-(redux|select|helmet|i18next))?",
+    "react(-(redux|select|helmet|i18next|moment))?",
     "moment",
     "leaflet",
     "redux",