From 9f88d4a12c79d924fb634b9a079b62b9f243ac06 Mon Sep 17 00:00:00 2001 From: Hentry Martin Date: Wed, 9 Jul 2025 20:53:59 +0200 Subject: [PATCH 1/5] fix: implemented client side infinite scroll --- .../search-results-page/SearchResultsPage.tsx | 31 +++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx index dd7a315e6..a2a37fcdc 100644 --- a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx +++ b/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,30 @@ const SearchResultsPage: FC = () => { hasNext, total, }: InfiniteTalentMatchesResposne = useInfiniteTalentMatches(skills) + const paginatedMatches = matches.slice(0, currentPage * itemsPerPage) + + useEffect(() => { + const handleScroll = () => { + const scrollY = window.scrollY + const visibleHeight = window.innerHeight + const fullHeight = document.body.scrollHeight + + if (scrollY + visibleHeight >= fullHeight - 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]) + + useEffect(() => { + setCurrentPage(1) + }, [skills, matches]) const toggleSkillsModal = useCallback(() => setShowSkillsModal(s => !s), []) @@ -100,7 +127,7 @@ const SearchResultsPage: FC = () => { )}
- {matches.map(member => ( + {paginatedMatches.map(member => ( Date: Wed, 9 Jul 2025 20:58:02 +0200 Subject: [PATCH 2/5] fix: implemented client side infinite scroll --- .../search-results-page/SearchResultsPage.tsx | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx index a2a37fcdc..6eff3576d 100644 --- a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx +++ b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx @@ -31,27 +31,27 @@ const SearchResultsPage: FC = () => { const paginatedMatches = matches.slice(0, currentPage * itemsPerPage) useEffect(() => { - const handleScroll = () => { - const scrollY = window.scrollY - const visibleHeight = window.innerHeight - const fullHeight = document.body.scrollHeight - - if (scrollY + visibleHeight >= fullHeight - 100) { + const handleScroll: () => void = () => { + const scrollY = window.scrollY + const visibleHeight = window.innerHeight + const fullHeight = document.body.scrollHeight + + if (scrollY + visibleHeight >= fullHeight - 100) { // Scroll near bottom - setCurrentPage(prev => { - const maxPages = Math.ceil(matches.length / itemsPerPage) - return prev < maxPages ? prev + 1 : prev - }) - } + 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]) + }, [matches]) - useEffect(() => { + useEffect(() => { setCurrentPage(1) - }, [skills, matches]) + }, [skills, matches]) const toggleSkillsModal = useCallback(() => setShowSkillsModal(s => !s), []) From e621c9478590e7ad2c9d5449f716611606e6ae61 Mon Sep 17 00:00:00 2001 From: Hentry Martin Date: Thu, 10 Jul 2025 17:28:51 +0200 Subject: [PATCH 3/5] fix: modified the scroll event --- .../src/routes/search-results-page/SearchResultsPage.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx index 6eff3576d..d08938e1e 100644 --- a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx +++ b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx @@ -36,7 +36,8 @@ const SearchResultsPage: FC = () => { const visibleHeight = window.innerHeight const fullHeight = document.body.scrollHeight - if (scrollY + visibleHeight >= fullHeight - 100) { + // negating 763px since footer occupies at least 600px + if (scrollY + visibleHeight >= fullHeight - 763) { // Scroll near bottom setCurrentPage(prev => { const maxPages = Math.ceil(matches.length / itemsPerPage) @@ -49,10 +50,6 @@ const SearchResultsPage: FC = () => { return () => window.removeEventListener('scroll', handleScroll) }, [matches]) - useEffect(() => { - setCurrentPage(1) - }, [skills, matches]) - const toggleSkillsModal = useCallback(() => setShowSkillsModal(s => !s), []) const skillsModalTriggerBtn = ( From d5657831159563803c9eba55c6c72adb7b9769a6 Mon Sep 17 00:00:00 2001 From: Hentry Martin Date: Thu, 10 Jul 2025 17:32:42 +0200 Subject: [PATCH 4/5] fix: modified the scroll event --- .../src/routes/search-results-page/SearchResultsPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx index d08938e1e..45b66a712 100644 --- a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx +++ b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx @@ -35,9 +35,9 @@ const SearchResultsPage: FC = () => { const scrollY = window.scrollY const visibleHeight = window.innerHeight const fullHeight = document.body.scrollHeight - - // negating 763px since footer occupies at least 600px - if (scrollY + visibleHeight >= fullHeight - 763) { + 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) From 75aa8cb1302a3e8c71ff0cc0aab2083f791f4de5 Mon Sep 17 00:00:00 2001 From: Hentry Martin Date: Thu, 10 Jul 2025 17:42:16 +0200 Subject: [PATCH 5/5] fix: lint --- .../src/routes/search-results-page/SearchResultsPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx index 45b66a712..501f15b86 100644 --- a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx +++ b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx @@ -35,9 +35,9 @@ const SearchResultsPage: FC = () => { 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) { + 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)