(fix) Reactively cascade form field update event

samuelmale commented 1 month ago

Requirements

[X] This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
[ ] My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
[ ] My work includes tests or is validated by existing tests.

Summary

Background: In the form-engine, state management is typically handled using a reducer pattern, often in conjunction with React's useReducer hook. This is propped with helpers to conveniently update the state eg. updateFormField.

Issue: The form-renderer currently receives the field object directly from the section instead of the reactive flattened form fields state. This obscures the cascade of the reactive events.

Solution: Treat the flattened formFields state as the source of truth.

Screenshots

N/A

Other

github-actions[bot] commented 1 month ago

Size Change: +85 B (+0.01%)

Total Size: 1.14 MB

ℹ️ View Unchanged

| Filename | Size | Change | | :--- | :---: | :---: | | `dist/151.js` | 300 kB | 0 B | | `dist/225.js` | 2.57 kB | 0 B | | `dist/277.js` | 1.84 kB | 0 B | | `dist/3.js` | 481 B | 0 B | | `dist/300.js` | 642 B | 0 B | | `dist/335.js` | 968 B | 0 B | | `dist/353.js` | 3.02 kB | 0 B | | `dist/41.js` | 3.37 kB | 0 B | | `dist/422.js` | 6.8 kB | 0 B | | `dist/540.js` | 2.63 kB | 0 B | | `dist/55.js` | 758 B | 0 B | | `dist/572.js` | 251 kB | +50 B (+0.02%) | | `dist/617.js` | 86.9 kB | 0 B | | `dist/635.js` | 14.3 kB | 0 B | | `dist/733.js` | 107 kB | 0 B | | `dist/901.js` | 11.8 kB | 0 B | | `dist/99.js` | 691 B | 0 B | | `dist/993.js` | 3.09 kB | 0 B | | `dist/main.js` | 340 kB | +35 B (+0.01%) | | `dist/openmrs-esm-form-engine-lib.js` | 3.67 kB | 0 B |

_{compressed-size-action}

samuelmale commented 1 month ago

So this enables us to effectively subscribe to form field update events:

const items = useMemo(() => {
    // logic
    return [];
}, [field.questionOptions.answers]);

return <>...

openmrs / openmrs-esm-form-engine-lib