diff options
author | Christopher Speller <crspeller@gmail.com> | 2015-08-14 08:35:19 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2015-08-14 08:35:19 -0400 |
commit | a8930cbabec21635a10e8cac4d2c0c79867f283d (patch) | |
tree | a622f8d94fa1b60753896640c1f8c1a5ebaf48e2 /web/react | |
parent | b1d37e9c385f0d3e9bddd9dffe1570574dcdcab6 (diff) | |
parent | 2485b87b28a7fed1996d627b48dcd94f19002fc8 (diff) | |
download | chat-a8930cbabec21635a10e8cac4d2c0c79867f283d.tar.gz chat-a8930cbabec21635a10e8cac4d2c0c79867f283d.tar.bz2 chat-a8930cbabec21635a10e8cac4d2c0c79867f283d.zip |
Merge pull request #365 from mattermost/mm-1700
MM-1700 don't pull all channel data all the time
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/edit_channel_modal.jsx | 2 | ||||
-rw-r--r-- | web/react/components/more_channels.jsx | 123 | ||||
-rw-r--r-- | web/react/components/new_channel.jsx | 12 | ||||
-rw-r--r-- | web/react/components/rename_channel_modal.jsx | 10 | ||||
-rw-r--r-- | web/react/components/sidebar.jsx | 20 | ||||
-rw-r--r-- | web/react/stores/channel_store.jsx | 446 | ||||
-rw-r--r-- | web/react/utils/async_client.jsx | 240 | ||||
-rw-r--r-- | web/react/utils/client.jsx | 37 | ||||
-rw-r--r-- | web/react/utils/constants.jsx | 1 | ||||
-rw-r--r-- | web/react/utils/utils.jsx | 23 |
10 files changed, 549 insertions, 365 deletions
diff --git a/web/react/components/edit_channel_modal.jsx b/web/react/components/edit_channel_modal.jsx index 06d7fc3e8..dcff5b89d 100644 --- 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) { diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index 007476f9b..5261ed6a7 100644 --- 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">×</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'>×</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> diff --git a/web/react/components/new_channel.jsx b/web/react/components/new_channel.jsx index c22147022..b00376758 100644 --- 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; diff --git a/web/react/components/rename_channel_modal.jsx b/web/react/components/rename_channel_modal.jsx index 26593b7fa..93cb6ef21 100644 --- 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; diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index fe73cbcf7..80e3632c7 100644 --- 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'; } diff --git a/web/react/stores/channel_store.jsx b/web/react/stores/channel_store.jsx index a97f13391..f7c23841c 100644 --- 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._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 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); + } - 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; - } + 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; + } }); ChannelStore.dispatchToken = AppDispatcher.register(function(payload) { - var action = payload.action; - - switch(action.type) { - - 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_MORE_CHANNELS: - ChannelStore._storeMoreChannels(action.channels); - ChannelStore.emitMoreChange(); - 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; - - default: - } + var action = payload.action; + var currentId; + + switch(action.type) { + + case ActionTypes.CLICK_CHANNEL: + ChannelStore.setCurrentId(action.id); + ChannelStore.setLastVisitedName(action.name); + ChannelStore.resetCounts(action.id); + 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_CHANNEL: + ChannelStore.pStoreChannel(action.channel); + ChannelStore.pStoreChannelMember(action.member); + currentId = ChannelStore.getCurrentId(); + if (currentId) { + ChannelStore.resetCounts(currentId); + } + ChannelStore.emitChange(); + break; + + case ActionTypes.RECIEVED_MORE_CHANNELS: + ChannelStore.pStoreMoreChannels(action.channels); + ChannelStore.emitMoreChange(); + break; + + 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;
\ No newline at end of file +module.exports = ChannelStore; diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx index f35b0f6cc..7e8a6116c 100644 --- 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(); + + if (channels.length === 0 || force) { + if (isCallInProgress('getChannels')) { + return; + } -module.exports.getChannels = function(force, updateLastViewed, checkVersion) { - 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'); + } + ); + } 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["getChannels"] = 0; - dispatchError(err, "getChannels"); + 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'); } ); } diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index 6a1f7c820..f2b6619a5 100644 --- 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", diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 505f7fa17..0c714567a 100644 --- 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, diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 2214b6239..7591c138f 100644 --- 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; |