Fix: Move beneficiaries to func component

src/components/Beneficiaries/BeneficiariesActivateModal.tsx

@@ -1,217 +1,145 @@
 import classnames from 'classnames';
 import * as React from 'react';
 import { Button } from 'react-bootstrap';
-import { injectIntl } from 'react-intl';
-import { connect, MapDispatchToProps } from 'react-redux';
+import { useIntl } from 'react-intl';
+import { useDispatch, useSelector} from 'react-redux';
 import { LetterIcon } from '../../assets/images/LetterIcon';
-import { CustomInput } from '../../components';
-import { IntlProps } from '../../index';
 import { Modal } from '../../mobile/components/Modal';
 import {
     beneficiariesActivate,
     Beneficiary,
-    RootState,
     selectBeneficiariesActivateError,
-    selectBeneficiariesActivateSuccess, selectMobileDeviceState,
+    selectBeneficiariesActivateSuccess,
+    selectMobileDeviceState,
 } from '../../modules';
-import { CommonError } from '../../modules/types';
+import { CustomInput } from '../CustomInput';
 
-interface ReduxProps {
-    beneficiariesActivateError?: CommonError;
-    beneficiariesActivateSuccess: boolean;
-    isMobileDevice: boolean;
-}
-
-interface DispatchProps {
-    activateAddress: typeof beneficiariesActivate;
-}
 
