Participant Edit Miles

[valonm]

This commit enables editing of participant mileage, separate from a "Sign Out" status update.

• re-implemented the participant miles input so that it is re-usable
• re-arranged the participant dialog a bit so the edit functionality has enough space and the UI is not too small to tap on in Mobile
• added edit miles functionality in the participant dialog.

Refactored Miles Input on the Sign Out Form

Rearranged Participant Dialog

I changed it to 2 columns, instead of three on desktop. It was always 1 column on mobile (no change.) I also made the Total Hours and Total Miles a larger to match the timeline font. The Total Miles row can be clicked/tapped to edit, just like the existing timeline edit functionality.

Editing on the Dialog

[valonm]

Edit Mileage

[mcosand]

The action/reducer looks OK to me.
I don't have strong feelings on the rest. This does mean we lose what form validation we had for the miles field? Don't know that it's worth worrying about keeping, but I was hoping we'd be able to have clean validation/error messages that kept the database in a good state. You may have been playing the cards I dealt you.

[valonm]

This does mean we lose what form validation we had for the miles field?

The only validation that the status updater is doing is that the miles have to be non-negative. ParticipantMilesUpdater is enforcing that rule, although, it doesn't present it as an error; it just doesn't enable the submit button when there is invalid input.

[EDIT] On further testing, while the ParticipantMilesUpdater enforces the non-negative values, it is also suppressing onChange events when the value is negative which means that the useForm reducer does not have an opportunity to validate the input and is effectively bypassed. I am going to revisit this so that the caller is updated even if the value is invalid.

[valonm]

Fixed a minor bug I found while looking into the validation question. The ParticipantMiles component on the RosterPanel maintains a miles state, but was not passing updates along with the participant.

[valonm]

I have resolved the issue that Matt pointed out, regarding the parent not being able to handle validation (e.g. useForm resolvers) although, I have also built it to prevent negative value input.

I also did some (probably unnecessary) refactoring to useReducer which reduced the complexity of the internal component state, but required a bunch of typescript boilerplate -- it was probably a wash, but I learned some stuff about useReducer; so that's good :-)