From 77964dbfac6d19a3a0bf9d710ca7f31694f4e7e2 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Fri, 31 Jul 2015 14:29:35 -0700 Subject: Cosmetic refactoring to be inline with the style guide --- web/react/components/channel_header.jsx | 179 +++++++++++++++++--------------- 1 file changed, 95 insertions(+), 84 deletions(-) (limited to 'web') diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 0dac593b1..b6182cfa5 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -1,13 +1,11 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. - var ChannelStore = require('../stores/channel_store.jsx'); var UserStore = require('../stores/user_store.jsx'); var PostStore = require('../stores/post_store.jsx'); -var SocketStore = require('../stores/socket_store.jsx') -var UserProfile = require( './user_profile.jsx' ); -var NavbarSearchBox =require('./search_bar.jsx'); +var SocketStore = require('../stores/socket_store.jsx'); +var NavbarSearchBox = require('./search_bar.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var Client = require('../utils/client.jsx'); var utils = require('../utils/utils.jsx'); @@ -21,23 +19,28 @@ var PopoverListMembers = React.createClass({ componentDidMount: function() { var originalLeave = $.fn.popover.Constructor.prototype.leave; $.fn.popover.Constructor.prototype.leave = function(obj) { - var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type); + var selfObj; + if (obj instanceof this.constructor) { + selfObj = obj; + } else { + selfObj = $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type); + } originalLeave.call(this, obj); - if (obj.currentTarget && self.$tip) { - self.$tip.one('mouseenter', function() { - clearTimeout(self.timeout); - self.$tip.one('mouseleave', function() { - $.fn.popover.Constructor.prototype.leave.call(self, self); + if (obj.currentTarget && selfObj.$tip) { + selfObj.$tip.one('mouseenter', function() { + clearTimeout(selfObj.timeout); + selfObj.$tip.one('mouseleave', function() { + $.fn.popover.Constructor.prototype.leave.call(selfObj, selfObj); }); - }) + }); } }; - $("#member_popover").popover({placement : 'bottom', trigger: 'click', html: true}); - $('body').on('click', function (e) { - if ($(e.target.parentNode.parentNode)[0] !== $("#member_popover")[0] && $(e.target).parents('.popover.in').length === 0) { - $("#member_popover").popover('hide'); + $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true}); + $('body').on('click', function(e) { + if ($(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) { + $('#member_popover').popover('hide'); } }); }, @@ -45,22 +48,27 @@ var PopoverListMembers = React.createClass({ render: function() { var popoverHtml = ''; var members = this.props.members; - var count = (members.length > 20) ? "20+" : (members.length || '-'); + var count; + if (members.length > 20) { + count = '20+'; + } else { + count = members.length || '-'; + } if (members) { - members.sort(function(a,b) { + members.sort(function(a, b) { return a.username.localeCompare(b.username); }); members.forEach(function(m) { - popoverHtml += "
" + m.username + "
"; + popoverHtml += "
" + m.username + '
'; }); } return ( -
-
- {count} +
+
+ {count}
); @@ -68,53 +76,53 @@ var PopoverListMembers = React.createClass({ }); function getStateFromStores() { - return { - channel: ChannelStore.getCurrent(), - memberChannel: ChannelStore.getCurrentMember(), - memberTeam: UserStore.getCurrentUser(), - users: ChannelStore.getCurrentExtraInfo().members, - search_visible: PostStore.getSearchResults() != null - }; + return { + channel: ChannelStore.getCurrent(), + memberChannel: ChannelStore.getCurrentMember(), + memberTeam: UserStore.getCurrentUser(), + users: ChannelStore.getCurrentExtraInfo().members, + searchVisible: PostStore.getSearchResults() != null + }; } module.exports = React.createClass({ displayName: 'ChannelHeader', componentDidMount: function() { - ChannelStore.addChangeListener(this._onChange); - ChannelStore.addExtraInfoChangeListener(this._onChange); - PostStore.addSearchChangeListener(this._onChange); - UserStore.addChangeListener(this._onChange); - SocketStore.addChangeListener(this._onSocketChange); + ChannelStore.addChangeListener(this.onListenerChange); + ChannelStore.addExtraInfoChangeListener(this.onListenerChange); + PostStore.addSearchChangeListener(this.onListenerChange); + UserStore.addChangeListener(this.onListenerChange); + SocketStore.addChangeListener(this.onSocketChange); }, componentWillUnmount: function() { - ChannelStore.removeChangeListener(this._onChange); - ChannelStore.removeExtraInfoChangeListener(this._onChange); - PostStore.removeSearchChangeListener(this._onChange); - UserStore.addChangeListener(this._onChange); + ChannelStore.removeChangeListener(this.onListenerChange); + ChannelStore.removeExtraInfoChangeListener(this.onListenerChange); + PostStore.removeSearchChangeListener(this.onListenerChange); + UserStore.addChangeListener(this.onListenerChange); }, - _onChange: function() { + onListenerChange: function() { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { this.setState(newState); } - $(".channel-header__info .description").popover({placement : 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}}); + $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}}); }, - _onSocketChange: function(msg) { - if (msg.action === "new_user") { + onSocketChange: function(msg) { + if (msg.action === 'new_user') { AsyncClient.getChannelExtraInfo(true); } }, getInitialState: function() { return getStateFromStores(); }, - handleLeave: function(e) { + handleLeave: function() { Client.leaveChannel(this.state.channel.id, - function(data) { + function() { var townsquare = ChannelStore.getByName('town-square'); utils.switchChannel(townsquare); }, function(err) { - AsyncClient.dispatchError(err, "handleLeave"); + AsyncClient.dispatchError(err, 'handleLeave'); } ); }, @@ -123,14 +131,14 @@ module.exports = React.createClass({ var user = UserStore.getCurrentUser(); - var terms = ""; + var terms = ''; if (user.notify_props && user.notify_props.mention_keys) { var termKeys = UserStore.getCurrentMentionKeys(); - if (user.notify_props.all === "true" && termKeys.indexOf("@all") !== -1) { - termKeys.splice(termKeys.indexOf("@all"), 1); + if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) { + termKeys.splice(termKeys.indexOf('@all'), 1); } - if (user.notify_props.channel === "true" && termKeys.indexOf("@channel") !== -1) { - termKeys.splice(termKeys.indexOf("@channel"), 1); + if (user.notify_props.channel === 'true' && termKeys.indexOf('@channel') !== -1) { + termKeys.splice(termKeys.indexOf('@channel'), 1); } terms = termKeys.join(' '); } @@ -142,81 +150,84 @@ module.exports = React.createClass({ is_mention_search: true }); }, - render: function() { - if (this.state.channel == null) { return null; } var channel = this.state.channel; - var description = utils.textToJsx(channel.description, {"singleline": true, "noMentionHighlight": true}); + var description = utils.textToJsx(channel.description, {singleline: true, noMentionHighlight: true}); var popoverContent = React.renderToString(); var channelTitle = channel.display_name; var currentId = UserStore.getCurrentId(); - var isAdmin = this.state.memberChannel.roles.indexOf("admin") > -1 || this.state.memberTeam.roles.indexOf("admin") > -1; + var isAdmin = this.state.memberChannel.roles.indexOf('admin') > -1 || this.state.memberTeam.roles.indexOf('admin') > -1; var isDirect = (this.state.channel.type === 'D'); if (isDirect) { if (this.state.users.length > 1) { - var contact = this.state.users[((this.state.users[0].id === currentId) ? 1 : 0)]; + var contact; + if (this.state.users[0].id === currentId) { + contact = this.state.users[1]; + } else { + contact = this.state.users[0]; + } channelTitle = contact.nickname || contact.username; } } return ( - +
- + -- cgit v1.2.3-1-g7c22
-
-
- - {channelTitle} - +
+
+ + {channelTitle} + - { !isDirect ? -
-
{description}
+
{description}
 -