From 7d07bf6a79c9507b2178338464f7d28ce9a9a4ac Mon Sep 17 00:00:00 2001
From: hmhealey <harrisonmhealey@gmail.com>
Date: Mon, 31 Aug 2015 11:31:55 -0400
Subject: Refactored various React components to use ES6 syntax and to match
 the style guide without any errors or warnings

---
 web/react/components/activity_log_modal.jsx | 179 ++++++++++++++++------------
 1 file changed, 105 insertions(+), 74 deletions(-)

(limited to 'web/react/components/activity_log_modal.jsx')

diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index 1192a72bc..2a83b3c40 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -1,102 +1,104 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var UserStore = require('../stores/user_store.jsx');
-var Client = require('../utils/client.jsx');
-var AsyncClient = require('../utils/async_client.jsx');
-var LoadingScreen = require('./loading_screen.jsx');
-var utils = require('../utils/utils.jsx');
+const UserStore = require('../stores/user_store.jsx');
+const Client = require('../utils/client.jsx');
+const AsyncClient = require('../utils/async_client.jsx');
+const LoadingScreen = require('./loading_screen.jsx');
+const Utils = require('../utils/utils.jsx');
 
-function getStateFromStoresForSessions() {
-    return {
-        sessions: UserStore.getSessions(),
-        serverError: null,
-        clientError: null
-    };
-}
+export default class ActivityLogModal extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.submitRevoke = this.submitRevoke.bind(this);
+        this.onListenerChange = this.onListenerChange.bind(this);
+        this.handleMoreInfo = this.handleMoreInfo.bind(this);
 
-module.exports = React.createClass({
-    displayName: 'ActivityLogModal',
-    submitRevoke: function(altId) {
+        this.state = this.getStateFromStores();
+        this.state.moreInfo = [];
+    }
+    getStateFromStores() {
+        return {
+            sessions: UserStore.getSessions(),
+            serverError: null,
+            clientError: null
+        };
+    }
+    submitRevoke(altId) {
         Client.revokeSession(altId,
-            function(data) {
+            function handleRevokeSuccess() {
                 AsyncClient.getSessions();
-            }.bind(this),
-            function(err) {
-                var state = getStateFromStoresForSessions();
+            },
+            function handleRevokeError(err) {
+                let state = this.getStateFromStores();
                 state.serverError = err;
                 this.setState(state);
             }.bind(this)
         );
-    },
-    componentDidMount: function() {
+    }
+    componentDidMount() {
         UserStore.addSessionsChangeListener(this.onListenerChange);
-        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) {
+        $(React.findDOMNode(this.refs.modal)).on('shown.bs.modal', function handleShow() {
             AsyncClient.getSessions();
         });
 
-        var self = this;
-        $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
+        $(React.findDOMNode(this.refs.modal)).on('hidden.bs.modal', function handleHide() {
             $('#user_settings').modal('show');
-            self.setState({moreInfo: []});
-        });
-    },
-    componentWillUnmount: function() {
+            this.setState({moreInfo: []});
+        }.bind(this));
+    }
+    componentWillUnmount() {
         UserStore.removeSessionsChangeListener(this.onListenerChange);
-    },
-    onListenerChange: function() {
-        var newState = getStateFromStoresForSessions();
-        if (!utils.areStatesEqual(newState.sessions, this.state.sessions)) {
+    }
+    onListenerChange() {
+        const newState = this.getStateFromStores();
+        if (!Utils.areStatesEqual(newState.sessions, this.state.sessions)) {
             this.setState(newState);
         }
-    },
-    handleMoreInfo: function(index) {
-        var newMoreInfo = this.state.moreInfo;
+    }
+    handleMoreInfo(index) {
+        let newMoreInfo = this.state.moreInfo;
         newMoreInfo[index] = true;
         this.setState({moreInfo: newMoreInfo});
-    },
-    getInitialState: function() {
-        var initialState = getStateFromStoresForSessions();
-        initialState.moreInfo = [];
-        return initialState;
-    },
-    render: function() {
-        var activityList = [];
-        var serverError = this.state.serverError;
-
-        // Squash any false-y value for server error into null
-        if (!serverError) {
-            serverError = null;
-        }
+    }
+    render() {
+        let activityList = [];
 
-        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 = '';
+        for (let i = 0; i < this.state.sessions.length; i++) {
+            const currentSession = this.state.sessions[i];
+            const lastAccessTime = new Date(currentSession.last_activity_at);
+            const firstAccessTime = new Date(currentSession.create_at);
+            let devicePicture = '';
 
             if (currentSession.props.platform === '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';
-            }
-            else if (currentSession.props.platform === 'Linux') {
+            } else if (currentSession.props.platform === 'Linux') {
                 devicePicture = 'fa fa-linux';
             }
 
-            var moreInfo;
+            let 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>{`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>);
+                moreInfo = (
+                    <a
+                        className='theme'
+                        href='#'
+                        onClick={this.handleMoreInfo.bind(this, i)}
+                    >
+                        More info
+                    </a>
+                );
             }
 
             activityList[i] = (
@@ -104,33 +106,62 @@ module.exports = React.createClass({
                     <div className='activity-log__report'>
                         <div className='report__platform'><i className={devicePicture} />{currentSession.props.platform}</div>
                         <div className='report__info'>
-                            <div>{'Last activity: ' + lastAccessTime.toDateString() + ', ' + lastAccessTime.toLocaleTimeString()}</div>
+                            <div>{`Last activity: ${lastAccessTime.toDateString()}, ${lastAccessTime.toLocaleTimeString()}`}</div>
                             {moreInfo}
                         </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;
+        let content;
         if (this.state.sessions.loading) {
-            content = (<LoadingScreen />);
+            content = <LoadingScreen />;
         } else {
-            content = (<form role='form'>{activityList}</form>);
+            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-content'>
                             <div className='modal-header'>
-                                <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>
+                                <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>
                             </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>
-                            <div ref='modalBody' className='modal-body'>
+                            <div
+                                ref='modalBody'
+                                className='modal-body'
+                            >
                                 {content}
                             </div>
                         </div>
@@ -139,4 +170,4 @@ module.exports = React.createClass({
             </div>
         );
     }
-});
+}
-- 
cgit v1.2.3-1-g7c22

