[bot] Apply Grit pattern: react_to_hooks

superset-frontend/packages/superset-ui-demo/storybook/shared/components/Expandable.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 
-import React, { ReactNode } from 'react';
+
+import { useState, useCallback } from 'react';
 
 export type Props = {
   children: ReactNode;
@@ -28,18 +29,15 @@ type State = {
   open: boolean;
 };
 
-export default class Expandable extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { open: false };
-    this.handleToggle = this.handleToggle.bind(this);
-  }
+export default export const Expandable = (props: Props) => {
+
 
-  handleToggle() {
+    const [open, setOpen] = useState(false);
+
+    const handleToggleHandler = useCallback(() => {
     this.setState(({ open }) => ({ open: !open }));
-  }
+  }, []);
 
-  render() {
     const { open } = this.state;
     const { children, expandableWhat } = this.props;
 
@@ -56,6 +54,8 @@ export default class Expandable extends React.Component<Props, State> {
         <br />
         {open ? children : null}
       </div>
-    );
-  }
-}
+    ); 
+};
+
+
+

superset-frontend/packages/superset-ui-demo/storybook/shared/components/VerifyCORS.tsx

@@ -17,12 +17,13 @@
  * under the License.
  */
 
-import React, { ReactNode } from 'react';
+
+import React, { useState, useEffect, useCallback } from 'react';
 import {
-  SupersetClient,
-  Method,
-  makeApi,
-  SupersetApiError,
+    SupersetClient,
+    Method,
+    makeApi,
+    SupersetApiError,
 } from '@superset-ui/core';
 import ErrorMessage from './ErrorMessage';
 
@@ -52,14 +53,12 @@ export const renderError = (error: Error) => (
   </div>
 );
 
-export default class VerifyCORS extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { didVerify: false };
-    this.handleVerify = this.handleVerify.bind(this);
-  }
+export default export const VerifyCORS = (props: Props) => {
+
 
-  componentDidUpdate(prevProps: Props) {
+    const [didVerify, setDidVerify] = useState(false);
+
+    useEffect(() => {
     const { endpoint, host, postPayload, method } = this.props;
     if (
       (this.state.didVerify || this.state.error) &&
@@ -71,9 +70,8 @@ export default class VerifyCORS extends React.Component<Props, State> {
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({ didVerify: false, error: undefined });
     }
-  }
-
-  handleVerify() {
+  }, []);
+    const handleVerifyHandler = useCallback(() => {
     const { endpoint, host, postPayload, method } = this.props;
     SupersetClient.reset();
     SupersetClient.configure({
@@ -96,9 +94,8 @@ export default class VerifyCORS extends React.Component<Props, State> {
         this.setState({ didVerify: true, error: undefined, payload: result }),
       )
       .catch(error => this.setState({ error }));
-  }
+  }, []);
 
-  render() {
     const { didVerify, error, payload } = this.state;
     const { children } = this.props;
 
@@ -133,6 +130,8 @@ export default class VerifyCORS extends React.Component<Props, State> {
           </div>
         )}
       </div>
-    );
-  }
-}
+    ); 
+};
+
+
+

superset-frontend/plugins/legacy-plugin-chart-histogram/src/WithLegend.jsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 /* eslint-disable react/sort-prop-types, react/jsx-sort-default-props */
-import React from 'react';
+
+import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { ParentSize } from '@vx/responsive';
 
@@ -54,9 +55,13 @@
   position: 'relative',
 };
 
