feat: Create API Layer and custom Hook to use the API

[rodrigoea]

Description

Currently, we have API calls on the client sprinkled around, and where/how we make requests is not always obvious.

This PR creates an API Layer to try to reduce data calls and use them in the top-level containers. The goal is to centralize all of our web requests to a single layer.

This new API layer is a generic layer that uses axios to manage the calls.

Also, a generic custom hook useApi was created to consume the new API layer. The intention with the hook is to have a UI handler separated from the API layer itself, where we'll be able to handle each call better, having its status like isLoading, isError and the data per call. This hook can be reusable, even extendable.

useApi -- new custom hook

Basic example

import React from ‘react’;
import useApi from ‘viewers_path/src/customHooks/useApi’;

const Component = () => {
  const { state, api } = useApi();
  const fetchData = () => {
    api.GET(‘fetchUrl’);
  };
  const shouldRenderData = !state.isLoading && !state.isError;
  return (
    <>
      {state.isLoading && ‘Loading...’}
      {state.isError && state.errorMessage}
      {shouldRenderData && JSON.stringify(state.data)}
      <button onClick={fetchData}>Click to fetch</button>
    </>
  );
};

export default Component;

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (master@4fd0c6d). Click here to learn what that means.
The diff coverage is 72.34%.

@@            Coverage Diff            @@
##             master    #1434   +/-   ##
=========================================
  Coverage          ?   12.43%           
=========================================
  Files             ?      274           
  Lines             ?     6990           
  Branches          ?     1318           
=========================================
  Hits              ?      869           
  Misses            ?     4955           
  Partials          ?     1166

Flag	Coverage Δ
#core	17.03% <ø> (?)
#viewer	1.96% <72.34%> (?)

Impacted Files	Coverage Δ
platform/viewer/src/customHooks/useApi.js	72% <72%> (ø)
platform/viewer/src/api/api.js	72.72% <72.72%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4fd0c6d...a0c57d7. Read the comment docs.

[galelis]

Great changes @rodrigolabs, this would be a very good feature once we start to use it. 👍

Why do we have it implemented on Viewer level?
Maybe we could add it as an OHIF/core so we can use in other extensions, packages as well.

Code changes looks good to me, with some minimal questions.

Great job! 🎊

[galelis]

Are we using this package?

[rodrigoea]

Yes, because of @testing-library/react-hooks. It uses react-test-renderer but it doesn't come bundled together to allow us to install a specific version of react-test-renderer.

[galelis]

Any reason to add this data here? Can it be empty?

[rodrigoea]

This is just an initial file for us to keep in mind that we should centralize API URLs there.
I'll remove the studies key/value and keep this file empty for future use :)
Thanks!

[rodrigoea]

@galelis Thanks for reviewing this PR :)

Why do we have it implemented on Viewer level?
Maybe we could add it as an OHIF/core so we can use in other extensions, packages as well.

Initially, It will live in the viewer project folder for now, as requested by @dannyrb -- what's your opinion on that?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.