Reformatted sidebar.jsx to meet style guide requirements.

web/react/components/sidebar.jsx

@@ -13,7 +13,24 @@ var SidebarHeader = require('./sidebar_header.jsx');
 var SearchBox = require('./search_bar.jsx');
 var Constants = require('../utils/constants.jsx');
 
-function getStateFromStores() {
+export default class Sidebar extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.badgesActive = false;
+        this.firstUnreadChannel = null;
+        this.lastUnreadChannel = null;
+
+        this.onChange = this.onChange.bind(this);
+        this.onScroll = this.onScroll.bind(this);
+        this.onResize = this.onResize.bind(this);
+        this.updateUnreadIndicators = this.updateUnreadIndicators.bind(this);
+        this.createChannelElement = this.createChannelElement.bind(this);
+
+        this.state = this.getStateFromStores();
+        this.state.loadingDMChannel = -1;
+    }
+    getStateFromStores() {
         var members = ChannelStore.getAllMembers();
         var teamMemberMap = UserStore.getActiveOnlyProfiles();
         var currentId = ChannelStore.getCurrentId();
@@ -120,15 +137,8 @@ function getStateFromStores() {
             showDirectChannels: showDirectChannels,
             hideDirectChannels: readDirectChannels
         };
-}
+    }
-
+    componentDidMount() {
-module.exports = React.createClass({
-    displayName: 'Sidebar',
-    propTypes: {
-        teamType: React.PropTypes.string,
-        teamDisplayName: React.PropTypes.string
-    },
-    componentDidMount: function() {
         ChannelStore.addChangeListener(this.onChange);
         UserStore.addChangeListener(this.onChange);
         UserStore.addStatusesChangeListener(this.onChange);
@@ -140,12 +150,12 @@ module.exports = React.createClass({
         this.updateUnreadIndicators();
 
         $(window).on('resize', this.onResize);
-    },
+    }
-    componentDidUpdate: function() {
+    componentDidUpdate() {
         this.updateTitle();
         this.updateUnreadIndicators();
-    },
+    }
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         $(window).off('resize', this.onResize);
 
         ChannelStore.removeChangeListener(this.onChange);
@@ -153,14 +163,14 @@ module.exports = React.createClass({
         UserStore.removeStatusesChangeListener(this.onChange);
         TeamStore.removeChangeListener(this.onChange);
         SocketStore.removeChangeListener(this.onSocketChange);
-    },
+    }
-    onChange: function() {
+    onChange() {
-        var newState = getStateFromStores();
+        var newState = this.getStateFromStores();
         if (!utils.areStatesEqual(newState, this.state)) {
             this.setState(newState);
         }
-    },
+    }
-    onSocketChange: function(msg) {
+    onSocketChange(msg) {
         if (msg.action === 'posted') {
             if (ChannelStore.getCurrentId() === msg.channel_id) {
                 if (window.isActive) {
@@ -243,8 +253,8 @@ module.exports = React.createClass({
                 }
             }
         }
-    },
+    }
-    updateTitle: function() {
+    updateTitle() {
         var channel = ChannelStore.getCurrent();
         if (channel) {
             if (channel.type === 'D') {
@@ -254,14 +264,14 @@ module.exports = React.createClass({
                 document.title = channel.display_name + ' ' + document.title.substring(document.title.lastIndexOf('-'));
             }
         }
-    },
+    }
-    onScroll: function() {
+    onScroll() {
         this.updateUnreadIndicators();
-    },
+    }
-    onResize: function() {
+    onResize() {
         this.updateUnreadIndicators();
-    },
+    }
-    updateUnreadIndicators: function() {
+    updateUnreadIndicators() {
         var container = $(this.refs.container.getDOMNode());
 
         if (this.firstUnreadChannel) {
@@ -283,24 +293,10 @@ module.exports = React.createClass({
                 $(this.refs.bottomUnreadIndicator.getDOMNode()).css('display', 'none');
             }
         }
-    },
+    }
-    getInitialState: function() {
+    createChannelElement(channel, index) {
-        var newState = getStateFromStores();
-        newState.loadingDMChannel = -1;
-
-        return newState;
-    },
-    render: function() {
         var members = this.state.members;
         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
-        var self = this;
-        this.firstUnreadChannel = null;
-        this.lastUnreadChannel = null;
-
-        function createChannelElement(channel, index) {
         var channelMember = members[channel.id];
         var msgCount;
 
@@ -332,15 +328,20 @@ module.exports = React.createClass({
                 msgCount = channel.total_msg_count - channelMember.msg_count;
                 if (msgCount > 0) {
                     badge = <span className='badge pull-right small'>{msgCount}</span>;
-                        badgesActive = true;
+                    this.badgesActive = true;
                 }
             } else if (channelMember.mention_count > 0) {
                 // public and private channels only show badges for mentions
                 badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
-                    badgesActive = true;
+                this.badgesActive = true;
             }
         } else if (self.state.loadingDMChannel === index && channel.type === 'D') {
-                badge = <img className='channel-loading-gif pull-right' src='/static/images/load.gif'/>;
+            badge = (
+                <img
+                    className='channel-loading-gif pull-right'
+                    src='/static/images/load.gif'
+                />
+            );
         }
 
         // set up status icon for direct message channels
@@ -354,7 +355,12 @@ module.exports = React.createClass({
             } else {
                 statusIcon = Constants.OFFLINE_ICON_SVG;
             }
-                status = <span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} />;
+            status = (
+                <span
+                    className='status'
+                    dangerouslySetInnerHTML={{__html: statusIcon}}
+                />
+            );
         }
 
         // set up click handler to switch channels (or create a new channel for non-existant ones)
@@ -392,8 +398,16 @@ module.exports = React.createClass({
         }
 
         return (
-                <li key={channel.name} ref={channel.name} className={linkClass}>
+            <li
-                    <a className={'sidebar-channel ' + titleClass} href={href} onClick={handleClick}>
+                key={channel.name}
+                ref={channel.name}
+                className={linkClass}
+            >
+                <a
+                    className={'sidebar-channel ' + titleClass}
+                    href={href}
+                    onClick={handleClick}
+                >
                     {status}
                     {channel.display_name}
                     {badge}
@@ -401,28 +415,34 @@ module.exports = React.createClass({
             </li>
         );
     }
+    render() {
+        this.badgesActive = false;
+
+        // keep track of the first and last unread channels so we can use them to set the unread indicators
+        this.firstUnreadChannel = null;
+        this.lastUnreadChannel = null;
 
         // create elements for all 3 types of channels
         var channelItems = this.state.channels.filter(
             function filterPublicChannels(channel) {
                 return channel.type === 'O';
             }
-        ).map(createChannelElement);
+        ).map(this.createChannelElement);
 
         var privateChannelItems = this.state.channels.filter(
             function filterPrivateChannels(channel) {
                 return channel.type === 'P';
             }
-        ).map(createChannelElement);
+        ).map(this.createChannelElement);
 
-        var directMessageItems = this.state.showDirectChannels.map(createChannelElement);
+        var directMessageItems = this.state.showDirectChannels.map(this.createChannelElement);
 
         // update the favicon to show if there are any notifications
         var link = document.createElement('link');
         link.type = 'image/x-icon';
         link.rel = 'shortcut icon';
         link.id = 'favicon';
-        if (badgesActive) {
+        if (this.badgesActive) {
             link.href = '/static/images/redfavicon.ico';
         } else {
             link.href = '/static/images/favicon.ico';
@@ -438,7 +458,13 @@ module.exports = React.createClass({
         if (this.state.hideDirectChannels.length > 0) {
             directMessageMore = (
                 <li>
-                    <a href='#' data-toggle='modal' className='nav-more' data-target='#more_direct_channels' data-channels={JSON.stringify(this.state.hideDirectChannels)}>
+                    <a
+                        href='#'
+                        data-toggle='modal'
+                        className='nav-more'
+                        data-target='#more_direct_channels'
+                        data-channels={JSON.stringify(this.state.hideDirectChannels)}
+                    >
                         {'More (' + this.state.hideDirectChannels.length + ')'}
                     </a>
                 </li>
@@ -447,21 +473,76 @@ module.exports = React.createClass({
 
         return (
             <div>
-                <SidebarHeader teamDisplayName={this.props.teamDisplayName} teamType={this.props.teamType} />
+                <SidebarHeader
+                    teamDisplayName={this.props.teamDisplayName}
+                    teamType={this.props.teamType}
+                />
                 <SearchBox />
 
-                <div ref='topUnreadIndicator' className='nav-pills__unread-indicator nav-pills__unread-indicator-top' style={{display: 'none'}}>Unread post(s) above</div>
+                <div
-                <div ref='bottomUnreadIndicator' className='nav-pills__unread-indicator nav-pills__unread-indicator-bottom' style={{display: 'none'}}>Unread post(s) below</div>
+                    ref='topUnreadIndicator'
+                    className='nav-pills__unread-indicator nav-pills__unread-indicator-top'
+                    style={{display: 'none'}}
+                >
+                    Unread post(s) above
+                </div>
+                <div
+                    ref='bottomUnreadIndicator'
+                    className='nav-pills__unread-indicator nav-pills__unread-indicator-bottom'
+                    style={{display: 'none'}}
+                >
+                    Unread post(s) below
+                </div>
 
-                <div ref='container' className='nav-pills__container' onScroll={this.onScroll}>
+                <div
+                    ref='container'
+                    className='nav-pills__container'
+                    onScroll={this.onScroll}
+                >
                     <ul className='nav nav-pills nav-stacked'>
-                        <li><h4>Channels<a className='add-channel-btn' href='#' data-toggle='modal' data-target='#new_channel' data-channeltype='O'>+</a></h4></li>
+                        <li>
+                            <h4>
+                                Channels
+                                <a
+                                    className='add-channel-btn'
+                                    href='#'
+                                    data-toggle='modal'
+                                    data-target='#new_channel'
+                                    data-channeltype='O'
+                                >
+                                    +
+                                </a>
+                            </h4>
+                        </li>
                         {channelItems}
-                        <li><a href='#' data-toggle='modal' className='nav-more' data-target='#more_channels' data-channeltype='O'>More...</a></li>
+                        <li>
+                            <a
+                                href='#'
+                                data-toggle='modal'
+                                className='nav-more'
+                                data-target='#more_channels'
+                                data-channeltype='O'
+                            >
+                                More...
+                            </a>
+                        </li>
                     </ul>
 
                     <ul className='nav nav-pills nav-stacked'>
-                        <li><h4>Private Groups<a className='add-channel-btn' href='#' data-toggle='modal' data-target='#new_channel' data-channeltype='P'>+</a></h4></li>
+                        <li>
+                            <h4>
+                                Private Groups
+                                <a
+                                    className='add-channel-btn'
+                                    href='#'
+                                    data-toggle='modal'
+                                    data-target='#new_channel'
+                                    data-channeltype='P'
+                                >
+                                    +
+                                </a>
+                            </h4>
+                        </li>
                         {privateChannelItems}
                     </ul>
                     <ul className='nav nav-pills nav-stacked'>
@@ -473,4 +554,13 @@ module.exports = React.createClass({
             </div>
         );
     }
-});
+}
+
+Sidebar.defaultProps = {
+    teamType: '',
+    teamDisplayName: ''
+};
+Sidebar.propTypes = {
+    teamType: React.PropTypes.string,
+    teamDisplayName: React.PropTypes.string
+};