Edit and delete for `[expenses|payments]` #76

kategreenUSDS · 2024-10-16T17:53:15Z

Ticket Number

FFS-1487
FFS-1688 (i think the payments edit ticket in sprint 8.3)

Description of changes

This work is to enable edit and delete for both payment and expense. Payment is net new, so there was a few more things to add there. Expenses had delete before, but not edit. Also I needed to move expenses to support the job/[jobId]/expense/[expenseId]/edit routing structure to call up the right item.

List of changes

move expense edit page to the right file+routing structure
add payment edit page
add date functions to test fixture generation + some tests
add tests for edit functionality
edit summary screens (/job/list) and (/job/[jobId]/expenses/list) -- which I know isn't congruent, routing-wise, but I held on this till design is closer to done

Requests for reviewer

Follow on work

Form validation and fixing how the datepicker is populated will be follow on work in ticket TODO Kate

Screenshots and demonstration

The best way to handle this is to run it locally.

* WIP for edit

Edit fixture generator

kategreenUSDS · 2024-10-16T17:54:15Z

app/[locale]/job/FormPayment.tsx

@@ -1,13 +1,15 @@
 'use client'

-import ErrorSummary from "@/app/components/ErrorSummary"


this is reordering of imports to be more standard (react->get data->render pages)

kategreenUSDS · 2024-10-16T17:56:57Z

app/[locale]/job/FormPayment.tsx

