fix: Replace unsafe lifecycle methods (#285)

* fix: rename unsafe lifecycle methods * fix: use componentDidMount instead of componentWillMount * fix: refactor multi line chart to use safe lifecycle methods * style: proper camel case * style: nixing random commented line
apache · Nov 26, 2021 · bce43cb · bce43cb
1 parent f8cec4d
commit bce43cb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/...rset-ui-plugins/packages/superset-ui-legacy-plugin-chart-paired-t-test/src/TTestTable.jsx b/...rset-ui-plugins/packages/superset-ui-legacy-plugin-chart-paired-t-test/src/TTestTable.jsx
@@ -59,8 +59,7 @@ class TTestTable extends React.Component {
     };
   }
 
-  // eslint-disable-next-line react/no-deprecated
-  componentWillMount() {
+  componentDidMount() {
     const { control } = this.state;
     this.computeTTest(control); // initially populate table
   }

diff --git a/...rset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/LineMulti/LineMulti.jsx b/...rset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/LineMulti/LineMulti.jsx
@@ -20,6 +20,7 @@
 import d3 from 'd3';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isEqual } from 'lodash';
 import { getExploreLongUrl } from '../vendor/superset/exploreUtils';
 import ReactNVD3 from '../ReactNVD3';
 import transformProps from '../transformProps';
@@ -30,6 +31,8 @@ const propTypes = {
   annotationData: PropTypes.object,
   datasource: PropTypes.object,
   formData: PropTypes.object,
+  queryData: PropTypes.object,
+  rawFormData: PropTypes.object,
   hooks: PropTypes.shape({
     onAddFilter: PropTypes.func,
     onError: PropTypes.func,
@@ -58,16 +61,26 @@ function getJson(url) {
 class LineMulti extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { queryData: [] };
+    this.state = { queryData: false };
   }
 
   componentDidMount() {
     this.loadData(this.props);
   }
 
-  // eslint-disable-next-line react/no-deprecated
-  componentWillReceiveProps(nextProps) {
-    this.loadData(nextProps);
+  shouldComponentUpdate(nextProps) {
+    const { rawFormData } = this.props;
+    const { rawFormData: nextRawFormData } = nextProps;
+    const { queryData } = this.state;
+    if (!queryData || !isEqual(rawFormData, nextRawFormData)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  componentDidUpdate() {
+    this.loadData(this.props);
   }
 
   loadData(props) {
@@ -82,8 +95,6 @@ class LineMulti extends React.Component {
       timeRange,
     } = formData;
 
-    this.setState({ queryData: [] });
-
     // fetch data from all the charts
     const subslices = [
       ...slices.axis1.map(subslice => [1, subslice]),