diff options
| -rw-r--r-- | src/Thread.js | 59 |
1 files changed, 56 insertions, 3 deletions
diff --git a/src/Thread.js b/src/Thread.js index 022e360..f23c081 100644 --- a/src/Thread.js +++ b/src/Thread.js @@ -19,8 +19,12 @@ class Thread extends Component { this.state = { isLoading: true, thread: [], - error: null + error: null, + autoRefresh: null }; + this.lastTime = 0; + this.refreshCooldown = 15; + this.cooldownCounter = 0; } componentDidMount() { @@ -39,10 +43,59 @@ class Thread extends Component { if (resource["state"] === "error") { this.setState({ error: resource }); } - this.setState({ isLoading: false, thread: resource }); + this.setState({ + isLoading: false, + thread: resource, + autoRefresh: setInterval(() => this.updateReplies(), 1000) + }); + this.lastTime = resource.time; }); - /* .catch(console.error); */ } + + componentWillUnmount() { + clearInterval(this.state.autoRefresh); + } + + async updateReplies() { + this.cooldownCounter++; + if (this.cooldownCounter < this.refreshCooldown) { + return; + } else { + this.cooldownCounter = 0; + } + + let apiURl = `https://bienvenidoainternet.org/cgi/api/thread?dir=${ + this.props.dir + }&${this.props.id > 1000000 ? "ts" : "id"}=${this.props.id}&offset=${ + this.state.thread.posts.length + }&time=${this.lastTime}`; + + fetch(apiURl) + .then(response => { + return response.json(); + }) + .then(resource => { + if (resource.state === "success") { + if (resource.posts.length > 0) { + const newPosts = this.state.thread.posts.concat(resource.posts); + this.setState(({ thread }) => ({ + thread: { + ...thread, + posts: newPosts + } + })); + this.refreshCooldown = 15; + } else { + this.refreshCooldown += 15; + if (this.refreshCooldown > 60) { + this.refreshCooldown = 60; + } + } + } + this.lastTime = resource.time; + }); + } + render() { const { isLoading, error } = this.state; |