diff --git a/src/pages/game.tsx b/src/pages/game.tsx index 2e53be3..7b94d74 100644 --- a/src/pages/game.tsx +++ b/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(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 = () => { <>
-
+
diff --git a/src/pages/games.tsx b/src/pages/games.tsx index e8b8af5..08d576e 100644 --- a/src/pages/games.tsx +++ b/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(null) const navigate = useNavigate() const { fetchMods } = useNDKContext() const searchTermRef = useRef(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 (
-
+
diff --git a/src/pages/mods.tsx b/src/pages/mods.tsx index 444eb08..bc217aa 100644 --- a/src/pages/mods.tsx +++ b/src/pages/mods.tsx @@ -24,8 +24,10 @@ import { NSFWFilter, SortBy } from '../types' +import { scrollIntoView } from 'utils' export const ModsPage = () => { + const scrollTargetRef = useRef(null) const { fetchMods } = useNDKContext() const [isFetching, setIsFetching] = useState(false) const [mods, setMods] = useState([]) @@ -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 && }
-
+
{ + const scrollTargetRef = useRef(null) const [searchParams] = useSearchParams() const muteLists = useMuteLists() @@ -88,7 +95,10 @@ export const SearchPage = () => { return (
-
+
@@ -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([]) @@ -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) } diff --git a/src/utils/utils.ts b/src/utils/utils.ts index b321c91..6c904e0 100644 --- a/src/utils/utils.ts +++ b/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) + } +}