-interface OwnProps {
+interface Props {
     beneficiariesAddData: Beneficiary;
     handleToggleConfirmationModal: () => void;
 }
 
-interface State {
-    confirmationModalCode: string;
-    confirmationModalCodeFocused: boolean;
-}
-
-type Props = ReduxProps & DispatchProps & OwnProps & IntlProps;
-
-const defaultState = {
-    confirmationModalCode: '',
-    confirmationModalCodeFocused: false,
-};
-
-class BeneficiariesActivateModalComponent extends React.Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            ...defaultState,
-        };
-    }
-
-    public componentWillReceiveProps(nextProps: Props) {
-        const {
-            beneficiariesActivateError,
-            beneficiariesActivateSuccess,
-        } = this.props;
-
-        if ((nextProps.beneficiariesActivateError && !beneficiariesActivateError) ||
-            (nextProps.beneficiariesActivateSuccess && !beneficiariesActivateSuccess)) {
-            this.props.handleToggleConfirmationModal();
-            this.handleClearModalsInputs();
-        }
-    }
-
+export const BeneficiariesActivateModal: React.FC<Props> = (props: Props) => {
+    const [confirmationModalCode, setConfirmationModalCode] = React.useState('');
 
-    public render() {
-        return (
-            this.props.isMobileDevice ?
-                <Modal
-                    onClose={this.props.handleToggleConfirmationModal}
-                    title={this.props.intl.formatMessage({ id: 'page.mobile.wallet.withdraw.modal.new.account' })}
-                    isOpen>
-                    {this.renderContent()}
-                </Modal> : this.renderContent()
-        );
-    }
+    const beneficiariesActivateError = useSelector(selectBeneficiariesActivateError);
+    const beneficiariesActivateSuccess = useSelector(selectBeneficiariesActivateSuccess);
+    const isMobileDevice = useSelector(selectMobileDeviceState);
 
-    private renderContent = () => {
-        const className = classnames('beneficiaries-confirmation-modal', {
-            'cr-modal': !this.props.isMobileDevice,
-        });
+    const dispatch = useDispatch();
+    const { formatMessage } = useIntl();
+    const { handleToggleConfirmationModal, beneficiariesAddData } = props;
 
-        return (
-            <div className={className}>
-                <div className="cr-email-form">
-                    {this.renderConfirmationModalHeader()}
-                    {this.renderConfirmationModalBody()}
-                </div>
-            </div>
-        );
-    };
+    const handleSubmitConfirmationModal = React.useCallback(() => {
+        if (beneficiariesAddData) {
+            const payload = {
+                pin: confirmationModalCode,
+                id: beneficiariesAddData.id,
+            };
 
-    private renderConfirmationModalHeader = () => {
-        return (
-            <div className="cr-email-form__options-group">
-                <div className="cr-email-form__option">
-                    <div className="cr-email-form__option-inner">
-                        {this.translate('page.body.wallets.beneficiaries.confirmationModal.header')}
-                        <span
-                            className="pg-profile-page__close pg-profile-page__pull-right"
-                            onClick={this.handleClickToggleConfirmationModal(true)}
-                        />
-                    </div>
-                </div>
-            </div>
-        );
-    };
+            dispatch(beneficiariesActivate(payload));
+        }
+    }, [confirmationModalCode, dispatch, beneficiariesAddData]);
 
-    private renderConfirmationModalBodyItem = (field: string, optional?: boolean) => {
+    const renderConfirmationModalBodyItem = React.useCallback((field: string, optional?: boolean) => {
         const focusedClass = classnames('cr-email-form__group', {
-            'cr-email-form__group--focused': this.state[`${field}Focused`],
             'cr-email-form__group--optional': optional,
         });
 
         return (
             <div key={field} className={focusedClass}>
                 <CustomInput
                     type="text"
-                    label={this.translate(`page.body.wallets.beneficiaries.confirmationModal.body.${field}`)}
-                    placeholder={this.translate(`page.body.wallets.beneficiaries.confirmationModal.body.${field}`)}
+                    label={formatMessage({ id: `page.body.wallets.beneficiaries.confirmationModal.body.${field}` })}
+                    placeholder={formatMessage({ id: `page.body.wallets.beneficiaries.confirmationModal.body.${field}`})}
                     defaultLabel={field}
-                    handleChangeInput={value => this.handleChangeFieldValue(field, value)}
-                    inputValue={this.state[field]}
-                    handleFocusInput={() => this.handleChangeFieldFocus(`${field}Focused`)}
+                    handleChangeInput={setConfirmationModalCode}
+                    inputValue={confirmationModalCode}
                     classNameLabel="cr-email-form__label"
                     classNameInput="cr-email-form__input"
                     autoFocus={true}
                 />
             </div>
         );
-    };
-
-    private renderConfirmationModalBody = () => {
-        const { confirmationModalCode } = this.state;
+    }, [confirmationModalCode, formatMessage]);
 
+    const renderConfirmationModalBody = React.useCallback(() => {
         const isDisabled = !confirmationModalCode;
 
         return (
             <div className="cr-email-form__form-content">
                 <div className="confirmation-modal__content">
                     <LetterIcon className="confirmation-modal__content__icon" />
-                    <span className="confirmation-modal__content__text">{this.translate('page.body.wallets.beneficiaries.confirmationModal.body.text')}</span>
+                    <span className="confirmation-modal__content__text">{formatMessage({ id: 'page.body.wallets.beneficiaries.confirmationModal.body.text' })}</span>
                 </div>
-                {this.renderConfirmationModalBodyItem('confirmationModalCode')}
+                {renderConfirmationModalBodyItem('confirmationModalCode')}
                 <div className="cr-email-form__button-wrapper">
                     <Button
                         disabled={isDisabled}
-                        onClick={this.handleSubmitConfirmationModal}
+                        onClick={handleSubmitConfirmationModal}
                         size="lg"
                         variant="primary"
                     >
-                        {this.translate('page.body.wallets.beneficiaries.confirmationModal.body.button')}
+                        {formatMessage({ id: 'page.body.wallets.beneficiaries.confirmationModal.body.button' })}
                     </Button>
                 </div>
             </div>
         );
-    };
-
-    private handleChangeFieldValue = (key: string, value: string) => {
-        // @ts-ignore
-        this.setState({
-            [key]: value,
-        });
-    };
-
-    private handleChangeFieldFocus = (key: string) => {
-        // @ts-ignore
-        this.setState(prev => ({
-            [key]: !prev[key],
-        }));
-    };
-
-    private handleClearModalsInputs = () => {
-        this.setState({
-            ...defaultState,
-        });
-    };
-
-    private handleSubmitConfirmationModal = () => {
-        const { beneficiariesAddData } = this.props;
-        const { confirmationModalCode } = this.state;
-
-        if (beneficiariesAddData) {
-            const payload = {
-                pin: confirmationModalCode,
-                id: beneficiariesAddData.id,
-            };
-
-            this.props.activateAddress(payload);
-        }
-    };
+    }, [confirmationModalCode, formatMessage, handleSubmitConfirmationModal, renderConfirmationModalBodyItem]);
 
-    private handleClickToggleConfirmationModal = (clear?: boolean) => () => {
-        this.props.handleToggleConfirmationModal();
+    const handleClickToggleConfirmationModal = React.useCallback((clear?: boolean) => () => {
+        handleToggleConfirmationModal();
 
         if (clear) {
-            this.handleClearModalsInputs();
+            setConfirmationModalCode('');
         }
-    };
+    }, [handleToggleConfirmationModal]);
 
-    private translate = (id: string) => this.props.intl.formatMessage({ id });
-}
-
-const mapStateToProps = (state: RootState): ReduxProps => ({
-    beneficiariesActivateError: selectBeneficiariesActivateError(state),
-    beneficiariesActivateSuccess: selectBeneficiariesActivateSuccess(state),
-    isMobileDevice: selectMobileDeviceState(state),
-});
+    const renderConfirmationModalHeader = React.useCallback(() => {
+        return (
+            <div className="cr-email-form__options-group">
+                <div className="cr-email-form__option">
+                    <div className="cr-email-form__option-inner">
+                        {formatMessage({ id: 'page.body.wallets.beneficiaries.confirmationModal.header' })}
+                        <span
+                            className="pg-profile-page__close pg-profile-page__pull-right"
+                            onClick={handleClickToggleConfirmationModal(true)}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }, [formatMessage, handleClickToggleConfirmationModal]);
 
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = dispatch => ({
-    activateAddress: payload => dispatch(beneficiariesActivate(payload)),
-});
+    const renderContent = React.useCallback(() => {
+        const className = classnames('beneficiaries-confirmation-modal', {
+            'cr-modal': !isMobileDevice,
+        });
 
-// tslint:disable-next-line:no-any
-export const BeneficiariesActivateModal = injectIntl(connect(mapStateToProps, mapDispatchToProps)(BeneficiariesActivateModalComponent) as any) as any;
+        return (
+            <div className={className}>
+                <div className="cr-email-form">
+                    {renderConfirmationModalHeader()}
+                    {renderConfirmationModalBody()}
+                </div>
+            </div>
+        );
+    }, [isMobileDevice, renderConfirmationModalBody, renderConfirmationModalHeader]);
+
+    React.useEffect(() => {
+        handleToggleConfirmationModal();
+        setConfirmationModalCode('');
+    }, [beneficiariesActivateSuccess, handleToggleConfirmationModal, beneficiariesActivateError]);
+
+
+    return (
+        isMobileDevice ?
+            <Modal
+                onClose={props.handleToggleConfirmationModal}
+                title={formatMessage({ id: 'page.mobile.wallet.withdraw.modal.new.account' })}
+                isOpen>
+                {renderContent()}
+            </Modal> : renderContent()
+    );
+};