From 10de9a9603a59c0e57cdb6d86fe04ab7244c52d8 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Mon, 17 Aug 2015 14:46:44 -0700 Subject: Initial prepatory cosmetic reformatting of navbar.jsx --- web/react/components/navbar.jsx | 245 +++++++++++++++++++++------------------- 1 file changed, 129 insertions(+), 116 deletions(-) diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 6d23c0d9b..61131fc1f 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -1,7 +1,6 @@ // 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'); @@ -21,30 +20,28 @@ function getCountsStateFromStores() { var channels = ChannelStore.getAll(); var members = ChannelStore.getAllMembers(); - channels.forEach(function(channel) { + channels.forEach(function setChannelInfo(channel) { var channelMember = members[channel.id]; if (channel.type === 'D') { count += channel.total_msg_count - channelMember.msg_count; - } else { - if (channelMember.mention_count > 0) { - count += channelMember.mention_count; - } else if (channelMember.notify_level !== "quiet" && channel.total_msg_count - channelMember.msg_count > 0) { - count += 1; - } + } else if (channelMember.mention_count > 0) { + count += channelMember.mention_count; + } else if (channelMember.notify_level !== 'quiet' && channel.total_msg_count - channelMember.msg_count > 0) { + count += 1; } }); - return { count: count }; + return {count: count}; } -var NotifyCounts = React.createClass({ +var NotifyCounts = React.createClass({ componentDidMount: function() { - ChannelStore.addChangeListener(this._onChange); + ChannelStore.addChangeListener(this.onListenerChange); }, componentWillUnmount: function() { - ChannelStore.removeChangeListener(this._onChange); + ChannelStore.removeChangeListener(this.onListenerChange); }, - _onChange: function() { + onListenerChange: function() { var newState = getCountsStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { this.setState(newState); @@ -55,57 +52,56 @@ var NotifyCounts = React.createClass({ }, render: function() { if (this.state.count) { - return { this.state.count }; - } else { - return null; + return {this.state.count}; } + return null; } }); function getStateFromStores() { - return { - channel: ChannelStore.getCurrent(), - member: ChannelStore.getCurrentMember(), - users: ChannelStore.getCurrentExtraInfo().members - }; + return { + channel: ChannelStore.getCurrent(), + member: ChannelStore.getCurrentMember(), + users: ChannelStore.getCurrentExtraInfo().members + }; } module.exports = React.createClass({ displayName: 'Navbar', - + propTypes: { + teamDisplayName: React.PropTypes.string + }, componentDidMount: function() { - ChannelStore.addChangeListener(this._onChange); - ChannelStore.addExtraInfoChangeListener(this._onChange); + ChannelStore.addChangeListener(this.onListenerChange); + ChannelStore.addExtraInfoChangeListener(this.onListenerChange); $('.inner__wrap').click(this.hideSidebars); - $('body').on('click.infopopover', function(e) { - if ($(e.target).attr('data-toggle') !== 'popover' - && $(e.target).parents('.popover.in').length === 0) { + $('body').on('click.infopopover', function handlePopoverClick(e) { + if ($(e.target).attr('data-toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) { $('.info-popover').popover('hide'); } }); - }, componentWillUnmount: function() { - ChannelStore.removeChangeListener(this._onChange); + ChannelStore.removeChangeListener(this.onListenerChange); }, handleSubmit: function(e) { e.preventDefault(); }, - handleLeave: function(e) { + handleLeave: function() { client.leaveChannel(this.state.channel.id, - function(data, text, req) { + function success() { AsyncClient.getChannels(true); window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/town-square'; - }.bind(this), - function(err) { - AsyncClient.dispatchError(err, "handleLeave"); + }, + function error(err) { + AsyncClient.dispatchError(err, 'handleLeave'); } ); }, hideSidebars: function(e) { var windowWidth = $(window).outerWidth(); - if(windowWidth <= 768) { + if (windowWidth <= 768) { AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_SEARCH, results: null @@ -116,7 +112,7 @@ module.exports = React.createClass({ results: null }); - if (e.target.className != 'navbar-toggle' && e.target.className != 'icon-bar') { + if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') { $('.inner__wrap').removeClass('move--right move--left move--left-small'); $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').removeClass('move--left'); @@ -132,27 +128,24 @@ module.exports = React.createClass({ $('.inner__wrap').toggleClass('move--left-small'); $('.sidebar--menu').toggleClass('move--left'); }, - _onChange: function() { + onListenerChange: function() { this.setState(getStateFromStores()); - $("#navbar .navbar-brand .description").popover({placement : 'bottom', trigger: 'click', html: true}); + $('#navbar .navbar-brand .description').popover({placement: 'bottom', trigger: 'click', html: true}); }, getInitialState: function() { return getStateFromStores(); }, render: function() { - var currentId = UserStore.getCurrentId(); - var popoverContent = ""; + var popoverContent = ''; var channelTitle = this.props.teamDisplayName; var isAdmin = false; var isDirect = false; - var description = "" var channel = this.state.channel; if (channel) { - description = utils.textToJsx(channel.description, {"singleline": true, "noMentionHighlight": true}); - popoverContent = React.renderToString(); - isAdmin = this.state.member.roles.indexOf("admin") > -1; + popoverContent = React.renderToString(); + isAdmin = this.state.member.roles.indexOf('admin') > -1; if (channel.type === 'O') { channelTitle = channel.display_name; @@ -169,85 +162,105 @@ module.exports = React.createClass({ } } - if (channel.description.length == 0) { + if (channel.description.length === 0) { popoverContent = React.renderToString(
No channel description yet.
Click here to add one.
); } } - var navbar_collapse_button = currentId != null ? null : - ; - var sidebar_collapse_button = currentId == null ? null : - ; - var right_sidebar_collapse_button= currentId == null ? null : - ; + var navbarCollapseButton = null; + if (currentId == null) { + navbarCollapseButton = (); + } + + var sidebarCollapseButton = null; + if (currentId != null) { + sidebarCollapseButton = (); + } + var rightSidebarCollapseButton = null; + if (currentId != null) { + rightSidebarCollapseButton = (); + } + + var channelMenuDropdown = null; + if (!isDirect && channel) { + var addMembersOption = null; + if (!ChannelStore.isDefault(channel)) { + addMembersOption =
  • Add Members
    • ; + } + + var manageMembersOption = null; + if (isAdmin && !ChannelStore.isDefault(channel)) { + manageMembersOption =
  • Manage Members
    • ; + } + + var setChannelDescriptionOption =
  • Set Channel Description...
    • ; + var notificationPreferenceOption =
  • Notification Preferences
    • ; + + var renameChannelOption = null; + if (isAdmin && !ChannelStore.isDefault(channel)) { + renameChannelOption =
  • Rename Channel...
    • ; + } + + var deleteChannelOption = null; + if (isAdmin && !ChannelStore.isDefault(channel)) { + deleteChannelOption =
  • Delete Channel...
    • ; + } + + var leaveChannelOption = null; + if (!ChannelStore.isDefault(channel)) { + leaveChannelOption =
  • Leave Channel
    • ; + } + + channelMenuDropdown = (
    +
    +
    + + {channelTitle} + + +
      + {addMembersOption} + {manageMembersOption} + {setChannelDescriptionOption} + {notificationPreferenceOption} + {renameChannelOption} + {deleteChannelOption} + {leaveChannelOption} +
    +
    +
    ); + } else if (isDirect && channel) { + channelMenuDropdown = (
    + {channelTitle} +
    ); + } else if (!channel) { + channelMenuDropdown = (
    + {channelTitle} +
    ); + } return ( -