From 492ea998a9f3076f8ea8dd62e1720843036df128 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Mon, 11 Dec 2023 16:40:19 -0800
Subject: [PATCH] Render "Data updated" as a human-readable relative date

To us humans, "3 years ago" is more interpretable than "2020-12-11".
Time files!
---
 package-lock.json             | 17 +++++++++++++++++
 package.json                  |  1 +
 src/components/info/byline.js | 12 ++++++++----
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f9d64b650..ba4a71c7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,6 +75,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",
@@ -12362,6 +12363,16 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-moment": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.1.3.tgz",
+      "integrity": "sha512-8EPvlUL8u6EknPp1ISF5MQ3wx2OHJVXIP/iZc4wRh3iV3XozftZERDv9ANZeAtMlhNNQHdFoqcZHFUkBSTONfA==",
+      "peerDependencies": {
+        "moment": "^2.29.0",
+        "prop-types": "^15.7.0",
+        "react": "^16.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-redux": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
@@ -23725,6 +23736,12 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-moment": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.1.3.tgz",
+      "integrity": "sha512-8EPvlUL8u6EknPp1ISF5MQ3wx2OHJVXIP/iZc4wRh3iV3XozftZERDv9ANZeAtMlhNNQHdFoqcZHFUkBSTONfA==",
+      "requires": {}
+    },
     "react-redux": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
diff --git a/package.json b/package.json
index 8ac19c717..ec18ba7fc 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/info/byline.js b/src/components/info/byline.js
index fc9f2f9b4..334e9f478 100644
--- a/src/components/info/byline.js
+++ b/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>
     );
   }