refactor(ts): convert usePaymentActions to TypeScript (TS5)
The shared quick-pay / toggle-paid mutation hooks are now typed: PayableRow for the row refs, typed mutation payloads, and Dollars for the money amounts (so the branded type flows through — a caller must supply branded dollars). Strict catch clauses narrowed via an errMessage(unknown) helper. typecheck + lint (react-hooks now enforced on this .ts) + build + 48 tests green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
parent
62a99fcaa4
commit
7bb68db442
|
|
@ -2,8 +2,20 @@ import { useMutation } from '@tanstack/react-query';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { api } from '@/api.js';
|
import { api } from '@/api.js';
|
||||||
import { fmt } from '@/lib/utils';
|
import { fmt } from '@/lib/utils';
|
||||||
|
import type { Dollars } from '@/lib/money';
|
||||||
import { useInvalidateTrackerData } from '@/hooks/useQueries';
|
import { useInvalidateTrackerData } from '@/hooks/useQueries';
|
||||||
|
|
||||||
|
/** The bits of a tracker row these payment actions need. */
|
||||||
|
interface PayableRow {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Narrow an unknown error (strict catch clauses) to a message string. */
|
||||||
|
function errMessage(err: unknown, fallback: string): string {
|
||||||
|
return err instanceof Error && err.message ? err.message : fallback;
|
||||||
|
}
|
||||||
|
|
||||||
// Quick-pay a tracker row (record a payment for `val` on `paidDate`) with a
|
// Quick-pay a tracker row (record a payment for `val` on `paidDate`) with a
|
||||||
// reversible Undo toast. A React Query mutation: `isPending` comes for free and
|
// reversible Undo toast. A React Query mutation: `isPending` comes for free and
|
||||||
// the tracker/badge caches are invalidated on settle. Shared by the desktop and
|
// the tracker/badge caches are invalidated on settle. Shared by the desktop and
|
||||||
|
|
@ -11,11 +23,11 @@ import { useInvalidateTrackerData } from '@/hooks/useQueries';
|
||||||
export function useQuickPay() {
|
export function useQuickPay() {
|
||||||
const invalidate = useInvalidateTrackerData();
|
const invalidate = useInvalidateTrackerData();
|
||||||
const mutation = useMutation({
|
const mutation = useMutation({
|
||||||
mutationFn: (payload) => api.quickPay(payload),
|
mutationFn: (payload: { bill_id: number; amount: number; paid_date: string }) => api.quickPay(payload),
|
||||||
onSettled: () => invalidate(),
|
onSettled: () => invalidate(),
|
||||||
});
|
});
|
||||||
|
|
||||||
const run = (row, val, paidDate) => mutation.mutate(
|
const run = (row: PayableRow, val: Dollars, paidDate: string) => mutation.mutate(
|
||||||
{ bill_id: row.id, amount: val, paid_date: paidDate },
|
{ bill_id: row.id, amount: val, paid_date: paidDate },
|
||||||
{
|
{
|
||||||
onSuccess: (payment) => {
|
onSuccess: (payment) => {
|
||||||
|
|
@ -28,32 +40,39 @@ export function useQuickPay() {
|
||||||
toast.success('Payment removed');
|
toast.success('Payment removed');
|
||||||
invalidate();
|
invalidate();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(err.message || 'Failed to undo payment.');
|
toast.error(errMessage(err, 'Failed to undo payment.'));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onError: (err) => toast.error(err.message || 'Failed to add payment.'),
|
onError: (err) => toast.error(errMessage(err, 'Failed to add payment.')),
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
return { run, isPending: mutation.isPending };
|
return { run, isPending: mutation.isPending };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface TogglePaidOptions {
|
||||||
|
wasPaid: boolean;
|
||||||
|
threshold: Dollars;
|
||||||
|
setOptimisticPaid: (value: boolean | undefined) => void;
|
||||||
|
}
|
||||||
|
|
||||||
// Toggle a tracker row paid/unpaid. The caller owns the instant optimistic flip
|
// Toggle a tracker row paid/unpaid. The caller owns the instant optimistic flip
|
||||||
// (its local `setOptimisticPaid`) so the row updates immediately; this hook rolls
|
// (its local `setOptimisticPaid`) so the row updates immediately; this hook rolls
|
||||||
// it back on error, invalidates the tracker/badge caches on settle, and shows the
|
// it back on error, invalidates the tracker/badge caches on settle, and shows the
|
||||||
// right toast (an Undo when un-paying, a specific "paid" message otherwise).
|
// right toast (an Undo when un-paying, a specific "paid" message otherwise).
|
||||||
// Shared by the desktop and mobile tracker rows.
|
// Shared by the desktop and mobile tracker rows.
|
||||||
export function useTogglePaid(year, month) {
|
export function useTogglePaid(year: number, month: number) {
|
||||||
const invalidate = useInvalidateTrackerData();
|
const invalidate = useInvalidateTrackerData();
|
||||||
const mutation = useMutation({
|
const mutation = useMutation({
|
||||||
mutationFn: ({ rowId, amount }) => api.togglePaid(rowId, { amount, year, month }),
|
mutationFn: ({ rowId, amount }: { rowId: number; amount: number | undefined }) =>
|
||||||
|
api.togglePaid(rowId, { amount, year, month }),
|
||||||
onSettled: () => invalidate(),
|
onSettled: () => invalidate(),
|
||||||
});
|
});
|
||||||
|
|
||||||
const run = (row, { wasPaid, threshold, setOptimisticPaid }) => {
|
const run = (row: PayableRow, { wasPaid, threshold, setOptimisticPaid }: TogglePaidOptions) => {
|
||||||
setOptimisticPaid(!wasPaid); // instant flip; effect/rollback reconciles
|
setOptimisticPaid(!wasPaid); // instant flip; effect/rollback reconciles
|
||||||
mutation.mutate(
|
mutation.mutate(
|
||||||
{ rowId: row.id, amount: wasPaid ? undefined : threshold },
|
{ rowId: row.id, amount: wasPaid ? undefined : threshold },
|
||||||
|
|
@ -69,7 +88,7 @@ export function useTogglePaid(year, month) {
|
||||||
toast.success('Payment restored');
|
toast.success('Payment restored');
|
||||||
invalidate();
|
invalidate();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(err.message || 'Failed to restore payment');
|
toast.error(errMessage(err, 'Failed to restore payment'));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -80,7 +99,7 @@ export function useTogglePaid(year, month) {
|
||||||
},
|
},
|
||||||
onError: (err) => {
|
onError: (err) => {
|
||||||
setOptimisticPaid(undefined); // roll back the instant flip
|
setOptimisticPaid(undefined); // roll back the instant flip
|
||||||
toast.error(err.message || 'Failed to toggle payment status');
|
toast.error(errMessage(err, 'Failed to toggle payment status'));
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
Loading…
Reference in New Issue