emibcn · emibcn · Oct 31, 2020 · Oct 25, 2020 · Oct 31, 2020
diff --git a/app/src/App.js b/app/src/App.js
@@ -11,6 +11,8 @@ import ErrorCatcher from './ErrorCatcher';
 import Dashboard from './Dashboard';
 import { WidgetsList } from './Widget';
 
+import BackendProvider from './Backend/Provider';
+
 // App Helmet: Controls HTML <head> elements with SideEffect
 // - Set a default title and title template, translated
 const AppHelmet = (props) => {
@@ -31,12 +33,14 @@ const AppProviders = (props) => {
   return (
     <TranslatorProvider translations={ props.translations }>
       <HelmetProvider>
-        <AppHelmet language={ props.language } />
-        <Router>
-          <div className='App' id='router-container'>
-            { props.children }
-          </div>
-        </Router>
+        <BackendProvider>
+          <AppHelmet language={ props.language } />
+          <Router>
+            <div className='App' id='router-container'>
+              { props.children }
+            </div>
+          </Router>
+        </BackendProvider>
       </HelmetProvider>
     </TranslatorProvider>
   );

diff --git a/app/src/Backend/Bcn/BcnContext.js b/app/src/Backend/Bcn/BcnContext.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import BcnData from './index';
+
+const BcnContext = React.createContext();
+
+function BcnProvider({children}) {
+  return (
+    <BcnContext.Provider value={BcnData}>
+      {children}
+    </BcnContext.Provider>
+  );
+}
+
+function BcnConsumer({children}) {
+  return (
+    <BcnContext.Consumer>
+      {context => {
+        if (context === undefined) {
+          throw new Error('BcnConsumer must be used within a BcnProvider');
+        }
+
+        return children(context);
+      }}
+    </BcnContext.Consumer>
+  );
+}
+
+function useBcnData() {
+  const context = React.useContext(BcnContext);
+
+  if (context === undefined) {
+    throw new Error('useBcnData must be used within a BcnProvider');
+  }
+
+  return context;
+}
+
+function withBcnDataHandler(WrappedComponent) {
+  return (
+    class GetBcnData extends Component {
+      render() {
+        return (
+          <BcnContext.Consumer>
+            {context => {
+              if (context === undefined) {
+                throw new Error('BcnConsumer must be used within a BcnProvider');
+              }
+
+              return <WrappedComponent {...this.props} bcnDataHandler={context} />;
+            }}
+          </BcnContext.Consumer>
+        );
+      }
+    }
+  );
+}
+
+export default BcnProvider;
+export { withBcnDataHandler, BcnConsumer, useBcnData, BcnContext };
diff --git a/app/src/Backend/Charts/ChartsContext.js b/app/src/Backend/Charts/ChartsContext.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import ChartsData from './index';
+
+const ChartsContext = React.createContext();
+
+function ChartsProvider({children}) {
+  return (
+    <ChartsContext.Provider value={ChartsData}>
+      {children}
+    </ChartsContext.Provider>
+  );
+}
+
+function ChartsConsumer({children}) {
+  return (
+    <ChartsContext.Consumer>
+      {context => {
+        if (context === undefined) {
+          throw new Error('ChartsConsumer must be used within a ChartsProvider');
+        }
+
+        return children(context);
+      }}
+    </ChartsContext.Consumer>
+  );
+}
+
+function useChartsData() {
+  const context = React.useContext(ChartsContext);
+
+  if (context === undefined) {
+    throw new Error('useChartsData must be used within a ChartsProvider');
+  }
+
+  return context;
+}
+
+function withChartsDataHandler(WrappedComponent) {
+  return (
+    class GetChartsData extends Component {
+      render() {
+        return (
+          <ChartsContext.Consumer>
+            {context => {
+              if (context === undefined) {
+                throw new Error('ChartsConsumer must be used within a ChartsProvider');
+              }
+
+              return <WrappedComponent {...this.props} chartsDataHandler={context} />;
+            }}
+          </ChartsContext.Consumer>
+        );
+      }
+    }
+  );
+}
+
+export default ChartsProvider;
+export { withChartsDataHandler, ChartsConsumer, useChartsData, ChartsContext };
diff --git a/app/src/Backend/Maps/MapsContext.js b/app/src/Backend/Maps/MapsContext.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import MapsData from './index';
+
+const MapsContext = React.createContext();
+
+function MapsProvider({children}) {
+  return (
+    <MapsContext.Provider value={MapsData}>
+      {children}
+    </MapsContext.Provider>
+  );
+}
+
+function MapsConsumer({children}) {
+  return (
+    <MapsContext.Consumer>
+      {context => {
+        if (context === undefined) {
+          throw new Error('MapsConsumer must be used within a MapsProvider');
+        }
+
+        return children(context);
+      }}
+    </MapsContext.Consumer>
+  );
+}
+
+function useMapsData() {
+  const context = React.useContext(MapsContext);
+
+  if (context === undefined) {
+    throw new Error('useMapsData must be used within a MapsProvider');
+  }
+
+  return context;
+}
+
+function withMapsDataHandler(WrappedComponent) {
+  return (
+    class GetMapsData extends Component {
+      render() {
+        return (
+          <MapsContext.Consumer>
+            {context => {
+              if (context === undefined) {
+                throw new Error('MapsConsumer must be used within a MapsProvider');
+              }
+
+              return <WrappedComponent {...this.props} mapsDataHandler={context} />;
+            }}
+          </MapsContext.Consumer>
+        );
+      }
+    }
+  );
+}
+
+export default MapsProvider;
+export { withMapsDataHandler, MapsConsumer, useMapsData, MapsContext };
diff --git a/app/src/Backend/Provider.js b/app/src/Backend/Provider.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+import BcnProvider from './Bcn/BcnContext';
+import MapsProvider from './Maps/MapsContext';
+import ChartsProvider from './Charts/ChartsContext';
+
+const BackendProvider = ({children}) => {
+  return (
+    <BcnProvider>
+      <MapsProvider>
+        <ChartsProvider>
+          {children}
+        </ChartsProvider>
+      </MapsProvider>
+    </BcnProvider>
+  );
+};
+
+export default BackendProvider;
diff --git a/app/src/Widget/List.jsx b/app/src/Widget/List.jsx
@@ -11,15 +11,15 @@ import Paper from '@material-ui/core/Paper';
 import MenuAddWidget from './MenuAddWidget';
 import WidgetsTypes from './Widgets';
 
-import MapData from '../Backend/Maps';
-import ChartData from '../Backend/Charts';
-import BcnData from '../Backend/Bcn';
+import { withBcnDataHandler } from '../Backend/Bcn/BcnContext';
+import { withMapsDataHandler } from '../Backend/Maps/MapsContext';
+import { withChartsDataHandler } from '../Backend/Charts/ChartsContext';
 
 import Throtle from '../Throtle';
 import Slider from '../Slider';
 import Loading from '../Loading';
 
-import WidgetDataContextProvider from './DataContextProvider'; 
+import WidgetDataContextProvider from './DataContextProvider';
 import withPropHandler from './withPropHandler';
 
 // GUID generator: used to create unique dtemporal IDs for widgets
@@ -134,29 +134,23 @@ class WidgetsList extends React.PureComponent {
   // with excessive calls on mouse move
   throtle = new Throtle();
 
-  // Map Data backend
-  // TODO: Handle errors
-  MapData = new MapData();
-
-  // Chart Data backend
-  // TODO: Handle errors
-  ChartData = new ChartData();
-
-  // BCN Data backend
-  // TODO: Handle errors
-  BcnData = new BcnData();
-
   constructor(props) {
     super(props);
     // Generate initial list of unique IDs
     if ('widgets' in props) {
       this.updateIDs(props.widgets.length);
     }
+
+    this.bcnData = new props.bcnDataHandler();
+    this.chartsData = new props.chartsDataHandler();
+    this.mapData = new props.mapsDataHandler();
   }
 
   // Fetch data once mounted
   componentDidMount() {
-    this.MapData.days(
+    const { mapData, chartsData, bcnData } = this;
+
+    mapData.days(
       days => {
         // Are we on the last time serie element before update?
         const isLast =
@@ -186,34 +180,35 @@ class WidgetsList extends React.PureComponent {
 
         // Once data has been fetched, schedule next data update
         // Mind the timer on unmount
-        this.MapData.scheduleNextUpdate();
+        mapData.scheduleNextUpdate();
       });
-    this.ChartData.index(
+      chartsData.index(
       chartsIndex => {
 
         this.setState({ chartsIndex });
 
         // Once data has been fetched, schedule next data update
         // Mind the timer on unmount
-        this.ChartData.scheduleNextUpdate();
+        chartsData.scheduleNextUpdate();
       });
-    this.BcnData.index(
+      bcnData.index(
       bcnIndex => {
-
         this.setState({ bcnIndex });
 
         // Once data has been fetched, schedule next data update
         // Mind the timer on unmount
-        this.BcnData.scheduleNextUpdate();
+        bcnData.scheduleNextUpdate();
       });
   }
 
   // Cleanup side effects
   componentWillUnmount() {
+    const { mapData, chartsData, bcnData } = this;
+
     // Cancel next update timers
-    this.MapData.cancelUpdateSchedule();
-    this.ChartData.cancelUpdateSchedule();
-    this.BcnData.cancelUpdateSchedule();
+    bcnData.cancelUpdateSchedule();
+    chartsData.cancelUpdateSchedule();
+    mapData.cancelUpdateSchedule();
 
     // Cancel possible throtle timer
     this.throtle.clear();
@@ -355,12 +350,18 @@ const withShowMarkLabels = (Component) => {
 // withPropHandler: Handle params from providers (route + localStorage) into props
 // withStyles: Add `classes` prop for styling components
 // withShowMarkLabels: Add `showMarkLabels` breakpoint to sho/hide Slider mark labels depending on sreen size
+// withBcnDataHandler: Add `bcnDataHandler` prop to use bcn backend data
+// withMapsDataHandler: Add `mapsDataHandler` prop to use maps backend data
+// withChartsDataHandler: Add `chartsDataHandler` prop to use charts backend data
 const WidgetsListWithPropHandler =
   withPropHandler(
     withStyles(useStyles)(
       withShowMarkLabels(
-        WidgetsList
-  )));
+        withBcnDataHandler(
+          withMapsDataHandler(
+            withChartsDataHandler(
+              WidgetsList
+  ))))));
 
 // Manage some context providers details:
 // - pathFilter: How to split `location` (Route `path` prop)

diff --git a/app/src/Widget/Widgets/Bcn/EditDataset.jsx b/app/src/Widget/Widgets/Bcn/EditDataset.jsx
@@ -6,7 +6,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-import BcnData from '../../../Backend/Bcn';
+import { withBcnDataHandler } from '../../../Backend/Bcn/BcnContext';
 
 // From: https://material-ui.com/components/tree-view/#rich-object
 
@@ -38,22 +38,24 @@ class RecursiveTreeView extends React.Component {
       this.props.onChange(value);
     }
   }
- 
+
   componentWillMount = () => {
-    const bcnData = new BcnData(this.props.bcnIndex);
-    const {value} = this.props;
+    const { value, bcnIndex, bcnDataHandler } = this.props;
+
+    const bcnData = new bcnDataHandler(bcnIndex);
+
     this.setState({
       value,
       breadcrumb: bcnData
-        .findBreadcrumb(null, this.props.value)
+        .findBreadcrumb(null, value)
         .map(node => `${!('values' in node) ? 'DISABLED-' : ''}${node.code}`),
     });
   }
 
   render = (props) => {
     const { classes, bcnIndex, ...restProps } = this.props;
     const { breadcrumb, value } = this.state;
- 
+
     return (
       <TreeView
         className={classes.root}
@@ -72,4 +74,4 @@ class RecursiveTreeView extends React.Component {
   }
 }
 
-export default withStyles(styles)(RecursiveTreeView);
+export default withBcnDataHandler(withStyles(styles)(RecursiveTreeView));