console: Refactor modal button

pkg/webui/components/button/modal-button/index.js

@@ -1,4 +1,4 @@
-// Copyright © 2019 The Things Network Foundation, The Things Industries B.V.
+// Copyright © 2023 The Things Network Foundation, The Things Industries B.V.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -12,73 +12,57 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react'
-import bind from 'autobind-decorator'
+import React, { useCallback } from 'react'
 
 import PortalledModal from '@ttn-lw/components/modal/portalled'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
 import Button from '..'
 
-/**
- * ModalButton is a button which needs a modal confirmation to complete the
- * action. It can be used as an easy way to get the users explicit confirmation
- * before doing an action, e.g. Deleting a resource.
- */
-class ModalButton extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      modalVisible: false,
-    }
-  }
-
-  @bind
-  handleClick() {
-    const { modalData } = this.props
+// ModalButton is a button which needs a modal confirmation to complete the
+// action. It can be used as an easy way to get the users explicit confirmation
+// before doing an action, e.g. Deleting a resource.
+const ModalButton = ({ modalData, message, onApprove, onCancel, ...rest }) => {
+  const [modalVisible, setModalVisible] = React.useState(false)
 
+  const handleClick = useCallback(() => {
     if (!modalData) {
       // No modal data likely means a faulty implementation, so since it's
       // likely best to not do anything in this case
       return
     }
 
-    this.setState({ modalVisible: true })
-  }
-
-  @bind
-  handleComplete(confirmed) {
-    const { onApprove, onCancel } = this.props
-
-    if (confirmed) {
-      onApprove()
-    } else {
-      onCancel()
-    }
-    this.setState({ modalVisible: false })
+    setModalVisible(true)
+  }, [modalData])
+
+  const handleComplete = useCallback(
+    confirmed => {
+      if (confirmed) {
+        onApprove()
+      } else {
+        onCancel()
+      }
+      setModalVisible(false)
+    },
+    [onCancel, onApprove],
+  )
+
+  const modalComposedData = {
+    approval: true,
+    danger: true,
+    buttonMessage: message,
+    title: message,
+    onComplete: handleComplete,
+    ...modalData,
   }
 
-  render() {
-    const { modalData, message, onApprove, onCancel, ...rest } = this.props
-
-    const modalComposedData = {
-      approval: true,
-      danger: true,
-      buttonMessage: message,
-      title: message,
-      onComplete: this.handleComplete,
-      ...modalData,
-    }
-
-    return (
-      <React.Fragment>
-        <PortalledModal visible={this.state.modalVisible} {...modalComposedData} />
-        <Button onClick={this.handleClick} message={message} {...rest} />
-      </React.Fragment>
-    )
-  }
+  return (
+    <React.Fragment>
+      <PortalledModal visible={modalVisible} {...modalComposedData} />
+      <Button onClick={handleClick} message={message} {...rest} />
+    </React.Fragment>
+  )
 }
 
 ModalButton.defaultProps = {