p5.js-web-editor/client/modules/IDE/components/Timer.jsx

62 lines
1.7 KiB
React
Raw Normal View History

2019-03-02 09:35:40 +00:00
import classNames from 'classnames';
import differenceInMilliseconds from 'date-fns/difference_in_milliseconds';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import PropTypes from 'prop-types';
import React from 'react';
class Timer extends React.Component {
constructor(props) {
super(props);
this.showSavedTime = this.showSavedTime.bind(this);
}
componentDidMount() {
this.interval = setInterval(() => this.forceUpdate(), 10000);
}
componentWillUnmount() {
if (this.interval) {
clearInterval(this.interval);
}
}
showSavedTime() {
2019-03-02 09:35:40 +00:00
const now = new Date();
if (Math.abs(differenceInMilliseconds(now, this.props.projectSavedTime) < 10000)) {
return 'Saved: just now';
2019-03-02 09:35:40 +00:00
} else if (differenceInMilliseconds(now, this.props.projectSavedTime) < 20000) {
return 'Saved: 15 seconds ago';
2019-03-02 09:35:40 +00:00
} else if (differenceInMilliseconds(now, this.props.projectSavedTime) < 30000) {
return 'Saved: 25 seconds ago';
2019-03-02 09:35:40 +00:00
} else if (differenceInMilliseconds(now, this.props.projectSavedTime) < 46000) {
return 'Saved: 35 seconds ago';
}
2019-03-02 09:35:40 +00:00
return `Saved: ${distanceInWordsToNow(this.props.projectSavedTime, {
includeSeconds: true
})} ago`;
}
render() {
const timerClass = classNames({
'timer__saved-time': true,
'timer__saved-time--notOwner': !this.props.isUserOwner
});
return (
<span className={timerClass}>
{this.props.projectSavedTime !== '' ? this.showSavedTime() : null}
</span>
);
}
}
Timer.propTypes = {
projectSavedTime: PropTypes.string.isRequired,
isUserOwner: PropTypes.bool
};
Timer.defaultProps = {
isUserOwner: false
};
export default Timer;