Reformatted access_history_modal.jsx to meet style guide requirements.

web/react/components/access_history_modal.jsx

@@ -6,46 +6,48 @@ var AsyncClient = require('../utils/async_client.jsx');
 var LoadingScreen = require('./loading_screen.jsx');
 var utils = require('../utils/utils.jsx');
 
-function getStateFromStoresForAudits() {
+export default class AccessHistoryModal extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.onAuditChange = this.onAuditChange.bind(this);
+        this.handleMoreInfo = this.handleMoreInfo.bind(this);
+
+        this.state = this.getStateFromStoresForAudits();
+        this.state.moreInfo = [];
+    }
+    getStateFromStoresForAudits() {
         return {
             audits: UserStore.getAudits()
         };
     }
-
+    componentDidMount() {
-module.exports = React.createClass({
+        UserStore.addAuditsChangeListener(this.onAuditChange);
-    displayName: 'AccessHistoryModal',
+        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function show() {
-    componentDidMount: function() {
-        UserStore.addAuditsChangeListener(this.onListenerChange);
-        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function() {
             AsyncClient.getAudits();
         });
 
         var self = this;
-        $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function() {
+        $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function hide() {
             $('#user_settings').modal('show');
             self.setState({moreInfo: []});
         });
-    },
+    }
-    componentWillUnmount: function() {
+    componentWillUnmount() {
-        UserStore.removeAuditsChangeListener(this.onListenerChange);
+        UserStore.removeAuditsChangeListener(this.onAuditChange);
-    },
+    }
-    onListenerChange: function() {
+    onAuditChange() {
-        var newState = getStateFromStoresForAudits();
+        var newState = this.getStateFromStoresForAudits();
         if (!utils.areStatesEqual(newState.audits, this.state.audits)) {
             this.setState(newState);
         }
-    },
+    }
-    handleMoreInfo: function(index) {
+    handleMoreInfo(index) {
         var newMoreInfo = this.state.moreInfo;
         newMoreInfo[index] = true;
         this.setState({moreInfo: newMoreInfo});
-    },
+    }
-    getInitialState: function() {
+    render() {
-        var initialState = getStateFromStoresForAudits();
-        initialState.moreInfo = [];
-        return initialState;
-    },
-    render: function() {
         var accessList = [];
         var currentHistoryDate = null;
 
@@ -63,7 +65,16 @@ module.exports = React.createClass({
                 currentAudit.session_id = 'N/A (Login attempt)';
             }
 
-            var moreInfo = (<a href='#' className='theme' onClick={this.handleMoreInfo.bind(this, i)}>More info</a>);
+            var moreInfo = (
+                <a
+                    href='#'
+                    className='theme'
+                    onClick={this.handleMoreInfo.bind(this, i)}
+                >
+                    More info
+                </a>
+            );
+
             if (this.state.moreInfo[i]) {
                 moreInfo = (
                     <div>
@@ -75,7 +86,7 @@ module.exports = React.createClass({
 
             var divider = null;
             if (i < this.state.audits.length - 1) {
-                divider = (<div className='divider-light'></div>)
+                divider = (<div className='divider-light'></div>);
             }
 
             accessList[i] = (
@@ -102,14 +113,36 @@ module.exports = React.createClass({
 
         return (
             <div>
-                <div className='modal fade' ref='modal' id='access-history' tabIndex='-1' role='dialog' aria-hidden='true'>
+                <div
+                    className='modal fade'
+                    ref='modal'
+                    id='access-history'
+                    tabIndex='-1'
+                    role='dialog'
+                    aria-hidden='true'
+                >
                     <div className='modal-dialog modal-lg'>
                         <div className='modal-content'>
                             <div className='modal-header'>
-                                <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
+                                <button
-                                <h4 className='modal-title' id='myModalLabel'>Access History</h4>
+                                    type='button'
+                                    className='close'
+                                    data-dismiss='modal'
+                                    aria-label='Close'
+                                >
+                                    <span aria-hidden='true'>&times;</span>
+                                </button>
+                                <h4
+                                    className='modal-title'
+                                    id='myModalLabel'
+                                >
+                                    Access History
+                                </h4>
                             </div>
-                            <div ref='modalBody' className='modal-body'>
+                            <div
+                                ref='modalBody'
+                                className='modal-body'
+                            >
                                 {content}
                             </div>
                         </div>
@@ -118,4 +151,4 @@ module.exports = React.createClass({
             </div>
         );
     }
-});
+}