Compare commits
No commits in common. "850fb71ddda9f39ffa5a2618a9e0fe5ebb3a89bb" and "f485dc52aa3c854ba0cabda29bc8a3fba76d443d" have entirely different histories.
850fb71ddd
...
f485dc52aa
@ -122,10 +122,7 @@ class CM_API:
|
||||
)
|
||||
params = [limit, offset]
|
||||
|
||||
rows = db.query(query, params)
|
||||
count_rows = db.query("SELECT COUNT(*) AS c FROM acc", [])
|
||||
total = int(count_rows[0]["c"]) if count_rows else 0
|
||||
return jsonify({"rows": rows, "total": total})
|
||||
return jsonify(db.query(query, params))
|
||||
|
||||
except Exception as error:
|
||||
return self._handle_error(error, "Not Found"), 404
|
||||
@ -169,10 +166,7 @@ class CM_API:
|
||||
)
|
||||
params = [limit, offset]
|
||||
|
||||
rows = db.query(query, params)
|
||||
count_rows = db.query("SELECT COUNT(*) AS c FROM user", [])
|
||||
total = int(count_rows[0]["c"]) if count_rows else 0
|
||||
return jsonify({"rows": rows, "total": total})
|
||||
return jsonify(db.query(query, params))
|
||||
|
||||
except Exception as error:
|
||||
return self._handle_error(error, "Not Found"), 404
|
||||
|
||||
@ -9,7 +9,6 @@ export default async function AccountsPage() {
|
||||
<AccountsTable
|
||||
initial={page.rows}
|
||||
initialHasMore={page.hasMore}
|
||||
initialTotal={page.total}
|
||||
prefixPattern={PREFIX_PATTERN}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -13,7 +13,6 @@ export default async function UsersPage() {
|
||||
<UsersTable
|
||||
initial={page.rows}
|
||||
initialHasMore={page.hasMore}
|
||||
initialTotal={page.total}
|
||||
prefixPattern={PREFIX_PATTERN}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -16,7 +16,6 @@ import Toast, { type ToastMessage } from "./toast";
|
||||
type Props = {
|
||||
initial: Acc[];
|
||||
initialHasMore: boolean;
|
||||
initialTotal: number;
|
||||
prefixPattern: string;
|
||||
};
|
||||
type SortDir = "asc" | "desc";
|
||||
@ -62,12 +61,12 @@ function DeleteButton({
|
||||
export default function AccountsTable({
|
||||
initial,
|
||||
initialHasMore,
|
||||
initialTotal,
|
||||
prefixPattern,
|
||||
}: Props) {
|
||||
const [sortDir, setSortDir] = useState<SortDir>("desc");
|
||||
const [editingKey, setEditingKey] = useState<string | null>(null);
|
||||
const [, startTransition] = useTransition();
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
@ -75,22 +74,9 @@ export default function AccountsTable({
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [toast, setToast] = useState<ToastMessage | null>(null);
|
||||
|
||||
// iOS Safari (and sometimes Chrome on Android) keeps the document
|
||||
// scroll position across SPA route changes, so tab-switching from
|
||||
// /users back to / leaves the user halfway down the page. Force
|
||||
// scroll-to-top on mount; route transitions remount the table.
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, left: 0, behavior: "instant" });
|
||||
}, []);
|
||||
|
||||
// Accumulated rows from initial server-side fetch + every loadMore.
|
||||
const [rows, setRows] = useState<Acc[]>(initial);
|
||||
const [hasMore, setHasMore] = useState<boolean>(initialHasMore);
|
||||
// Total row count in the DB; updated on every page fetch so it stays
|
||||
// fresh as external writes (the cm99 monitor) add rows. Mutations
|
||||
// adjust it locally so the header doesn't flash a stale count between
|
||||
// the optimistic update and the next page-fresh count.
|
||||
const [total, setTotal] = useState<number>(initialTotal);
|
||||
const sentinelRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const [optimistic, applyOptimistic] = useOptimistic<Acc[], OptimisticPatch>(
|
||||
@ -119,15 +105,15 @@ export default function AccountsTable({
|
||||
});
|
||||
}
|
||||
|
||||
// Force-evict the cache and re-fetch page 1. Used by the create-success
|
||||
// path so a freshly added row appears in its sorted position. Keeping
|
||||
// the function (instead of inlining at the call site) means a future
|
||||
// 'pull to refresh' gesture has a single hook.
|
||||
async function refresh() {
|
||||
const page = await refreshAccounts({ prefix: prefixPattern, dir: sortDir });
|
||||
setRows(page.rows);
|
||||
setHasMore(page.hasMore);
|
||||
setTotal(page.total);
|
||||
setRefreshing(true);
|
||||
try {
|
||||
const page = await refreshAccounts({ prefix: prefixPattern, dir: sortDir });
|
||||
setRows(page.rows);
|
||||
setHasMore(page.hasMore);
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function changeSort(next: SortDir) {
|
||||
@ -142,7 +128,6 @@ export default function AccountsTable({
|
||||
});
|
||||
setRows(page.rows);
|
||||
setHasMore(page.hasMore);
|
||||
setTotal(page.total);
|
||||
} finally {
|
||||
setLoadingMore(false);
|
||||
}
|
||||
@ -152,7 +137,7 @@ export default function AccountsTable({
|
||||
// 300px rootMargin so the next page starts loading before the user
|
||||
// hits the bottom — feels seamless when scrolling fast.
|
||||
useEffect(() => {
|
||||
if (!hasMore || loadingMore) return;
|
||||
if (!hasMore || loadingMore || refreshing) return;
|
||||
const sentinel = sentinelRef.current;
|
||||
if (!sentinel) return;
|
||||
|
||||
@ -168,7 +153,6 @@ export default function AccountsTable({
|
||||
.then((page) => {
|
||||
setRows((prev) => [...prev, ...page.rows]);
|
||||
setHasMore(page.hasMore);
|
||||
setTotal(page.total);
|
||||
})
|
||||
.catch((err) => console.error("loadMoreAccounts failed:", err))
|
||||
.finally(() => setLoadingMore(false));
|
||||
@ -177,7 +161,7 @@ export default function AccountsTable({
|
||||
);
|
||||
observer.observe(sentinel);
|
||||
return () => observer.disconnect();
|
||||
}, [hasMore, loadingMore, rows.length, prefixPattern, sortDir]);
|
||||
}, [hasMore, loadingMore, refreshing, rows.length, prefixPattern, sortDir]);
|
||||
|
||||
async function confirmDelete() {
|
||||
if (!deleteTarget) return;
|
||||
@ -188,7 +172,6 @@ export default function AccountsTable({
|
||||
if (result.ok) {
|
||||
const deleted = deleteTarget;
|
||||
setRows((prev) => prev.filter((r) => r.username !== deleted));
|
||||
setTotal((t) => Math.max(0, t - 1));
|
||||
setDeleteTarget(null);
|
||||
setToast({ type: "success", message: `Account ${deleted} deleted` });
|
||||
} else {
|
||||
@ -200,8 +183,11 @@ export default function AccountsTable({
|
||||
return (
|
||||
<div>
|
||||
<PageHead
|
||||
total={total}
|
||||
count={0}
|
||||
loaded={0}
|
||||
hasMore={false}
|
||||
onRefresh={refresh}
|
||||
refreshing={refreshing}
|
||||
onAdd={() => setCreateOpen(true)}
|
||||
/>
|
||||
<div className="mt-6 rounded-2xl bg-white px-8 py-16 text-center ring-1 ring-zinc-200/60">
|
||||
@ -227,8 +213,11 @@ export default function AccountsTable({
|
||||
return (
|
||||
<div>
|
||||
<PageHead
|
||||
total={total}
|
||||
count={optimistic.length}
|
||||
loaded={optimistic.length}
|
||||
hasMore={hasMore}
|
||||
onRefresh={refresh}
|
||||
refreshing={refreshing}
|
||||
onAdd={() => setCreateOpen(true)}
|
||||
/>
|
||||
|
||||
@ -446,45 +435,58 @@ function CardRow({ label, children }: { label: string; children: React.ReactNode
|
||||
}
|
||||
|
||||
function PageHead({
|
||||
total,
|
||||
count,
|
||||
loaded,
|
||||
hasMore,
|
||||
onRefresh,
|
||||
refreshing,
|
||||
onAdd,
|
||||
}: {
|
||||
total: number;
|
||||
count: number;
|
||||
loaded: number;
|
||||
hasMore: boolean;
|
||||
onRefresh: () => void;
|
||||
refreshing: boolean;
|
||||
onAdd: () => void;
|
||||
}) {
|
||||
// total = COUNT(*) from the API; loaded = how many rows the user has
|
||||
// scrolled in so far. Show the partial count only while it differs
|
||||
// from the total, so a fully-scrolled list reads cleanly.
|
||||
const showLoaded = loaded > 0 && loaded < total;
|
||||
// count == loaded for now; kept separate so a future "showing X of Y"
|
||||
// header (when we surface a server-side total) drops in cleanly.
|
||||
const showHasMore = hasMore && loaded > 0;
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
|
||||
Table
|
||||
</p>
|
||||
<div className="mt-1 flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
|
||||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
|
||||
Table
|
||||
</p>
|
||||
<h1 className="mt-1 text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
|
||||
Accounts
|
||||
<span className="ml-2 align-middle text-base font-medium text-zinc-400">
|
||||
{total}
|
||||
{count}
|
||||
{showHasMore && <span className="text-zinc-300">+</span>}
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRefresh}
|
||||
disabled={refreshing}
|
||||
className="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-xs font-medium text-zinc-700 shadow-sm ring-1 ring-zinc-200 transition-colors hover:bg-zinc-50 hover:text-zinc-900 disabled:opacity-60"
|
||||
>
|
||||
<span aria-hidden="true" className={refreshing ? "inline-block animate-spin" : ""}>
|
||||
⟳
|
||||
</span>
|
||||
Refresh
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAdd}
|
||||
aria-label="Add account"
|
||||
className="inline-flex items-center gap-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-colors hover:bg-zinc-700"
|
||||
className="inline-flex items-center gap-1.5 rounded-full bg-zinc-900 px-4 py-2 text-xs font-medium text-white shadow-sm transition-colors hover:bg-zinc-700"
|
||||
>
|
||||
<span aria-hidden="true">+</span>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
{showLoaded && (
|
||||
<p className="mt-1 text-[11px] text-zinc-400">
|
||||
Showing {loaded} of {total}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -16,7 +16,6 @@ import Toast, { type ToastMessage } from "./toast";
|
||||
type Props = {
|
||||
initial: User[];
|
||||
initialHasMore: boolean;
|
||||
initialTotal: number;
|
||||
prefixPattern: string;
|
||||
};
|
||||
type SortDir = "asc" | "desc";
|
||||
@ -63,13 +62,13 @@ function DeleteButton({
|
||||
export default function UsersTable({
|
||||
initial,
|
||||
initialHasMore,
|
||||
initialTotal,
|
||||
prefixPattern,
|
||||
}: Props) {
|
||||
const [sortKey, setSortKey] = useState<SortKey>("last_update_time");
|
||||
const [sortDir, setSortDir] = useState<SortDir>("desc");
|
||||
const [editingKey, setEditingKey] = useState<string | null>(null);
|
||||
const [, startTransition] = useTransition();
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
@ -77,16 +76,8 @@ export default function UsersTable({
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [toast, setToast] = useState<ToastMessage | null>(null);
|
||||
|
||||
// Force scroll-to-top on mount — iOS Safari preserves document scroll
|
||||
// across SPA route changes, so tab-switching leaves the new page
|
||||
// halfway down. Route transitions remount the table, so [] deps fire.
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, left: 0, behavior: "instant" });
|
||||
}, []);
|
||||
|
||||
const [rows, setRows] = useState<User[]>(initial);
|
||||
const [hasMore, setHasMore] = useState<boolean>(initialHasMore);
|
||||
const [total, setTotal] = useState<number>(initialTotal);
|
||||
const sentinelRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const [optimistic, applyOptimistic] = useOptimistic<User[], OptimisticPatch>(
|
||||
@ -129,17 +120,19 @@ export default function UsersTable({
|
||||
});
|
||||
}
|
||||
|
||||
// Force-evict the cache and re-fetch page 1. Used by the create-success
|
||||
// path so a freshly added row appears in its sorted position.
|
||||
async function refresh() {
|
||||
const page = await refreshUsers({
|
||||
prefix: prefixPattern,
|
||||
sort: sortKey,
|
||||
dir: sortDir,
|
||||
});
|
||||
setRows(page.rows);
|
||||
setHasMore(page.hasMore);
|
||||
setTotal(page.total);
|
||||
setRefreshing(true);
|
||||
try {
|
||||
const page = await refreshUsers({
|
||||
prefix: prefixPattern,
|
||||
sort: sortKey,
|
||||
dir: sortDir,
|
||||
});
|
||||
setRows(page.rows);
|
||||
setHasMore(page.hasMore);
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function changeSort(nextKey: SortKey) {
|
||||
@ -161,14 +154,13 @@ export default function UsersTable({
|
||||
});
|
||||
setRows(page.rows);
|
||||
setHasMore(page.hasMore);
|
||||
setTotal(page.total);
|
||||
} finally {
|
||||
setLoadingMore(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasMore || loadingMore) return;
|
||||
if (!hasMore || loadingMore || refreshing) return;
|
||||
const sentinel = sentinelRef.current;
|
||||
if (!sentinel) return;
|
||||
const observer = new IntersectionObserver(
|
||||
@ -184,7 +176,6 @@ export default function UsersTable({
|
||||
.then((page) => {
|
||||
setRows((prev) => [...prev, ...page.rows]);
|
||||
setHasMore(page.hasMore);
|
||||
setTotal(page.total);
|
||||
})
|
||||
.catch((err) => console.error("loadMoreUsers failed:", err))
|
||||
.finally(() => setLoadingMore(false));
|
||||
@ -193,7 +184,7 @@ export default function UsersTable({
|
||||
);
|
||||
observer.observe(sentinel);
|
||||
return () => observer.disconnect();
|
||||
}, [hasMore, loadingMore, rows.length, prefixPattern, sortKey, sortDir]);
|
||||
}, [hasMore, loadingMore, refreshing, rows.length, prefixPattern, sortKey, sortDir]);
|
||||
|
||||
async function confirmDelete() {
|
||||
if (!deleteTarget) return;
|
||||
@ -204,7 +195,6 @@ export default function UsersTable({
|
||||
if (result.ok) {
|
||||
const deleted = deleteTarget;
|
||||
setRows((prev) => prev.filter((r) => r.f_username !== deleted));
|
||||
setTotal((t) => Math.max(0, t - 1));
|
||||
setDeleteTarget(null);
|
||||
setToast({ type: "success", message: `User ${deleted} deleted` });
|
||||
} else {
|
||||
@ -232,8 +222,10 @@ export default function UsersTable({
|
||||
return (
|
||||
<div>
|
||||
<PageHead
|
||||
total={total}
|
||||
loaded={0}
|
||||
count={0}
|
||||
hasMore={false}
|
||||
onRefresh={refresh}
|
||||
refreshing={refreshing}
|
||||
onAdd={() => setCreateOpen(true)}
|
||||
/>
|
||||
<div className="mt-6 rounded-2xl bg-white px-8 py-16 text-center ring-1 ring-zinc-200/60">
|
||||
@ -257,8 +249,10 @@ export default function UsersTable({
|
||||
return (
|
||||
<div>
|
||||
<PageHead
|
||||
total={total}
|
||||
loaded={optimistic.length}
|
||||
count={optimistic.length}
|
||||
hasMore={hasMore}
|
||||
onRefresh={refresh}
|
||||
refreshing={refreshing}
|
||||
onAdd={() => setCreateOpen(true)}
|
||||
/>
|
||||
|
||||
@ -465,40 +459,52 @@ function MobileRow({ label, children }: { label: string; children: React.ReactNo
|
||||
}
|
||||
|
||||
function PageHead({
|
||||
total,
|
||||
loaded,
|
||||
count,
|
||||
hasMore,
|
||||
onRefresh,
|
||||
refreshing,
|
||||
onAdd,
|
||||
}: {
|
||||
total: number;
|
||||
loaded: number;
|
||||
count: number;
|
||||
hasMore: boolean;
|
||||
onRefresh: () => void;
|
||||
refreshing: boolean;
|
||||
onAdd: () => void;
|
||||
}) {
|
||||
const showLoaded = loaded > 0 && loaded < total;
|
||||
const showHasMore = hasMore && count > 0;
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Table</p>
|
||||
<div className="mt-1 flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
|
||||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Table</p>
|
||||
<h1 className="mt-1 text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
|
||||
Users
|
||||
<span className="ml-2 align-middle text-base font-medium text-zinc-400">
|
||||
{total}
|
||||
{count}
|
||||
{showHasMore && <span className="text-zinc-300">+</span>}
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRefresh}
|
||||
disabled={refreshing}
|
||||
className="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-xs font-medium text-zinc-700 shadow-sm ring-1 ring-zinc-200 transition-colors hover:bg-zinc-50 hover:text-zinc-900 disabled:opacity-60"
|
||||
>
|
||||
<span aria-hidden="true" className={refreshing ? "inline-block animate-spin" : ""}>
|
||||
⟳
|
||||
</span>
|
||||
Refresh
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAdd}
|
||||
aria-label="Add user"
|
||||
className="inline-flex items-center gap-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-colors hover:bg-zinc-700"
|
||||
className="inline-flex items-center gap-1.5 rounded-full bg-zinc-900 px-4 py-2 text-xs font-medium text-white shadow-sm transition-colors hover:bg-zinc-700"
|
||||
>
|
||||
<span aria-hidden="true">+</span>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
{showLoaded && (
|
||||
<p className="mt-1 text-[11px] text-zinc-400">
|
||||
Showing {loaded} of {total}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@ export const USERS_TAG = "users";
|
||||
// in well under one frame even on phones.
|
||||
export const PAGE_SIZE = 200;
|
||||
|
||||
export type Page<T> = { rows: T[]; hasMore: boolean; total: number };
|
||||
export type Page<T> = { rows: T[]; hasMore: boolean };
|
||||
|
||||
export type AccountsPageOpts = {
|
||||
offset?: number;
|
||||
@ -82,21 +82,13 @@ function buildUsersUrl(opts: UsersPageOpts): string {
|
||||
export async function getAccountsPage(opts: AccountsPageOpts = {}): Promise<Page<Acc>> {
|
||||
const data = (await fetchApi(buildAccountsUrl(opts), {
|
||||
next: { revalidate: CACHE_REVALIDATE_SECONDS, tags: [ACCOUNTS_TAG] },
|
||||
})) as { rows: Acc[]; total: number };
|
||||
return {
|
||||
rows: data.rows,
|
||||
hasMore: data.rows.length === PAGE_SIZE,
|
||||
total: data.total,
|
||||
};
|
||||
})) as Acc[];
|
||||
return { rows: data, hasMore: data.length === PAGE_SIZE };
|
||||
}
|
||||
|
||||
export async function getUsersPage(opts: UsersPageOpts = {}): Promise<Page<User>> {
|
||||
const data = (await fetchApi(buildUsersUrl(opts), {
|
||||
next: { revalidate: CACHE_REVALIDATE_SECONDS, tags: [USERS_TAG] },
|
||||
})) as { rows: User[]; total: number };
|
||||
return {
|
||||
rows: data.rows,
|
||||
hasMore: data.rows.length === PAGE_SIZE,
|
||||
total: data.total,
|
||||
};
|
||||
})) as User[];
|
||||
return { rows: data, hasMore: data.length === PAGE_SIZE };
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user