LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Packages Projects Releases 238 Wiki Activity

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

Browse source
This commit is contained in:
infiinte-persistence 2020-05-11 15:57:03 +08:00 committed by Sean Yesmunt
parent 2582627f25
commit 598c336b66
3 changed files with 33 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/comment/view.jsx
View file

@ -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">

50
ui/component/dateTime/view.jsx
View file

@ -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', ''];
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 <span>{DateTime.getTimeAgoStr(date)}</span>;
}
return (

6
ui/page/channel/view.jsx
View file

@ -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">