updateed a bit

src/components/points/container/pointsContainer.js

@@ -2,7 +2,7 @@ import React, { Component, Alert } from 'react';
 import { connect } from 'react-redux';
 
 // Services and Actions
-import { getUser, getUserPoints } from '../../../providers/esteem/ePoint';
+import { getUser, getUserPoints, claim } from '../../../providers/esteem/ePoint';
 
 // Constant
 import POINTS from '../../../constants/options/points';
@@ -22,12 +22,19 @@ class PointsContainer extends Component {
       userPoints: {},
       userActivities: {},
       refreshing: false,
+      isClaiming: false,
     };
   }
 
   // Component Life Cycle Functions
   componentDidMount() {
     this._fetchuserPointActivities();
+
+    this.fetchInterval = setInterval(this._fetchuserPointActivities, 360000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.fetchInterval);
   }
 
   // Component Functions
@@ -65,9 +72,24 @@ class PointsContainer extends Component {
     this.setState({ refreshing: false });
   };
 
+  _claimPoints = async () => {
+    const { username } = this.props;
+    this.setState({ isClaiming: true });
+
+    await claim(username)
+      .then(() => {
+        this._fetchuserPointActivities();
+      })
+      .catch((err) => {
+        Alert.alert(err);
+      });
+
+    this.setState({ isClaiming: false });
+  }
+
   render() {
     const {
-      userPoints, userActivities, isDarkTheme, refreshing,
+      userPoints, userActivities, isDarkTheme, refreshing, isClaiming,
     } = this.state;
 
     return (
@@ -77,6 +99,8 @@ class PointsContainer extends Component {
         isDarkTheme={isDarkTheme}
         fetchUserActivity={this._fetchuserPointActivities}
         refreshing={refreshing}
+        isClaiming={isClaiming}
+        claimPoints={this._claimPoints}
       />
     );
   }

src/components/points/view/pointsStyles.js

@@ -66,4 +66,28 @@ export default EStyleSheet.create({
   listWrapper: {
     marginHorizontal: 8,
   },
+  mainButton: {
+    marginVertical: 8,
+    alignSelf: 'center',
+    paddingHorizontal: 24,
+  },
+  mainButtonWrapper: {
+    flexDirection: 'row',
+  },
+  unclaimedText: {
+    color: '$primaryBackgroundColor',
+    fontSize: 14,
+    fontWeight: 'bold',
+    alignSelf: 'center',
+  },
+  mainIconWrapper: {
+    backgroundColor: '$primaryBackgroundColor',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    alignItems: 'center',
+    borderRadius: 20,
+    marginLeft: 20,
+    width: 24,
+    height: 24,
+  },
 });

src/components/points/view/pointsView.js

@@ -7,6 +7,8 @@ import { injectIntl } from 'react-intl';
 // Components
 import { LineBreak, WalletLineItem } from '../../basicUIElements';
 import { IconButton } from '../../iconButton';
+import { Icon } from '../../icon';
+import { MainButton } from '../../mainButton';
 
 // Utils
 import { getTimeFromNow } from '../../../utils/time';
@@ -46,7 +48,7 @@ class PointsView extends Component {
 
    render() {
      const {
-       userActivities, userPoints, intl,
+       userActivities, userPoints, intl, isClaiming, claimPoints,
      } = this.props;
      const isActiveIcon = true;
 
@@ -59,6 +61,25 @@ class PointsView extends Component {
            <Text style={styles.pointText}>{userPoints.points}</Text>
            <Text style={styles.subText}>eSteem Points</Text>
 
+           {userPoints.unclaimed_points > 0
+           && (
+           <MainButton
+             isLoading={isClaiming}
+             isDisable={isClaiming}
+             style={styles.mainButton}
+             height={50}
+             onPress={() => claimPoints()}
+           >
+             <View style={styles.mainButtonWrapper}>
+               <Text style={styles.unclaimedText}>{userPoints.unclaimed_points}</Text>
+               <View style={styles.mainIconWrapper}>
+                 <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
+               </View>
+             </View>
+           </MainButton>
+           )
+          }
+
            <View style={styles.iconsWrapper}>
              <View styles={styles.iconWrapper}>
                <View style={styles.iconWrapper}>