MigrateButton
uses useState
Migrate a table's older rows (migrateTable, as tcm data migrate), then show it again.
import { refresh } from "#codebase/tcmts/react"; import { toasts } from "#codebase/tcmts/share"; import { migrateTable } from "#codebase/tcmts/studio"; import { useState } from "react"; import { Button } from "react-aria-components"; export function MigrateButton({ table }: { table: string }) { const [busy, setBusy] = useState(false); return ( <Button className="btn small" isPending={busy} onPress={async () => { setBusy(true); try { toasts.add({ title: await migrateTable(table), tone: "ok" }, { timeout: 5000 }); refresh(); } catch (e) { toasts.add( { title: `Couldn't migrate ${table}`, description: (e as Error).message, tone: "bad" }, { timeout: 10000 }, ); } setBusy(false); }} > {busy ? "Migrating…" : "Migrate them"} </Button> ); }