Alternative approach of delayed dispatching of events that load maps,…

… map, context, dashboard, geostory.
alexander-fedorenko · Aug 19, 2022 · a1fb9eb · a1fb9eb
1 parent 504590e
commit a1fb9eb
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 45 deletions.
diff --git a/web/client/containers/MapViewer.jsx b/web/client/containers/MapViewer.jsx
@@ -34,13 +34,15 @@ class MapViewer extends React.Component {
         pluginsConfig: PropTypes.object,
         loadMapConfig: PropTypes.func,
         plugins: PropTypes.object,
-        loaderComponent: PropTypes.func
+        loaderComponent: PropTypes.func,
+        onPluginsLoaded: PropTypes.func
     };
 
     static defaultProps = {
         mode: 'desktop',
         className: 'viewer',
-        loadMapConfig: () => {}
+        loadMapConfig: () => {},
+        onPluginsLoaded: () => {}
     };
 
     UNSAFE_componentWillMount() {
@@ -53,6 +55,7 @@ class MapViewer extends React.Component {
             plugins={this.props.plugins}
             params={this.props.params}
             loaderComponent={this.props.loaderComponent}
+            onPluginsLoaded={this.props.onPluginsLoaded}
         />);
     }
 }

diff --git a/web/client/containers/Page.jsx b/web/client/containers/Page.jsx
@@ -28,6 +28,7 @@ class Page extends React.Component {
         pluginsConfig: PropTypes.object,
         params: PropTypes.object,
         onMount: PropTypes.func,
+        onPluginsLoaded: PropTypes.func,
         plugins: PropTypes.object,
         loaderComponent: PropTypes.func,
         component: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
@@ -37,6 +38,7 @@ class Page extends React.Component {
     static defaultProps = {
         mode: 'desktop',
         onMount: () => {},
+        onPluginsLoaded: () => {},
         className: '',
         includeCommon: true
     };
@@ -69,6 +71,7 @@ class Page extends React.Component {
             plugins={this.props.plugins}
             params={this.props.params}
             loaderComponent={this.props.loaderComponent}
+            onPluginsLoaded={this.props.onPluginsLoaded}
         />);
     }
 }

diff --git a/web/client/product/components/viewer/MapViewerCmp.jsx b/web/client/product/components/viewer/MapViewerCmp.jsx
@@ -11,6 +11,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ConfigUtils from '../../../utils/ConfigUtils';
 import '../../assets/css/viewer.css';
