fix: pagination scroll into view

Fixes #73

src/pages/game.tsx

@@ -14,7 +14,7 @@ import {
   useNDKContext,
   useNSFWList
 } from 'hooks'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import {
   FilterOptions,
@@ -23,9 +23,10 @@ import {
   NSFWFilter,
   SortBy
 } from 'types'
-import { extractModData, isModDataComplete } from 'utils'
+import { extractModData, isModDataComplete, scrollIntoView } from 'utils'
 
 export const GamePage = () => {
+  const scrollTargetRef = useRef<HTMLDivElement>(null)
   const params = useParams()
   const { name: gameName } = params
   const { ndk } = useNDKContext()
@@ -61,6 +62,7 @@ export const GamePage = () => {
 
   const handlePageChange = (page: number) => {
     if (page >= 1 && page <= totalPages) {
+      scrollIntoView(scrollTargetRef.current)
       setCurrentPage(page)
     }
   }
@@ -102,7 +104,10 @@ export const GamePage = () => {
     <>
       <div className='InnerBodyMain'>
         <div className='ContainerMain'>
-          <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
+          <div
+            className='IBMSecMainGroup IBMSecMainGroupAlt'
+            ref={scrollTargetRef}
+          >
             <div className='IBMSecMain'>
               <div className='SearchMainWrapper'>
                 <div className='IBMSMTitleMain'>

src/pages/games.tsx

@@ -8,8 +8,10 @@ import '../styles/search.css'
 import '../styles/styles.css'
 import { createSearchParams, useNavigate } from 'react-router-dom'
 import { appRoutes } from 'routes'
+import { scrollIntoView } from 'utils'
 
 export const GamesPage = () => {
+  const scrollTargetRef = useRef<HTMLDivElement>(null)
   const navigate = useNavigate()
   const { fetchMods } = useNDKContext()
   const searchTermRef = useRef<HTMLInputElement>(null)
@@ -63,6 +65,7 @@ export const GamesPage = () => {
 
   const handlePageChange = (page: number) => {
     if (page >= 1 && page <= totalPages) {
+      scrollIntoView(scrollTargetRef.current)
       setCurrentPage(page)
     }
   }
@@ -88,7 +91,10 @@ export const GamesPage = () => {
   return (
     <div className='InnerBodyMain'>
       <div className='ContainerMain'>
-        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
+        <div
+          className='IBMSecMainGroup IBMSecMainGroupAlt'
+          ref={scrollTargetRef}
+        >
           <div className='IBMSecMain'>
             <div className='SearchMainWrapper'>
               <div className='IBMSMTitleMain'>

src/pages/mods.tsx

@@ -24,8 +24,10 @@ import {
   NSFWFilter,
   SortBy
 } from '../types'
+import { scrollIntoView } from 'utils'
 
 export const ModsPage = () => {
+  const scrollTargetRef = useRef<HTMLDivElement>(null)
   const { fetchMods } = useNDKContext()
   const [isFetching, setIsFetching] = useState(false)
   const [mods, setMods] = useState<ModDetails[]>([])
@@ -66,6 +68,7 @@ export const ModsPage = () => {
       .then((res) => {
         setMods(res)
         setPage((prev) => prev + 1)
+        scrollIntoView(scrollTargetRef.current)
       })
       .finally(() => {
         setIsFetching(false)
@@ -84,6 +87,7 @@ export const ModsPage = () => {
       .then((res) => {
         setMods(res)
         setPage((prev) => prev - 1)
+        scrollIntoView(scrollTargetRef.current)
       })
       .finally(() => {
         setIsFetching(false)
@@ -103,7 +107,10 @@ export const ModsPage = () => {
       {isFetching && <LoadingSpinner desc='Fetching mod details from relays' />}
       <div className='InnerBodyMain'>
         <div className='ContainerMain'>
-          <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
+          <div
+            className='IBMSecMainGroup IBMSecMainGroupAlt'
+            ref={scrollTargetRef}
+          >
             <PageTitleRow />
             <ModFilter
               filterOptions={filterOptions}

src/pages/search.tsx

@@ -43,7 +43,13 @@ import {
   NSFWFilter,
   SortBy
 } from 'types'
-import { extractModData, isModDataComplete, log, LogType } from 'utils'
+import {
+  extractModData,
+  isModDataComplete,
+  log,
+  LogType,
+  scrollIntoView
+} from 'utils'
 
 enum SearchKindEnum {
   Mods = 'Mods',
@@ -52,6 +58,7 @@ enum SearchKindEnum {
 }
 
 export const SearchPage = () => {
+  const scrollTargetRef = useRef<HTMLDivElement>(null)
   const [searchParams] = useSearchParams()
 
   const muteLists = useMuteLists()
@@ -88,7 +95,10 @@ export const SearchPage = () => {
   return (
     <div className='InnerBodyMain'>
       <div className='ContainerMain'>
-        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
+        <div
+          className='IBMSecMainGroup IBMSecMainGroupAlt'
+          ref={scrollTargetRef}
+        >
           <div className='IBMSecMain'>
             <div className='SearchMainWrapper'>
               <div className='IBMSMTitleMain'>
@@ -141,6 +151,7 @@ export const SearchPage = () => {
               filterOptions={filterOptions}
               muteLists={muteLists}
               nsfwList={nsfwList}
+              el={scrollTargetRef.current}
             />
           )}
           {searchKind === SearchKindEnum.Users && (
@@ -263,13 +274,15 @@ type ModsResultProps = {
     user: MuteLists
   }
   nsfwList: string[]
+  el: HTMLElement | null
 }
 
 const ModsResult = ({
   filterOptions,
   searchTerm,
   muteLists,
-  nsfwList
+  nsfwList,
+  el
 }: ModsResultProps) => {
   const { ndk } = useNDKContext()
   const [mods, setMods] = useState<ModDetails[]>([])
@@ -305,7 +318,9 @@ const ModsResult = ({
   }, [ndk])
 
   useEffect(() => {
+    scrollIntoView(el)
     setPage(1)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchTerm])
 
   const filteredMods = useMemo(() => {
@@ -334,10 +349,12 @@ const ModsResult = ({
   )
 
   const handleNext = () => {
+    scrollIntoView(el)
     setPage((prev) => prev + 1)
   }
 
   const handlePrev = () => {
+    scrollIntoView(el)
     setPage((prev) => prev - 1)
   }
 

src/utils/utils.ts

@@ -135,3 +135,14 @@ export const handleModImageError = (
 ) => {
   e.currentTarget.src = import.meta.env.VITE_FALLBACK_MOD_IMAGE
 }
+
+export const scrollIntoView = (el: HTMLElement | null) => {
+  if (el) {
+    setTimeout(() => {
+      el.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      })
+    }, 100)
+  }
+}