fix: pagination scroll into view

Fixes #73
This commit is contained in:
enes 2024-10-21 15:21:09 +02:00
parent 988cc03f37
commit 4bf18f1584
5 changed files with 54 additions and 8 deletions

View File

@ -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'>

View File

@ -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'>

View File

@ -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}

View File

@ -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)
}

View File

@ -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)
}
}