From 1c0ee4d2f65d1d4434a3a16070abe7d61a268ce6 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Mon, 27 Jul 2015 11:30:03 -0400 Subject: added getChannel api service and use that over getChannels where appropriate on client --- web/react/components/edit_channel_modal.jsx | 2 +- web/react/components/sidebar.jsx | 12 +++++----- web/react/stores/channel_store.jsx | 37 ++++++++++++++++++++++++++++- web/react/utils/async_client.jsx | 24 +++++++++++++++++++ web/react/utils/client.jsx | 15 ++++++++++++ web/react/utils/constants.jsx | 1 + 6 files changed, 83 insertions(+), 8 deletions(-) (limited to 'web') 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/sidebar.jsx b/web/react/components/sidebar.jsx index fe73cbcf7..fa6302b6d 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -157,9 +157,9 @@ 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.getChannel(msg.channel_id); } if (UserStore.getCurrentId() !== msg.user_id) { @@ -213,13 +213,13 @@ module.exports = React.createClass({ utils.ding(); } } - } else if (msg.action === 'viewed') { - if (ChannelStore.getCurrentId() != msg.channel_id) { - AsyncClient.getChannels(true); + } else if (msg.action === "viewed") { + 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()) { diff --git a/web/react/stores/channel_store.jsx b/web/react/stores/channel_store.jsx index a97f13391..46e856a97 100644 --- a/web/react/stores/channel_store.jsx +++ b/web/react/stores/channel_store.jsx @@ -146,12 +146,39 @@ var ChannelStore = assign({}, EventEmitter.prototype, { return extra; }, + _storeChannel: function(channel) { + var channels = this._getChannels(); + 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(a,b) { + if (a.display_name < b.display_name) return -1; + if (a.display_name > b.display_name) return 1; + return 0; + }); + } + this._storeChannels(channels); + }, _storeChannels: function(channels) { BrowserStore.setItem("channels", channels); }, _getChannels: function() { return BrowserStore.getItem("channels", []); }, + _storeChannelMember: function(channelMember) { + var members = this._getChannelMembers(); + members[channelMember.channel_id] = channelMember; + this._storeChannelMembers(members); + }, _storeChannelMembers: function(channelMembers) { BrowserStore.setItem("channel_members", channelMembers); }, @@ -202,6 +229,14 @@ ChannelStore.dispatchToken = AppDispatcher.register(function(payload) { ChannelStore.emitChange(); break; + case ActionTypes.RECIEVED_CHANNEL: + ChannelStore._storeChannel(action.channel); + ChannelStore._storeChannelMember(action.member); + var currentId = ChannelStore.getCurrentId(); + if (currentId) ChannelStore.resetCounts(currentId); + ChannelStore.emitChange(); + break; + case ActionTypes.RECIEVED_MORE_CHANNELS: ChannelStore._storeMoreChannels(action.channels); ChannelStore.emitMoreChange(); @@ -218,4 +253,4 @@ ChannelStore.dispatchToken = AppDispatcher.register(function(payload) { } }); -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..b938216ac 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -81,6 +81,30 @@ module.exports.getChannels = function(force, updateLastViewed, checkVersion) { } } +module.exports.getChannel = function(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.updateLastViewedAt = function() { if (isCallInProgress("updateLastViewed")) return; diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index 6a1f7c820..7b014cdad 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -554,6 +554,21 @@ module.exports.getChannels = function(success, error) { }); }; +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) { $.ajax({ url: "/api/v1/channels/more", diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index bed0ec556..19c92df33 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, -- cgit v1.2.3-1-g7c22 From 6c0fefad152e1843bccf80fb675301b789f70dd5 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Mon, 10 Aug 2015 14:47:45 -0400 Subject: added getChannelCounts service and refactored the client to more intelligently pull channel data --- web/react/components/more_channels.jsx | 123 +++++++------ web/react/components/new_channel.jsx | 4 +- web/react/components/rename_channel_modal.jsx | 2 +- web/react/components/sidebar.jsx | 9 +- web/react/utils/async_client.jsx | 246 +++++++++++++++----------- web/react/utils/client.jsx | 24 ++- 6 files changed, 243 insertions(+), 165 deletions(-) (limited to 'web') diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index 007476f9b..e851283ae 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 ?
: null; + var serverError; + if (this.state.serverError) { + serverError =
; + } + 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 = ( + + + {moreChannels.map(function cMap(channel) { + return ( + + + + + ); + })} + +
+

{channel.display_name}

+

{channel.description}

+
+ ); + } else { + moreChannels = ( +
+

No more channels to join

+

Click 'Create New Channel' to make a new one

+
+ ); + } + } else { + moreChannels = ; + } + } return ( -