Adding loading indicator after clicking invite channel member button

1 files changed, 91 insertions, 0 deletions

diff --git a/webapp/components/channel_invite_button.jsx b/webapp/components/channel_invite_button.jsx
new file mode 100644
index 000000000..b5a690845
--- /dev/null
+++ b/webapp/components/channel_invite_button.jsx
@@ -0,0 +1,91 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as AsyncClient from 'utils/async_client.jsx';
+import * as Client from 'utils/client.jsx';
+
+import {FormattedMessage} from 'react-intl';
+
+import loadingGif from 'images/load.gif';
+
+export default class ChannelInviteButton extends React.Component {
+    static get propTypes() {
+        return {
+            user: React.PropTypes.object.isRequired,
+            channel: React.PropTypes.object.isRequired,
+            onInviteError: React.PropTypes.func.isRequired
+        };
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleClick = this.handleClick.bind(this);
+
+        this.state = {
+            addingUser: false
+        };
+    }
+
+    handleClick(e) {
+        e.preventDefault();
+
+        if (this.state.addingUser) {
+            return;
+        }
+
+        this.setState({
+            addingUser: true
+        });
+
+        const data = {
+            user_id: this.props.user.id
+        };
+
+        Client.addChannelMember(
+            this.props.channel.id,
+            data,
+            () => {
+                this.setState({
+                    addingUser: false
+                });
+
+                this.props.onInviteError(null);
+                AsyncClient.getChannelExtraInfo();
+            },
+            (err) => {
+                this.setState({
+                    addingUser: false
+                });
+
+                this.props.onInviteError(err);
+            }
+        );
+    }
+
+    render() {
+        if (this.state.addingUser) {
+            return (
+                <img
+                    className='channel-loading-gif'
+                    src={loadingGif}
+                />
+            );
+        }
+
+        return (
+            <a
+                onClick={this.handleClick}
+                className='btn btn-sm btn-primary'
+            >
+                <i className='glyphicon glyphicon-envelope'/>
+                <FormattedMessage
+                    id='channel_invite.add'
+                    defaultMessage=' Add'
+                />
+            </a>
+        );
+    }
+}