Initial prepatory cosmetic reformatting of navbar.jsx

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 {
+        } else if (channelMember.mention_count > 0) {
-            if (channelMember.mention_count > 0) {
+            count += channelMember.mention_count;
-                count += channelMember.mention_count;
+        } else if (channelMember.notify_level !== 'quiet' && channel.total_msg_count - channelMember.msg_count > 0) {
-            } else if (channelMember.notify_level !== "quiet" && channel.total_msg_count - channelMember.msg_count > 0) {
+            count += 1;
-                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 <span className="badge badge-notify">{ this.state.count }</span>;
+            return <span className='badge badge-notify'>{this.state.count}</span>;
-        } else {
-            return null;
         }
+        return null;
     }
 });
 
 function getStateFromStores() {
-  return {
+    return {
-    channel: ChannelStore.getCurrent(),
+        channel: ChannelStore.getCurrent(),
-    member: ChannelStore.getCurrentMember(),
+        member: ChannelStore.getCurrentMember(),
-    users: ChannelStore.getCurrentExtraInfo().members
+        users: ChannelStore.getCurrentExtraInfo().members
-  };
+    };
 }
 
 module.exports = React.createClass({
     displayName: 'Navbar',
-
+    propTypes: {
+        teamDisplayName: React.PropTypes.string
+    },
     componentDidMount: function() {
-        ChannelStore.addChangeListener(this._onChange);
+        ChannelStore.addChangeListener(this.onListenerChange);
-        ChannelStore.addExtraInfoChangeListener(this._onChange);
+        ChannelStore.addExtraInfoChangeListener(this.onListenerChange);
         $('.inner__wrap').click(this.hideSidebars);
 
-        $('body').on('click.infopopover', function(e) {
+        $('body').on('click.infopopover', function handlePopoverClick(e) {
-            if ($(e.target).attr('data-toggle') !== 'popover'
+            if ($(e.target).attr('data-toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) {
-                && $(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) {
+            function error(err) {
-                AsyncClient.dispatchError(err, "handleLeave");
+                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(<MessageWrapper message={channel.description} options={{singleline: true, noMentionHighlight: true}}/>);
-            popoverContent = React.renderToString(<MessageWrapper message={channel.description}/>);
+            isAdmin = this.state.member.roles.indexOf('admin') > -1;
-            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(<div>No channel description yet. <br /><a href='#' data-toggle='modal' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id} data-target='#edit_channel'>Click here</a> to add one.</div>);
             }
         }
 
-        var navbar_collapse_button = currentId != null ? null :
+        var navbarCollapseButton = null;
-                        <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
+        if (currentId == null) {
-                            <span className="sr-only">Toggle sidebar</span>
+            navbarCollapseButton = (<button type='button' className='navbar-toggle' data-toggle='collapse' data-target='#navbar-collapse-1'>
-                            <span className="icon-bar"></span>
+                                        <span className='sr-only'>Toggle sidebar</span>
-                            <span className="icon-bar"></span>
+                                        <span className='icon-bar'></span>
-                            <span className="icon-bar"></span>
+                                        <span className='icon-bar'></span>
-                        </button>;
+                                        <span className='icon-bar'></span>
-        var sidebar_collapse_button = currentId == null ? null :
+                                    </button>);
-                        <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#sidebar-nav" onClick={this.toggleLeftSidebar}>
+        }
-                            <span className="sr-only">Toggle sidebar</span>
-                            <span className="icon-bar"></span>
-                            <span className="icon-bar"></span>
-                            <span className="icon-bar"></span>
-                            <NotifyCounts />
-                        </button>;
-        var right_sidebar_collapse_button= currentId == null ? null :
-                        <button type="button" className="navbar-toggle menu-toggle pull-right" data-toggle="collapse" data-target="#sidebar-nav" onClick={this.toggleRightSidebar}>
-                            <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON }} />
-                        </button>;
 
+        var sidebarCollapseButton = null;
+        if (currentId != null) {
+            sidebarCollapseButton = (<button type='button' className='navbar-toggle' data-toggle='collapse' data-target='#sidebar-nav' onClick={this.toggleLeftSidebar}>
+                                        <span className='sr-only'>Toggle sidebar</span>
+                                        <span className='icon-bar'></span>
+                                        <span className='icon-bar'></span>
+                                        <span className='icon-bar'></span>
+                                        <NotifyCounts />
+                                    </button>);
+        }
+
+        var rightSidebarCollapseButton = null;
+        if (currentId != null) {
+            rightSidebarCollapseButton = (<button type='button' className='navbar-toggle menu-toggle pull-right' data-toggle='collapse' data-target='#sidebar-nav' onClick={this.toggleRightSidebar}>
+                                            <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} />
+                                        </button>);
+        }
+
+        var channelMenuDropdown = null;
+        if (!isDirect && channel) {
+            var addMembersOption = null;
+            if (!ChannelStore.isDefault(channel)) {
+                addMembersOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_invite' href='#'>Add Members</a></li>;
+            }
+
+            var manageMembersOption = null;
+            if (isAdmin && !ChannelStore.isDefault(channel)) {
+                manageMembersOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_members' href='#'>Manage Members</a></li>;
+            }
+
+            var setChannelDescriptionOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li>;
+            var notificationPreferenceOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#channel_notifications' data-title={channel.display_name} data-channelid={channel.id}>Notification Preferences</a></li>;
+
+            var renameChannelOption = null;
+            if (isAdmin && !ChannelStore.isDefault(channel)) {
+                renameChannelOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#rename_channel' data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename Channel...</a></li>;
+            }
+
+            var deleteChannelOption = null;
+            if (isAdmin && !ChannelStore.isDefault(channel)) {
+                deleteChannelOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#delete_channel' data-title={channel.display_name} data-channelid={channel.id}>Delete Channel...</a></li>;
+            }
+
+            var leaveChannelOption = null;
+            if (!ChannelStore.isDefault(channel)) {
+                leaveChannelOption = <li role='presentation'><a role='menuitem' href='#' onClick={this.handleLeave}>Leave Channel</a></li>;
+            }
+
+            channelMenuDropdown = (<div className='navbar-brand'>
+                                        <div className='dropdown'>
+                                            <div data-toggle='popover' data-content={popoverContent} className='description info-popover'></div>
+                                            <a href='#' className='dropdown-toggle theme' type='button' id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true'>
+                                                <span className='heading'>{channelTitle} </span>
+                                                <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span>
+                                            </a>
+                                            <ul className='dropdown-menu' role='menu' aria-labelledby='channel_header_dropdown'>
+                                                {addMembersOption}
+                                                {manageMembersOption}
+                                                {setChannelDescriptionOption}
+                                                {notificationPreferenceOption}
+                                                {renameChannelOption}
+                                                {deleteChannelOption}
+                                                {leaveChannelOption}
+                                            </ul>
+                                        </div>
+                                    </div>);
+        } else if (isDirect && channel) {
+            channelMenuDropdown = (<div className='navbar-brand'>
+                                        <a href='#' className='heading'>{channelTitle}</a>
+                                    </div>);
+        } else if (!channel) {
+            channelMenuDropdown = (<div className='navbar-brand'>
+                                        <a href='/' className='heading'>{channelTitle}</a>
+                                    </div>);
+        }
 
         return (
-            <nav className="navbar navbar-default navbar-fixed-top" role="navigation">
+            <nav className='navbar navbar-default navbar-fixed-top' role='navigation'>
-                <div className="container-fluid theme">
+                <div className='container-fluid theme'>
-                    <div className="navbar-header">
+                    <div className='navbar-header'>
-                        { navbar_collapse_button }
+                        {navbarCollapseButton}
-                        { sidebar_collapse_button }
+                        {sidebarCollapseButton}
-                        { right_sidebar_collapse_button }
+                        {rightSidebarCollapseButton}
-                        { !isDirect && channel ?
+                        {channelMenuDropdown}
-                            <div className="navbar-brand">
-                                <div className="dropdown">
-                                    <div data-toggle="popover" data-content={popoverContent} className="description info-popover"></div>
-                                    <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true">
-                                        <span className="heading">{channelTitle} </span>
-                                        <span className="glyphicon glyphicon-chevron-down header-dropdown__icon"></span>
-                                    </a>
-                                    <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown">
-                                        { !ChannelStore.isDefault(channel) ?
-                                            <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Add Members</a></li>
-                                            : null
-                                        }
-                                        { isAdmin && !ChannelStore.isDefault(channel) ?
-                                            <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_members" href="#">Manage Members</a></li>
-                                            : null
-                                        }
-                                        <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li>
-                                        <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#channel_notifications" data-title={channel.display_name} data-channelid={channel.id}>Notification Preferences</a></li>
-                                        { isAdmin && !ChannelStore.isDefault(channel) ?
-                                            <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#rename_channel" data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename Channel...</a></li>
-                                            : null
-                                        }
-                                        { isAdmin && !ChannelStore.isDefault(channel) ?
-                                            <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#delete_channel" data-title={channel.display_name} data-channelid={channel.id}>Delete Channel...</a></li>
-                                            : null
-                                        }
-                                        { !ChannelStore.isDefault(channel) ?
-                                            <li role="presentation"><a role="menuitem" href="#" onClick={this.handleLeave}>Leave Channel</a></li>
-                                            : null
-                                        }
-                                    </ul>
-                                </div>
-                            </div>
-                            : null
-                        }
-                        { isDirect && channel ?
-                            <div className="navbar-brand">
-                                <a href="#" className="heading">{ channelTitle }</a>
-                            </div>
-                        : null }
-                        { !channel ?
-                            <div className="navbar-brand">
-                                <a href="/" className="heading">{ channelTitle }</a>
-                            </div>
-                        : "" }
                     </div>
                 </div>
             </nav>