fixes: Seneca-CDOT#1229 Implemented an infinite scrolling without Loa…

…dMoreButton

src/frontend/src/components/Posts/LoadAutoScroll.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Container, Button, Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  content: {
+    '& > *': {
+      padding: theme.spacing(2),
+      bottom: theme.spacing(4),
+    },
+  },
+}));
+
+function LoadMoreButton({ onScroll }) {
+  const classes = useStyles();
+  const $buttonRef = React.useRef(null);
+
+  // This will make the automatic infinite scrolling feature
+  // Once the "button" is on the viewport(shown on the window),
+  // The new posts are updated(call onClick() -- setSize(size + 1) in Posts.jsx --)
+  React.useEffect(() => {
+    let options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 1.0,
+    };
+
+    let observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          onScroll();
+        }
+      });
+    }, options);
+    observer.observe($buttonRef.current);
+
+    return () => {
+      observer.unobserve($buttonRef.current);
+    };
+  }, []);
+
+  return (
+    <Container>
+      <Grid item xs={12} className={classes.content}>
+        <Button ref={$buttonRef}>Load More Posts</Button>
+      </Grid>
+    </Container>
+  );
+}
+
+LoadMoreButton.propTypes = {
+  onClick: PropTypes.func,
+};
+
+export default LoadMoreButton;

src/frontend/src/components/Posts/Timeline.jsx

@@ -5,7 +5,8 @@ import { Container, Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import Post from '../Post/Post.jsx';
 import Spinner from '../Spinner/Spinner.jsx';
-import LoadMoreButton from './LoadMoreButton.jsx';
+
+import LoadAutoScroll from './LoadAutoScroll';
 import useSiteMetaData from '../../hooks/use-site-metadata';
 
 const useStyles = makeStyles((theme) => ({
@@ -40,7 +41,7 @@ const Timeline = ({ pages, nextPage }) => {
   // key each time, based on page (i.e., size), so we remove the previous one
   if (nextPage) {
     postsTimeline.push(
-      <LoadMoreButton onClick={() => nextPage()} key={`load-more-button-${pages.length}`} />
+      <LoadAutoScroll onScroll={() => nextPage()} key={`load-more-button-${pages.length}`} />
     );
   }