Skip to content

Conversation

@Serial-ATA
Copy link
Contributor

Problem

Solving MBS-12748, converting the area edit form and creation page to React.

Solution

  • Conversion of root/area/edit_form.tt to React
    • Mostly a copy of the EventEditForm component
  • Conversion of root/area/create.tt to React
  • Split the type bubble into a separate component (root/static/scripts/common/components/TypeBubble.js) to share between the event edit form and the area edit form
  • Translated the ISO 3166 validation functions in Server/Validation.pm to JS in root/static/scripts/edit/utility/iso3166.js
  • Updated FormRowTextListSimple to take an optional dispatch function, so that the ISO 3166 codes can be validated in real time

Testing

I've tested creating areas on /area/create, and editing existing areas on /area/xxx/edit. I've tested that the area types are all present and can be set, invalid ISO 3166 codes are rejected, and multiple codes can be added.

@reosarevok reosarevok added the React PRs directly related with React conversion label Oct 29, 2025
@Serial-ATA Serial-ATA marked this pull request as draft October 29, 2025 17:27
@Serial-ATA
Copy link
Contributor Author

The area editing test is failing, I'll take a look soon

Copy link
Member

@reosarevok reosarevok left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems from the test failure that editing the area is also removing its type (type_id now appears both in old and new). IIRC, that's because in the tests you need to specify the same type as it already has, otherwise values in selects get lost for some reason.

The flicker of the type bubble you might be seeing should be solved by 0d6b18a (feel free to cherry-pick it if you want it).

The ISO validation errors should probably disable form submission. In the recording PR I'm doing const hasErrors = hasSubfieldErrors(state.form) - something like that probably makes sense?

In general this seems to work quite well!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

React PRs directly related with React conversion

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants