parent
988cc03f37
commit
4bf18f1584
@ -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'>
|
||||
|
@ -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'>
|
||||
|
@ -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}
|
||||
|
@ -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)
|
||||
}
|
||||
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user