Merge pull request #239 from nickago/MM-1295

MM-1295 Removal from a channel occurs in real time

api/channel.go

@@ -710,6 +710,11 @@ func removeChannelMember(c *Context, w http.ResponseWriter, r *http.Request) {
 			return
 		}
 
+		message := model.NewMessage(c.Session.TeamId, "", userId, model.ACTION_USER_REMOVED)
+		message.Add("channel_id",id)
+		message.Add("remover", c.Session.UserId)
+		PublishAndForget(message)
+
 		c.LogAudit("name=" + channel.Name + " user_id=" + userId)
 
 		result := make(map[string]string)

model/message.go

@@ -16,6 +16,7 @@ const (
 	ACTION_VIEWED       = "viewed"
 	ACTION_NEW_USER     = "new_user"
 	ACTION_USER_ADDED   = "user_added"
+	ACTION_USER_REMOVED = "user_removed"
 )
 
 type Message struct {

web/react/components/removed_from_channel_modal.jsx

@@ -0,0 +1,64 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var ChannelStore = require('../stores/channel_store.jsx');
+var UserStore = require('../stores/user_store.jsx');
+var BrowserStore = require('../stores/browser_store.jsx')
+var utils = require('../utils/utils.jsx');
+
+module.exports = React.createClass({
+    handleShow: function() {
+      var newState = {};
+      if(BrowserStore.getItem("channel-removed-state")) {
+        newState = BrowserStore.getItem("channel-removed-state");
+        BrowserStore.removeItem("channel-removed-state");
+      }
+
+      this.setState(newState);
+    },
+    handleClose: function() {
+      var townSquare = ChannelStore.getByName("town-square");
+      utils.switchChannel(townSquare);
+
+      this.setState({channelName: "", remover: ""})
+    },
+    componentDidMount: function() {
+      $(this.getDOMNode()).on('show.bs.modal',this.handleShow);
+      $(this.getDOMNode()).on('hidden.bs.modal',this.handleClose);
+    },
+    componentWillUnmount: function() {
+      $(this.getDOMNode()).off('show.bs.modal',this.handleShow);
+      $(this.getDOMNode()).off('hidden.bs.modal',this.handleClose);
+    },
+    getInitialState: function() {
+      return {channelName: "", remover: ""}
+    },
+    render: function() {
+        var currentUser = UserStore.getCurrentUser();
+        var channelName = this.state.channelName ? this.state.channelName : "the channel"
+        var remover = this.state.remover ? this.state.remover : "Someone"
+
+        if (currentUser != null) {
+            return (
+                <div className="modal fade" ref="modal" id="removed_from_channel" tabIndex="-1" role="dialog" aria-hidden="true">
+                   <div className="modal-dialog">
+                      <div className="modal-content">
+                        <div className="modal-header">
+                          <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                          <h4 className="modal-title">Removed from {channelName}</h4>
+                        </div>
+                        <div className="modal-body">
+                            <p>{remover} removed you from {channelName}</p>
+                        </div>
+                        <div className="modal-footer">
+                          <button type="button" className="btn btn-primary" data-dismiss="modal">Okay</button>
+                        </div>
+                      </div>
+                   </div>
+                </div>
+            );
+        } else {
+            return <div/>;
+        }
+    }
+});

web/react/components/sidebar.jsx

@@ -7,6 +7,7 @@ var AsyncClient = require('../utils/async_client.jsx');
 var SocketStore = require('../stores/socket_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var TeamStore = require('../stores/team_store.jsx');
+var BrowserStore = require('../stores/browser_store.jsx')
 var utils = require('../utils/utils.jsx');
 var SidebarHeader = require('./sidebar_header.jsx');
 var SearchBox = require('./search_bar.jsx');
@@ -197,6 +198,19 @@ module.exports = React.createClass({
             if (UserStore.getCurrentId() === msg.user_id) {
                 AsyncClient.getChannels(true);
             }
+        } else if(msg.action === "user_removed") {
+            if(msg.user_id === UserStore.getCurrentId()) {
+                AsyncClient.getChannels(true);
+
+                if(msg.props.channel_id === ChannelStore.getCurrentId() && $('#removed_from_channel').length > 0) {
+                    var sentState = {};
+                    sentState.channelName = ChannelStore.getCurrent().display_name;
+                    sentState.remover = UserStore.getProfile(msg.props.remover).username;
+
+                    BrowserStore.setItem('channel-removed-state',sentState);
+                    $('#removed_from_channel').modal('show');
+                }
+            }
         }
     },
     updateTitle: function() {

web/react/pages/channel.jsx

@@ -34,6 +34,7 @@ var MentionList = require('../components/mention_list.jsx');
 var ChannelInfoModal = require('../components/channel_info_modal.jsx');
 var AccessHistoryModal = require('../components/access_history_modal.jsx');
 var ActivityLogModal = require('../components/activity_log_modal.jsx');
+var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx')
 
 
 var Constants = require('../utils/constants.jsx');
@@ -217,4 +218,9 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann
         document.getElementById('activity_log_modal')
     );
 
+    React.render(
+        <RemovedFromChannelModal />,
+        document.getElementById('removed_from_channel_modal')
+    );
+
 };

web/templates/channel.html

@@ -47,6 +47,7 @@
   <div id="channel_info_modal"></div>
   <div id="access_history_modal"></div>
   <div id="activity_log_modal"></div>
+  <div id="removed_from_channel_modal"></div>
 <script>
 window.setup_channel_page('{{ .Props.TeamDisplayName }}', '{{ .Props.TeamType }}', '{{ .Props.TeamId }}', '{{ .Props.ChannelName }}', '{{ .Props.ChannelId }}');
 </script>