prevent re-render on state change

elastic · Aug 10, 2020 · bf176a9 · bf176a9
1 parent f90963c
commit bf176a9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 25 deletions.
diff --git a/x-pack/plugins/maps/public/routing/routes/maps_app/index.js b/x-pack/plugins/maps/public/routing/routes/maps_app/index.js
@@ -14,7 +14,7 @@ import {
  getRefreshConfig,
  getTimeFilters,
  hasDirtyState,
- hasUnsavedChanges,
+ getLayerListConfigOnly,
 } from '../../../selectors/map_selectors';
 import {
  replaceLayerList,
@@ -45,9 +45,7 @@ function mapStateToProps(state = {}) {
  flyoutDisplay: getFlyoutDisplay(state),
  refreshConfig: getRefreshConfig(state),
  filters: getFilters(state),
- hasUnsavedChanges: (savedMap, initialLayerListConfig) => {
- return hasUnsavedChanges(state, savedMap, initialLayerListConfig);
- },
+ layerListConfigOnly: getLayerListConfigOnly(state),
  query: getQuery(state),
  timeFilters: getTimeFilters(state),
  };

diff --git a/x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js b/x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js
@@ -103,7 +103,15 @@ export class MapsAppView extends React.Component {
  }
 
  _hasUnsavedChanges() {
- return this.props.hasUnsavedChanges(this.props.savedMap, this.state.initialLayerListConfig);
+ const savedLayerList = this.props.savedMap.getLayerList();
+ return !savedLayerList
+ ? !_.isEqual(this.props.layerListConfigOnly, this.state.initialLayerListConfig)
+ : // savedMap stores layerList as a JSON string using JSON.stringify.
+ // JSON.stringify removes undefined properties from objects.
+ // savedMap.getLayerList converts the JSON string back into Javascript array of objects.
+ // Need to perform the same process for layerListConfigOnly to compare apples to apples
+ // and avoid undefined properties in layerListConfigOnly triggering unsaved changes.
+ !_.isEqual(JSON.parse(JSON.stringify(this.props.layerListConfigOnly)), savedLayerList);
  }
 
  _setBreadcrumbs = () => {

diff --git a/x-pack/plugins/maps/public/selectors/map_selectors.ts b/x-pack/plugins/maps/public/selectors/map_selectors.ts
@@ -52,7 +52,6 @@ import { ISource } from '../classes/sources/source';
 import { ITMSSource } from '../classes/sources/tms_source';
 import { IVectorSource } from '../classes/sources/vector_source';
 import { ILayer } from '../classes/layers/layer';
-import { ISavedGisMap } from '../routing/bootstrap/services/saved_gis_map';
 
 function createLayerInstance(
  layerDescriptor: LayerDescriptor,
@@ -298,6 +297,10 @@ export const getLayerList = createSelector(
  }
 );
 
+export const getLayerListConfigOnly = createSelector(getLayerListRaw, (layerDescriptorList) => {
+ return copyPersistentState(layerDescriptorList);
+});
+
 export function getLayerById(layerId: string | null, state: MapStoreState): ILayer | undefined {
  return getLayerList(state).find((layer) => {
  return layerId === layer.getId();
@@ -417,22 +420,3 @@ export const areLayersLoaded = createSelector(
  return true;
  }
 );
-
-export function hasUnsavedChanges(
- state: MapStoreState,
- savedMap: ISavedGisMap,
- initialLayerListConfig: LayerDescriptor[]
-) {
- const layerListConfigOnly = copyPersistentState(getLayerListRaw(state));
-
- const savedLayerList = savedMap.getLayerList();
-
- return !savedLayerList
- ? !_.isEqual(layerListConfigOnly, initialLayerListConfig)
- : // savedMap stores layerList as a JSON string using JSON.stringify.
- // JSON.stringify removes undefined properties from objects.
- // savedMap.getLayerList converts the JSON string back into Javascript array of objects.
- // Need to perform the same process for layerListConfigOnly to compare apples to apples
- // and avoid undefined properties in layerListConfigOnly triggering unsaved changes.
- !_.isEqual(JSON.parse(JSON.stringify(layerListConfigOnly)), savedLayerList);
-}