Fix store usage for multiple React components (#35)

* Fix store usage for multiple React components

* Clean-up component code

Co-authored-by: Nees Jan van Eck <ecknjpvan@cwts.leidenuniv.nl>

src/component.js

@@ -9,14 +9,15 @@ import _isPlainObject from 'lodash/isPlainObject';
 
 import { parameterKeys } from 'utils/variables';
 import {
-  ConfigStoreContext, ClusteringStoreContext, DataStoreContext, LayoutStoreContext, UiStoreContext, VisualizationStoreContext, QueryStringStoreContext, WebworkerStoreContext
+  ConfigStoreContext, ClusteringStoreContext, DataStoreContext, LayoutStoreContext, QueryStringStoreContext, UiStoreContext, VisualizationStoreContext, WebworkerStoreContext,
+  ConfigProvider, ClusteringProvider, DataProvider, LayoutProvider, NormalizationProvider, QueryStringProvider, UiProvider, UiRoriProvider, VisualizationProvider, WebworkerProvider
 } from 'store/stores';
 
 // The '@component' is resolved from an alias in the webpack configuration.
 // eslint-disable-next-line import/no-unresolved
 import App from '@component';
 
-const VOSviewer = observer(({ width, targetRef, parameters = {}, data }) => {
+const VOSviewer = withResizeDetector(observer(({ width, targetRef, parameters = {}, data }) => {
   const configStore = useContext(ConfigStoreContext);
   const clusteringStore = useContext(ClusteringStoreContext);
   const dataStore = useContext(DataStoreContext);
@@ -223,6 +224,28 @@ const VOSviewer = observer(({ width, targetRef, parameters = {}, data }) => {
       </FullScreen>
     </div>
   );
-});
-
-export default withResizeDetector(VOSviewer);
+}));
+
+export default (props) => (
+  <ConfigProvider>
+    <ClusteringProvider>
+      <DataProvider>
+        <LayoutProvider>
+          <NormalizationProvider>
+            <QueryStringProvider>
+              <UiProvider>
+                <UiRoriProvider>
+                  <VisualizationProvider>
+                    <WebworkerProvider>
+                      <VOSviewer {...props} />
+                    </WebworkerProvider>
+                  </VisualizationProvider>
+                </UiRoriProvider>
+              </UiProvider>
+            </QueryStringProvider>
+          </NormalizationProvider>
+        </LayoutProvider>
+      </DataProvider>
+    </ClusteringProvider>
+  </ConfigProvider>
+);

src/store/stores.js

@@ -11,24 +11,73 @@ import UiRoriStore from 'store/ui-rori';
 import VisualizationStore from 'store/visualization';
 import WebworkerStore from 'store/webworker';
 
-const configStore = new ConfigStore();
-const clusteringStore = new ClusteringStore();
-const dataStore = new DataStore();
-const layoutStore = new LayoutStore();
-const normalizationStore = new NormalizationStore();
-const queryStringStore = new QueryStringStore();
-const uiStore = new UiStore();
-const uiRoriStore = new UiRoriStore();
-const visualizationStore = new VisualizationStore();
-const webworkerStore = new WebworkerStore();
-
-export const ConfigStoreContext = React.createContext(configStore);
-export const ClusteringStoreContext = React.createContext(clusteringStore);
-export const DataStoreContext = React.createContext(dataStore);
-export const LayoutStoreContext = React.createContext(layoutStore);
-export const NormalizationStoreContext = React.createContext(normalizationStore);
-export const QueryStringStoreContext = React.createContext(queryStringStore);
-export const UiStoreContext = React.createContext(uiStore);
-export const UiRoriStoreContext = React.createContext(uiRoriStore);
-export const VisualizationStoreContext = React.createContext(visualizationStore);
-export const WebworkerStoreContext = React.createContext(webworkerStore);
+export const ConfigStoreContext = React.createContext();
+export const ClusteringStoreContext = React.createContext();
+export const DataStoreContext = React.createContext();
+export const LayoutStoreContext = React.createContext();
+export const NormalizationStoreContext = React.createContext();
+export const QueryStringStoreContext = React.createContext();
+export const UiStoreContext = React.createContext();
+export const UiRoriStoreContext = React.createContext();
+export const VisualizationStoreContext = React.createContext();
+export const WebworkerStoreContext = React.createContext();
+
+export const ConfigProvider = ({ children }) => (
+  <ConfigStoreContext.Provider value={new ConfigStore()}>
+    {children}
+  </ConfigStoreContext.Provider>
+);
+
+export const ClusteringProvider = ({ children }) => (
+  <ClusteringStoreContext.Provider value={new ClusteringStore()}>
+    {children}
+  </ClusteringStoreContext.Provider>
+);
+
+export const DataProvider = ({ children }) => (
+  <DataStoreContext.Provider value={new DataStore()}>
+    {children}
+  </DataStoreContext.Provider>
+);
+
+export const LayoutProvider = ({ children }) => (
+  <LayoutStoreContext.Provider value={new LayoutStore()}>
+    {children}
+  </LayoutStoreContext.Provider>
+);
+
+export const NormalizationProvider = ({ children }) => (
+  <NormalizationStoreContext.Provider value={new NormalizationStore()}>
+    {children}
+  </NormalizationStoreContext.Provider>
+);
+
+export const QueryStringProvider = ({ children }) => (
+  <QueryStringStoreContext.Provider value={new QueryStringStore()}>
+    {children}
+  </QueryStringStoreContext.Provider>
+);
+
+export const UiProvider = ({ children }) => (
+  <UiStoreContext.Provider value={new UiStore()}>
+    {children}
+  </UiStoreContext.Provider>
+);
+
+export const UiRoriProvider = ({ children }) => (
+  <UiRoriStoreContext.Provider value={new UiRoriStore()}>
+    {children}
+  </UiRoriStoreContext.Provider>
+);
+
+export const VisualizationProvider = ({ children }) => (
+  <VisualizationStoreContext.Provider value={new VisualizationStore()}>
+    {children}
+  </VisualizationStoreContext.Provider>
+);
+
+export const WebworkerProvider = ({ children }) => (
+  <WebworkerStoreContext.Provider value={new WebworkerStore()}>
+    {children}
+  </WebworkerStoreContext.Provider>
+);