Merge pull request #2097 from ecency/nt/follow-btn

Nt/follow btn

src/components/organisms/quickProfileModal/children/actionPanel.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import { IconButton } from '../../..';
-import { useAppSelector } from '../../../../hooks';
 import styles from './quickProfileStyles';
 
 interface ActionPanelProps {
     isFollowing:boolean,
     isFavourite:boolean,
     isMuted:boolean,
+    isLoading:boolean,
     onFollowPress:()=>void,
     onFavouritePress:()=>void
 }
@@ -17,6 +17,7 @@ export const ActionPanel = ({
   isFollowing, 
   isFavourite, 
   isMuted,
+  isLoading,
   onFavouritePress, 
   onFollowPress
 }: ActionPanelProps) => {
@@ -47,7 +48,7 @@ export const ActionPanel = ({
               name={followIcon}
               size={20}
               color={EStyleSheet.value('$iconColor')}
-              disabled={isFollowing}
+              disabled={isFollowing || isLoading}
               onPress={onFollowPress}
             />
           ) 

src/components/organisms/quickProfileModal/children/quickProfileContent.tsx

@@ -264,6 +264,7 @@ export const QuickProfileContent = ({
                     isFollowing={isFollowing}
                     isFavourite={isFavourite}
                     isMuted={isMuted}
+                    isLoading={isLoading}
                     onFavouritePress={_onFavouritePress}
                     onFollowPress={_onFollowPress}
                 />

src/components/profileSummary/view/profileSummaryView.js

@@ -112,6 +112,7 @@ class ProfileSummaryView extends PureComponent {
       percentVP,
       username,
     } = this.props;
+
     let dropdownOptions = [];
     const votingPowerHoursText = hoursVP && `• Full in ${hoursVP} hours`;
     const votingPowerText = `Voting power: ${percentVP}% ${votingPowerHoursText || ''}`;
@@ -236,6 +237,7 @@ class ProfileSummaryView extends PureComponent {
               <TouchableOpacity
                 style={styles.followActionWrapper}
                 onPress={() => handleFollowUnfollowUser(!isFollowing)}
+                disabled={isProfileLoading}
               >
                 <Text style={styles.actionText}>{followButtonText}</Text>
               </TouchableOpacity>

src/containers/profileContainer.js

@@ -192,14 +192,19 @@ class ProfileContainer extends Component {
         dispatch(
           toastNotification(
             intl.formatMessage({
-              id: isFollowing ? 'alert.success_unfollow' : 'alert.success_follow',
+              id: isFollowAction ? 'alert.success_follow' : 'alert.success_unfollow',
             }),
           ),
         );
-        this._profileActionDone();
+
+        this.setState({
+          isFollowing: isFollowAction,
+        });
+
+        this._profileActionDone({ shouldFetchProfile: false });
       })
       .catch((err) => {
-        this._profileActionDone(err);
+        this._profileActionDone({ error: err });
       });
   };
 
@@ -247,11 +252,11 @@ class ProfileContainer extends Component {
         );
       })
       .catch((err) => {
-        this._profileActionDone(err);
+        this._profileActionDone({ error: err });
       });
   };
 
-  _profileActionDone = (error = null) => {
+  _profileActionDone = ({ error = null, shouldFetchProfile = true }) => {
     const { username } = this.state;
     const { intl, dispatch } = this.props;
 
@@ -277,7 +282,7 @@ class ProfileContainer extends Component {
             ),
         );
       }
-    } else {
+    } else if (shouldFetchProfile) {
       this._fetchProfile(username, true);
     }
   };
@@ -338,7 +343,7 @@ class ProfileContainer extends Component {
       user = await getUser(username, isOwnProfile);
       this._fetchProfile(username);
     } catch (error) {
-      this._profileActionDone(error);
+      this._profileActionDone({ error });
     }
 
     this.setState((prevState) => ({