@@ -23,12 +25,34 @@ export type FormPaymentData = {
 export default function FormPayment(params: FormPaymentProps) {
  const { t } = useTranslation()

+  let formatDate = () => {


there is a world where the date methods i wrote for the tests could be generalized as utils. however, it's important to have some separation of the code under test and the code used to test. i've left these separate for that reason, but this could be a change down the line. the deciding question there will be "by combining date utils, am i still testing what i think i'm testing?" truss, maintainer of React USWDS disagrees with me

kategreenUSDS · 2024-10-16T17:58:19Z

app/[locale]/job/FormPayment.tsx

@@ -52,12 +76,16 @@ export default function FormPayment(params: FormPaymentProps) {
          name="date"
          control={control}
          rules={{ required: {value:true, message: t('add_income_required_field')} }}
-          render={({ field }) => (
+          render={({ 


this is a buncha churn on getting the datepicker and form validation working. i left them in as a demonstration at how it could work. they don't affect functionality (or, what didn't work before still doesn't work now lolsob)

kategreenUSDS · 2024-10-16T17:58:37Z

app/[locale]/job/[jobId]/expense/FormExpense.tsx

@@ -8,12 +8,12 @@ import { Button, Form, FormGroup, Checkbox, DatePicker, ComboBox, Label, Require
 import { Controller, SubmitHandler, useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"

-interface ExpenseFormPaymentProps {
-  onSubmit: SubmitHandler<ExpenseFormPaymentData>
+interface FormExpenseProps {


naming consistency change

kategreenUSDS · 2024-10-16T18:00:37Z

app/[locale]/job/[jobId]/expense/[expenseId]/edit/page.test.tsx

+
+  it('should load all existing items ot the page', () => {
+    expect(screen.getByTestId('amount')).toHaveProperty('value', expense1.item.amount.toString())
+    // expect(screen.getByTestId('date-picker-external-input')).toHaveProperty('value', expense1.item.date)


all items that use the form validation <Control> element are commented out here since they don't work as expected and the tests fail. i left them commented out because once this work is underway, you can uncomment these, TDD-style and get moving from my base assumptions on how they should wrok

kategreenUSDS · 2024-10-16T18:01:21Z

app/[locale]/job/[jobId]/payment/[paymentId]/edit/page.test.tsx

+
+  it('should load all existing items to the page', () => {
+    expect(screen.getByTestId('amount')).toHaveProperty('value', payment1.item.amount.toString())
+    // expect(screen.getByTestId('date-picker-external-input')).toHaveProperty('value', payment1.item.date)


same as the expense data + the broken <Control> element/datepicker

kategreenUSDS · 2024-10-16T18:01:51Z

app/[locale]/job/[jobId]/payment/add/page.test.tsx

 import Page from './page'
 import { EnhancedStore } from '@reduxjs/toolkit/react'
 import { makeStore } from '@/lib/store'

 import { addJob } from '@/lib/features/job/jobSlice'

-/**


moved to the test date generator

kategreenUSDS · 2024-10-16T18:02:30Z

app/[locale]/job/list/page.test.tsx

@@ -28,7 +28,6 @@ describe('List Income in Ledger Page', async () => {

  it('shows navigation buttons', () => {
    render (<Provider store={store}><Page /></Provider>)
-    expect(screen.getByTestId('add_another_button')).toBeDefined()


with the design change from the last PR, this button is superfluous

kategreenUSDS · 2024-10-16T18:03:16Z

app/[locale]/job/list/page.tsx

-  const router = useRouter()
-
-  const routeToStandardDeductionElection = useAppSelector(state => recommendStandardDeduction(state))
+    const { t } = useTranslation()


i had to rework how the job list page + its stubs IncomeFormList and IncomeFormListItem were iterating to support mulitple jobs + mulitple payments

kategreenUSDS · 2024-10-16T18:05:10Z

app/[locale]/job/review/JobReviewHeader.test.tsx

+    describe('Medicaid and Snap', () => {
+      let benefits: BenefitsState
+      beforeEach(() => {
+        benefits = generateBenefits({


missed doing this in my "make all teh fixtures use generators" PR

kategreenUSDS · 2024-10-16T18:05:49Z

app/[locale]/job/review/page.tsx

  const benefits = useAppSelector(state => selectBenefits(state))
  const incomeTotal = useAppSelector(state => selectTotalPaymentsByAllJobs(state))

  function continueButtonClicked() {
    router.push("/statement/sign")
  }

+  const jobItemList = () => {


test broke here when i changed iterations on the job list page

kategreenUSDS · 2024-10-16T18:06:09Z

app/i18n/locales/en/translation.json

@@ -140,9 +140,6 @@
  "list_income_delete_button": "Delete",
  "list_income_done_button": "Done",
  "list_income_header": "Would you like to add another person, client, or company who paid you in the last {{day_count}} days?",
-  "list_income_list_header": "Your jobs and payments",


no longer needed

kategreenUSDS · 2024-10-16T18:07:16Z

lib/features/job/jobSlice.ts

@@ -58,8 +58,16 @@ export const selectJobCount = (state: RootState) => state.jobs.allIds.length
 * 
 * @param state 
 */
-export const selectTotalPaymentsByJob = (state: RootState, jobId: string) => 
-  selectPaymentsByJob(state, jobId).reduce((total: number, payment: PaymentItem) => total + payment.amount, 0)
+export const selectTotalPaymentsByJob = (state: RootState, jobId: string) => {


i had to make this return both the data (as an object byId) and the iterator (allIds)

kategreenUSDS added 14 commits October 7, 2024 16:25

* delete now works for payment

4511ff3

* WIP for edit

file rename shenanigans

3127309

Merge branch 'main' into k8/FFS-1487/edit-delete-expenses

5fa0ad4

revamping how we're returning selected payments (and eventually jobs)

acd0bd5

Merge branch 'main' into k8/FFS-1487/edit-delete-expenses

a6faf22

making way for new getPaymentByJob() structure

fe050af

spacing changes (merge conflicts lolsob)

4f64b3e

Merge branch 'main' into k8/FFS-1487/edit-delete-expenses

9d1030c

hooks for expenses, save the Controller

1c53fe7

removing a test line here because it's tested in IncomeList now

00f1182

Fixing tests

e03df70

lint fixes

ddac870

Add date generator, tests for said generator

2bd3589

Edit fixture generator

Update job forms and tests

cbe1042

kategreenUSDS requested a review from YvetteWhiteUSDS October 16, 2024 17:53

kategreenUSDS commented Oct 16, 2024

View reviewed changes

kategreenUSDS added 2 commits October 16, 2024 14:07

remove stray comments

c029f49

Merge branch 'main' into k8/FFS-1487/edit-delete-expenses

45f83cc

Fix up expenses page to mirror the payment list page in layout

eef0063

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Edit and delete for `[expenses|payments]` #76

Edit and delete for `[expenses|payments]` #76

kategreenUSDS commented Oct 16, 2024

kategreenUSDS Oct 16, 2024

kategreenUSDS Oct 16, 2024

kategreenUSDS Oct 16, 2024

kategreenUSDS Oct 16, 2024

kategreenUSDS Oct 16, 2024

kategreenUSDS Oct 16, 2024

kategreenUSDS Oct 16, 2024

kategreenUSDS Oct 16, 2024

kategreenUSDS Oct 16, 2024

kategreenUSDS Oct 16, 2024 •

edited

Loading

kategreenUSDS Oct 16, 2024

kategreenUSDS Oct 16, 2024

kategreenUSDS Oct 16, 2024

		@@ -1,13 +1,15 @@
		'use client'

		import ErrorSummary from "@/app/components/ErrorSummary"

Edit and delete for [expenses|payments] #76

Are you sure you want to change the base?

Edit and delete for [expenses|payments] #76

Conversation

kategreenUSDS commented Oct 16, 2024

Ticket Number

Description of changes

List of changes

Requests for reviewer

Follow on work

Screenshots and demonstration

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kategreenUSDS Oct 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Edit and delete for `[expenses|payments]` #76

Edit and delete for `[expenses|payments]` #76

kategreenUSDS Oct 16, 2024 •

edited

Loading