Refactor DateTime to allow it's translated result string to be re-used elsewhere, for consistency.

ui/component/comment/view.jsx

@@ -1,7 +1,7 @@
 // @flow
 import React, { useEffect, useState } from 'react';
 import { isEmpty } from 'util/object';
-import relativeDate from 'tiny-relative-date';
+import DateTime from 'component/dateTime';
 import Button from 'component/button';
 import Expandable from 'component/expandable';
 import MarkdownPreview from 'component/common/markdown-preview';
@@ -147,7 +147,7 @@ function Comment(props: Props) {
               />
             )}
             <time className="comment__time" dateTime={timePosted}>
-              {relativeDate(timePosted)}
+              {DateTime.getTimeAgoStr(timePosted)}
             </time>
           </div>
           <div className="comment__menu">

ui/component/dateTime/view.jsx

@@ -14,6 +14,32 @@ class DateTime extends React.PureComponent<Props> {
   static SHOW_TIME = 'time';
   static SHOW_BOTH = 'both';
 
+  static getTimeAgoStr(date: any) {
+    const suffixList = ['years', 'months', 'days', 'hours', 'minutes', 'seconds', ''];
+    var duration = 0;
+
+    for (var i = 0; i < suffixList.length; ++i) {
+      // moment() is very liberal with it's rounding.
+      // Always round down dates for better youtube parity.
+      duration = Math.floor(moment().diff(date, suffixList[i]));
+      if (duration > 0) {
+        break;
+      }
+    }
+
+    if (i === suffixList.length) {
+      // This should never happen since we are handling up to 'seconds' now,
+      // but display the English version just in case it does.
+      return moment(date).from(moment());
+    }
+
+    // Strip off the 's' for the singular suffix, construct the string ID,
+    // then load the localized version.
+    const suffix = duration === 1 ? suffixList[i].substr(0, suffixList[i].length - 1) : suffixList[i];
+    const strId = '%duration% ' + suffix + ' ago';
+    return __(strId, { duration });
+  }
+
   render() {
     const { date, timeAgo } = this.props;
     const show = this.props.show || DateTime.SHOW_BOTH;
@@ -23,29 +49,7 @@ class DateTime extends React.PureComponent<Props> {
         return null;
       }
 
-      const suffixList = ['years', 'months', 'days', 'hours', 'minutes', 'seconds', ''];
+      return <span>{DateTime.getTimeAgoStr(date)}</span>;
-      var duration = 0;
-
-      for (var i = 0; i < suffixList.length; ++i) {
-        // moment() is very liberal with it's rounding.
-        // Always round down dates for better youtube parity.
-        duration = Math.floor(moment().diff(date, suffixList[i]));
-        if (duration > 0) {
-          break;
-        }
-      }
-
-      if (i === suffixList.length) {
-        // This should never happen since we are handling up to 'seconds' now,
-        // but display the English version just in case it does.
-        return moment(date).from(moment());
-      }
-
-      // Strip off the 's' for the singular suffix, construct the string ID,
-      // then load the localized version.
-      const suffix = duration === 1 ? suffixList[i].substr(0, suffixList[i].length - 1) : suffixList[i];
-      const strId = '%duration% ' + suffix + ' ago';
-      return <span>{__(strId, { duration })}</span>;
     }
 
     return (

ui/page/channel/view.jsx

@@ -24,7 +24,7 @@ import Icon from 'component/common/icon';
 import HelpLink from 'component/common/help-link';
 import { DEBOUNCE_WAIT_DURATION_MS } from 'constants/search';
 import ClaimList from 'component/claimList';
-import relativeDate from 'tiny-relative-date';
+import DateTime from 'component/dateTime';
 
 const PAGE_VIEW_QUERY = `view`;
 const ABOUT_PAGE = `about`;
@@ -193,7 +193,9 @@ function ChannelPage(props: Props) {
       {lastYtSyncDate && (
         <div className="media__uri--right">
           <Icon icon={ICONS.VALIDATED} size={12} />
-          {__('Official YouTube Creator - Last updated %time_ago%', { time_ago: relativeDate(lastYtSyncDate) })}
+          {__('Official YouTube Creator - Last updated %time_ago%', {
+            time_ago: DateTime.getTimeAgoStr(lastYtSyncDate),
+          })}
         </div>
       )}
       <header className="channel-cover">