Infinite Scroll con Intersection Observer

LeonidasEsteban · Sep 30, 2020 · bc8c5bd · bc8c5bd
1 parent 83272e9
commit bc8c5bd
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/block-buster/index.html b/block-buster/index.html
@@ -11,6 +11,7 @@
 
 <body>
   <div id="root"></div>
+  <div id="intersector"></div>
   <!-- <header class="header">
     <div class="wrapper">
       <img src="./images/logo.png" alt="">

diff --git a/block-buster/src/components/movie-list.js b/block-buster/src/components/movie-list.js
@@ -20,18 +20,28 @@ class MovieList extends Component {
     page: 1,
   }
   getPage = async (page) => {
-    const { results } = await api.moviePage(100)
+    const { results } = await api.moviePage(page)
     store.dispatch({
       type: ADD_MOVIES,
       payload: results
     })
   }
+  handleIntersection = (entries) => {
+    if(entries[0].isIntersecting) {
+      this.getPage(this.state.page)
+      this.setState({
+        page: this.state.page + 1
+      })
+    }
+  }
   componentDidMount() {
-    this.getPage(this.state.page)
+    // this.getPage(this.state.page)
     store.subscribe(() => {
-      console.log('me he actualizado')
       this.setState()
     })
+    const observer = new IntersectionObserver(this.handleIntersection)
+    observer.observe(window.intersector)
+    // debugger
   }
   render() {
     const state = store.getState()