console: Refactor error boundary component

pkg/webui/console/components/events/error-boundary.js

@@ -1,4 +1,4 @@
-// Copyright © 2020 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,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 
 import Icon from '@ttn-lw/components/icon'
 
@@ -24,32 +24,38 @@ import m from './messages'
 
 import style from './events.styl'
 
-class EventErrorBoundary extends React.Component {
-  state = { hasErrored: false, error: undefined, expanded: false }
+const EventErrorBoundary = ({ children }) => {
+  const [hasErrored, setHasErrored] = useState(false)
 
-  static getDerivedStateFromError() {
-    return { hasErrored: true }
-  }
-
-  render() {
-    const { hasErrored } = this.state
-    const { children } = this.props
+  const handleError = useCallback(() => {
+    setHasErrored(true)
+  }, [])
 
-    if (hasErrored) {
-      return (
-        <div className={style.cellError}>
-          <Icon icon="error" className={style.eventIcon} />
-          <Message content={m.errorOverviewEntry} />
-        </div>
-      )
-    }
-
-    return children
+  if (hasErrored) {
+    return (
+      <div className={style.cellError}>
+        <Icon icon="error" className={style.eventIcon} />
+        <Message content={m.errorOverviewEntry} />
+      </div>
+    )
   }
+
+  return (
+    <React.Fragment>
+      {React.Children.map(children, child => {
+        if (!child) {
+          return null
+        }
+        return React.cloneElement(child, {
+          onError: handleError,
+        })
+      })}
+    </React.Fragment>
+  )
 }
 
 EventErrorBoundary.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 }
 
 export default EventErrorBoundary