Merge pull request #1237 from Automattic/update/invites-disable-butto…

…ns-after-accept People: Invites: Disable buttons on accept
Automattic · Dec 3, 2015 · 2aab6d3 · 2aab6d3
2 parents a08faa8 + cc380b1
commit 2aab6d3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/client/my-sites/invites/invite-accept-logged-in/index.jsx b/client/my-sites/invites/invite-accept-logged-in/index.jsx
@@ -3,6 +3,7 @@
  */
 import React from 'react';
 import classNames from 'classnames';
+import page from 'page';
 
 /**
  * Internal dependencies
@@ -18,6 +19,15 @@ export default React.createClass( {
 
 	displayName: 'InviteAcceptLoggedIn',
 
+	getInitialState() {
+		return { submitting: false }
+	},
+
+	accept() {
+		this.setState( { submitting: true } );
+		acceptInvite( this.props.invite, () => page( this.props.redirectTo ) );
+	},
+
 	render() {
 		const { user } = this.props,
 			signInLink = config( 'login_url' ) + '?redirect_to=' + encodeURIComponent( window.location.href );
@@ -40,11 +50,11 @@ export default React.createClass( {
 						}
 					</div>
 					<div className="invite-accept-logged-in__button-bar">
-						<Button onClick={ this.props.decline }>
+						<Button onClick={ this.props.decline } disabled={ this.state.submitting }>
 							{ this.translate( 'Decline', { context: 'button' } ) }
 						</Button>
-						<Button primary onClick={ () => acceptInvite( this.props.invite ) } href={ this.props.redirectTo } >
-							{ this.translate( 'Join', { context: 'button' } ) }
+						<Button primary onClick={ this.accept } disabled={ this.state.submitting }>
+							{ this.state.submitting ? this.translate( 'Joining…', { context: 'button' } ) : this.translate( 'Join', { context: 'button' } ) }
 						</Button>
 					</div>
 				</Card>

diff --git a/client/my-sites/invites/invite-accept/index.jsx b/client/my-sites/invites/invite-accept/index.jsx
@@ -87,7 +87,7 @@ export default React.createClass( {
 		}
 		debug( 'Rendering invite' );
 		return user
-			? <LoggedIn { ...this.state.invite } decline={ this.decline } user={ user } />
+			? <LoggedIn { ...this.state.invite } redirectTo={ this.getRedirectAfterAccept() } decline={ this.decline } user={ user } />
 			: <LoggedOut { ...this.state.invite } redirectTo={ this.getRedirectAfterAccept() } decline={ this.decline } />;
 	},