console: Refactor connect in gateway events

pkg/webui/console/containers/gateway-events/index.js

@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useMemo } from 'react'
-import { connect } from 'react-redux'
+import React, { useCallback, useMemo } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 
 import Events from '@console/components/events'
 
@@ -38,17 +38,36 @@ import {
 } from '@console/store/selectors/gateways'
 
 const GatewayEvents = props => {
-  const {
-    gtwId,
-    events,
-    widget,
-    paused,
-    onPauseToggle,
-    onClear,
-    onFilterChange,
-    truncated,
-    filter,
-  } = props
+  const { gtwId, widget } = props
+
+  const events = useSelector(state => selectGatewayEvents(state, gtwId))
+  const paused = useSelector(state => selectGatewayEventsPaused(state, gtwId))
+  const truncated = useSelector(state => selectGatewayEventsTruncated(state, gtwId))
+  const filter = useSelector(state => selectGatewayEventsFilter(state, gtwId))
+
+  const dispatch = useDispatch()
+
+  const onClear = useCallback(() => {
+    dispatch(clearGatewayEventsStream(gtwId))
+  }, [dispatch, gtwId])
+
+  const onPauseToggle = useCallback(
+    paused => {
+      if (paused) {
+        dispatch(resumeGatewayEventsStream(gtwId))
+        return
+      }
+      dispatch(pauseGatewayEventsStream(gtwId))
+    },
+    [dispatch, gtwId],
+  )
+
+  const onFilterChange = useCallback(
+    filterId => {
+      dispatch(setGatewayEventsFilter(gtwId, filterId))
+    },
+    [dispatch, gtwId],
+  )
 
   const content = useMemo(() => {
     if (widget) {
@@ -81,40 +100,12 @@ const GatewayEvents = props => {
 }
 
 GatewayEvents.propTypes = {
-  events: PropTypes.events,
-  filter: PropTypes.eventFilter,
   gtwId: PropTypes.string.isRequired,
-  onClear: PropTypes.func.isRequired,
-  onFilterChange: PropTypes.func.isRequired,
-  onPauseToggle: PropTypes.func.isRequired,
-  paused: PropTypes.bool.isRequired,
-  truncated: PropTypes.bool.isRequired,
   widget: PropTypes.bool,
 }
 
 GatewayEvents.defaultProps = {
   widget: false,
-  events: [],
-  filter: undefined,
 }
 
-export default connect(
-  (state, props) => {
-    const { gtwId } = props
-
-    return {
-      events: selectGatewayEvents(state, gtwId),
-      paused: selectGatewayEventsPaused(state, gtwId),
-      truncated: selectGatewayEventsTruncated(state, gtwId),
-      filter: selectGatewayEventsFilter(state, gtwId),
-    }
-  },
-  (dispatch, ownProps) => ({
-    onClear: () => dispatch(clearGatewayEventsStream(ownProps.gtwId)),
-    onPauseToggle: paused =>
-      paused
-        ? dispatch(resumeGatewayEventsStream(ownProps.gtwId))
-        : dispatch(pauseGatewayEventsStream(ownProps.gtwId)),
-    onFilterChange: filterId => dispatch(setGatewayEventsFilter(ownProps.gtwId, filterId)),
-  }),
-)(GatewayEvents)
+export default GatewayEvents