+import {normalizeName} from "../../../utils/PluginsUtils";
 let oldLocation;
 
 class MapViewerComponent extends React.Component {
@@ -25,7 +26,8 @@ class MapViewerComponent extends React.Component {
         loaderComponent: PropTypes.func,
         wrappedContainer: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
         location: PropTypes.object,
-        className: PropTypes.string
+        className: PropTypes.string,
+        onPluginsLoaded: PropTypes.func
     };
     static defaultProps = {
         mode: 'desktop',
@@ -36,23 +38,34 @@ class MapViewerComponent extends React.Component {
         match: {
             params: {}
         },
-        loaderComponent: () => null
+        loaderComponent: () => null,
+        onPluginsLoaded: () => null
     };
-    UNSAFE_componentWillMount() {
-        const id = this.props.match.params.mapId || '0';
-        const contextId = this.props.match.params.contextId;
-        this.updateMap(id, contextId);
-    }
+
+    state = {};
+
     componentDidUpdate(oldProps) {
         const id = this.props.match.params.mapId || '0';
         const oldId = oldProps.match.params.mapId || '0';
         const contextId = this.props.match.params.contextId;
         const oldContextId = oldProps.match.params.contextId;
-        if (id !== oldId || contextId  !== oldContextId) {
+        if ((id !== oldId || contextId  !== oldContextId) && this.state.pluginsAreLoaded) {
             this.updateMap(id, contextId);
         }
     }
 
+    onPluginsLoaded = (loadedPlugins) => {
+        const pluginKeys = typeof loadedPlugins === 'object' ? Object.keys(loadedPlugins) : loadedPlugins;
+        const plugins = ['Map'];
+        if (plugins.every(elem => pluginKeys.includes(normalizeName(elem))) && !this.state.pluginsAreLoaded) {
+            this.setState({pluginsAreLoaded: true}, () => {
+                const id = this.props.match.params.mapId || '0';
+                const contextId = this.props.match.params.contextId;
+                this.updateMap(id, contextId);
+                this.props.onPluginsLoaded(loadedPlugins);
+            });
+        }
+    };
     render() {
         const WrappedContainer = this.props.wrappedContainer;
         return (<WrappedContainer
@@ -61,8 +74,10 @@ class MapViewerComponent extends React.Component {
             params={this.props.match.params}
             className={this.props.className}
             loaderComponent={this.props.loaderComponent}
+            onPluginsLoaded={this.onPluginsLoaded}
         />);
     }
+
     updateMap = (id, contextId) => {
         if (id && oldLocation !== this.props.location) {
             oldLocation = this.props.location;

diff --git a/web/client/product/pages/Context.jsx b/web/client/product/pages/Context.jsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { isEqual } from 'lodash';
+import {isEqual} from 'lodash';
 import { compose } from 'recompose';
 import { createStructuredSelector } from 'reselect';
 
@@ -17,6 +17,7 @@ import { loadContext, clearContext } from '../../actions/context';
 import MapViewerContainer from '../../containers/MapViewer';
 import { contextMonitoredStateSelector, pluginsSelector, currentTitleSelector, contextThemeSelector, contextCustomVariablesEnabledSelector } from '../../selectors/context';
 import ContextTheme from '../../components/theme/ContextTheme';
+import {onPluginsLoadedHandler} from "../../utils/ModulePluginsUtils";
 
 const ConnectedContextTheme = connect(
     createStructuredSelector({
@@ -88,16 +89,14 @@ class Context extends React.Component {
         },
         wrappedContainer: MapViewerContainer
     };
-    UNSAFE_componentWillMount() {
-        const params = this.props.match.params;
-        this.oldTitle = document.title;
-        this.props.loadContext(params);
-    }
+
+    state = {};
+
     componentDidUpdate(oldProps) {
         const paramsChanged = !isEqual(this.props.match.params, oldProps.match.params);
         const newParams = this.props.match.params;
 
-        if (paramsChanged) {
+        if (paramsChanged && this.state.pluginsAreLoaded) {
             this.props.loadContext(newParams);
         }
 
@@ -113,10 +112,20 @@ class Context extends React.Component {
         return (
             <>
                 <ConnectedContextTheme />
-                <MapViewerCmp {...this.props} />
+                <MapViewerCmp {...this.props} onPluginsLoaded={this.onPluginsLoaded} />
             </>
         );
     }
+
+    onPluginsLoaded = (loadedPlugins) => {
+        onPluginsLoadedHandler(loadedPlugins, ['Context'], () => {
+            this.setState({pluginsAreLoaded: true}, () => {
+                const params = this.props.match.params;
+                this.oldTitle = document.title;
+                this.props.loadContext(params);
+            });
+        }, this.state.pluginsAreLoaded);
+    }
 }
 
 export default compose(

diff --git a/web/client/product/pages/ContextCreator.jsx b/web/client/product/pages/ContextCreator.jsx
@@ -15,6 +15,7 @@ const urlQuery = url.parse(window.location.href, true).query;
 import {clearContextCreator, loadContext} from '../../actions/contextcreator';
 import Page from '../../containers/Page';
 import BorderLayout from '../../components/layout/BorderLayout';
+import {onPluginsLoadedHandler} from "../../utils/ModulePluginsUtils";
 
 /**
   * @name ContextCreator
@@ -43,22 +44,30 @@ class ContextCreator extends React.Component {
         reset: () => {}
     };
 
-    UNSAFE_componentWillMount() {
-        const contextId = get(this.props, "match.params.contextId");
-        this.props.reset();
-        this.props.loadContext(contextId);
-    }
+    state = {};
+
     componentDidUpdate(oldProps) {
         const contextId = get(this.props, "match.params.contextId");
         const oldContextId = get(oldProps, "match.params.contextId");
-        if (contextId !== oldContextId) {
+        if (contextId !== oldContextId && this.state.pluginsAreLoaded) {
             this.props.reset();
             this.props.loadContext(contextId);
         }
     }
     componentWillUnmount() {
         this.props.reset();
     }
+
+    onPluginsLoaded = (loadedPlugins) => {
+        onPluginsLoadedHandler(loadedPlugins, ['ContextCreator', 'Tutorial'], () => {
+            this.setState({pluginsAreLoaded: true}, () => {
+                const contextId = get(this.props, "match.params.contextId");
+                this.props.reset();
+                this.props.loadContext(contextId);
+            });
+        }, this.state.pluginsAreLoaded);
+    }
+
     render() {
         return (<Page
             id="context-creator"
@@ -67,6 +76,7 @@ class ContextCreator extends React.Component {
             plugins={this.props.plugins}
             params={this.props.match.params}
             loaderComponent={this.props.loaderComponent}
+            onPluginsLoaded={this.onPluginsLoaded}
         />);
     }
 }

diff --git a/web/client/product/pages/Dashboard.jsx b/web/client/product/pages/Dashboard.jsx
@@ -18,6 +18,7 @@ import { loadDashboard, resetDashboard } from '../../actions/dashboard';
 import { checkLoggedUser } from '../../actions/security';
 import Page from '../../containers/Page';
 import BorderLayout from '../../components/layout/BorderLayout';
+import {onPluginsLoadedHandler} from "../../utils/ModulePluginsUtils";
 
 /**
   * @name Dashboard
@@ -48,19 +49,11 @@ class DashboardPage extends React.Component {
         checkLoggedUser: () => {}
     };
 
-    UNSAFE_componentWillMount() {
-        const id = get(this.props, "match.params.did");
-        if (id) {
-            this.props.reset();
-            this.props.loadResource(id);
-        } else {
-            this.props.reset();
-            this.props.checkLoggedUser();
-        }
-    }
+    state = {};
+
     componentDidUpdate(oldProps) {
         const id = get(this.props, "match.params.did");
-        if (get(oldProps, "match.params.did") !== get(this.props, "match.params.did")) {
+        if (get(oldProps, "match.params.did") !== get(this.props, "match.params.did") && this.state.pluginsAreLoaded) {
             if (isNil(id)) {
                 this.props.reset();
             } else {
@@ -71,6 +64,22 @@ class DashboardPage extends React.Component {
     componentWillUnmount() {
         this.props.reset();
     }
+
+    onPluginsLoaded = (loadedPlugins) => {
+        onPluginsLoadedHandler(loadedPlugins, ['Dashboard'], () => {
+            this.setState({pluginsAreLoaded: true}, () => {
+                const id = get(this.props, "match.params.did");
+                if (id) {
+                    this.props.reset();
+                    this.props.loadResource(id);
+                } else {
+                    this.props.reset();
+                    this.props.checkLoggedUser();
+                }
+            });
+        }, this.state.pluginsAreLoaded);
+    }
+
     render() {
         return (<Page
             id={this.props.name}
@@ -79,6 +88,7 @@ class DashboardPage extends React.Component {
             plugins={this.props.plugins}
             params={this.props.match.params}
             loaderComponent={this.props.loaderComponent}
+            onPluginsLoaded={this.onPluginsLoaded}
         />);
     }
 }

diff --git a/web/client/product/pages/GeoStory.jsx b/web/client/product/pages/GeoStory.jsx
@@ -21,6 +21,7 @@ import {
 import { geostoryIdSelector } from '../../selectors/geostory';
 import { isLoggedIn } from '../../selectors/security';
 import BorderLayout from '../../components/layout/BorderLayout';
+import {normalizeName} from "../../utils/PluginsUtils";
 
 /**
   * @name GeoStory
@@ -60,14 +61,8 @@ class GeoStoryPage extends React.Component {
         updateUrlOnScroll: () => {}
     };
 
-    UNSAFE_componentWillMount() {
-        const id = get(this.props, "match.params.gid");
-        const previousId = this.props.previousId && this.props.previousId + '';
-        this.props.reset();
-        this.setInitialMode(previousId !== id);
-        this.props.updateUrlOnScroll(true);
-        this.props.loadResource(id);
-    }
+    state = {};
+
     componentDidUpdate(oldProps) {
         const id = get(this.props, "match.params.gid");
         const oldId = get(oldProps, "match.params.gid");
@@ -83,6 +78,22 @@ class GeoStoryPage extends React.Component {
     componentWillUnmount() {
         this.props.reset();
     }
+
+    onPluginsLoaded = (loadedPlugins) => {
+        const pluginKeys = typeof loadedPlugins === 'object' ? Object.keys(loadedPlugins) : loadedPlugins;
+        const plugins = ['GeoStory'];
+        if (plugins.every(elem => pluginKeys.includes(normalizeName(elem))) && !this.state.pluginsAreLoaded) {
+            this.setState({pluginsAreLoaded: true}, () => {
+                const id = get(this.props, "match.params.gid");
+                const previousId = this.props.previousId && this.props.previousId + '';
+                this.props.reset();
+                this.setInitialMode(previousId !== id);
+                this.props.updateUrlOnScroll(true);
+                this.props.loadResource(id);
+            });
+        }
+    }
+
     render() {
         return (<Page
             id={this.props.name}
@@ -91,6 +102,7 @@ class GeoStoryPage extends React.Component {
             plugins={this.props.plugins}
             params={this.props.match.params}
             loaderComponent={this.props.loaderComponent}
+            onPluginsLoaded={this.onPluginsLoaded}
         />);
     }
 

diff --git a/web/client/product/pages/Maps.jsx b/web/client/product/pages/Maps.jsx
@@ -16,12 +16,12 @@ import {resetControls} from '../../actions/controls';
 import {loadMaps} from '../../actions/maps';
 import Page from '../../containers/Page';
 import ConfigUtils from '../../utils/ConfigUtils';
+import {normalizeName} from "../../utils/PluginsUtils";
 
 import("../assets/css/maps.css");
 
 const urlQuery = url.parse(window.location.href, true).query;
 
-
 /**
   * @name Maps
   * @memberof pages
@@ -45,6 +45,8 @@ class MapsPage extends React.Component {
         reset: () => {}
     };
 
+    state = {};
+
     UNSAFE_componentWillMount() {
         if (this.props.match.params.mapType && this.props.match.params.mapId) {
             if (this.props.mode === 'mobile') {
@@ -54,10 +56,20 @@ class MapsPage extends React.Component {
         }
     }
 
+    onPluginsLoaded = (loadedPlugins) => {
+        const pluginKeys = typeof loadedPlugins === 'object' ? Object.keys(loadedPlugins) : loadedPlugins;
+        const plugins = ['Dashboards', 'GeoStories', 'Maps'];
+        if (plugins.every(elem => pluginKeys.includes(normalizeName(elem))) && !this.state.pluginsAreLoaded) {
+            this.setState({pluginsAreLoaded: true}, () => {
+                this.props.loadMaps();
+            });
+        }
+    }
+
     render() {
         return (<Page
             id="maps"
-            onMount={this.props.loadMaps}
+            onPluginsLoaded={this.onPluginsLoaded}
             plugins={this.props.plugins}
             params={this.props.match.params}
             loaderComponent={this.props.loaderComponent}