Refactor table component

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 = {

pkg/webui/components/key-value-map/entry.js

@@ -12,8 +12,7 @@
 // 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 { defineMessages } from 'react-intl'
 import classnames from 'classnames'
 
@@ -27,117 +26,102 @@ const m = defineMessages({
   deleteEntry: 'Delete entry',
 })
 
-class Entry extends React.Component {
-  static propTypes = {
-    readOnly: PropTypes.bool,
-  }
-  static defaultProps = { readOnly: false }
-
-  _getKeyInputName() {
-    const { name, index } = this.props
-
-    return `${name}[${index}].key`
-  }
-
-  _getValueInputName() {
-    const { name, index } = this.props
-
-    return `${name}[${index}].value`
-  }
-
-  @bind
-  handleRemoveButtonClicked(event) {
-    const { onRemoveButtonClick, index } = this.props
-
-    onRemoveButtonClick(index, event)
-  }
-
-  @bind
-  handleKeyChanged(newKey) {
-    const { onChange, index } = this.props
-
-    onChange(index, { key: newKey })
-  }
-
-  @bind
-  handleValueChanged(newValue) {
-    const { onChange, index } = this.props
-
-    onChange(index, { value: newValue })
-  }
-
-  @bind
-  handleBlur(event) {
-    const { name, onBlur, value } = this.props
-
-    const { relatedTarget } = event
-    const nextTarget = relatedTarget || {}
-
-    if (
-      nextTarget.name !== this._getKeyInputName() &&
-      nextTarget.name !== this._getValueInputName()
-    ) {
-      onBlur({
-        target: {
-          name,
-          value,
-        },
-      })
-    }
-  }
-
-  render() {
-    const {
-      keyPlaceholder,
-      valuePlaceholder,
-      value,
-      indexAsKey,
-      readOnly,
-      inputElement: InputElement,
-      additionalInputProps,
-    } = this.props
-
-    return (
-      <div className={style.entriesRow}>
-        {!indexAsKey && (
-          <InputElement
-            data-test-id={this._getKeyInputName()}
-            className={style.input}
-            name={this._getKeyInputName()}
-            placeholder={keyPlaceholder}
-            type="text"
-            onChange={this.handleKeyChanged}
-            onBlur={this.handleBlur}
-            value={value.key}
-            readOnly={readOnly}
-            code
-            {...additionalInputProps}
-          />
-        )}
+const Entry = ({
+  readOnly,
+  name,
+  value,
+  index,
+  onRemoveButtonClick,
+  onChange,
+  onBlur,
+  inputElement: InputElement,
+  indexAsKey,
+  valuePlaceholder,
+  keyPlaceholder,
+  additionalInputProps,
+}) => {
+  const _getKeyInputName = useCallback(() => `${name}[${index}].key`, [index, name])
+
+  const _getValueInputName = useCallback(() => `${name}[${index}].value`, [index, name])
+
+  const handleRemoveButtonClicked = useCallback(
+    event => {
+      onRemoveButtonClick(index, event)
+    },
+    [index, onRemoveButtonClick],
+  )
+
+  const handleKeyChanged = useCallback(
+    newKey => {
+      onChange(index, { key: newKey })
+    },
+    [index, onChange],
+  )
+
+  const handleValueChanged = useCallback(
+    newValue => {
+      onChange(index, { value: newValue })
+    },
+    [index, onChange],
+  )
+
+  const handleBlur = useCallback(
+    event => {
+      const { relatedTarget } = event
+      const nextTarget = relatedTarget || {}
+
+      if (nextTarget.name !== _getKeyInputName() && nextTarget.name !== _getValueInputName()) {
+        onBlur({
+          target: {
+            name,
+            value,
+          },
+        })
+      }
+    },
+    [onBlur, name, value, _getKeyInputName, _getValueInputName],
+  )
+
+  return (
+    <div className={style.entriesRow}>
+      {!indexAsKey && (
         <InputElement
-          data-test-id={this._getValueInputName()}
-          className={classnames(style.input, { [style.inputIndexAsKey]: indexAsKey })}
-          name={this._getValueInputName()}
-          placeholder={valuePlaceholder}
+          data-test-id={_getKeyInputName()}
+          className={style.input}
+          name={_getKeyInputName()}
+          placeholder={keyPlaceholder}
           type="text"
-          onChange={this.handleValueChanged}
-          onBlur={this.handleBlur}
-          value={indexAsKey ? value : value.value}
+          onChange={handleKeyChanged}
+          onBlur={handleBlur}
+          value={value.key}
           readOnly={readOnly}
           code
           {...additionalInputProps}
         />
-        <Button
-          type="button"
-          onClick={this.handleRemoveButtonClicked}
-          icon="delete"
-          title={m.deleteEntry}
-          disabled={readOnly}
-          danger
-        />
-      </div>
-    )
-  }
+      )}
+      <InputElement
+        data-test-id={_getValueInputName()}
+        className={classnames(style.input, { [style.inputIndexAsKey]: indexAsKey })}
+        name={_getValueInputName()}
+        placeholder={valuePlaceholder}
+        type="text"
+        onChange={handleValueChanged}
+        onBlur={handleBlur}
+        value={indexAsKey ? value : value.value}
+        readOnly={readOnly}
+        code
+        {...additionalInputProps}
+      />
+      <Button
+        type="button"
+        onClick={handleRemoveButtonClicked}
+        icon="delete"
+        title={m.deleteEntry}
+        disabled={readOnly}
+        danger
+      />
+    </div>
+  )
 }
 
 Entry.propTypes = {
@@ -150,6 +134,7 @@ Entry.propTypes = {
   onBlur: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   onRemoveButtonClick: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
   value: PropTypes.oneOfType([
     PropTypes.shape({
       key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -162,6 +147,7 @@ Entry.propTypes = {
 
 Entry.defaultProps = {
   value: undefined,
+  readOnly: false,
 }
 
 export default Entry