geosolutions-it#8534 Making MAP_CONFIG_LOADED action triggered once a…

…ll plugins are loaded (geosolutions-it#8538)
alexander-fedorenko · Sep 5, 2022 · 854c32c · 854c32c
1 parent 0c73b17
commit 854c32c
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 49 deletions.
diff --git a/web/client/components/plugins/enhancers/withModulePlugins.js b/web/client/components/plugins/enhancers/withModulePlugins.js
@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import useModulePlugins from "../../../hooks/useModulePlugins";
 import {getPlugins} from "../../../utils/ModulePluginsUtils";
 
@@ -26,7 +26,8 @@ const getPluginsConfig = ({pluginsConfig: config, mode = 'desktop', defaultMode}
  * HOC to provide additional logic layer for module plugins loading and caching
  * @param {function(): string[]} getPluginsConfigCallback - callback to extract proper part of plugins configuration passed with `pluginsConfig` prop
  */
-const withModulePlugins = (getPluginsConfigCallback = getPluginsConfig) => (Component) => ({ pluginsConfig, plugins = {}, loaderComponent = () => null, ...props }) => {
+const withModulePlugins = (getPluginsConfigCallback = getPluginsConfig) => (Component) => ({ onLoaded = () => {
+}, pluginsConfig, plugins = {}, loaderComponent = () => null, ...props }) => {
     const config = getPluginsConfigCallback({pluginsConfig, ...props});
     const { plugins: loadedPlugins, pending } = useModulePlugins({
         pluginsEntries: getPlugins(plugins, 'module'),
@@ -37,6 +38,10 @@ const withModulePlugins = (getPluginsConfigCallback = getPluginsConfig) => (Comp
 
     const Loader = loaderComponent;
 
+    useEffect(() => {
+        if (!loading) onLoaded(true);
+    }, [loading]);
+
     return loading ? <Loader /> : <Component {...props} pluginsConfig={pluginsConfig} plugins={parsedPlugins} allPlugins={plugins} />;
 };
 

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,
+        onLoaded: PropTypes.func
     };
 
     static defaultProps = {
         mode: 'desktop',
         className: 'viewer',
-        loadMapConfig: () => {}
+        loadMapConfig: () => {},
+        onLoaded: () => {}
     };
 
     UNSAFE_componentWillMount() {
@@ -53,6 +55,7 @@ class MapViewer extends React.Component {
             plugins={this.props.plugins}
             params={this.props.params}
             loaderComponent={this.props.loaderComponent}
+            onLoaded={this.props.onLoaded}
         />);
     }
 }

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,
+        onLoaded: 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: () => {},
+        onLoaded: () => {},
         className: '',
         includeCommon: true
     };
@@ -69,6 +71,7 @@ class Page extends React.Component {
             plugins={this.props.plugins}
             params={this.props.params}
             loaderComponent={this.props.loaderComponent}
+            onLoaded={this.props.onLoaded}
         />);
     }
 }

diff --git a/web/client/product/components/viewer/MapViewerCmp.jsx b/web/client/product/components/viewer/MapViewerCmp.jsx
@@ -25,7 +25,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,
+        onLoaded: PropTypes.func
     };
     static defaultProps = {
         mode: 'desktop',
@@ -36,23 +37,32 @@ class MapViewerComponent extends React.Component {
         match: {
             params: {}
         },
-        loaderComponent: () => null
+        loaderComponent: () => null,
+        onLoaded: () => 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);
         }
     }
 
