From 07556e788eaee9a978ab5ccdd7a23624de2dd24e Mon Sep 17 00:00:00 2001
From: Pavel Jankoski <paveljankoski@hotmail.com>
Date: Tue, 28 Nov 2023 12:12:31 +0100
Subject: [PATCH] console: Refactor connect in collaborators table

---
 .../containers/collaborators-table/index.js   | 47 ++++++-------------
 1 file changed, 15 insertions(+), 32 deletions(-)

diff --git a/pkg/webui/account/containers/collaborators-table/index.js b/pkg/webui/account/containers/collaborators-table/index.js
index 2d28c12b5d..093ec54553 100644
--- a/pkg/webui/account/containers/collaborators-table/index.js
+++ b/pkg/webui/account/containers/collaborators-table/index.js
@@ -13,9 +13,8 @@
 // limitations under the License.
 
 import React from 'react'
-import { connect, useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { defineMessages, useIntl } from 'react-intl'
-import { bindActionCreators } from 'redux'
 import { createSelector } from 'reselect'
 
 import Icon from '@ttn-lw/components/icon'
@@ -29,10 +28,12 @@ import FetchTable from '@ttn-lw/containers/fetch-table'
 import Message from '@ttn-lw/lib/components/message'
 
 import { getCollaboratorId } from '@ttn-lw/lib/selectors/id'
-import PropTypes from '@ttn-lw/lib/prop-types'
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 import attachPromise from '@ttn-lw/lib/store/actions/attach-promise'
-import { getCollaboratorsList, deleteCollaborator } from '@ttn-lw/lib/store/actions/collaborators'
+import {
+  getCollaboratorsList,
+  deleteCollaborator as deleteCollaboratorAction,
+} from '@ttn-lw/lib/store/actions/collaborators'
 import {
   selectCollaborators,
   selectCollaboratorsTotalCount,
@@ -52,9 +53,17 @@ const m = defineMessages({
 })
 
 const CollaboratorsTable = props => {
-  const { clientId, currentUserId, handleDeleteCollaborator, ...rest } = props
+  const { ...rest } = props
   const dispatch = useDispatch()
   const intl = useIntl()
+  const clientId = useSelector(selectSelectedClientId)
+  const currentUserId = useSelector(selectUserId)
+
+  const handleDeleteCollaborator = React.useCallback(
+    (collaboratorID, isUsr) =>
+      dispatch(attachPromise(deleteCollaboratorAction('client', clientId, collaboratorID, isUsr))),
+    [clientId, dispatch],
+  )
 
   const deleteCollaborator = React.useCallback(
     async ids => {
@@ -194,30 +203,4 @@ const CollaboratorsTable = props => {
   )
 }
 
-CollaboratorsTable.propTypes = {
-  clientId: PropTypes.string.isRequired,
-  currentUserId: PropTypes.string.isRequired,
-  handleDeleteCollaborator: PropTypes.func.isRequired,
-}
-
-export default connect(
-  state => ({
-    clientId: selectSelectedClientId(state),
-    currentUserId: selectUserId(state),
-  }),
-  dispatch => ({
-    ...bindActionCreators(
-      {
-        handleDeleteCollaborator: attachPromise(deleteCollaborator),
-      },
-      dispatch,
-    ),
-  }),
-  (stateProps, dispatchProps, ownProps) => ({
-    ...stateProps,
-    ...dispatchProps,
-    ...ownProps,
-    handleDeleteCollaborator: (collaboratorID, isUsr) =>
-      dispatchProps.handleDeleteCollaborator('client', stateProps.clientId, collaboratorID, isUsr),
-  }),
-)(CollaboratorsTable)
+export default CollaboratorsTable