-class WithLegend extends React.Component {
-  getContainerDirection() {
-    const { position } = this.props;
+const WithLegend = (props) => {
+
+
+
+
+    const getContainerDirectionHandler = useCallback(() => {
+    const { position } = props;
     switch (position) {
       case 'left':
         return 'row';
@@ -68,10 +73,9 @@
       case 'top':
         return 'column';
     }
-  }
-
-  getLegendJustifyContent() {
-    const { legendJustifyContent, position } = this.props;
+  }, []);
+    const getLegendJustifyContentHandler = useCallback(() => {
+    const { legendJustifyContent, position } = props;
     if (legendJustifyContent) {
       return legendJustifyContent;
     }
@@ -86,18 +90,17 @@
       case 'top':
         return 'flex-end';
     }
-  }
+  }, []);
 
-  render() {
     const { className, width, height, position, renderChart, renderLegend } =
-      this.props;
+      props;
 
     const isHorizontal = position === 'left' || position === 'right';
 
     const style = {
       display: 'flex',
-      flexDirection: this.getContainerDirection(),
+      flexDirection: getContainerDirectionHandler(),
     };
     if (width) {
       style.width = width;
     }
@@ -116,7 +119,7 @@
     const legendStyle = {
       ...LEGEND_STYLE_BASE,
       flexDirection: legendDirection,
-      justifyContent: this.getLegendJustifyContent(),
+      justifyContent: getLegendJustifyContentHandler(),
     };
     const legendContainerStyle = {
       flexWrap: 'wrap',
@@ -143,9 +146,11 @@
           </ParentSize>
         </div>
       </div>
-    );
-  }
-}
+    ); 
+};
+
+
+
 
 WithLegend.propTypes = propTypes;
 WithLegend.defaultProps = defaultProps;

superset-frontend/plugins/legacy-plugin-chart-map-box/src/MapBox.jsx

@@ -18,7 +18,8 @@
  */
 /* eslint-disable react/jsx-sort-default-props, react/sort-prop-types */
 /* eslint-disable react/forbid-prop-types, react/require-default-props */
-import React from 'react';
+
+import { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import MapGL from 'react-map-gl';
 import ViewportMercator from 'viewport-mercator-project';
@@ -55,37 +56,26 @@ const defaultProps = {
   pointRadiusUnit: 'Pixels',
 };
 
-class MapBox extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const { width, height, bounds } = this.props;
-    // Get a viewport that fits the given bounds, which all marks to be clustered.
-    // Derive lat, lon and zoom from this viewport. This is only done on initial
-    // render as the bounds don't update as we pan/zoom in the current design.
+const MapBox = (props) => {
+const { width, height, bounds } = props;
     const mercator = new ViewportMercator({
       width,
       height,
     }).fitBounds(bounds);
     const { latitude, longitude, zoom } = mercator;
 
-    this.state = {
-      viewport: {
+    const [viewport, setViewport] = useState({
         longitude,
         latitude,
         zoom,
-      },
-    };
-    this.handleViewportChange = this.handleViewportChange.bind(this);
-  }
-
-  handleViewportChange(viewport) {
-    this.setState({ viewport });
-    const { onViewportChange } = this.props;
+      });
+
+    const handleViewportChangeHandler = useCallback((viewport) => {
+    setViewport(viewport);
+    const { onViewportChange } = props;
     onViewportChange(viewport);
-  }
+  }, [viewport]);
 
-  render() {
     const {
       width,
       height,
@@ -100,8 +90,8 @@ class MapBox extends React.Component {
       rgb,
       hasCustomMetric,
       bounds,
-    } = this.props;
-    const { viewport } = this.state;
+    } = props;
+
     const isDragging =
       viewport.isDragging === undefined ? false : viewport.isDragging;
 
@@ -126,7 +116,7 @@ class MapBox extends React.Component {
         width={width}
         height={height}
         mapboxApiAccessToken={mapboxApiKey}
-        onViewportChange={this.handleViewportChange}
+        onViewportChange={handleViewportChangeHandler}
         preserveDrawingBuffer
       >
         <ScatterPlotGlowOverlay
@@ -147,9 +137,11 @@ class MapBox extends React.Component {
           }}
         />
       </MapGL>
-    );
-  }
-}
+    ); 
+};
+
+
+
 
 MapBox.propTypes = propTypes;
 MapBox.defaultProps = defaultProps;