kobotoolbox / kpi / 22116868917 / 1

82%

master: 76%

push

github

refactor(editableForm): change into functional component DEV-1338 DEV-1337 (#6708)

### 💭 Notes

This is a followup to #6588. Previous PR moved things to TypeScript and
merged some code into single component. This one changes that component
into a functional component to allow for easier use of orval

Notable changes:
- Changed `routerWillLeave` to `useBeforeUnload` and `useBlocker`
- Changed `setState` to `useState`
- Had some weird issues with using `setState({...state})`, but they went
away after switching to `setState((state) => ({...state}))`
- Changed `componentWillMount` to `useEffect`

### 👀 Preview steps

Similarly to #6588 this doesn't touch any particular functionality, but
rather a wrapper for Form Builder, so any Form Builder related
functionalities might be affected by this PR. It would be best to test
FB. By looking at the code, the parts that for sure needs to be tested
are:
- Creating a new Library Item
- Importing a Library Item into form
- Cascading select:
https://support.kobotoolbox.org/cascading_select.html
- Locking profiles and templates:
https://support.kobotoolbox.org/library_locking.html
- Creating new form
- Editing existing form
- Editing form style (from Layout & Settings)
- Grouping rows
- Reordering rows
- Changing form name through Form Builder
- Previewing form
- Question matrix: https://support.kobotoolbox.org/matrix_response.html

---------

Co-authored-by: Paulo Amorim <pauloamorimbr@gmail.com>
Co-authored-by: Akuukis <Akuukis@users.noreply.github.com>

7243 of 11529 branches covered (62.82%)

27724 of 34786 relevant lines covered (79.7%)

0.8 hits per line