Feature/edit profile loader

app/actions/updateUserProfile.js

@@ -137,6 +137,7 @@ export function updateUserProfile(data, profileType, forcePromisify) {
     return new Promise(function(resolve, reject) {
       putAuthenticatedRequest(profileTypeToReq[profileType], data)
         .then(res => {
+          const {statusText} = res;
           if (res.data && res.data instanceof Object) {
             if (res.data.merge) {
               dispatch(
@@ -151,11 +152,18 @@ export function updateUserProfile(data, profileType, forcePromisify) {
           if (res.data.merge) resolve(res.data);
           forcePromisify && resolve(res.data);
           dispatch(setProgressModelState(false));
+          NotificationManager.success(statusText, i18n.t('label.success'), 5000);
+
         })
         .catch(err => {
           debug(err);
           reject(err);
           dispatch(setProgressModelState(false));
+          NotificationManager.error(
+            err.response.data.message,
+            i18n.t('label.error'),
+            5000
+          );
         });
     });
   };

app/components/Common/Button/PrimaryButton.native.js

@@ -2,22 +2,34 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TouchableItem from '../TouchableItem';
 import styles from '../../../styles/common/button';
-import { Text, Image, View } from 'react-native';
+import {Text, Image, View, ActivityIndicator} from 'react-native';
 const PrimaryButton = ({
   onClick,
   children,
   buttonStyle,
   textStyle,
-  image
+  image,
+  loading = false,
 }) => (
   <TouchableItem
     activeOpacity={0.6}
     onPress={() => onClick()}
     style={[styles.primaryButton, buttonStyle]}
+    disabled={loading}
   >
     <View style={styles.textContainer}>
-      <Image source={image} style={image ? styles.image : { width: 0 }} />
-      <Text style={[styles.primaryButtonText, textStyle]}>{children}</Text>
+      {loading ? (
+        <ActivityIndicator
+          size="large"
+          color="white"
+        />
+      ):(
+        <>
+          <Image source={image} style={image ? styles.image : { width: 0 }} />
+          <Text style={[styles.primaryButtonText, textStyle]}>{children}</Text>
+        </>
+
+        )}
     </View>
   </TouchableItem>
 );

app/components/EditUserProfile/index.native.js

@@ -152,7 +152,7 @@ export default class EditUserProfile extends Component {
     this.setState({ passwordNotSameError: value });
 
   _renderScene = ({ route }) => {
-    const { onSave, currentUserProfile } = this.props;
+    const { onSave, currentUserProfile, loading } = this.props;
     const { treecounter: treeCounter } = currentUserProfile;
     switch (route.key) {
       case 'basic':
@@ -161,6 +161,7 @@ export default class EditUserProfile extends Component {
             onSave={onSave}
             currentUserProfile={currentUserProfile}
             getFormSchemaOption={this.getFormSchemaOption}
+            loading={loading}
           />
         );
       // break;
@@ -170,6 +171,7 @@ export default class EditUserProfile extends Component {
             onSave={onSave}
             currentUserProfile={currentUserProfile}
             getFormSchemaOption={this.getFormSchemaOption}
+            loading={loading}
           />
         );
       case 'following':
@@ -232,6 +234,7 @@ export default class EditUserProfile extends Component {
             navigation={this.props.navigation}
             deleteProfile={this.props.deleteProfile}
             changeEmail={this.changeEmail}
+            loading={loading}
             onSamePasswordErrorState={this.changePasswordErrorState}
           />
         );
@@ -290,9 +293,9 @@ class BasicTabView extends React.PureComponent {
   constructor(props) {
     super(props);
   }
-
   render() {
     const { type } = this.props.currentUserProfile;
+
     return (
       <KeyboardAwareScrollView enableOnAndroid>
         <CardLayout style={{ flex: 1 }}>
@@ -311,6 +314,7 @@ class BasicTabView extends React.PureComponent {
             />
           </View>
           <PrimaryButton
+            loading={this.props.loading}
             onClick={() => {
               this.props.onSave(type, 'profile', this.refs);
             }}
@@ -326,6 +330,7 @@ class BasicTabView extends React.PureComponent {
 BasicTabView.propTypes = {
   onSave: PropTypes.func.isRequired,
   currentUserProfile: PropTypes.object,
+  loading: PropTypes.bool,
   getFormSchemaOption: PropTypes.func
 };
 
@@ -348,6 +353,7 @@ class DescriptionTabView extends React.PureComponent {
             />
           </View>
           <PrimaryButton
+            loading={this.props.loading}
             onClick={() => {
               this.props.onSave(type, 'about_me', this.refs);
             }}
@@ -362,17 +368,25 @@ class DescriptionTabView extends React.PureComponent {
 
 DescriptionTabView.propTypes = {
   onSave: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
   currentUserProfile: PropTypes.object,
   getFormSchemaOption: PropTypes.func
 };
 
 class SecurityTabView extends React.PureComponent {
+
   constructor(props) {
     super(props);
+    this.state={
+      emailButtonPress: false,
+      changPassworsdButtonPress: false,
+    }
   }
 
   render() {
     const { type } = this.props.currentUserProfile;
+    const {loading} = this.props;
+    const {emailButtonPress, changPassworsdButtonPress} = this.state;
     return (
       <KeyboardAwareScrollView enableOnAndroid>
         <CardLayout style={{ flex: 1 }}>
@@ -387,7 +401,12 @@ class SecurityTabView extends React.PureComponent {
             </Text>
           </View>
           <PrimaryButton
+            loading={emailButtonPress && loading}
             onClick={() => {
+              this.setState({
+                emailButtonPress: true,
+                changPassworsdButtonPress:false,
+              });
               this.props.changeEmail(this.refs.change_email);
             }}
           >
@@ -406,6 +425,7 @@ class SecurityTabView extends React.PureComponent {
             />
           </View>
           <PrimaryButton
+            loading={changPassworsdButtonPress && loading}
             onClick={() => {
               let value = this.refs.password.getValue();
               if (
@@ -416,11 +436,13 @@ class SecurityTabView extends React.PureComponent {
                 //same password
                 this.props.onSamePasswordErrorState(true);
                 this.setState({
-                  passwordNotSameError: true
+                  emailButtonPress:false,
+                  passwordNotSameError: true,
+                  changPassworsdButtonPress:true,
                 });
                 return;
               }
-              this.props.onSamePasswordErrorState(true);
+              this.props.onSamePasswordErrorState(false);
               this.props.onSave(type, 'password', this.refs);
             }}
           >
@@ -444,6 +466,7 @@ class SecurityTabView extends React.PureComponent {
 
 SecurityTabView.propTypes = {
   onSave: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
   currentUserProfile: PropTypes.object,
   getFormSchemaOption: PropTypes.func,
   navigation: PropTypes.object,

app/containers/EditUserProfile/index.js

@@ -4,7 +4,7 @@ import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
 import { debug } from '../../debug';
 import EditUserProfile from '../../components/EditUserProfile';
-import { currentUserProfileSelector } from '../../selectors/index';
+import {currentUserProfileSelector, getProgressModelSelector} from '../../selectors/index';
 import {
   updateUserProfile,
   updatePlantProject,
@@ -250,6 +250,7 @@ class EditUserProfileContainer extends React.Component {
         navigation={this.props.navigation}
         followeeList={this.state.followeeInfo}
         unfollowUser={this.props.unfollowUser}
+        {...this.props}
       />
     );
   }
@@ -260,7 +261,8 @@ EditUserProfileContainer.propTypes = {
 };
 
 const mapStateToProps = state => ({
-  currentUserProfile: currentUserProfileSelector(state)
+  currentUserProfile: currentUserProfileSelector(state),
+  loading: getProgressModelSelector(state),
 });
 
 const mapDispatchToProps = dispatch => {