From a1fb9ebce97c3678b6de3e1ecdbea8311b363320 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 18 Aug 2022 07:15:25 +0300 Subject: [PATCH] Alternative approach of delayed dispatching of events that load maps, map, context, dashboard, geostory. --- web/client/containers/MapViewer.jsx | 7 ++-- web/client/containers/Page.jsx | 3 ++ .../components/viewer/MapViewerCmp.jsx | 31 +++++++++++++----- web/client/product/pages/Context.jsx | 25 ++++++++++----- web/client/product/pages/ContextCreator.jsx | 22 +++++++++---- web/client/product/pages/Dashboard.jsx | 32 ++++++++++++------- web/client/product/pages/GeoStory.jsx | 28 +++++++++++----- web/client/product/pages/Maps.jsx | 16 ++++++++-- 8 files changed, 119 insertions(+), 45 deletions(-) diff --git a/web/client/containers/MapViewer.jsx b/web/client/containers/MapViewer.jsx index ce0e8c0aee..534833551b 100644 --- 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 index 6c6a68398e..5beb8de015 100644 --- 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 index 4129a9d522..e678a5a2a7 100644 --- 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 (); } + 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 index d484bf1e2a..b0e9803fa3 100644 --- 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 ( <> - + ); } + + 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 index c408a87a26..4b6b1ef383 100644 --- 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,15 +44,12 @@ 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); } @@ -59,6 +57,17 @@ class ContextCreator extends React.Component { 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 (); } } diff --git a/web/client/product/pages/Dashboard.jsx b/web/client/product/pages/Dashboard.jsx index 3a7785d43f..65913148f3 100644 --- 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 (); } } diff --git a/web/client/product/pages/GeoStory.jsx b/web/client/product/pages/GeoStory.jsx index acec1013c2..287ab502b3 100644 --- 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 (); } diff --git a/web/client/product/pages/Maps.jsx b/web/client/product/pages/Maps.jsx index 1b68666b1c..ccd1f6d8fa 100644 --- 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 (