Normalize callback prop naming to on[Noun][Verb] convention #3

Merged
iswa merged 1 commits from event-taxonomy-normalizer into master 2026-03-20 08:32:12 -07:00
2 changed files with 9 additions and 7 deletions

View File

@@ -77,6 +77,8 @@ cd client && npm run test:watch
- Export pure functions (validators, formatters, etc.) for direct testing
- Run `npm test` in both `server/` and `client/` before committing
**Callback prop naming convention:** React callback props follow `on[Noun][Verb]` (e.g., `onBillPaidToggle`, `onPaycheckAmountSave`, `onPaycheckGenerate`). Event handler functions in the parent component use the `handle[Action]` prefix (e.g., `handleAmountSave`, `handleBillPaidToggle`).
## Application Structure
The default route `/` renders the paycheck-centric main view (`client/src/pages/PaycheckView.jsx`). It shows the current month's two paychecks side-by-side with bills, paid status, one-time expenses, and remaining balance. Month navigation (prev/next) fetches data via `GET /api/paychecks?year=&month=`.

View File

@@ -29,7 +29,7 @@ export { ordinal, formatCurrency, formatPayDate };
// ─── PaycheckColumn ───────────────────────────────────────────────────────────
function PaycheckColumn({ paycheck, onBillPaidToggle, categories, onOtePaidToggle, onOteDelete, onOteAdd, onGenerate, onAmountSave, onBillAmountSave, onFinancingPaidToggle }) {
function PaycheckColumn({ paycheck, onBillPaidToggle, categories, onOtePaidToggle, onOteDelete, onOteAdd, onPaycheckGenerate, onPaycheckAmountSave, onBillAmountSave, onFinancingPaidToggle }) {
const [newOteName, setNewOteName] = useState('');
const [newOteAmount, setNewOteAmount] = useState('');
const [actuals, setActuals] = useState([]);
@@ -95,7 +95,7 @@ function PaycheckColumn({ paycheck, onBillPaidToggle, categories, onOtePaidToggl
// Lazy generate if this is a virtual paycheck
let paycheckId = paycheck.id;
if (!paycheckId) {
const generated = await onGenerate();
const generated = await onPaycheckGenerate();
paycheckId = generated.find(p => p.paycheck_number === paycheck.paycheck_number).id;
}
@@ -151,7 +151,7 @@ function PaycheckColumn({ paycheck, onBillPaidToggle, categories, onOtePaidToggl
setAmountSaving(true);
setAmountError(null);
try {
await onAmountSave(paycheck.paycheck_number, parseFloat(editGross) || 0, parseFloat(editNet) || 0);
await onPaycheckAmountSave(paycheck.paycheck_number, parseFloat(editGross) || 0, parseFloat(editNet) || 0);
setEditingAmounts(false);
} catch (err) {
setAmountError(err.message);
@@ -755,8 +755,8 @@ function PaycheckView() {
onOteDelete={handleOteDelete}
onOteAdd={handleOteAdd}
categories={categories}
onGenerate={generateMonth}
onAmountSave={handleAmountSave}
onPaycheckGenerate={generateMonth}
onPaycheckAmountSave={handleAmountSave}
onBillAmountSave={handleBillAmountSave}
onFinancingPaidToggle={handleFinancingPaidToggle}
/>
@@ -767,8 +767,8 @@ function PaycheckView() {
onOteDelete={handleOteDelete}
onOteAdd={handleOteAdd}
categories={categories}
onGenerate={generateMonth}
onAmountSave={handleAmountSave}
onPaycheckGenerate={generateMonth}
onPaycheckAmountSave={handleAmountSave}
onBillAmountSave={handleBillAmountSave}
onFinancingPaidToggle={handleFinancingPaidToggle}
/>