fix(events): clamp page state when totalPages drops below current page (#442)
Bulk-deleting all events on the current page left the list empty until manual reload. After the React Query refetch returned `events: []` with a smaller `totalPages`, the page state was stuck on the old (now out-of-range) page index — the backend correctly serves an empty page for `page > totalPages`, but the UI had no logic to step back. Add a useEffect that watches `data.pagination.totalPages` against the current `page` and resets `page = max(1, totalPages)` whenever the result count shrinks. Fires after every refetch so it covers bulk delete, individual delete, archive, and any filter change that shrinks the result set — same one-line guarantee. Reported by @Rekoo-PS in #442.
This commit is contained in:
@@ -104,6 +104,17 @@ export const EventsListPage: React.FC = () => {
|
|||||||
setPage(1);
|
setPage(1);
|
||||||
}, [statusFilter, debouncedSearchTerm]);
|
}, [statusFilter, debouncedSearchTerm]);
|
||||||
|
|
||||||
|
// Clamp the active page when the result count shrinks (#442 — bulk
|
||||||
|
// delete of an entire page would leave the user on a now-empty
|
||||||
|
// page=N where N > totalPages, with no auto-correction). Triggers
|
||||||
|
// after each successful refetch when totalPages drops below the
|
||||||
|
// current page (bulk delete, individual delete, archive, anything).
|
||||||
|
useEffect(() => {
|
||||||
|
if (data?.pagination && page > data.pagination.totalPages) {
|
||||||
|
setPage(Math.max(1, data.pagination.totalPages));
|
||||||
|
}
|
||||||
|
}, [data?.pagination, page]);
|
||||||
|
|
||||||
// Close dropdown when clicking outside
|
// Close dropdown when clicking outside
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleClickOutside = (event: MouseEvent) => {
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user