fix: Stop MapPage pagination resetting on every data refresh
Remove 'bans' from the useEffect dependency array that resets pagination. Since 'bans' changes with every background data refresh (new array reference), the page was being reset to 1 every 30 seconds, making the table unusable for pagination beyond the first page. Add a separate effect that clamps the current page to totalPages when the data shrinks below the current page offset (edge case when filtered results are fewer than displayed page). Fixes TASK-BUG-03. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -151,7 +151,7 @@ export function MapPage(): React.JSX.Element {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setPage(1);
|
setPage(1);
|
||||||
}, [range, originFilter, selectedCountry, bans, pageSize]);
|
}, [range, originFilter, selectedCountry, pageSize]);
|
||||||
|
|
||||||
/** Bans visible in the companion table (filtered by selected country). */
|
/** Bans visible in the companion table (filtered by selected country). */
|
||||||
const visibleBans = useMemo(() => {
|
const visibleBans = useMemo(() => {
|
||||||
@@ -164,6 +164,14 @@ export function MapPage(): React.JSX.Element {
|
|||||||
: null;
|
: null;
|
||||||
|
|
||||||
const totalPages = Math.max(1, Math.ceil(visibleBans.length / pageSize));
|
const totalPages = Math.max(1, Math.ceil(visibleBans.length / pageSize));
|
||||||
|
|
||||||
|
// Clamp page to totalPages when data shrinks below current page offset
|
||||||
|
useEffect(() => {
|
||||||
|
if (page > totalPages) {
|
||||||
|
setPage(totalPages);
|
||||||
|
}
|
||||||
|
}, [totalPages, page]);
|
||||||
|
|
||||||
const hasPrev = page > 1;
|
const hasPrev = page > 1;
|
||||||
const hasNext = page < totalPages;
|
const hasNext = page < totalPages;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user