From ba52ef5f14e08b1b2c5c5d83b672617b9666d84e 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 relative date

To us humans, "Data updated 3 years ago" is more interpretable than
"Data updated 2020-12-11". Time flies!
---
 src/components/info/byline.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/info/byline.js b/src/components/info/byline.js
index 0dc9d17a6..1da00d57d 100644
--- a/src/components/info/byline.js
+++ b/src/components/info/byline.js
@@ -12,7 +12,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 +24,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 +108,12 @@ 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) {
-  if (DateTime.fromISO(metadata.updated).isValid) {
+function renderDataUpdated(t, metadata, language) {
+  const date = DateTime.fromISO(metadata.updated);
+  if (date.isValid) {
     return (
       <span>
-        {`${t("Data updated")} ${metadata.updated}. `}
+        {`${t("Data updated")} ${date.toRelativeCalendar({locale: language})}. `}
       </span>
     );
   }