From fedeed15c51e053f041807d8fd6f67433483048f Mon Sep 17 00:00:00 2001
From: Sonny Bakker <sonny871@hotmail.com>
Date: Thu, 26 May 2022 17:28:41 +0200
Subject: [PATCH] Use IntersectionObserver to paginate

---
 .../homepage/components/postlist/PostItem.js  |  2 +-
 .../homepage/components/postlist/PostList.js  | 45 ++++++++++++++-----
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/newsreader/js/pages/homepage/components/postlist/PostItem.js b/src/newsreader/js/pages/homepage/components/postlist/PostItem.js
index 83833f5..a03fcf1 100644
--- a/src/newsreader/js/pages/homepage/components/postlist/PostItem.js
+++ b/src/newsreader/js/pages/homepage/components/postlist/PostItem.js
@@ -35,7 +35,7 @@ class PostItem extends React.Component {
     }
 
     return (
-      <li className="posts__item">
+      <li className="posts__item" data-id={post.id}>
         <h5
           className={titleClassName}
           title={post.title}
diff --git a/src/newsreader/js/pages/homepage/components/postlist/PostList.js b/src/newsreader/js/pages/homepage/components/postlist/PostList.js
index 8490e5f..c8e986d 100644
--- a/src/newsreader/js/pages/homepage/components/postlist/PostList.js
+++ b/src/newsreader/js/pages/homepage/components/postlist/PostList.js
@@ -10,24 +10,49 @@ import LoadingIndicator from '../../../../components/LoadingIndicator.js';
 import PostItem from './PostItem.js';
 
 class PostList extends React.Component {
-  checkScrollHeight = ::this.checkScrollHeight;
+  handleIntersect = ::this.handleIntersect;
+  observer = null;
+  lastPost = null;
+  callCount = 0;
 
-  componentDidMount() {
-    window.addEventListener('scroll', this.checkScrollHeight);
+  constructor(props) {
+    super(props);
+
+    const observerOptions = { root: null, rootMargin: '0px', threshold: 0 };
+    this.observer = new IntersectionObserver(this.handleIntersect, observerOptions);
+  }
+
+  componentDidUpdate() {
+    const lastPost = [...this.props.postsByType]
+      .reverse()
+      .find(post => post.read === false);
+
+    if (lastPost && (!this.lastPost || lastPost.id != this.lastPost.id)) {
+      const observeTarget = document.querySelector(
+        `.posts__item[data-id="${lastPost.id}"]`
+      );
+
+      this.lastPost = lastPost;
+      this.observer.observe(observeTarget);
+    }
   }
 
   componentWillUnmount() {
-    window.removeEventListener('scroll', this.checkScrollHeight);
+    this.observer.disconnect();
   }
 
-  checkScrollHeight(e) {
-    const postList = document.body.querySelector('.posts__list');
+  handleIntersect(entries) {
+    entries.every(entry => {
+      if (entry.isIntersecting) {
+        this.observer.unobserve(entry.target);
 
-    if (this.props.next && !this.props.lastReached) {
-      if (window.scrollY + window.innerHeight >= postList.offsetHeight) {
-        this.paginate();
+        if (this.props.next && !this.props.lastReached) {
+          this.paginate();
+        }
+
+        return false;
       }
-    }
+    });
   }
 
   paginate() {