e86e9a0ae0
* added a star icon for unsaved file name, added saved time ago * changed text * added timer component * clean extra styling in _editor.sass * customize momentjs fromnow function * clear 10s interval in componentWillUnmount * use space-between instead of float
46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import React, { PropTypes } from 'react';
|
|
import moment from 'moment';
|
|
|
|
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() {
|
|
if (Math.abs(moment().diff(this.props.projectSavedTime)) < 10000) {
|
|
return 'Saved: just now';
|
|
} else if (Math.abs(moment().diff(this.props.projectSavedTime)) < 20000) {
|
|
return 'Saved: 15 seconds ago';
|
|
} else if (Math.abs(moment().diff(this.props.projectSavedTime)) < 30000) {
|
|
return 'Saved: 25 seconds ago';
|
|
} else if (Math.abs(moment().diff(this.props.projectSavedTime)) < 46000) {
|
|
return 'Saved: 35 seconds ago';
|
|
}
|
|
return `Saved: ${moment(this.props.projectSavedTime).fromNow()}`;
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<span className="timer__saved-time">
|
|
{this.props.projectSavedTime !== '' ? this.showSavedTime() : null}
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
|
|
Timer.propTypes = {
|
|
projectSavedTime: PropTypes.string.isRequired
|
|
};
|
|
|
|
export default Timer;
|