2016-11-23 18:40:35 +00:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import { h, render, Component } from 'preact';
|
2016-12-08 11:27:19 +00:00
|
|
|
import Client from '../lib/client.js';
|
2016-11-23 18:40:35 +00:00
|
|
|
|
|
|
|
class Realtime extends Component {
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
count: 0
|
|
|
|
}
|
|
|
|
this.fetchData = this.fetchData.bind(this);
|
|
|
|
this.fetchData();
|
2016-11-26 14:39:29 +00:00
|
|
|
window.setInterval(this.fetchData, 15000);
|
2016-11-23 18:40:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
fetchData() {
|
2016-12-10 13:16:05 +00:00
|
|
|
Client.request(`visitors/count/realtime`)
|
2016-12-08 11:27:19 +00:00
|
|
|
.then((d) => { this.setState({ count: d })})
|
2016-11-23 18:40:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let visitors = this.state.count == 1 ? 'visitor' : 'visitors';
|
|
|
|
return (
|
2016-11-24 12:55:59 +00:00
|
|
|
<div class="block block-float">
|
2016-11-24 13:37:41 +00:00
|
|
|
<span class="count">{this.state.count}</span> <span>{visitors} on the site right now.</span>
|
2016-11-23 18:40:35 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Realtime
|