72 lines
1.5 KiB
JavaScript
72 lines
1.5 KiB
JavaScript
// @flow
|
|
import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
|
|
import format from "date-fns/format";
|
|
import * as React from "react";
|
|
import Tooltip from "components/Tooltip";
|
|
|
|
let callbacks = [];
|
|
|
|
// This is a shared timer that fires every minute, used for
|
|
// updating all Time components across the page all at once.
|
|
setInterval(() => {
|
|
callbacks.forEach((cb) => cb());
|
|
}, 1000 * 60);
|
|
|
|
function eachMinute(fn) {
|
|
callbacks.push(fn);
|
|
|
|
return () => {
|
|
callbacks = callbacks.filter((cb) => cb !== fn);
|
|
};
|
|
}
|
|
|
|
type Props = {
|
|
dateTime: string,
|
|
children?: React.Node,
|
|
tooltipDelay?: number,
|
|
addSuffix?: boolean,
|
|
shorten?: boolean,
|
|
};
|
|
|
|
class Time extends React.Component<Props> {
|
|
removeEachMinuteCallback: () => void;
|
|
|
|
componentDidMount() {
|
|
this.removeEachMinuteCallback = eachMinute(() => {
|
|
this.forceUpdate();
|
|
});
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.removeEachMinuteCallback();
|
|
}
|
|
|
|
render() {
|
|
const { shorten, addSuffix } = this.props;
|
|
let content = distanceInWordsToNow(this.props.dateTime, {
|
|
addSuffix,
|
|
});
|
|
|
|
if (shorten) {
|
|
content = content
|
|
.replace("about", "")
|
|
.replace("less than a minute ago", "just now")
|
|
.replace("minute", "min");
|
|
}
|
|
|
|
return (
|
|
<Tooltip
|
|
tooltip={format(this.props.dateTime, "MMMM Do, YYYY h:mm a")}
|
|
delay={this.props.tooltipDelay}
|
|
placement="bottom"
|
|
>
|
|
<time dateTime={this.props.dateTime}>
|
|
{this.props.children || content}
|
|
</time>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Time;
|