wallet container seperated and refactored

src/components/wallet/container/walletContainer.js

@@ -1,164 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { injectIntl } from 'react-intl';
-
-import { toastNotification } from '../../../redux/actions/uiAction';
-
-// Dsteem
-import { getAccount, claimRewardBalance } from '../../../providers/steem/dsteem';
-
-// Utils
-import { groomingWalletData } from '../../../utils/wallet';
-import parseToken from '../../../utils/parseToken';
-
-// Component
-import WalletView from '../view/walletView';
-
-/*
- *            Props Name               Description            Value
- * @props -->  currentAccountUsername   description here      Value Type Here
- @ props -->   selectedUsername
- @ props -->   walletData
- *
- */
-
-class WalletContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      walletData: null,
-      isClaiming: false,
-      isRefreshing: false,
-    };
-  }
-
-  componentDidMount() {
-    const { selectedUser } = this.props;
-
-    this._getWalletData(selectedUser);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { selectedUser } = this.props;
-
-    if (selectedUser.name !== nextProps.selectedUser.name) {
-      this._getWalletData(nextProps.selectedUser);
-    }
-  }
-
-  // Components functions
-
-  _getWalletData = async selectedUser => {
-    const { setEstimatedWalletValue, globalProps } = this.props;
-    const walletData = await groomingWalletData(selectedUser, globalProps);
-
-    this.setState({ walletData });
-    setEstimatedWalletValue(walletData.estimatedValue);
-  };
-
-  _isHasUnclaimedRewards = account =>
-    parseToken(account.reward_steem_balance) > 0 ||
-    parseToken(account.reward_sbd_balance) > 0 ||
-    parseToken(account.reward_vesting_steem) > 0;
-
-  _claimRewardBalance = async () => {
-    const { currentAccount, intl, pinCode, dispatch } = this.props;
-    const { isClaiming } = this.state;
-    let isHasUnclaimedRewards;
-
-    if (isClaiming) {
-      return;
-    }
-
-    await this.setState({ isClaiming: true });
-
-    getAccount(currentAccount.name)
-      .then(account => {
-        isHasUnclaimedRewards = this._isHasUnclaimedRewards(account[0]);
-        if (isHasUnclaimedRewards) {
-          const {
-            reward_steem_balance: steemBal,
-            reward_sbd_balance: sbdBal,
-            reward_vesting_balance: vestingBal,
-          } = account[0];
-          return claimRewardBalance(currentAccount, pinCode, steemBal, sbdBal, vestingBal);
-        }
-        this.setState({ isClaiming: false });
-      })
-      .then(() => getAccount(currentAccount.name))
-      .then(account => {
-        this._getWalletData(account && account[0]);
-        if (isHasUnclaimedRewards) {
-          dispatch(
-            toastNotification(
-              intl.formatMessage({
-                id: 'alert.claim_reward_balance_ok',
-              }),
-            ),
-          );
-        }
-      })
-      .then(account => {
-        this._getWalletData(account && account[0]);
-        this.setState({ isClaiming: false });
-      })
-      .catch(() => {
-        this.setState({ isClaiming: false });
-
-        dispatch(
-          toastNotification(
-            intl.formatMessage({
-              id: 'alert.fail',
-            }),
-          ),
-        );
-      });
-  };
-
-  _handleOnWalletRefresh = () => {
-    const { selectedUser, dispatch, intl } = this.props;
-    this.setState({ isRefreshing: true });
-
-    getAccount(selectedUser.name)
-      .then(account => {
-        this._getWalletData(account && account[0]);
-        this.setState({ isRefreshing: false });
-      })
-      .catch(() => {
-        dispatch(
-          toastNotification(
-            intl.formatMessage({
-              id: 'alert.fail',
-            }),
-          ),
-        );
-        this.setState({ isRefreshing: false });
-      });
-  };
-
-  render() {
-    const { currentAccount, selectedUser, handleOnScroll } = this.props;
-    const { walletData, isClaiming, isRefreshing } = this.state;
-
-    return (
-      <WalletView
-        currentAccountUsername={currentAccount.name}
-        selectedUsername={selectedUser && selectedUser.name}
-        walletData={walletData}
-        claimRewardBalance={this._claimRewardBalance}
-        isClaiming={isClaiming}
-        handleOnWalletRefresh={this._handleOnWalletRefresh}
-        isRefreshing={isRefreshing}
-        handleOnScroll={handleOnScroll}
-      />
-    );
-  }
-}
-
-const mapStateToProps = state => ({
-  currentAccount: state.account.currentAccount,
-  pinCode: state.application.pin,
-  globalProps: state.account.globalProps,
-});
-
-export default injectIntl(connect(mapStateToProps)(WalletContainer));

