diff options
| -rw-r--r-- | src/Board.js | 44 |
1 files changed, 42 insertions, 2 deletions
diff --git a/src/Board.js b/src/Board.js index 958fb29..55df603 100644 --- a/src/Board.js +++ b/src/Board.js @@ -19,8 +19,11 @@ class Board extends Component { this.state = { isLoaded: false, threadList: [], - error: null + error: null, + loadingMore: false }; + this.handleScroll = this.handleScroll.bind(this); + this.threadOffset = 10; } componentDidMount() { @@ -37,6 +40,37 @@ class Board extends Component { this.setState({ isLoaded: true, threadList: resource["threads"] }); }); window.scrollTo(0, 0); + window.addEventListener("scroll", this.handleScroll); + } + + componentWillUnmount() { + window.removeEventListener("scroll", this.handleScroll); + } + + handleScroll() { + const { scrollHeight, scrollTop, clientHeight } = document.documentElement; + if (scrollHeight - scrollTop === clientHeight && !this.state.loadingMore) { + this.setState({ loadingMore: true }); + this.fetchMoreThreads(); + } + } + + fetchMoreThreads() { + fetch( + `https://bienvenidoainternet.org/cgi/api/list?dir=${this.props.dir}&replies=5&limit=10&offset${this.threadOffset}` + ) + .then(response => { + return response.json(); + }) + .then(resource => { + if (resource.state === "success") { + if (resource.threads.length > 0) { + const moreThreads = this.state.threadList.concat(resource.threads); + this.setState({ threadList: moreThreads, loadingMore: false }); + } + } + return; + }); } componentDidUpdate(prevProps) { @@ -52,7 +86,7 @@ class Board extends Component { } render() { - const { isLoaded, error, threadList } = this.state; + const { isLoaded, error, threadList, loadingMore } = this.state; if (error != null) { return ( @@ -121,6 +155,12 @@ class Board extends Component { </Segment> </Segment.Group> ))} + + {loadingMore ? ( + <Loader active inline="centered" style={{ marginTop: "3em" }}> + Cargando más hilos ... + </Loader> + ) : null} </React.Fragment> ); } |