Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[APM] useFetcher: Replace react-redux-request with hooks and Context API #33392

Merged
merged 16 commits into from
Mar 28, 2019

Conversation

sorenlouv
Copy link
Member

@sorenlouv sorenlouv commented Mar 18, 2019

First steps towards replacing react-redux-request with a custom hook. This PR just replaces rrr for the error overview and error details page.

Why Context API and hooks instead of Redux and react-redux-request (RRR: custom render prop component for data fetching)?

  • RRR didn't support Typescript, and it was not easy to add it
  • Redux requires a lot of boilerplate. The aim of RRR was to simplify this but it was only a half success. It became a magic blackbox itself that was hard to understand - and there was still too much boilerplate
  • Most state is local to a component and should not be part of the global state by default.
  • With useFetch hook, the state is local by default by default but can easily be lifted up with the context API.
  • Both hooks and context are part of the official React API and therefore better approach than custom solution that does something similar
  • hooks and Context have great Typescript support out-of-the-box, which will fill the gaps in the application. Types can now be inferred correctly instead of being explicitly declared (which introduced risk of mistakes).

Tip: Setting the diff settings to "Hide whitespace changes" will make this a fair bit easier to review.

@sorenlouv sorenlouv requested a review from a team as a code owner March 18, 2019 10:33
@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Copy link
Member

@jasonrhodes jasonrhodes left a comment

Choose a reason for hiding this comment

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

A few mostly general questions on this first pass.

x-pack/plugins/apm/public/hooks/useFetcher.tsx Outdated Show resolved Hide resolved
x-pack/plugins/apm/public/hooks/useFetcher.tsx Outdated Show resolved Hide resolved
x-pack/plugins/apm/public/hooks/useFetcher.tsx Outdated Show resolved Hide resolved
x-pack/plugins/apm/public/hooks/useFetcher.tsx Outdated Show resolved Hide resolved
x-pack/plugins/apm/public/hooks/useFetcher.tsx Outdated Show resolved Hide resolved
x-pack/plugins/apm/public/hooks/useFetcher.tsx Outdated Show resolved Hide resolved
@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💔 Build Failed

@ogupte
Copy link
Contributor

ogupte commented Mar 22, 2019

This is a great hook. I especially like how it only refetches when there are changes in the options object. LGTM!

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

@sorenlouv sorenlouv force-pushed the add-useFetcher-hook branch 2 times, most recently from 83aa30a to 233e6c8 Compare March 24, 2019 16:37
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@sorenlouv sorenlouv changed the title [APM] useFetcher (I): Add hook [APM] useFetcher: Add hook Mar 25, 2019
@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

Fix test

Address feedback

[APM] Add useFetcher to ServiceOverview, and add `react-testing-library`

Fix tests

Make spec descriptions more clear

[APM] Add useFetcher to serviceDetailsView

Fix tests

Add redirect

Fix snapshot

Fix redirect to correct bucket

Convert TransactionDetails

[APM] Fix Datepicker double loading and move date parsing to urlParams

Convert more to hooks

Revert "[APM] Fix Datepicker double loading and move date parsing to urlParams"

This reverts commit ed41e17.
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Copy link
Member

@jasonrhodes jasonrhodes left a comment

Choose a reason for hiding this comment

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

Only thing I can see is maybe a useFetcher test on the error scenario, because that would have probably caught the bug when the function was being called just outside of the try/catch block.

But everything here LGTM.

@sorenlouv
Copy link
Member Author

Only thing I can see is maybe a useFetcher test on the error scenario, because that would have probably caught the bug when the function was being called just outside of the try/catch block.

It totally would have! Will add a test for that case now, and then merge.

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants