Merge pull request #1131 from topcoder-platform/pm-1448_in-scroll

fix(PM-1448): implemented client side infinite scroll

Author: hentrymartin

src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import classNames from 'classnames'
 
 import { Button, ContentLayout, LinkButton, LoadingCircles } from '~/libs/ui'
@@ -17,6 +17,9 @@ import styles from './SearchResultsPage.module.scss'
 const SearchResultsPage: FC = () => {
     const [showSkillsModal, setShowSkillsModal] = useState(false)
 
+    const [currentPage, setCurrentPage] = useState(1)
+    const itemsPerPage = 10
+
     const [skills, setSkills] = useUrlQuerySearchParms('q')
     const {
         loading,
@@ -25,6 +28,27 @@ const SearchResultsPage: FC = () => {
         hasNext,
         total,
     }: InfiniteTalentMatchesResposne = useInfiniteTalentMatches(skills)
+    const paginatedMatches = matches.slice(0, currentPage * itemsPerPage)
+
+    useEffect(() => {
+        const handleScroll: () => void = () => {
+            const scrollY = window.scrollY
+            const visibleHeight = window.innerHeight
+            const fullHeight = document.body.scrollHeight
+            const footerElem = document.getElementById('footer-nav-el')
+            const footerHeight = (footerElem && footerElem.offsetHeight) || 650
+            if (scrollY + visibleHeight >= fullHeight - (footerHeight + 100)) {
+            // Scroll near bottom
+                setCurrentPage(prev => {
+                    const maxPages = Math.ceil(matches.length / itemsPerPage)
+                    return prev < maxPages ? prev + 1 : prev
+                })
+            }
+        }
+
+        window.addEventListener('scroll', handleScroll)
+        return () => window.removeEventListener('scroll', handleScroll)
+    }, [matches])
 
     const toggleSkillsModal = useCallback(() => setShowSkillsModal(s => !s), [])
 
@@ -100,7 +124,7 @@ const SearchResultsPage: FC = () => {
                     )}
                 </div>
                 <div className={styles.resultsWrap}>
-                    {matches.map(member => (
+                    {paginatedMatches.map(member => (
                         <TalentCard
                             queriedSkills={skills}
                             member={member}