Merge pull request #365 from mattermost/mm-1700

MM-1700 don't pull all channel data all the time
2015-08-14 08:35:19 -04:00
--- a/web/react/components/edit_channel_modal.jsx
+++ b/web/react/components/edit_channel_modal.jsx
@@ -14,7 +14,7 @@ module.exports = React.createClass({
        Client.updateChannelDesc(data,
            function(data) {
                this.setState({ server_error: "" });
-                AsyncClient.getChannels(true);
+                AsyncClient.getChannel(this.state.channel_id);
                $(this.refs.modal.getDOMNode()).modal('hide');
            }.bind(this),
            function(err) {
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -1,34 +1,32 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.

-
 var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.jsx');
 var asyncClient = require('../utils/async_client.jsx');
-var UserStore = require('../stores/user_store.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
 var LoadingScreen = require('./loading_screen.jsx');

 function getStateFromStores() {
-  return {
-    channels: ChannelStore.getMoreAll(),
-    server_error: null
-  };
+    return {
+        channels: ChannelStore.getMoreAll(),
+        serverError: null
+    };
 }

 module.exports = React.createClass({
-    displayName: "MoreChannelsModal",
+    displayName: 'MoreChannelsModal',

    componentDidMount: function() {
        ChannelStore.addMoreChangeListener(this._onChange);
-        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) {
+        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function shown() {
            asyncClient.getMoreChannels(true);
        });

        var self = this;
-        $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
+        $(this.refs.modal.getDOMNode()).on('show.bs.modal', function show(e) {
            var button = e.relatedTarget;
-            self.setState({ channel_type: $(button).attr('data-channeltype') });
+            self.setState({channelType: $(button).attr('data-channeltype')});
        });
    },
    componentWillUnmount: function() {
@@ -42,18 +40,17 @@ module.exports = React.createClass({
    },
    getInitialState: function() {
        var initState = getStateFromStores();
-        initState.channel_type = "";
+        initState.channelType = '';
        return initState;
    },
-    handleJoin: function(e) {
-        var self = this;
-        client.joinChannel(e,
-            function(data) {
-                $(self.refs.modal.getDOMNode()).modal('hide');
-                asyncClient.getChannels(true);
+    handleJoin: function(id) {
+        client.joinChannel(id,
+            function() {
+                $(this.refs.modal.getDOMNode()).modal('hide');
+                asyncClient.getChannel(id);
            }.bind(this),
            function(err) {
-                this.state.server_error = err.message;
+                this.state.serverError = err.message;
                this.setState(this.state);
            }.bind(this)
        );
@@ -62,52 +59,66 @@ module.exports = React.createClass({
        $(this.refs.modal.getDOMNode()).modal('hide');
    },
    render: function() {
-        var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
+        var serverError;
+        if (this.state.serverError) {
+            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
+        }
+
        var outter = this;
        var moreChannels;

-        if (this.state.channels != null)
-            moreChannels = this.state.channels;
+        if (this.state.channels != null) {
+            var channels = this.state.channels;
+            if (!channels.loading) {
+                if (channels.length) {
+                    moreChannels = (
+                        <table className='more-channel-table table'>
+                            <tbody>
+                                {channels.map(function cMap(channel) {
+                                    return (
+                                        <tr key={channel.id}>
+                                            <td>
+                                                <p className='more-channel-name'>{channel.display_name}</p>
+                                                <p className='more-channel-description'>{channel.description}</p>
+                                            </td>
+                                            <td className='td--action'><button onClick={outter.handleJoin.bind(outter, channel.id)} className='btn btn-primary'>Join</button></td>
+                                        </tr>
+                                    );
+                                })}
+                            </tbody>
+                        </table>
+                    );
+                } else {
+                    moreChannels = (
+                        <div className='no-channel-message'>
+                           <p className='primary-message'>No more channels to join</p>
+                           <p className='secondary-message'>Click 'Create New Channel' to make a new one</p>
+                        </div>
+                    );
+                }
+            } else {
+                moreChannels = <LoadingScreen />;
+            }
+        }

        return (
-            <div className="modal fade" id="more_channels" ref="modal" 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">
-                                <span aria-hidden="true">&times;</span>
-                                <span className="sr-only">Close</span>
+            <div className='modal fade' id='more_channels' ref='modal' 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'>
+                                <span aria-hidden='true'>&times;</span>
+                                <span className='sr-only'>Close</span>
                            </button>
-                            <h4 className="modal-title">More Channels</h4>
-                            <button data-toggle="modal" data-target="#new_channel" data-channeltype={this.state.channel_type} type="button" className="btn btn-primary channel-create-btn" onClick={this.handleNewChannel}>Create New Channel</button>
+                            <h4 className='modal-title'>More Channels</h4>
+                            <button data-toggle='modal' data-target='#new_channel' data-channeltype={this.state.channelType} type='button' className='btn btn-primary channel-create-btn' onClick={this.handleNewChannel}>Create New Channel</button>
                        </div>
-                        <div className="modal-body">
-                            {!moreChannels.loading ?
-                                (moreChannels.length ?
-                                    <table className="more-channel-table table">
-                                        <tbody>
-                                            {moreChannels.map(function(channel) {
-                                                return (
-                                                    <tr key={channel.id}>
-                                                        <td>
-                                                            <p className="more-channel-name">{channel.display_name}</p>
-                                                            <p className="more-channel-description">{channel.description}</p>
-                                                        </td>
-                                                        <td className="td--action"><button onClick={outter.handleJoin.bind(outter, channel.id)} className="btn btn-primary">Join</button></td>
-                                                    </tr>
-                                                )
-                                            })}
-                                        </tbody>
-                                    </table>
-                                    :   <div className="no-channel-message">
-                                            <p className="primary-message">No more channels to join</p>
-                                            <p className="secondary-message">Click 'Create New Channel' to make a new one</p>
-                                        </div>)
-                            :   <LoadingScreen /> }
-                            { server_error }
+                        <div className='modal-body'>
+                            {moreChannels}
+                            {serverError}
                        </div>
-                        <div className="modal-footer">
-                            <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
+                        <div className='modal-footer'>
+                            <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button>
                        </div>
                    </div>
                </div>
--- a/web/react/components/new_channel.jsx
+++ b/web/react/components/new_channel.jsx
@@ -55,16 +55,16 @@ module.exports = React.createClass({
        channel.description = this.refs.channel_desc.getDOMNode().value.trim();
        channel.type = this.state.channelType;

-        var self = this;
        client.createChannel(channel,
-            function() {
+            function(data) {
+                $(this.refs.modal.getDOMNode()).modal('hide');
+
+                asyncClient.getChannel(data.id);
+                utils.switchChannel(data);
+
                this.refs.display_name.getDOMNode().value = '';
                this.refs.channel_name.getDOMNode().value = '';
                this.refs.channel_desc.getDOMNode().value = '';
-
-                $(self.refs.modal.getDOMNode()).modal('hide');
-                window.location = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name;
-                asyncClient.getChannels(true);
            }.bind(this),
            function(err) {
                state.serverError = err.message;
--- a/web/react/components/rename_channel_modal.jsx
+++ b/web/react/components/rename_channel_modal.jsx
@@ -63,12 +63,14 @@ module.exports = React.createClass({

        Client.updateChannel(channel,
            function(data, text, req) {
+                $(this.refs.modal.getDOMNode()).modal('hide');
+
+                AsyncClient.getChannel(channel.id);
+                utils.updateTabTitle(channel.display_name);
+                utils.updateAddressBar(channel.name);
+
                this.refs.display_name.getDOMNode().value = "";
                this.refs.channel_name.getDOMNode().value = "";
-
-                $('#' + this.props.modalId).modal('hide');
-                window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + this.state.channel_name;
-                AsyncClient.getChannels(true);
            }.bind(this),
            function(err) {
                state.server_error = err.message;
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -102,7 +102,7 @@ function getStateFromStores() {
        }
        readDirectChannels = readDirectChannels.slice(index);

-        showDirectChannels.sort(function(a, b) {
+        showDirectChannels.sort(function directSort(a, b) {
            if (a.display_name < b.display_name) {
                return -1;
            }
@@ -114,7 +114,7 @@ function getStateFromStores() {
    }

    return {
-        active_id: currentId,
+        activeId: currentId,
        channels: ChannelStore.getAll(),
        members: members,
        showDirectChannels: showDirectChannels,
@@ -157,9 +157,11 @@ module.exports = React.createClass({
    onSocketChange: function(msg) {
        if (msg.action === 'posted') {
            if (ChannelStore.getCurrentId() === msg.channel_id) {
-                AsyncClient.getChannels(true, window.isActive);
+                if (window.isActive) {
+                    AsyncClient.updateLastViewedAt();
+                }
            } else {
-                AsyncClient.getChannels(true);
+                AsyncClient.getChannels();
            }

            if (UserStore.getCurrentId() !== msg.user_id) {
@@ -214,12 +216,12 @@ module.exports = React.createClass({
                }
            }
        } else if (msg.action === 'viewed') {
-            if (ChannelStore.getCurrentId() != msg.channel_id) {
-                AsyncClient.getChannels(true);
+            if (ChannelStore.getCurrentId() !== msg.channel_id && UserStore.getCurrentId() === msg.user_id) {
+                AsyncClient.getChannel(msg.channel_id);
            }
        } else if (msg.action === 'user_added') {
            if (UserStore.getCurrentId() === msg.user_id) {
-                AsyncClient.getChannels(true);
+                AsyncClient.getChannel(msg.channel_id);
            }
        } else if (msg.action === 'user_removed') {
            if (msg.user_id === UserStore.getCurrentId()) {
@@ -282,7 +284,7 @@ module.exports = React.createClass({
    },
    render: function() {
        var members = this.state.members;
-        var activeId = this.state.active_id;
+        var activeId = this.state.activeId;
        var badgesActive = false;

        // keep track of the first and last unread channels so we can use them to set the unread indicators
@@ -294,7 +296,7 @@ module.exports = React.createClass({
            var channelMember = members[channel.id];

            var linkClass = '';
-            if (channel.id === self.state.active_id) {
+            if (channel.id === activeId) {
                linkClass = 'active';
            }

--- a/web/react/stores/channel_store.jsx
+++ b/web/react/stores/channel_store.jsx
@@ -10,212 +10,264 @@ var ActionTypes = Constants.ActionTypes;

 var BrowserStore = require('../stores/browser_store.jsx');

-
 var CHANGE_EVENT = 'change';
 var MORE_CHANGE_EVENT = 'change';
 var EXTRA_INFO_EVENT = 'extra_info';

 var ChannelStore = assign({}, EventEmitter.prototype, {
-    _current_id: null,
-  emitChange: function() {
-    this.emit(CHANGE_EVENT);
-  },
-  addChangeListener: function(callback) {
-    this.on(CHANGE_EVENT, callback);
-  },
-  removeChangeListener: function(callback) {
-    this.removeListener(CHANGE_EVENT, callback);
-  },
-  emitMoreChange: function() {
-    this.emit(MORE_CHANGE_EVENT);
-  },
-  addMoreChangeListener: function(callback) {
-    this.on(MORE_CHANGE_EVENT, callback);
-  },
-  removeMoreChangeListener: function(callback) {
-    this.removeListener(MORE_CHANGE_EVENT, callback);
-  },
-  emitExtraInfoChange: function() {
-    this.emit(EXTRA_INFO_EVENT);
-  },
-  addExtraInfoChangeListener: function(callback) {
-    this.on(EXTRA_INFO_EVENT, callback);
-  },
-  removeExtraInfoChangeListener: function(callback) {
-    this.removeListener(EXTRA_INFO_EVENT, callback);
-  },
-  findFirstBy: function(field, value) {
-    var channels = this._getChannels();
-    for (var i = 0; i < channels.length; i++) {
-      if (channels[i][field] == value) {
-        return channels[i];
-      }
+    currentId: null,
+    emitChange: function() {
+        this.emit(CHANGE_EVENT);
+    },
+    addChangeListener: function(callback) {
+        this.on(CHANGE_EVENT, callback);
+    },
+    removeChangeListener: function(callback) {
+        this.removeListener(CHANGE_EVENT, callback);
+    },
+    emitMoreChange: function() {
+        this.emit(MORE_CHANGE_EVENT);
+    },
+    addMoreChangeListener: function(callback) {
+        this.on(MORE_CHANGE_EVENT, callback);
+    },
+    removeMoreChangeListener: function(callback) {
+        this.removeListener(MORE_CHANGE_EVENT, callback);
+    },
+    emitExtraInfoChange: function() {
+        this.emit(EXTRA_INFO_EVENT);
+    },
+    addExtraInfoChangeListener: function(callback) {
+        this.on(EXTRA_INFO_EVENT, callback);
+    },
+    removeExtraInfoChangeListener: function(callback) {
+        this.removeListener(EXTRA_INFO_EVENT, callback);
+    },
+    findFirstBy: function(field, value) {
+        var channels = this.pGetChannels();
+        for (var i = 0; i < channels.length; i++) {
+            if (channels[i][field] === value) {
+                return channels[i];
+            }
+        }
+
+        return null;
+    },
+    get: function(id) {
+        return this.findFirstBy('id', id);
+    },
+    getMember: function(id) {
+        return this.getAllMembers()[id];
+    },
+    getByName: function(name) {
+        return this.findFirstBy('name', name);
+    },
+    getAll: function() {
+        return this.pGetChannels();
+    },
+    getAllMembers: function() {
+        return this.pGetChannelMembers();
+    },
+    getMoreAll: function() {
+        return this.pGetMoreChannels();
+    },
+    setCurrentId: function(id) {
+        this.currentId = id;
+    },
+    setLastVisitedName: function(name) {
+        if (name == null) {
+            BrowserStore.removeItem('last_visited_name');
+        } else {
+            BrowserStore.setItem('last_visited_name', name);
+        }
+    },
+    getLastVisitedName: function() {
+        return BrowserStore.getItem('last_visited_name');
+    },
+    resetCounts: function(id) {
+        var cm = this.pGetChannelMembers();
+        for (var cmid in cm) {
+            if (cm[cmid].channel_id === id) {
+                var c = this.get(id);
+                if (c) {
+                    cm[cmid].msg_count = this.get(id).total_msg_count;
+                    cm[cmid].mention_count = 0;
+                }
+                break;
+            }
+        }
+        this.pStoreChannelMembers(cm);
+    },
+    getCurrentId: function() {
+        return this.currentId;
+    },
+    getCurrent: function() {
+        var currentId = this.getCurrentId();
+
+        if (currentId) {
+            return this.get(currentId);
+        } else {
+            return null;
+        }
+    },
+    getCurrentMember: function() {
+        var currentId = ChannelStore.getCurrentId();
+
+        if (currentId) {
+            return this.getAllMembers()[currentId];
+        } else {
+            return null;
+        }
+    },
+    setChannelMember: function(member) {
+        var members = this.pGetChannelMembers();
+        members[member.channel_id] = member;
+        this.pStoreChannelMembers(members);
+        this.emitChange();
+    },
+    getCurrentExtraInfo: function() {
+        var currentId = ChannelStore.getCurrentId();
+        var extra = null;
+
+        if (currentId) {
+            extra = this.pGetExtraInfos()[currentId];
+        }
+
+        if (extra == null) {
+            extra = {members: []};
+        }
+
+        return extra;
+    },
+    getExtraInfo: function(channelId) {
+        var extra = null;
+
+        if (channelId) {
+            extra = this.pGetExtraInfos()[channelId];
+        }
+
+        if (extra == null) {
+            extra = {members: []};
+        }
+
+        return extra;
+    },
+    pStoreChannel: function(channel) {
+        var channels = this.pGetChannels();
+        var found;
+
+        for (var i = 0; i < channels.length; i++) {
+            if (channels[i].id === channel.id) {
+                channels[i] = channel;
+                found = true;
+                break;
+            }
+        }
+
+        if (!found) {
+            channels.push(channel);
+        }
+
+        channels.sort(function chanSort(a, b) {
+            if (a.display_name.toLowerCase() < b.display_name.toLowerCase()) {
+                return -1;
+            }
+            if (a.display_name.toLowerCase() > b.display_name.toLowerCase()) {
+                return 1;
+            }
+            return 0;
+        });
+
+        this.pStoreChannels(channels);
+    },
+    pStoreChannels: function(channels) {
+        BrowserStore.setItem('channels', channels);
+    },
+    pGetChannels: function() {
+        return BrowserStore.getItem('channels', []);
+    },
+    pStoreChannelMember: function(channelMember) {
+        var members = this.pGetChannelMembers();
+        members[channelMember.channel_id] = channelMember;
+        this.pStoreChannelMembers(members);
+    },
+    pStoreChannelMembers: function(channelMembers) {
+        BrowserStore.setItem('channel_members', channelMembers);
+    },
+    pGetChannelMembers: function() {
+        return BrowserStore.getItem('channel_members', {});
+    },
+    pStoreMoreChannels: function(channels) {
+        BrowserStore.setItem('more_channels', channels);
+    },
+    pGetMoreChannels: function() {
+        var channels = BrowserStore.getItem('more_channels');
+
+        if (channels == null) {
+            channels = {};
+            channels.loading = true;
+        }
+
+        return channels;
+    },
+    pStoreExtraInfos: function(extraInfos) {
+        BrowserStore.setItem('extra_infos', extraInfos);
+    },
+    pGetExtraInfos: function() {
+        return BrowserStore.getItem('extra_infos', {});
+    },
+    isDefault: function(channel) {
+        return channel.name === Constants.DEFAULT_CHANNEL;
    }
-
-    return null;
-  },
-  get: function(id) {
-    return this.findFirstBy('id', id);
-  },
-  getMember: function(id) {
-    return this.getAllMembers()[id];
-  },
-  getByName: function(name) {
-    return this.findFirstBy('name', name);
-  },
-  getAll: function() {
-    return this._getChannels();
-  },
-  getAllMembers: function() {
-    return this._getChannelMembers();
-  },
-  getMoreAll: function() {
-    return this._getMoreChannels();
-  },
-  setCurrentId: function(id) {
-      this._current_id = id;
-  },
-  setLastVisitedName: function(name) {
-    if (name == null)
-      BrowserStore.removeItem("last_visited_name");
-    else
-      BrowserStore.setItem("last_visited_name", name);
-  },
-  getLastVisitedName: function() {
-    return BrowserStore.getItem("last_visited_name");
-  },
-  resetCounts: function(id) {
-      var cm = this._getChannelMembers();
-      for (var cmid in cm) {
-          if (cm[cmid].channel_id == id) {
-              var c = this.get(id);
-              if (c) {
-                  cm[cmid].msg_count = this.get(id).total_msg_count;
-                  cm[cmid].mention_count = 0;
-              }
-              break;
-          }
-      }
-      this._storeChannelMembers(cm);
-  },
-  getCurrentId: function() {
-      return this._current_id;
-  },
-  getCurrent: function() {
-    var currentId = this.getCurrentId();
-
-    if (currentId)
-      return this.get(currentId);
-    else
-      return null;
-  },
-  getCurrentMember: function() {
-    var currentId = ChannelStore.getCurrentId();
-
-    if (currentId)
-      return this.getAllMembers()[currentId];
-    else
-      return null;
-  },
-  setChannelMember: function(member) {
-    var members = this._getChannelMembers();
-    members[member.channel_id] = member;
-    this._storeChannelMembers(members);
-    this.emitChange();
-  },
-  getCurrentExtraInfo: function() {
-    var currentId = ChannelStore.getCurrentId();
-    var extra = null;
-
-    if (currentId)
-      extra = this._getExtraInfos()[currentId];
-
-    if (extra == null)
-      extra = {members: []};
-
-    return extra;
-  },
-  getExtraInfo: function(channel_id) {
-    var extra = null;
-
-    if (channel_id)
-      extra = this._getExtraInfos()[channel_id];
-
-    if (extra == null)
-      extra = {members: []};
-
-    return extra;
-  },
-  _storeChannels: function(channels) {
-    BrowserStore.setItem("channels", channels);
-  },
-  _getChannels: function() {
-    return BrowserStore.getItem("channels", []);
-  },
-  _storeChannelMembers: function(channelMembers) {
-    BrowserStore.setItem("channel_members", channelMembers);
-  },
-  _getChannelMembers: function() {
-    return BrowserStore.getItem("channel_members", {});
-  },
-  _storeMoreChannels: function(channels) {
-    BrowserStore.setItem("more_channels", channels);
-  },
-  _getMoreChannels: function() {
-    var channels = BrowserStore.getItem("more_channels");
-
-    if (channels == null) {
-        channels = {};
-        channels.loading = true;
-    }
-
-    return channels;
-  },
-  _storeExtraInfos: function(extraInfos) {
-    BrowserStore.setItem("extra_infos", extraInfos);
-  },
-  _getExtraInfos: function() {
-    return BrowserStore.getItem("extra_infos", {});
-  },
-  isDefault: function(channel) {
-    return channel.name == Constants.DEFAULT_CHANNEL;
-  }  
 });

 ChannelStore.dispatchToken = AppDispatcher.register(function(payload) {
-  var action = payload.action;
+    var action = payload.action;
+    var currentId;

-  switch(action.type) {
+    switch(action.type) {

-    case ActionTypes.CLICK_CHANNEL:
-      ChannelStore.setCurrentId(action.id);
-      ChannelStore.setLastVisitedName(action.name);
-      ChannelStore.resetCounts(action.id);
-      ChannelStore.emitChange();
-      break;
+        case ActionTypes.CLICK_CHANNEL:
+            ChannelStore.setCurrentId(action.id);
+            ChannelStore.setLastVisitedName(action.name);
+            ChannelStore.resetCounts(action.id);
+            ChannelStore.emitChange();
+            break;

-    case ActionTypes.RECIEVED_CHANNELS:
-      ChannelStore._storeChannels(action.channels);
-      ChannelStore._storeChannelMembers(action.members);
-      var currentId = ChannelStore.getCurrentId();
-      if (currentId) ChannelStore.resetCounts(currentId);
-      ChannelStore.emitChange();
-      break;
+        case ActionTypes.RECIEVED_CHANNELS:
+            ChannelStore.pStoreChannels(action.channels);
+            ChannelStore.pStoreChannelMembers(action.members);
+            currentId = ChannelStore.getCurrentId();
+            if (currentId) {
+                ChannelStore.resetCounts(currentId);
+            }
+            ChannelStore.emitChange();
+            break;

-    case ActionTypes.RECIEVED_MORE_CHANNELS:
-      ChannelStore._storeMoreChannels(action.channels);
-      ChannelStore.emitMoreChange();
-      break;
+        case ActionTypes.RECIEVED_CHANNEL:
+            ChannelStore.pStoreChannel(action.channel);
+            ChannelStore.pStoreChannelMember(action.member);
+            currentId = ChannelStore.getCurrentId();
+            if (currentId) {
+                ChannelStore.resetCounts(currentId);
+            }
+            ChannelStore.emitChange();
+            break;

-    case ActionTypes.RECIEVED_CHANNEL_EXTRA_INFO:
-      var extra_infos = ChannelStore._getExtraInfos();
-      extra_infos[action.extra_info.id] = action.extra_info;
-      ChannelStore._storeExtraInfos(extra_infos);
-      ChannelStore.emitExtraInfoChange();
-      break;
+        case ActionTypes.RECIEVED_MORE_CHANNELS:
+            ChannelStore.pStoreMoreChannels(action.channels);
+            ChannelStore.emitMoreChange();
+            break;

-    default:
-  }
+        case ActionTypes.RECIEVED_CHANNEL_EXTRA_INFO:
+            var extraInfos = ChannelStore.pGetExtraInfos();
+            extraInfos[action.extra_info.id] = action.extra_info;
+            ChannelStore.pStoreExtraInfos(extraInfos);
+            ChannelStore.emitExtraInfoChange();
+            break;
+
+        default:
+    }
 });

-module.exports = ChannelStore;
+module.exports = ChannelStore;
--- a/web/react/utils/async_client.jsx
+++ b/web/react/utils/async_client.jsx
@@ -14,100 +14,171 @@ var ActionTypes = Constants.ActionTypes;
 // Used to track in progress async calls
 var callTracker = {};

-var dispatchError = function(err, method) {
+function dispatchError(err, method) {
    AppDispatcher.handleServerAction({
        type: ActionTypes.RECIEVED_ERROR,
        err: err,
        method: method
    });
-};
+}
+module.exports.dispatchError = dispatchError;

-var isCallInProgress = function(callName) {
-    if (!(callName in callTracker)) return false;
+function isCallInProgress(callName) {
+    if (!(callName in callTracker)) {
+        return false;
+    }

-    if (callTracker[callName] === 0) return false;
+    if (callTracker[callName] === 0) {
+        return false;
+    }

    if (utils.getTimestamp() - callTracker[callName] > 5000) {
-        console.log("AsyncClient call " + callName + " expired after more than 5 seconds");
+        console.log('AsyncClient call ' + callName + ' expired after more than 5 seconds');
        return false;
    }

    return true;
-};
+}

-module.exports.dispatchError = dispatchError;
+function getChannels(force, updateLastViewed, checkVersion) {
+    var channels = ChannelStore.getAll();

-module.exports.getChannels = function(force, updateLastViewed, checkVersion) {
-    if (isCallInProgress("getChannels")) return;
+    if (channels.length === 0 || force) {
+        if (isCallInProgress('getChannels')) {
+            return;
+        }
+
+        callTracker.getChannels = utils.getTimestamp();

-    if (ChannelStore.getAll().length == 0 || force) {
-        callTracker["getChannels"] = utils.getTimestamp();
        client.getChannels(
            function(data, textStatus, xhr) {
-                callTracker["getChannels"] = 0;
-
-                if (updateLastViewed && ChannelStore.getCurrentId() != null) {
-                    module.exports.updateLastViewedAt();
-                }
+                callTracker.getChannels = 0;

                if (checkVersion) {
-                    var serverVersion = xhr.getResponseHeader("X-Version-ID");
+                    var serverVersion = xhr.getResponseHeader('X-Version-ID');

                    if (!UserStore.getLastVersion()) {
                        UserStore.setLastVersion(serverVersion);
                    }

-                    if (serverVersion != UserStore.getLastVersion()) {
+                    if (serverVersion !== UserStore.getLastVersion()) {
                        UserStore.setLastVersion(serverVersion);
                        window.location.href = window.location.href;
-                        console.log("Detected version update refreshing the page");
+                        console.log('Detected version update refreshing the page');
                    }
                }

-                if (xhr.status === 304 || !data) return;
+                if (xhr.status === 304 || !data) {
+                    return;
+                }

                AppDispatcher.handleServerAction({
                    type: ActionTypes.RECIEVED_CHANNELS,
                    channels: data.channels,
                    members: data.members
                });
-
            },
            function(err) {
-                callTracker["getChannels"] = 0;
-                dispatchError(err, "getChannels");
+                callTracker.getChannels = 0;
+                dispatchError(err, 'getChannels');
+            }
+        );
+    } else {
+        if (isCallInProgress('getChannelCounts')) {
+            return;
+        }
+
+        callTracker.getChannelCounts = utils.getTimestamp();
+
+        client.getChannelCounts(
+            function(data, textStatus, xhr) {
+                callTracker.getChannelCounts = 0;
+
+                if (xhr.status === 304 || !data) {
+                    return;
+                }
+
+                var countMap = data.counts;
+                var updateAtMap = data.update_times;
+
+                for (var id in countMap) {
+                    var c = ChannelStore.get(id);
+                    var count = countMap[id];
+                    var updateAt = updateAtMap[id];
+                    if (!c || c.total_msg_count !== count || updateAt > c.update_at) {
+                        getChannel(id);
+                    }
+                }
+            },
+            function(err) {
+                callTracker.getChannelCounts = 0;
+                dispatchError(err, 'getChannelCounts');
            }
        );
    }
+
+    if (updateLastViewed && ChannelStore.getCurrentId() != null) {
+        module.exports.updateLastViewedAt();
+    }
 }
+module.exports.getChannels = getChannels;
+
+function getChannel(id) {
+    if (isCallInProgress('getChannel' + id)) {
+        return;
+    }
+
+    callTracker['getChannel' + id] = utils.getTimestamp();
+
+    client.getChannel(id,
+        function(data, textStatus, xhr) {
+            callTracker['getChannel' + id] = 0;
+
+            if (xhr.status === 304 || !data) {
+                return;
+            }
+
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECIEVED_CHANNEL,
+                channel: data.channel,
+                member: data.member
+            });
+        },
+        function(err) {
+            callTracker['getChannel' + id] = 0;
+            dispatchError(err, 'getChannel');
+        }
+    );
+}
+module.exports.getChannel = getChannel;

 module.exports.updateLastViewedAt = function() {
-    if (isCallInProgress("updateLastViewed")) return;
+    if (isCallInProgress('updateLastViewed')) return;

    if (ChannelStore.getCurrentId() == null) return;

-    callTracker["updateLastViewed"] = utils.getTimestamp();
+    callTracker['updateLastViewed'] = utils.getTimestamp();
    client.updateLastViewedAt(
        ChannelStore.getCurrentId(),
        function(data) {
-            callTracker["updateLastViewed"] = 0;
+            callTracker['updateLastViewed'] = 0;
        },
        function(err) {
-            callTracker["updateLastViewed"] = 0;
-            dispatchError(err, "updateLastViewedAt");
+            callTracker['updateLastViewed'] = 0;
+            dispatchError(err, 'updateLastViewedAt');
        }
    );
 }

 module.exports.getMoreChannels = function(force) {
-    if (isCallInProgress("getMoreChannels")) return;
+    if (isCallInProgress('getMoreChannels')) return;

    if (ChannelStore.getMoreAll().loading || force) {

-        callTracker["getMoreChannels"] = utils.getTimestamp();
+        callTracker['getMoreChannels'] = utils.getTimestamp();
        client.getMoreChannels(
            function(data, textStatus, xhr) {
-                callTracker["getMoreChannels"] = 0;
+                callTracker['getMoreChannels'] = 0;

                if (xhr.status === 304 || !data) return;

@@ -118,8 +189,8 @@ module.exports.getMoreChannels = function(force) {
                });
            },
            function(err) {
-                callTracker["getMoreChannels"] = 0;
-                dispatchError(err, "getMoreChannels");
+                callTracker['getMoreChannels'] = 0;
+                dispatchError(err, 'getMoreChannels');
            }
        );
    }
@@ -129,15 +200,15 @@ module.exports.getChannelExtraInfo = function(force) {
    var channelId = ChannelStore.getCurrentId();

    if (channelId != null) {
-        if (isCallInProgress("getChannelExtraInfo_"+channelId)) return;
+        if (isCallInProgress('getChannelExtraInfo_'+channelId)) return;
        var minMembers = ChannelStore.getCurrent() && ChannelStore.getCurrent().type === 'D' ? 1 : 0;

        if (ChannelStore.getCurrentExtraInfo().members.length <= minMembers || force) {
-            callTracker["getChannelExtraInfo_"+channelId] = utils.getTimestamp();
+            callTracker['getChannelExtraInfo_'+channelId] = utils.getTimestamp();
            client.getChannelExtraInfo(
                channelId,
                function(data, textStatus, xhr) {
-                    callTracker["getChannelExtraInfo_"+channelId] = 0;
+                    callTracker['getChannelExtraInfo_'+channelId] = 0;

                    if (xhr.status === 304 || !data) return;

@@ -147,8 +218,8 @@ module.exports.getChannelExtraInfo = function(force) {
                    });
                },
                function(err) {
-                    callTracker["getChannelExtraInfo_"+channelId] = 0;
-                    dispatchError(err, "getChannelExtraInfo");
+                    callTracker['getChannelExtraInfo_'+channelId] = 0;
+                    dispatchError(err, 'getChannelExtraInfo');
                }
            );
        }
@@ -156,12 +227,12 @@ module.exports.getChannelExtraInfo = function(force) {
 }

 module.exports.getProfiles = function() {
-    if (isCallInProgress("getProfiles")) return;
+    if (isCallInProgress('getProfiles')) return;

-    callTracker["getProfiles"] = utils.getTimestamp();
+    callTracker['getProfiles'] = utils.getTimestamp();
    client.getProfiles(
        function(data, textStatus, xhr) {
-            callTracker["getProfiles"] = 0;
+            callTracker['getProfiles'] = 0;

            if (xhr.status === 304 || !data) return;

@@ -171,20 +242,20 @@ module.exports.getProfiles = function() {
            });
        },
        function(err) {
-            callTracker["getProfiles"] = 0;
-            dispatchError(err, "getProfiles");
+            callTracker['getProfiles'] = 0;
+            dispatchError(err, 'getProfiles');
        }
    );
 }

 module.exports.getSessions = function() {
-    if (isCallInProgress("getSessions")) return;
+    if (isCallInProgress('getSessions')) return;

-    callTracker["getSessions"] = utils.getTimestamp();
+    callTracker['getSessions'] = utils.getTimestamp();
    client.getSessions(
        UserStore.getCurrentId(),
        function(data, textStatus, xhr) {
-            callTracker["getSessions"] = 0;
+            callTracker['getSessions'] = 0;

            if (xhr.status === 304 || !data) return;

@@ -194,20 +265,20 @@ module.exports.getSessions = function() {
            });
        },
        function(err) {
-            callTracker["getSessions"] = 0;
-            dispatchError(err, "getSessions");
+            callTracker['getSessions'] = 0;
+            dispatchError(err, 'getSessions');
        }
    );
 }

 module.exports.getAudits = function() {
-    if (isCallInProgress("getAudits")) return;
+    if (isCallInProgress('getAudits')) return;

-    callTracker["getAudits"] = utils.getTimestamp();
+    callTracker['getAudits'] = utils.getTimestamp();
    client.getAudits(
        UserStore.getCurrentId(),
        function(data, textStatus, xhr) {
-            callTracker["getAudits"] = 0;
+            callTracker['getAudits'] = 0;

            if (xhr.status === 304 || !data) return;

@@ -217,22 +288,22 @@ module.exports.getAudits = function() {
            });
        },
        function(err) {
-            callTracker["getAudits"] = 0;
-            dispatchError(err, "getAudits");
+            callTracker['getAudits'] = 0;
+            dispatchError(err, 'getAudits');
        }
    );
 }

 module.exports.findTeams = function(email) {
-    if (isCallInProgress("findTeams_"+email)) return;
+    if (isCallInProgress('findTeams_'+email)) return;

    var user = UserStore.getCurrentUser();
    if (user) {
-        callTracker["findTeams_"+email] = utils.getTimestamp();
+        callTracker['findTeams_'+email] = utils.getTimestamp();
        client.findTeams(
            user.email,
            function(data, textStatus, xhr) {
-                callTracker["findTeams_"+email] = 0;
+                callTracker['findTeams_'+email] = 0;

                if (xhr.status === 304 || !data) return;

@@ -242,21 +313,21 @@ module.exports.findTeams = function(email) {
                });
            },
            function(err) {
-                callTracker["findTeams_"+email] = 0;
-                dispatchError(err, "findTeams");
+                callTracker['findTeams_'+email] = 0;
+                dispatchError(err, 'findTeams');
            }
        );
    }
 }

 module.exports.search = function(terms) {
-    if (isCallInProgress("search_"+String(terms))) return;
+    if (isCallInProgress('search_'+String(terms))) return;

-    callTracker["search_"+String(terms)] = utils.getTimestamp();
+    callTracker['search_'+String(terms)] = utils.getTimestamp();
    client.search(
        terms,
        function(data, textStatus, xhr) {
-            callTracker["search_"+String(terms)] = 0;
+            callTracker['search_'+String(terms)] = 0;

            if (xhr.status === 304 || !data) return;

@@ -266,8 +337,8 @@ module.exports.search = function(terms) {
            });
        },
        function(err) {
-            callTracker["search_"+String(terms)] = 0;
-            dispatchError(err, "search");
+            callTracker['search_'+String(terms)] = 0;
+            dispatchError(err, 'search');
        }
    );
 }
@@ -276,7 +347,7 @@ module.exports.getPosts = function(force, id, maxPosts) {
    if (PostStore.getCurrentPosts() == null || force) {
        var channelId = id ? id : ChannelStore.getCurrentId();

-        if (isCallInProgress("getPosts_"+channelId)) return;
+        if (isCallInProgress('getPosts_'+channelId)) return;

        var post_list = PostStore.getCurrentPosts();

@@ -291,7 +362,7 @@ module.exports.getPosts = function(force, id, maxPosts) {
        }

        if (channelId != null) {
-            callTracker["getPosts_"+channelId] = utils.getTimestamp();
+            callTracker['getPosts_'+channelId] = utils.getTimestamp();
            client.getPosts(
                channelId,
                0,
@@ -308,23 +379,25 @@ module.exports.getPosts = function(force, id, maxPosts) {
                    module.exports.getProfiles();
                },
                function(err) {
-                    dispatchError(err, "getPosts");
+                    dispatchError(err, 'getPosts');
                },
                function() {
-                    callTracker["getPosts_"+channelId] = 0;
+                    callTracker['getPosts_'+channelId] = 0;
                }
            );
        }
    }
 }

-module.exports.getMe = function() {
-    if (isCallInProgress("getMe")) return;
+function getMe() {
+    if (isCallInProgress('getMe')) {
+        return;
+    }

-    callTracker["getMe"] = utils.getTimestamp();
+    callTracker.getMe = utils.getTimestamp();
    client.getMe(
        function(data, textStatus, xhr) {
-            callTracker["getMe"] = 0;
+            callTracker.getMe = 0;

            if (xhr.status === 304 || !data) return;

@@ -334,19 +407,20 @@ module.exports.getMe = function() {
            });
        },
        function(err) {
-            callTracker["getMe"] = 0;
-            dispatchError(err, "getMe");
+            callTracker.getMe = 0;
+            dispatchError(err, 'getMe');
        }
    );
 }
+module.exports.getMe = getMe;

 module.exports.getStatuses = function() {
-    if (isCallInProgress("getStatuses")) return;
+    if (isCallInProgress('getStatuses')) return;

-    callTracker["getStatuses"] = utils.getTimestamp();
+    callTracker['getStatuses'] = utils.getTimestamp();
    client.getStatuses(
        function(data, textStatus, xhr) {
-            callTracker["getStatuses"] = 0;
+            callTracker['getStatuses'] = 0;

            if (xhr.status === 304 || !data) return;

@@ -356,19 +430,19 @@ module.exports.getStatuses = function() {
            });
        },
        function(err) {
-            callTracker["getStatuses"] = 0;
-            dispatchError(err, "getStatuses");
+            callTracker['getStatuses'] = 0;
+            dispatchError(err, 'getStatuses');
        }
    );
 }

 module.exports.getMyTeam = function() {
-    if (isCallInProgress("getMyTeam")) return;
+    if (isCallInProgress('getMyTeam')) return;

-    callTracker["getMyTeam"] = utils.getTimestamp();
+    callTracker['getMyTeam'] = utils.getTimestamp();
    client.getMyTeam(
        function(data, textStatus, xhr) {
-            callTracker["getMyTeam"] = 0;
+            callTracker['getMyTeam'] = 0;

            if (xhr.status === 304 || !data) return;

@@ -378,8 +452,8 @@ module.exports.getMyTeam = function() {
            });
        },
        function(err) {
-            callTracker["getMyTeam"] = 0;
-            dispatchError(err, "getMyTeam");
+            callTracker['getMyTeam'] = 0;
+            dispatchError(err, 'getMyTeam');
        }
    );
 }
--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -540,18 +540,34 @@ module.exports.updateLastViewedAt = function(channelId, success, error) {
    });
 };

-module.exports.getChannels = function(success, error) {
+function getChannels(success, error) {
    $.ajax({
-        url: "/api/v1/channels/",
+        url: '/api/v1/channels/',
        dataType: 'json',
        type: 'GET',
        success: success,
        ifModified: true,
        error: function(xhr, status, err) {
-            e = handleError("getChannels", xhr, status, err);
+            var e = handleError('getChannels', xhr, status, err);
            error(e);
        }
    });
+}
+module.exports.getChannels = getChannels;
+
+module.exports.getChannel = function(id, success, error) {
+    $.ajax({
+        url: "/api/v1/channels/" + id + "/",
+        dataType: 'json',
+        type: 'GET',
+        success: success,
+        error: function(xhr, status, err) {
+            e = handleError("getChannel", xhr, status, err);
+            error(e);
+        }
+    });
+
+    module.exports.track('api', 'api_channel_get');
 };

 module.exports.getMoreChannels = function(success, error) {
@@ -568,6 +584,21 @@ module.exports.getMoreChannels = function(success, error) {
    });
 };

+function getChannelCounts(success, error) {
+    $.ajax({
+        url: '/api/v1/channels/counts',
+        dataType: 'json',
+        type: 'GET',
+        success: success,
+        ifModified: true,
+        error: function(xhr, status, err) {
+            var e = handleError('getChannelCounts', xhr, status, err);
+            error(e);
+        }
+    });
+}
+module.exports.getChannelCounts = getChannelCounts;
+
 module.exports.getChannelExtraInfo = function(id, success, error) {
    $.ajax({
        url: "/api/v1/channels/" + id + "/extra_info",
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -10,6 +10,7 @@ module.exports = {
    CLICK_CHANNEL: null,
    CREATE_CHANNEL: null,
    RECIEVED_CHANNELS: null,
+    RECIEVED_CHANNEL: null,
    RECIEVED_MORE_CHANNELS: null,
    RECIEVED_CHANNEL_EXTRA_INFO: null,

--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -732,20 +732,19 @@ module.exports.isValidUsername = function (name) {
    return error;
 }

-module.exports.switchChannel = function(channel, teammate_name) {
+function switchChannel(channel, teammateName) {
    AppDispatcher.handleViewAction({
      type: ActionTypes.CLICK_CHANNEL,
      name: channel.name,
      id: channel.id
    });

-    var teamURL = window.location.href.split('/channels')[0];
-    history.replaceState('data', '', teamURL + '/channels/' + channel.name);
+    updateAddressBar(channel.name);

-    if (channel.type === 'D' && teammate_name) {
-        document.title = teammate_name + " " + document.title.substring(document.title.lastIndexOf("-"));
+    if (channel.type === 'D' && teammateName) {
+        updateTabTitle(teammateName);
    } else {
-        document.title = channel.display_name + " " + document.title.substring(document.title.lastIndexOf("-"));
+        updateTabTitle(channel.display_name);
    }

    AsyncClient.getChannels(true, true, true);
@@ -759,6 +758,18 @@ module.exports.switchChannel = function(channel, teammate_name) {

    return false;
 }
+module.exports.switchChannel = switchChannel;
+
+function updateTabTitle(name) {
+    document.title = name + ' ' + document.title.substring(document.title.lastIndexOf('-'));
+}
+module.exports.updateTabTitle = updateTabTitle;
+
+function updateAddressBar(channelName) {
+    var teamURL = window.location.href.split('/channels')[0];
+    history.replaceState('data', '', teamURL + '/channels/' + channelName);
+}
+module.exports.updateAddressBar = updateAddressBar;

 module.exports.isMobile = function() {
  return screen.width <= 768;