2016-02-26 16:39:48 +01:00
|
|
|
import * as React from 'react';
|
|
|
|
|
import * as ReactDOM from 'react-dom';
|
|
|
|
|
import {observable} from 'mobx';
|
|
|
|
|
import {observer} from 'mobx-react';
|
2016-03-01 13:41:26 +01:00
|
|
|
import DevTools from 'mobx-react-devtools';
|
2016-02-26 16:39:48 +01:00
|
|
|
|
|
|
|
|
class AppState {
|
|
|
|
|
@observable timer = 0;
|
2016-09-19 00:13:36 +04:00
|
|
|
|
2016-02-26 16:39:48 +01:00
|
|
|
constructor() {
|
|
|
|
|
setInterval(() => {
|
2016-02-27 18:04:26 -08:00
|
|
|
this.timer += 1;
|
2016-02-26 16:39:48 +01:00
|
|
|
}, 1000);
|
|
|
|
|
}
|
2016-09-19 00:13:36 +04:00
|
|
|
|
2016-02-26 16:39:48 +01:00
|
|
|
resetTimer() {
|
|
|
|
|
this.timer = 0;
|
|
|
|
|
}
|
2015-09-15 08:10:14 +02:00
|
|
|
}
|
|
|
|
|
|
2015-10-15 10:29:20 +02:00
|
|
|
@observer
|
2016-02-26 16:39:48 +01:00
|
|
|
class TimerView extends React.Component<{appState: AppState}, {}> {
|
2016-03-01 13:41:26 +01:00
|
|
|
render() {
|
2016-02-26 16:39:48 +01:00
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<button onClick={this.onReset}>
|
|
|
|
|
Seconds passed: {this.props.appState.timer}
|
|
|
|
|
</button>
|
|
|
|
|
<DevTools />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onReset = () => {
|
2016-03-01 13:41:26 +01:00
|
|
|
this.props.appState.resetTimer();
|
2016-02-26 16:39:48 +01:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const appState = new AppState();
|
2016-02-27 18:04:26 -08:00
|
|
|
ReactDOM.render(<TimerView appState={appState} />, document.getElementById('root'));
|