From aaea42b9b850f377963931a9531ab367a572877b Mon Sep 17 00:00:00 2001 From: Alexander Date: Fri, 19 Aug 2022 16:49:00 +0300 Subject: [PATCH] Revert "Revert "Aligning pages delayed configuration loading with the fact that all module plugins are loaded at once."" This reverts commit 3a54f0fb01fb0428020f2e0bfe93de9c618346a7. --- .../components/plugins/enhancers/withModulePlugins.js | 8 ++++++-- web/client/product/pages/Context.jsx | 7 +++---- web/client/product/pages/ContextCreator.jsx | 7 +++---- web/client/product/pages/Dashboard.jsx | 7 +++---- web/client/product/pages/GeoStory.jsx | 7 ++----- web/client/product/pages/Maps.jsx | 7 ++----- 6 files changed, 19 insertions(+), 24 deletions(-) diff --git a/web/client/components/plugins/enhancers/withModulePlugins.js b/web/client/components/plugins/enhancers/withModulePlugins.js index 5d492b4f30..dbf367a9d4 100644 --- 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,7 @@ 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) => ({ onPluginsLoaded = () => {}, pluginsConfig, plugins = {}, loaderComponent = () => null, ...props }) => { const config = getPluginsConfigCallback({pluginsConfig, ...props}); const { plugins: loadedPlugins, pending } = useModulePlugins({ pluginsEntries: getPlugins(plugins, 'module'), @@ -37,6 +37,10 @@ const withModulePlugins = (getPluginsConfigCallback = getPluginsConfig) => (Comp const Loader = loaderComponent; + useEffect(() => { + if (!loading) onPluginsLoaded(true); + }, [loading]); + return loading ? : ; }; diff --git a/web/client/product/pages/Context.jsx b/web/client/product/pages/Context.jsx index b0e9803fa3..9c0f1cf3e0 100644 --- a/web/client/product/pages/Context.jsx +++ b/web/client/product/pages/Context.jsx @@ -17,7 +17,6 @@ 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({ @@ -117,14 +116,14 @@ class Context extends React.Component { ); } - onPluginsLoaded = (loadedPlugins) => { - onPluginsLoadedHandler(loadedPlugins, ['Context'], () => { + onPluginsLoaded = (pluginsAreLoaded) => { + if (pluginsAreLoaded && !this.state.pluginsAreLoaded) { this.setState({pluginsAreLoaded: true}, () => { const params = this.props.match.params; this.oldTitle = document.title; this.props.loadContext(params); }); - }, this.state.pluginsAreLoaded); + } } } diff --git a/web/client/product/pages/ContextCreator.jsx b/web/client/product/pages/ContextCreator.jsx index 4b6b1ef383..6778dbf0af 100644 --- a/web/client/product/pages/ContextCreator.jsx +++ b/web/client/product/pages/ContextCreator.jsx @@ -15,7 +15,6 @@ 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 @@ -58,14 +57,14 @@ class ContextCreator extends React.Component { this.props.reset(); } - onPluginsLoaded = (loadedPlugins) => { - onPluginsLoadedHandler(loadedPlugins, ['ContextCreator', 'Tutorial'], () => { + onPluginsLoaded = (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); }); - }, this.state.pluginsAreLoaded); + } } render() { diff --git a/web/client/product/pages/Dashboard.jsx b/web/client/product/pages/Dashboard.jsx index 65913148f3..56533a85d6 100644 --- a/web/client/product/pages/Dashboard.jsx +++ b/web/client/product/pages/Dashboard.jsx @@ -18,7 +18,6 @@ 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 @@ -65,8 +64,8 @@ class DashboardPage extends React.Component { this.props.reset(); } - onPluginsLoaded = (loadedPlugins) => { - onPluginsLoadedHandler(loadedPlugins, ['Dashboard'], () => { + onPluginsLoaded = (pluginsAreLoaded) => { + if (pluginsAreLoaded && !this.state.pluginsAreLoaded) { this.setState({pluginsAreLoaded: true}, () => { const id = get(this.props, "match.params.did"); if (id) { @@ -77,7 +76,7 @@ class DashboardPage extends React.Component { this.props.checkLoggedUser(); } }); - }, this.state.pluginsAreLoaded); + } } render() { diff --git a/web/client/product/pages/GeoStory.jsx b/web/client/product/pages/GeoStory.jsx index 287ab502b3..fac6d8fe4e 100644 --- a/web/client/product/pages/GeoStory.jsx +++ b/web/client/product/pages/GeoStory.jsx @@ -21,7 +21,6 @@ import { import { geostoryIdSelector } from '../../selectors/geostory'; import { isLoggedIn } from '../../selectors/security'; import BorderLayout from '../../components/layout/BorderLayout'; -import {normalizeName} from "../../utils/PluginsUtils"; /** * @name GeoStory @@ -79,10 +78,8 @@ class GeoStoryPage extends React.Component { 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) { + onPluginsLoaded = (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 + ''; diff --git a/web/client/product/pages/Maps.jsx b/web/client/product/pages/Maps.jsx index ccd1f6d8fa..ccc1398fd8 100644 --- a/web/client/product/pages/Maps.jsx +++ b/web/client/product/pages/Maps.jsx @@ -16,7 +16,6 @@ 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"); @@ -56,10 +55,8 @@ 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) { + onPluginsLoaded = (pluginsAreLoaded) => { + if (pluginsAreLoaded && !this.state.pluginsAreLoaded) { this.setState({pluginsAreLoaded: true}, () => { this.props.loadMaps(); });