peter
e257e2aca0
Prettier 3 (pinned), printWidth 100, double quotes — chosen to match the existing hand-formatting and minimise reflow. This commit is ONLY the mechanical format pass (`prettier --write`) plus the config/ignore/scripts, isolated so it never pollutes a feature diff. Verified behaviour-neutral: typecheck, eslint (0 errors), and vitest all green before and after. See .git-blame-ignore-revs — `git blame` skips this sha.
50 lines
2.2 KiB
TypeScript
50 lines
2.2 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { CARD_PAGE_SIZES, parseCardSize } from "./channelLayout";
|
|
import { readAccount, writeAccount } from "./storage";
|
|
|
|
// Client-side pagination for the channel manager's card layout, owned once instead of twice. Both
|
|
// manager tabs page an in-memory list the same way, and keeping two copies meant every fix landed
|
|
// twice (and the day one copy was missed, the tabs would page differently). The caller keeps only
|
|
// what genuinely differs: which rows, which storage key, and when to jump back to page one.
|
|
//
|
|
// The page size persists per account; the page itself is transient. `enabled` is the card layout
|
|
// flag — in table mode DataTable does its own paging, so this does no work and holds still.
|
|
export function useCardPager<T>(rows: T[], sizeKey: string, enabled: boolean) {
|
|
const { t } = useTranslation();
|
|
const [size, setSize] = useState(() => parseCardSize(readAccount(sizeKey, null)));
|
|
const [page, setPage] = useState(0);
|
|
|
|
const totalPages = size <= 0 ? 1 : Math.max(1, Math.ceil(rows.length / size));
|
|
const safePage = Math.min(page, totalPages - 1);
|
|
|
|
// A list that shrank under you (an unsubscribe, a refetch) leaves `page` out of range: the clamp
|
|
// above only HIDES that, so commit it or it springs back the moment the list grows again. Only
|
|
// fires when the page you are on stopped existing, so it never costs you your place otherwise.
|
|
useEffect(() => {
|
|
if (enabled && page > totalPages - 1) setPage(totalPages - 1);
|
|
}, [enabled, page, totalPages]);
|
|
|
|
const paged = !enabled || size <= 0 ? rows : rows.slice(safePage * size, safePage * size + size);
|
|
|
|
return {
|
|
paged,
|
|
/** Spread onto <Pager/>. */
|
|
pagerProps: {
|
|
page: safePage,
|
|
size,
|
|
total: rows.length,
|
|
pageSizeOptions: CARD_PAGE_SIZES,
|
|
onPageChange: setPage,
|
|
onSizeChange: (s: number) => {
|
|
setSize(s);
|
|
writeAccount(sizeKey, s);
|
|
setPage(0);
|
|
},
|
|
sizeLabel: t("channels.cardsPerPage"),
|
|
},
|
|
/** Call when the caller's own filters change — a different list starts at page one. */
|
|
resetPage: useCallback(() => setPage(0), []),
|
|
};
|
|
}
|