cosmetic refactoring

web/react/components/access_history_modal.jsx

@@ -73,6 +73,11 @@ module.exports = React.createClass({
                 );
             }
 
+            var divider = null;
+            if (i < this.state.audits.length - 1) {
+                divider = (<div className='divider-light'></div>)
+            }
+
             accessList[i] = (
                 <div className='access-history__table'>
                     <div className='access__date'>{newDate}</div>
@@ -82,16 +87,19 @@ module.exports = React.createClass({
                             <div>{'IP: ' + currentAudit.ip_address}</div>
                             {moreInfo}
                         </div>
-                        {i < this.state.audits.length - 1 ?
+                        {divider}
-                        <div className='divider-light'/>
-                        :
-                        null
-                        }
                     </div>
                 </div>
             );
         }
 
+        var content;
+        if (this.state.audits.loading) {
+            content = (<LoadingScreen />);
+        } else {
+            content = (<form role='form'>{accessList}</form>);
+        }
+
         return (
             <div>
                 <div className='modal fade' ref='modal' id='access-history' tabIndex='-1' role='dialog' aria-hidden='true'>
@@ -102,13 +110,7 @@ module.exports = React.createClass({
                                 <h4 className='modal-title' id='myModalLabel'>Access History</h4>
                             </div>
                             <div ref='modalBody' className='modal-body'>
-                                {!this.state.audits.loading ?
+                                {content}
-                                <form role='form'>
-                                {accessList}
-                                </form>
-                                :
-                                <LoadingScreen />
-                                }
                             </div>
                         </div>
                     </div>

web/react/components/activity_log_modal.jsx

@@ -10,27 +10,27 @@ var utils = require('../utils/utils.jsx');
 function getStateFromStoresForSessions() {
     return {
         sessions: UserStore.getSessions(),
-        server_error: null,
+        serverError: null,
-        client_error: null
+        clientError: null
     };
 }
 
 module.exports = React.createClass({
+    displayName: 'ActivityLogModal',
     submitRevoke: function(altId) {
-        var self = this;
         Client.revokeSession(altId,
             function(data) {
                 AsyncClient.getSessions();
             }.bind(this),
             function(err) {
-                state = getStateFromStoresForSessions();
+                var state = getStateFromStoresForSessions();
-                state.server_error = err;
+                state.serverError = err;
                 this.setState(state);
             }.bind(this)
         );
     },
     componentDidMount: function() {
-        UserStore.addSessionsChangeListener(this._onChange);
+        UserStore.addSessionsChangeListener(this.onListenerChange);
         $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) {
             AsyncClient.getSessions();
         });
@@ -38,13 +38,13 @@ module.exports = React.createClass({
         var self = this;
         $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
             $('#user_settings1').modal('show');
-            self.setState({ moreInfo: [] });
+            self.setState({moreInfo: []});
         });
     },
     componentWillUnmount: function() {
-        UserStore.removeSessionsChangeListener(this._onChange);
+        UserStore.removeSessionsChangeListener(this.onListenerChange);
     },
-    _onChange: function() {
+    onListenerChange: function() {
         var newState = getStateFromStoresForSessions();
         if (!utils.areStatesEqual(newState.sessions, this.state.sessions)) {
             this.setState(newState);
@@ -53,7 +53,7 @@ module.exports = React.createClass({
     handleMoreInfo: function(index) {
         var newMoreInfo = this.state.moreInfo;
         newMoreInfo[index] = true;
-        this.setState({ moreInfo: newMoreInfo });
+        this.setState({moreInfo: newMoreInfo});
     },
     getInitialState: function() {
         var initialState = getStateFromStoresForSessions();
@@ -62,68 +62,76 @@ module.exports = React.createClass({
     },
     render: function() {
         var activityList = [];
-        var server_error = this.state.server_error ? this.state.server_error : null;
+        var serverError = this.state.serverError;
+
+        // Squash any false-y value for server error into null
+        if (!serverError) {
+            serverError = null;
+        }
 
         for (var i = 0; i < this.state.sessions.length; i++) {
             var currentSession = this.state.sessions[i];
             var lastAccessTime = new Date(currentSession.last_activity_at);
             var firstAccessTime = new Date(currentSession.create_at);
-            var devicePicture = "";
+            var devicePicture = '';
 
-            if (currentSession.props.platform === "Windows") {
+            if (currentSession.props.platform === 'Windows') {
-                devicePicture = "fa fa-windows";
+                devicePicture = 'fa fa-windows';
             }
-            else if (currentSession.props.platform === "Macintosh" || currentSession.props.platform === "iPhone") {
+            else if (currentSession.props.platform === 'Macintosh' || currentSession.props.platform === 'iPhone') {
-                devicePicture = "fa fa-apple";
+                devicePicture = 'fa fa-apple';
             }
-            else if (currentSession.props.platform === "Linux") {
+            else if (currentSession.props.platform === 'Linux') {
-                devicePicture = "fa fa-linux";
+                devicePicture = 'fa fa-linux';
+            }
+
+            var moreInfo;
+            if (this.state.moreInfo[i]) {
+                moreInfo = (
+                    <div>
+                        <div>{'First time active: ' + firstAccessTime.toDateString() + ', ' + lastAccessTime.toLocaleTimeString()}</div>
+                        <div>{'OS: ' + currentSession.props.os}</div>
+                        <div>{'Browser: ' + currentSession.props.browser}</div>
+                        <div>{'Session ID: ' + currentSession.alt_id}</div>
+                    </div>
+                );
+            } else {
+                moreInfo = (<a className='theme' href='#' onClick={this.handleMoreInfo.bind(this, i)}>More info</a>);
             }
 
             activityList[i] = (
-                <div className="activity-log__table">
+                <div className='activity-log__table'>
-                    <div className="activity-log__report">
+                    <div className='activity-log__report'>
-                        <div className="report__platform"><i className={devicePicture} />{currentSession.props.platform}</div>
+                        <div className='report__platform'><i className={devicePicture} />{currentSession.props.platform}</div>
-                        <div className="report__info">
+                        <div className='report__info'>
-                            <div>{"Last activity: " + lastAccessTime.toDateString() + ", " + lastAccessTime.toLocaleTimeString()}</div>
+                            <div>{'Last activity: ' + lastAccessTime.toDateString() + ', ' + lastAccessTime.toLocaleTimeString()}</div>
-                            { this.state.moreInfo[i] ?
+                            {moreInfo}
-                            <div>
-                                <div>{"First time active: " + firstAccessTime.toDateString() + ", " + lastAccessTime.toLocaleTimeString()}</div>
-                                <div>{"OS: " + currentSession.props.os}</div>
-                                <div>{"Browser: " + currentSession.props.browser}</div>
-                                <div>{"Session ID: " + currentSession.alt_id}</div>
-                            </div>
-                            :
-                            <a className="theme" href="#" onClick={this.handleMoreInfo.bind(this, i)}>More info</a>
-                            }
                         </div>
                     </div>
-                    <div className="activity-log__action"><button onClick={this.submitRevoke.bind(this, currentSession.alt_id)} className="btn btn-primary">Logout</button></div>
+                    <div className='activity-log__action'><button onClick={this.submitRevoke.bind(this, currentSession.alt_id)} className='btn btn-primary'>Logout</button></div>
                 </div>
             );
         }
 
+        var content;
+        if (this.state.sessions.loading) {
+            content = (<LoadingScreen />);
+        } else {
+            content = (<form role='form'>{activityList}</form>);
+        }
+
         return (
             <div>
-                <div className="modal fade" ref="modal" id="activity-log" tabIndex="-1" role="dialog" aria-hidden="true">
+                <div className='modal fade' ref='modal' id='activity-log' tabIndex='-1' role='dialog' aria-hidden='true'>
-                    <div className="modal-dialog modal-lg">
+                    <div className='modal-dialog modal-lg'>
-                        <div className="modal-content">
+                        <div className='modal-content'>
-                            <div className="modal-header">
+                            <div className='modal-header'>
-                                <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                                <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
-                                <h4 className="modal-title" id="myModalLabel">Active Sessions</h4>
+                                <h4 className='modal-title' id='myModalLabel'>Active Sessions</h4>
                             </div>
-                            <p className="session-help-text">Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the "Logout" button below to end a session.</p>
+                            <p className='session-help-text'>Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the 'Logout' button below to end a session.</p>
-                            <div ref="modalBody" className="modal-body">
+                            <div ref='modalBody' className='modal-body'>
-                                { !this.state.sessions.loading ?
+                                {content}
-                                <div>
-                                <form role="form">
-                                { activityList }
-                                </form>
-                                { server_error }
-                                </div>
-                                :
-                                <LoadingScreen />
-                                }
                             </div>
                         </div>
                     </div>