2017-08-10 22:26:06 +00:00
|
|
|
// @flow
|
2017-09-25 21:32:58 +00:00
|
|
|
import * as React from 'react';
|
2017-08-10 22:26:06 +00:00
|
|
|
import autobind from 'autobind-decorator';
|
|
|
|
import moment from 'moment';
|
|
|
|
|
2017-09-25 21:32:58 +00:00
|
|
|
type Props = {
|
2018-12-12 17:36:11 +00:00
|
|
|
timestamp: number,
|
2017-09-25 21:32:58 +00:00
|
|
|
};
|
2017-08-10 22:26:06 +00:00
|
|
|
|
2017-09-25 21:32:58 +00:00
|
|
|
type State = {
|
2018-12-12 17:36:11 +00:00
|
|
|
text: string,
|
2017-09-25 21:32:58 +00:00
|
|
|
};
|
2017-08-10 22:26:06 +00:00
|
|
|
|
2017-09-25 21:32:58 +00:00
|
|
|
@autobind
|
|
|
|
class TimeFromNow extends React.PureComponent<Props, State> {
|
2017-08-10 22:26:06 +00:00
|
|
|
_interval: any;
|
|
|
|
|
2018-06-25 17:42:50 +00:00
|
|
|
constructor(props: any) {
|
2017-08-10 22:26:06 +00:00
|
|
|
super(props);
|
|
|
|
this._interval = null;
|
|
|
|
this.state = {
|
2018-12-12 17:36:11 +00:00
|
|
|
text: '',
|
2017-08-10 22:26:06 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2018-06-25 17:42:50 +00:00
|
|
|
_update() {
|
|
|
|
const { timestamp } = this.props;
|
|
|
|
this.setState({ text: moment(timestamp).fromNow() });
|
2017-08-10 22:26:06 +00:00
|
|
|
}
|
|
|
|
|
2018-06-25 17:42:50 +00:00
|
|
|
componentDidMount() {
|
2017-08-10 22:26:06 +00:00
|
|
|
this._interval = setInterval(this._update, 5000);
|
|
|
|
this._update();
|
|
|
|
}
|
|
|
|
|
2018-06-25 17:42:50 +00:00
|
|
|
componentWillUnmount() {
|
2017-08-10 22:26:06 +00:00
|
|
|
clearInterval(this._interval);
|
|
|
|
}
|
|
|
|
|
2018-06-25 17:42:50 +00:00
|
|
|
render() {
|
2018-10-17 16:42:33 +00:00
|
|
|
return <span title={moment(this.props.timestamp).toString()}>{this.state.text}</span>;
|
2017-08-10 22:26:06 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TimeFromNow;
|