add infinite scroll to people list

jam-ui/src/components/page/JKPeople.js

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef, Fragment } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Card, CardBody, Col, Row, Button, Pagination, PaginationItem, PaginationLink, Form } from 'reactstrap';
+import { Alert, Card, CardBody, Col, Row, Button, Form } from 'reactstrap';
 import Loader from '../common/Loader';
 import FalconCardHeader from '../common/FalconCardHeader';
 import { isIterableArray } from '../../helpers/utils';
@@ -10,56 +10,44 @@ import { fetchPeople } from '../../store/features/peopleSlice';
 
 import JKPeopleSearch from './JKPeopleSearch';
 import JKPeopleList from './JKPeopleList';
-// import { getPeople } from '../../helpers/rest';
 import JKPeopleSwiper from './JKPeopleSwiper';
 
 const JKPeople = ({ className }) => {
- 
-  //const [people, setPeople] = useState([]);
-  //const [loading, setLoading] = useState(true);
   const [showSearch, setShowSearch] = useState(false);
   const [page, setPage] = useState(1);
-  //const [totalPages, setTotalPages] = useState(0);
-
   const peopleListRef = useRef();
+  const dispatch = useDispatch();
 
-  const dispatch = useDispatch()
+  const people = useSelector(state => state.people.people);
+  const totalPages = useSelector(state => state.people.totalPages);
+  const loadingStatus = useSelector(state => state.people.status);
 
-  const people = useSelector(state => state.people.people)
-  const totalPages = useSelector(state => state.people.totalPages)
-  const loadingStatus = useSelector(state => state.people.status)
+  const loadPeople = React.useCallback(
+    () => {
+      if(totalPages !== 0 && page > totalPages){
+        setPage(totalPages + 1);
+        return;
+      } 
+      try {
+        dispatch(fetchPeople({ page }));
+      } catch (error) {
+        console.log('Error fetching people', error);
+      }
+    },
+    [page]
+  );
 
-  const loadPeople = React.useCallback(page => {
-    try {
-      dispatch(fetchPeople({page}))
-    } catch (error) {
-      console.log('Error fetching people', error);
-    }
-    
+  useEffect(() => {
+    loadPeople();
   }, [page]);
 
   useEffect(() => {
-    loadPeople(page);
-  }, [page]);
-
-  useEffect(() => {
-    if(loadingStatus === 'succeeded' && peopleListRef.current && page !== 1){
-      // peopleListRef.current.scrollIntoView(
-      // {
-      //   behavior: 'smooth',
-      //   block: 'end',
-      //   inline: 'nearest'
-      // })
-      
+    if (loadingStatus === 'succeeded' && peopleListRef.current && page !== 1) {
     }
-    
-  }, [loadingStatus])
+  }, [loadingStatus]);
 
-  const goNextPage = (event) => {
-    event.preventDefault()
-    if (page < totalPages) {
-      setPage(val => ++val);
-    }
+  const goNextPage = () => {
+    setPage(val => ++val);
   };
 
   const goPrevPage = () => {
@@ -68,10 +56,26 @@ const JKPeople = ({ className }) => {
     }
   };
 
+  const handleScroll = () => {
+    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+      goNextPage();
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   return (
     <Card>
       <JKPeopleSearch show={showSearch} setShow={setShowSearch} />
-      <FalconCardHeader title="Find New Friends" titleClass="font-weight-bold">
+      <FalconCardHeader
+        title={`Find New Friends`}
+        titleClass="font-weight-bold"
+      >
         <Form inline className="mt-md-0 mt-3">
           <Button color="primary" className="me-2 mr-2 fs--1" onClick={() => setShowSearch(!showSearch)}>
             Update Search
@@ -83,17 +87,20 @@ const JKPeople = ({ className }) => {
       </FalconCardHeader>
 
       <CardBody className="pt-0">
-        { loadingStatus === 'loading' && people.length === 0 ? (
+        {loadingStatus === 'loading' && people.length === 0 ? (
           <Loader />
         ) : isIterableArray(people) ? (
           //Start Find Friends table hidden on small screens
           <>
             <Row className="mb-3 justify-content-between d-none d-md-block">
               <div className="table-responsive-xl px-2" ref={peopleListRef}>
-                <JKPeopleList people={people} goNextPage={goNextPage} page={page} totalPages={totalPages} />
+                <JKPeopleList people={people} />
+                {
+                  loadingStatus === 'loading' && people.length !== 0 &&
+                  <span>loading...</span>
+                }
               </div>
             </Row>
-
             <Row className="swiper-container d-block d-md-none">
               <JKPeopleSwiper people={people} goNextPage={goNextPage} />
             </Row>

jam-ui/src/components/page/JKPeopleList.js

@@ -3,7 +3,7 @@ import { Table, Row, Col, Button } from 'reactstrap';
 import JKPerson from './JKPerson';
 import PropTypes from 'prop-types';
 
-const JKPeopleList = ({ people, goNextPage, page, totalPages }) => {
+const JKPeopleList = ({ people }) => {
   return (
     <>
       <Table striped bordered className="fs--1" data-testid="peopleListTable">
@@ -27,7 +27,7 @@ const JKPeopleList = ({ people, goNextPage, page, totalPages }) => {
         </tbody>
       </Table>
 
-      <Row>
+      {/* <Row>
         <Col>
           {page < totalPages && (
             <a className="ml-2 fw-semi-bold" href="#!" onClick={goNextPage}>
@@ -35,7 +35,7 @@ const JKPeopleList = ({ people, goNextPage, page, totalPages }) => {
             </a>
           )}
         </Col>
-      </Row>
+      </Row> */}
     </>
   );
 };

jam-ui/src/store/features/peopleSlice.js

@@ -52,8 +52,8 @@ export const peopleSlice = createSlice({
       const records = new Set([...state.people, ...action.payload.musicians]);
       const unique = [];
       records.map(x => unique.filter(a => a.id === x.id).length > 0 ? null : unique.push(x))
-      state.totalPages = action.payload.page_count
       state.people = unique
+      state.totalPages = action.payload.page_count
       state.status = 'succeeded'
     })
     .addCase(fetchPeople.rejected, (state, action) => {