refactor: 💡 React components to consume appConfig using Context (#852)

* refactor: 💡 React components to consume appConfig using Context

React components to consume app configuration using React Context and
React Hooks. Non React components to continue using global variable
window.config. Related documentation also changed.

Closes: #725

* refactor: 💡 Removing unecessary code

On current React component there is no need to import useContext method
from React, so, removing it.

* refactor: 💡 Code review

Code review. Minor changes based on review inputs and moving userManager
to an init method

BREAKING CHANGE: #725

Closes: #725

* docs: don't include implementation detail in docs

* docs: don't include implementation detail in docs

* docs: no need to specify implementation details in employment recipe

* docs: no need to specify implementation details in deployment recipe

platform/viewer/src/studylist/StudyListRouting.js

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import queryString from 'query-string';
 import ConnectedStudyList from './ConnectedStudyList';
 
+// Contexts
+import AppContext from '../context/AppContext';
+
 // TODO: Move to @ohif/ui
 
 function toLowerCaseFirstLetter(word) {
@@ -22,16 +25,20 @@ function getFilters({ search }) {
 }
 
 function StudyListRouting({ location }) {
+  const { appConfig = {} } = useContext(AppContext);
+
   const filters = location ? getFilters(location) : undefined;
 
   let studyListFunctionsEnabled = false;
-  if (window.config && window.config.studyListFunctionsEnabled) {
-    studyListFunctionsEnabled = window.config.studyListFunctionsEnabled;
+  if (appConfig.studyListFunctionsEnabled) {
+    studyListFunctionsEnabled = appConfig.studyListFunctionsEnabled;
   }
-  return <ConnectedStudyList
-    filters={filters}
-    studyListFunctionsEnabled={studyListFunctionsEnabled}
-  />;
+  return (
+    <ConnectedStudyList
+      filters={filters}
+      studyListFunctionsEnabled={studyListFunctionsEnabled}
+    />
+  );
 }
 
 StudyListRouting.propTypes = {

platform/viewer/src/studylist/StudyListWithData.js

@@ -10,10 +10,14 @@ import moment from 'moment';
 import ConnectedDicomFilesUploader from '../googleCloud/ConnectedDicomFilesUploader';
 import ConnectedDicomStorePicker from '../googleCloud/ConnectedDicomStorePicker';
 import filesToStudies from '../lib/filesToStudies.js';
-import UserManagerContext from '../UserManagerContext';
-import WhiteLabellingContext from '../WhiteLabellingContext';
+
+// Contexts
+import UserManagerContext from '../context/UserManagerContext';
+import WhiteLabellingContext from '../context/WhiteLabellingContext';
+import AppContext from '../context/AppContext';
 
 class StudyListWithData extends Component {
+  static contextType = AppContext;
   state = {
     searchData: {},
     studies: [],
@@ -51,9 +55,10 @@ class StudyListWithData extends Component {
   };
 
   componentDidMount() {
+    const { appConfig = {} } = this.context;
     // TODO: Avoid using timepoints here
     //const params = { studyInstanceUids, seriesInstanceUids, timepointId, timepointsFilter={} };
-    if (!this.props.server && window.config.enableGoogleCloudAdapter) {
+    if (!this.props.server && appConfig.enableGoogleCloudAdapter) {
       this.setState({
         modalComponentId: 'DicomStorePicker',
       });
@@ -184,6 +189,7 @@ class StudyListWithData extends Component {
   };
 
   render() {
+    const { appConfig = {} } = this.context;
     const onDrop = async acceptedFiles => {
       try {
         const studies = await filesToStudies(acceptedFiles);
@@ -203,8 +209,7 @@ class StudyListWithData extends Component {
     let healthCareApiButtons = null;
     let healthCareApiWindows = null;
 
-    // TODO: This should probably be a prop
-    if (window.config.enableGoogleCloudAdapter) {
+    if (appConfig.enableGoogleCloudAdapter) {
       healthCareApiWindows = (
         <ConnectedDicomStorePicker
           isOpen={this.state.modalComponentId === 'DicomStorePicker'}