[GitHub] [superset] AAfghahi commented on a change in pull request #17970: refactor(explorechartheader): convert class to functional component

[GitBox <gi...@apache.org>]

AAfghahi commented on a change in pull request #17970:
URL: https://github.com/apache/superset/pull/17970#discussion_r780500662



##########
File path: superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
##########
@@ -169,53 +159,42 @@ export class ExploreChartHeader extends React.PureComponent {
         }
       })
       .catch(() => {});
-  }
+  };
 
-  getSliceName() {
-    const { sliceName, table_name: tableName } = this.props;
+  const getSliceName = () => {
     const title = sliceName || t('%s - untitled', tableName);
 
     return title;
-  }
+  };
 
-  postChartFormData() {
-    this.props.actions.postChartFormData(
-      this.props.form_data,
-      true,
-      this.props.timeout,
-      this.props.chart.id,
-      this.props.ownState,
-    );
-  }
+  const postChartFormData = () => {
+    actions.postChartFormData(formData, true, timeout, chart.id, ownState);
+  };
 
-  openPropertiesModal() {
-    this.setState({
-      isPropertiesModalOpen: true,
-    });
-  }
+  const openPropertiesModal = () => {
+    setIsPropertiesModalOpen(true);
+  };
 
-  closePropertiesModal() {
-    this.setState({
-      isPropertiesModalOpen: false,
-    });
-  }
+  const closePropertiesModal = () => {
+    setIsPropertiesModalOpen(false);
+  };
 
-  showReportModal() {
-    this.setState({ showingReportModal: true });
-  }
+  const showReportModal = () => {
+    setShowingReportModal(true);
+  };
 
-  hideReportModal() {
-    this.setState({ showingReportModal: false });
-  }
+  const hideReportModal = () => {
+    setShowingReportModal(false);
+  };
 
-  renderReportModal() {
-    const attachedReportExists = !!Object.keys(this.props.reports).length;
+  const renderReportModal = () => {
+    const attachedReportExists = !!Object.keys(reports).length;
     return attachedReportExists ? (
       <HeaderReportActionsDropdown
-        showReportModal={this.showReportModal}
-        hideReportModal={this.hideReportModal}
-        toggleActive={this.props.toggleActive}
-        deleteActiveReport={this.props.deleteActiveReport}
+        showReportModal={showReportModal}

Review comment:
       could you test something for me. Instead of having a `showReportModal` function would it look the same if we just invoke the function inside? Meaning
   
   `showReportModal={setShowingReportModal(true)}`
   
   and the same for hide report modal. Would it work the same? If so, let's get rid of the extra functions. 




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org