chore(settings): refactor linked cards (#6163)

* chore(settings): refactor linked cards

* chore(settings): address pr comments

packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/index.tsx

@@ -1,79 +1,64 @@
-import React, { PureComponent } from 'react'
-import { connect, ConnectedProps } from 'react-redux'
-import { bindActionCreators, Dispatch } from 'redux'
+import React, { useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { BSCardType, BSPaymentMethodsType, FiatType, RemoteDataType } from '@core/types'
+import { BSCardType, BSPaymentMethodsType } from '@core/types'
 import { actions, selectors } from 'data'
 import { ModalName } from 'data/modals/types'
-import { RootState } from 'data/rootReducer'
 import { UserDataType } from 'data/types'
+import { useRemote } from 'hooks'
 
 import { getData } from './selectors'
 import Loading from './template.loading'
 import Success from './template.success'
 
-class LinkedCards extends PureComponent<Props> {
-  componentDidMount() {
-    this.props.buySellActions.fetchCards(false)
-    this.props.buySellActions.fetchPaymentMethods(this.props.fiatCurrency)
-  }
+const LinkedCards = () => {
+  const dispatch = useDispatch()
 
-  handleCreditCardClick = () => {
-    this.props.buySellActions.showModal({
-      origin: 'SettingsGeneral',
-      step: 'DETERMINE_CARD_PROVIDER'
-    })
-    this.props.buySellActions.setFiatCurrency(this.props.fiatCurrency || 'USD')
-  }
+  const fiatCurrency = useSelector(selectors.core.settings.getCurrency) ?? 'USD'
 
-  proceedToUserVerification = () => {
-    this.props.modalActions.showModal(ModalName.COMPLETE_USER_PROFILE, {
-      origin: 'SettingsGeneral'
-    })
+  const handleCreditCardClick = () => {
+    dispatch(
+      actions.components.buySell.showModal({
+        origin: 'SettingsGeneral',
+        step: 'DETERMINE_CARD_PROVIDER'
+      })
+    )
+
+    dispatch(actions.components.buySell.setFiatCurrency(fiatCurrency))
   }
 
-  render() {
-    return this.props.data.cata({
-      Failure: () => null,
-      Loading: () => <Loading />,
-      NotAsked: () => null,
-      Success: (val) => {
-        const isUserVerified = val.userData.tiers && val.userData.tiers.current > 0
-        return (
-          <Success
-            {...val}
-            {...this.props}
-            handleCreditCardClick={
-              isUserVerified ? this.handleCreditCardClick : this.proceedToUserVerification
-            }
-          />
-        )
-      }
-    })
+  const proceedToUserVerification = () => {
+    dispatch(
+      actions.modals.showModal(ModalName.COMPLETE_USER_PROFILE, {
+        origin: 'SettingsGeneral'
+      })
+    )
   }
-}
 
-const mapStateToProps = (state: RootState): LinkStatePropsType => ({
-  data: getData(state),
-  fiatCurrency: selectors.core.settings.getCurrency(state).getOrElse('USD')
-})
+  useEffect(() => {
+    dispatch(actions.components.buySell.fetchCards(false))
+    dispatch(actions.components.buySell.fetchPaymentMethods(fiatCurrency))
+  }, [])
 
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  buySellActions: bindActionCreators(actions.components.buySell, dispatch),
-  modalActions: bindActionCreators(actions.modals, dispatch)
-})
+  const { data, hasError, isLoading, isNotAsked } = useRemote(getData)
 
-const connector = connect(mapStateToProps, mapDispatchToProps)
+  if (isLoading) return <Loading />
+  if (hasError || isNotAsked || !data) return null
+
+  const isUserVerified = data.userData.tiers?.current > 0
+
+  return (
+    <Success
+      {...(data as SuccessStateType)}
+      handleCreditCardClick={isUserVerified ? handleCreditCardClick : proceedToUserVerification}
+    />
+  )
+}
 
 export type SuccessStateType = {
   cards: Array<BSCardType>
   paymentMethods: BSPaymentMethodsType
   userData: UserDataType
 }
-type LinkStatePropsType = {
-  data: RemoteDataType<string, SuccessStateType>
-  fiatCurrency?: FiatType
-}
-export type Props = ConnectedProps<typeof connector>
 
-export default connector(LinkedCards)
+export default LinkedCards

packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx

@@ -1,5 +1,6 @@
-import React, { SyntheticEvent } from 'react'
+import React, { memo, SyntheticEvent } from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useDispatch } from 'react-redux'
 import { IconCreditCard, PaletteColors } from '@blockchain-com/constellation'
 import {
   CARD_TYPES,
@@ -9,18 +10,18 @@ import { InjectedFormProps, reduxForm } from 'redux-form'
 import styled from 'styled-components'
 
 import { fiatToString } from '@core/exchange/utils'
-import { BSPaymentTypes, FiatType } from '@core/types'
+import { BSPaymentTypes } from '@core/types'
 import { Coin } from '@core/utils'
 import { Box, Button, Text } from 'blockchain-info-components'
 import { Expanded, Flex } from 'components/Flex'
 import { StandardRow } from 'components/Rows'
 import { SettingComponent, SettingContainer, SettingSummary } from 'components/Setting'
-import { model } from 'data'
+import { actions, model } from 'data'
 import { convertBaseToStandard } from 'data/components/exchange/services'
 import { media } from 'services/styles'
 
 import { CustomSettingHeader, RemoveButton } from '../styles'
-import { Props as OwnProps, SuccessStateType } from '.'
+import { SuccessStateType } from '.'
 
 const { FORM_BS_CHECKOUT_CONFIRM } = model.components.buySell
 
@@ -42,14 +43,19 @@ const CardImg = styled.img`
   width: 24px;
 `
 
-const Success: React.FC<
-  InjectedFormProps<{}, Props & { fiatCurrency?: FiatType }> & Props & { fiatCurrency?: FiatType }
-> = (props) => {
-  const ccPaymentMethod = props.paymentMethods.methods.find(
-    (m) => m.type === BSPaymentTypes.PAYMENT_CARD
-  )
+const Success: React.FC<InjectedFormProps<{}, Props> & Props> = ({
+  cards,
+  handleCreditCardClick,
+  paymentMethods,
+  submitting
+}) => {
+  const dispatch = useDispatch()
+
+  const deleteCard = (cardID) => dispatch(actions.components.buySell.deleteCard(cardID))
 
-  const activeCards = props.cards.filter((card) => card.state === 'ACTIVE')
+  const ccPaymentMethod = paymentMethods.methods.find((m) => m.type === BSPaymentTypes.PAYMENT_CARD)
+
+  const activeCards = cards.filter((card) => card.state === 'ACTIVE')
 
   return (
     <CustomSettingContainer>
@@ -140,12 +146,12 @@ const Success: React.FC<
                   <RemoveButton
                     data-e2e='removeCard'
                     nature='light-red'
-                    disabled={props.submitting}
+                    disabled={submitting}
                     style={{ minWidth: 'auto' }}
                     // @ts-ignore
                     onClick={(e: SyntheticEvent) => {
                       e.stopPropagation()
-                      props.buySellActions.deleteCard(card.id)
+                      deleteCard(card.id)
                     }}
                   >
                     <FormattedMessage id='buttons.remove' defaultMessage='Remove' />
@@ -160,7 +166,7 @@ const Success: React.FC<
         <Button
           nature='primary'
           data-e2e='addCardFromSettings'
-          onClick={() => props.handleCreditCardClick()}
+          onClick={() => handleCreditCardClick()}
         >
           <FormattedMessage id='buttons.add_card' defaultMessage='Add Card' />
         </Button>
@@ -169,9 +175,8 @@ const Success: React.FC<
   )
 }
 
-type Props = OwnProps &
-  SuccessStateType & {
-    handleCreditCardClick: () => void
-  }
+type Props = SuccessStateType & {
+  handleCreditCardClick: () => void
+}
 
-export default reduxForm<{}, Props>({ form: FORM_BS_CHECKOUT_CONFIRM })(Success)
+export default memo(reduxForm<{}, Props>({ form: FORM_BS_CHECKOUT_CONFIRM })(Success))