src/components/wallet/index.js

@@ -1,5 +1,4 @@
-import WalletView from './view/walletView';
+import Wallet from './view/walletView';
-import Wallet from './container/walletContainer';
 
-export { WalletView, Wallet };
+export { Wallet };
 export default Wallet;

src/components/wallet/view/walletView.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-wrap-multilines */
-import React, { PureComponent, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { View, Text, ScrollView, RefreshControl } from 'react-native';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 // Components
 import { Icon } from '../../icon';
@@ -10,27 +10,15 @@ import { CollapsibleCard } from '../../collapsibleCard';
 import { WalletDetails } from '../../walletDetails';
 import { Transaction } from '../../transaction';
 import { WalletDetailsPlaceHolder } from '../../basicUIElements';
-import { ThemeContainer } from '../../../containers';
+import { ThemeContainer, SteemWalletContainer } from '../../../containers';
 
 // Styles
 import styles from './walletStyles';
 
-class WalletView extends PureComponent {
+const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) => {
-  /* Props
+  const intl = useIntl();
-   * ------------------------------------------------
-   *   @prop { type }    name                - Description....
-   */
 
-  constructor(props) {
+  const _getUnclaimedText = (walletData, isPreview) => (
-    super(props);
-    this.state = {};
-  }
-
-  // Component Life Cycles
-
-  // Component Functions
-
-  _getUnclaimedText = (walletData, isPreview) => (
     <Text style={[isPreview ? styles.unclaimedTextPreview : styles.unclaimedText]}>
       {walletData.rewardSteemBalance
         ? `${Math.round(walletData.rewardSteemBalance * 1000) / 1000} STEEM`
@@ -44,20 +32,21 @@ class WalletView extends PureComponent {
     </Text>
   );
 
-  render() {
+  return (
-    const {
+    <SteemWalletContainer
+      setEstimatedWalletValue={setEstimatedWalletValue}
+      selectedUser={selectedUser}
+      handleOnScroll={handleOnScroll}
+    >
+      {({
         isClaiming,
         claimRewardBalance,
         currentAccountUsername,
         handleOnWalletRefresh,
-      intl,
+        refreshing,
-      isRefreshing,
         selectedUsername,
         walletData,
-      handleOnScroll,
+      }) => (
-    } = this.props;
-
-    return (
         <ThemeContainer>
           {isDarkTheme => (
             <ScrollView
@@ -65,7 +54,7 @@ class WalletView extends PureComponent {
               style={styles.scrollView}
               refreshControl={
                 <RefreshControl
-                refreshing={isRefreshing}
+                  refreshing={refreshing}
                   onRefresh={handleOnWalletRefresh}
                   progressBackgroundColor="#357CE6"
                   tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
@@ -99,14 +88,14 @@ class WalletView extends PureComponent {
                           onPress={() => claimRewardBalance()}
                         >
                           <View style={styles.mainButtonWrapper}>
-                          {this._getUnclaimedText(walletData)}
+                            {_getUnclaimedText(walletData)}
                             <View style={styles.mainIconWrapper}>
                               <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
                             </View>
                           </View>
                         </MainButton>
                       ) : (
-                      this._getUnclaimedText(walletData, true)
+                        _getUnclaimedText(walletData, true)
                       )}
                     </CollapsibleCard>
                   )}
@@ -129,8 +118,9 @@ class WalletView extends PureComponent {
             </ScrollView>
           )}
         </ThemeContainer>
+      )}
+    </SteemWalletContainer>
   );
-  }
+};
-}
 
-export default injectIntl(WalletView);
+export default WalletView;

src/containers/index.js

@@ -7,6 +7,7 @@ import RedeemContainer from './redeemContainer';
 import SpinGameContainer from './spinGameContainer';
 import TransferContainer from './transferContainer';
 import ThemeContainer from './themeContainer';
+import SteemWalletContainer from './steemWalletContainer';
 
 export {
   AccountContainer,
@@ -18,4 +19,5 @@ export {
   SpinGameContainer,
   TransferContainer,
   ThemeContainer,
+  SteemWalletContainer,
 };

src/containers/steemWalletContainer.js

@@ -0,0 +1,150 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { connect } from 'react-redux';
+import { useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import get from 'lodash/get';
+import { toastNotification } from '../redux/actions/uiAction';
+
+// Dsteem
+import { getAccount, claimRewardBalance } from '../providers/steem/dsteem';
+
+// Utils
+import { groomingWalletData } from '../utils/wallet';
+import parseToken from '../utils/parseToken';
+
+const WalletContainer = ({
+  children,
+  currentAccount,
+  globalProps,
+  handleOnScroll,
+  pinCode,
+  selectedUser,
+  setEstimatedWalletValue,
+}) => {
+  const [isClaiming, setIsClaiming] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [walletData, setWalletData] = useState(null);
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    _getWalletData(selectedUser);
+  }, [_getWalletData, selectedUser]);
+
+  useEffect(() => {
+    _getWalletData(selectedUser);
+  }, [_getWalletData, selectedUser]);
+
+  // Components functions
+
+  const _getWalletData = useCallback(
+    async _selectedUser => {
+      const _walletData = await groomingWalletData(_selectedUser, globalProps);
+
+      setWalletData(_walletData);
+      setEstimatedWalletValue(_walletData.estimatedValue);
+    },
+    [globalProps, setEstimatedWalletValue],
+  );
+
+  const _isHasUnclaimedRewards = account => {
+    return (
+      parseToken(get(account, 'reward_steem_balance')) > 0 ||
+      parseToken(get(account, 'reward_sbd_balance')) > 0 ||
+      parseToken(get(account, 'reward_vesting_steem')) > 0
+    );
+  };
+
+  const _claimRewardBalance = async () => {
+    let isHasUnclaimedRewards;
+
+    if (isClaiming) {
+      return;
+    }
+
+    await setIsClaiming(true);
+
+    getAccount(currentAccount.name)
+      .then(account => {
+        isHasUnclaimedRewards = _isHasUnclaimedRewards(account[0]);
+        if (isHasUnclaimedRewards) {
+          const {
+            reward_steem_balance: steemBal,
+            reward_sbd_balance: sbdBal,
+            reward_vesting_balance: vestingBal,
+          } = account[0];
+          return claimRewardBalance(currentAccount, pinCode, steemBal, sbdBal, vestingBal);
+        }
+        setIsClaiming(false);
+      })
+      .then(() => getAccount(currentAccount.name))
+      .then(account => {
+        _getWalletData(account && account[0]);
+        if (isHasUnclaimedRewards) {
+          dispatch(
+            toastNotification(
+              intl.formatMessage({
+                id: 'alert.claim_reward_balance_ok',
+              }),
+            ),
+          );
+        }
+      })
+      .then(account => {
+        _getWalletData(account && account[0]);
+        setIsClaiming(false);
+      })
+      .catch(() => {
+        setIsClaiming(false);
+
+        dispatch(
+          toastNotification(
+            intl.formatMessage({
+              id: 'alert.fail',
+            }),
+          ),
+        );
+      });
+  };
+
+  const _handleOnWalletRefresh = () => {
+    setRefreshing(true);
+
+    getAccount(selectedUser.name)
+      .then(account => {
+        _getWalletData(account && account[0]);
+        setRefreshing(false);
+      })
+      .catch(() => {
+        dispatch(
+          toastNotification(
+            intl.formatMessage({
+              id: 'alert.fail',
+            }),
+          ),
+        );
+        setRefreshing(false);
+      });
+  };
+
+  return (
+    children &&
+    children({
+      claimRewardBalance: _claimRewardBalance,
+      currentAccountUsername: currentAccount.name,
+      handleOnWalletRefresh: _handleOnWalletRefresh,
+      isClaiming: isClaiming,
+      refreshing: refreshing,
+      selectedUsername: get(selectedUser, 'name', ''),
+      walletData: walletData,
+    })
+  );
+};
+
+const mapStateToProps = state => ({
+  currentAccount: state.account.currentAccount,
+  pinCode: state.application.pin,
+  globalProps: state.account.globalProps,
+});
+
+export default connect(mapStateToProps)(WalletContainer);