From b8e3b8626490a7eb3e7aac16b1eae613fdb7c873 Mon Sep 17 00:00:00 2001
From: Felipe Trzaskowski <felipe@opencraft.com>
Date: Mon, 18 Oct 2021 14:02:55 -0300
Subject: [PATCH] fix: posts pagination is loaded by scrolling

Implemented a ScrollThreshold reusable component to detect scrolling
events, which can be used in the place of a Button.

Removed the i18n entry created for the Button, which is no longer
needed.
---
 src/components/ScrollThreshold.jsx  | 41 +++++++++++++++++++++++++++++
 src/discussions/posts/PostsView.jsx | 14 ++++------
 src/discussions/posts/messages.js   | 11 --------
 3 files changed, 46 insertions(+), 20 deletions(-)
 create mode 100644 src/components/ScrollThreshold.jsx
 delete mode 100644 src/discussions/posts/messages.js

diff --git a/src/components/ScrollThreshold.jsx b/src/components/ScrollThreshold.jsx
new file mode 100644
index 00000000..be8272b5
--- /dev/null
+++ b/src/components/ScrollThreshold.jsx
@@ -0,0 +1,41 @@
+import React, {
+  useEffect,
+  useRef,
+} from 'react';
+import PropTypes from 'prop-types';
+
+function ScrollThreshold({ onScroll }) {
+  const elementRef = useRef(null);
+
+  useEffect(() => {
+    if (!elementRef.current) {
+      return undefined;
+    }
+
+    // create the observer
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          onScroll();
+        }
+      },
+    );
+
+    observer.observe(elementRef.current);
+
+    // cleanup callback
+    return () => {
+      observer.disconnect();
+    };
+  }, [elementRef]);
+
+  return (
+    <div ref={elementRef} />
+  );
+}
+
+ScrollThreshold.propTypes = {
+  onScroll: PropTypes.func.isRequired,
+};
+
+export default ScrollThreshold;
diff --git a/src/discussions/posts/PostsView.jsx b/src/discussions/posts/PostsView.jsx
index 54858e84..0948b21c 100644
--- a/src/discussions/posts/PostsView.jsx
+++ b/src/discussions/posts/PostsView.jsx
@@ -4,10 +4,10 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
-import { Button, Spinner } from '@edx/paragon';
+import { Spinner } from '@edx/paragon';
 
+import ScrollThreshold from '../../components/ScrollThreshold';
 import { RequestStatus } from '../../data/constants';
 import {
   selectAllThreads,
@@ -20,10 +20,9 @@ import {
 } from './data/selectors';
 import { fetchThreads } from './data/thunks';
 import PostFilterBar from './post-filter-bar/PostFilterBar';
-import messages from './messages';
 import { PostLink } from './post';
 
-function PostsView({ showOwnPosts, intl }) {
+function PostsView({ showOwnPosts }) {
   const {
     courseId,
     topicId,
@@ -76,9 +75,7 @@ function PostsView({ showOwnPosts, intl }) {
         </div>
       ) : (
         nextPage && (
-          <Button onClick={loadMorePosts} variant="link" block="true" className="card p-4">
-            {intl.formatMessage(messages.loadMorePosts)}
-          </Button>
+          <ScrollThreshold onScroll={loadMorePosts} />
         )
       )}
     </div>
@@ -87,11 +84,10 @@ function PostsView({ showOwnPosts, intl }) {
 
 PostsView.propTypes = {
   showOwnPosts: PropTypes.bool,
-  intl: intlShape.isRequired,
 };
 
 PostsView.defaultProps = {
   showOwnPosts: false,
 };
 
-export default injectIntl(PostsView);
+export default PostsView;
diff --git a/src/discussions/posts/messages.js b/src/discussions/posts/messages.js
deleted file mode 100644
index 15a2a36c..00000000
--- a/src/discussions/posts/messages.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  loadMorePosts: {
-    id: 'discussions.posts.loadMorePosts',
-    defaultMessage: 'Load more posts',
-    description: 'Button to load more forum posts',
-  },
-});
-
-export default messages;