kobotoolbox / kpi / 22174642912 / 2

81%

master: 76%

push

github

refactor(reports): change into functional component DEV-1335 (#6721)

### 💭 Notes

Changed component to functional to make it easier to use react-query.

Notable changes:
- `componentDidMount` is now `useEffect` with `[]`
- `componentDidUpdate` is now `useEffect` with
`[state.currentCustomReport, state.groupBy]` and is relying on build in
comparison checks rather than lodash's `isEqual`
- The "reset default report groupBy if it fails" flow that was using
`setState`'s callback is now operating on `useEffect`. I'm not entirely
sure how to test this functionality and what it does…

Reports component is doing some weird "magic" on the API response to
override report styles data - this is confusing and a sign reports code
is old and in need of reworking.

### 👀 Preview steps

1. ℹ️ Have an account and a project (e.g. Pizza from
[kobo-fixture](https://github.com/kobotoolbox/kobo-fixture)) with
submissions
2. Go to Project → Data → Reports
3. 🟢 Notice that reports still loads correctly (i.e. no UI crash, not
missing data)
4. 🟢 Make sure the following still works:
1. "Create New Report" flow (blue "+" button near the top of the
section)
   2. "Configure Report Style" flow (navy cog button)
   3. "Toggle fullscreen" functionality (top right corner - icon button)
   4. "Override graph style" flow ("…" button in top right of a report)

---------

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

7490 of 11544 branches covered (64.88%)

28527 of 34796 relevant lines covered (81.98%)

0.82 hits per line