+    onLoaded = (pluginsAreLoaded) => {
+        if (pluginsAreLoaded && !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.onLoaded(true);
+            });
+        }
+    };
     render() {
         const WrappedContainer = this.props.wrappedContainer;
         return (<WrappedContainer
@@ -61,8 +71,10 @@ class MapViewerComponent extends React.Component {
             params={this.props.match.params}
             className={this.props.className}
             loaderComponent={this.props.loaderComponent}
+            onLoaded={this.onLoaded}
         />);
     }
+
     updateMap = (id, contextId) => {
         if (id && oldLocation !== this.props.location) {
             oldLocation = this.props.location;

diff --git a/web/client/product/components/viewer/__tests__/MapViewer-test.jsx b/web/client/product/components/viewer/__tests__/MapViewer-test.jsx
@@ -97,6 +97,8 @@ describe("Test the MapViewerCmp component", () => {
         const mapViewerPros = {
             match, location, onInit: () => { },
             wrappedContainer: MapViewerContainer,
+            pluginsConfig: [],
+            plugins: {},
             loadMapConfig: (cfgUrl, mapId) => {
                 expect(cfgUrl).toBe(`/rest/geostore/data/${count}`);
                 expect(mapId).toBe(count);
@@ -109,8 +111,10 @@ describe("Test the MapViewerCmp component", () => {
         // override location force re-render. (not sure check location is correct)
         renderMapViewerComp({ ...mapViewerPros, location: { ...location }});
         // render second time
-        const component = renderMapViewerComp({ ...mapViewerPros, match: match2, location: {...location}});
-        expect(component).toExist();
+        setTimeout(() => {
+            const component = renderMapViewerComp({ ...mapViewerPros, match: match2, location: {...location}});
+            expect(component).toExist();
+        }, 300);
     });
 
 });
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';
 
@@ -88,16 +88,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 +111,20 @@ class Context extends React.Component {
         return (
             <>
                 <ConnectedContextTheme />
-                <MapViewerCmp {...this.props} />
+                <MapViewerCmp {...this.props} onLoaded={this.onLoaded} />
             </>
         );
     }
+
+    onLoaded = (pluginsAreLoaded) => {
+        if (pluginsAreLoaded && !this.state.pluginsAreLoaded) {
+            this.setState({pluginsAreLoaded: true}, () => {
+                const params = this.props.match.params;
+                this.oldTitle = document.title;
+                this.props.loadContext(params);
+            });
+        }
+    }
 }
 
 export default compose(

diff --git a/web/client/product/pages/ContextCreator.jsx b/web/client/product/pages/ContextCreator.jsx
@@ -43,22 +43,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();
     }
+
+    onLoaded = (pluginsAreLoaded) => {
+        if (pluginsAreLoaded && !this.state.pluginsAreLoaded) {
+            this.setState({pluginsAreLoaded: true}, () => {
+                const contextId = get(this.props, "match.params.contextId");
+                this.props.reset();
+                this.props.loadContext(contextId);
+            });
+        }
+    }
+
     render() {
         return (<Page
             id="context-creator"
@@ -67,6 +75,7 @@ class ContextCreator extends React.Component {
             plugins={this.props.plugins}
             params={this.props.match.params}
             loaderComponent={this.props.loaderComponent}
+            onLoaded={this.onLoaded}
         />);
     }
 }

diff --git a/web/client/product/pages/Dashboard.jsx b/web/client/product/pages/Dashboard.jsx
@@ -48,19 +48,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 +63,22 @@ class DashboardPage extends React.Component {
     componentWillUnmount() {
         this.props.reset();
     }
+
+    onLoaded = (pluginsAreLoaded) => {
+        if (pluginsAreLoaded && !this.state.pluginsAreLoaded) {
+            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();
+                }
+            });
+        }
+    }
+
     render() {
         return (<Page
             id={this.props.name}
@@ -79,6 +87,7 @@ class DashboardPage extends React.Component {
             plugins={this.props.plugins}
             params={this.props.match.params}
             loaderComponent={this.props.loaderComponent}
+            onLoaded={this.onLoaded}
         />);
     }
 }

diff --git a/web/client/product/pages/GeoStory.jsx b/web/client/product/pages/GeoStory.jsx
@@ -60,14 +60,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 +77,20 @@ class GeoStoryPage extends React.Component {
     componentWillUnmount() {
         this.props.reset();
     }
+
+    onLoaded = (pluginsAreLoaded) => {
+        if (pluginsAreLoaded && !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 +99,7 @@ class GeoStoryPage extends React.Component {
             plugins={this.props.plugins}
             params={this.props.match.params}
             loaderComponent={this.props.loaderComponent}
+            onLoaded={this.onLoaded}
         />);
     }
 

diff --git a/web/client/product/pages/Maps.jsx b/web/client/product/pages/Maps.jsx
@@ -21,7 +21,6 @@ import("../assets/css/maps.css");
 
 const urlQuery = url.parse(window.location.href, true).query;
 
-
 /**
   * @name Maps
   * @memberof pages
@@ -45,6 +44,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 +55,18 @@ class MapsPage extends React.Component {
         }
     }
 
+    onLoaded = (pluginsAreLoaded) => {
+        if (pluginsAreLoaded && !this.state.pluginsAreLoaded) {
+            this.setState({pluginsAreLoaded: true}, () => {
+                this.props.loadMaps();
+            });
+        }
+    }
+
     render() {
         return (<Page
             id="maps"
-            onMount={this.props.loadMaps}
+            onLoaded={this.onLoaded}
             plugins={this.props.plugins}
             params={this.props.match.params}
             loaderComponent={this.props.loaderComponent}