From 8c14a16d0126a32c0f45f9d9a172cc06f867cc23 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Tue, 28 Jul 2015 09:28:00 -0700
Subject: Access History and Active Sessions are now lazy-loaded upon opening
 instead of loaded at start; added loading screens to Access History and
 Active Sessions

---
 web/react/components/access_history_modal.jsx | 16 +++++++++++++---
 web/react/components/activity_log_modal.jsx   | 17 +++++++++++++++--
 web/react/stores/user_store.jsx               |  4 ++--
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx
index 462f046f6..6cc8ec8a9 100644
--- a/web/react/components/access_history_modal.jsx
+++ b/web/react/components/access_history_modal.jsx
@@ -3,7 +3,8 @@
 
 var UserStore = require('../stores/user_store.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
-var Utils = require('../utils/utils.jsx');
+var LoadingScreen = require('./loading_screen.jsx');
+var utils = require('../utils/utils.jsx');
 
 function getStateFromStoresForAudits() {
     return {
@@ -14,7 +15,9 @@ function getStateFromStoresForAudits() {
 module.exports = React.createClass({
     componentDidMount: function() {
         UserStore.addAuditsChangeListener(this._onChange);
-        AsyncClient.getAudits();
+        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) {
+            AsyncClient.getAudits();
+        });
 
         var self = this;
         $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
@@ -25,7 +28,10 @@ module.exports = React.createClass({
         UserStore.removeAuditsChangeListener(this._onChange);
     },
     _onChange: function() {
-        this.setState(getStateFromStoresForAudits());
+        var newState = getStateFromStoresForAudits();
+        if (!utils.areStatesEqual(newState.audits, this.state.audits)) {
+            this.setState(newState);
+        }
     },
     handleMoreInfo: function(index) {
         var newMoreInfo = this.state.moreInfo;
@@ -87,9 +93,13 @@ module.exports = React.createClass({
                                 <h4 className="modal-title" id="myModalLabel">Access History</h4>
                             </div>
                             <div ref="modalBody" className="modal-body">
+                                { !this.state.audits.loading ?
                                 <form role="form">
                                 { accessList }
                                 </form>
+                                :
+                                <LoadingScreen />
+                                }
                             </div>
                         </div>
                     </div>
diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index 90f139e8b..f28f0d5f1 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -4,6 +4,8 @@
 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');
 
 function getStateFromStoresForSessions() {
     return {
@@ -29,7 +31,9 @@ module.exports = React.createClass({
     },
     componentDidMount: function() {
         UserStore.addSessionsChangeListener(this._onChange);
-        AsyncClient.getSessions();
+        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) {
+            AsyncClient.getSessions();
+        });
 
         var self = this;
         $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
@@ -40,7 +44,10 @@ module.exports = React.createClass({
         UserStore.removeSessionsChangeListener(this._onChange);
     },
     _onChange: function() {
-        this.setState(getStateFromStoresForSessions());
+        var newState = getStateFromStoresForSessions();
+        if (!utils.areStatesEqual(newState.sessions, this.state.sessions)) {
+            this.setState(newState);
+        }
     },
     handleMoreInfo: function(index) {
         var newMoreInfo = this.state.moreInfo;
@@ -106,10 +113,16 @@ module.exports = React.createClass({
                             </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">
+                                { !this.state.sessions.loading ?
+                                <div>
                                 <form role="form">
                                 { activityList }
                                 </form>
                                 { server_error }
+                                </div>
+                                :
+                                <LoadingScreen />
+                                }
                             </div>
                         </div>
                     </div>
diff --git a/web/react/stores/user_store.jsx b/web/react/stores/user_store.jsx
index 001162f47..aff5a0bed 100644
--- a/web/react/stores/user_store.jsx
+++ b/web/react/stores/user_store.jsx
@@ -164,13 +164,13 @@ var UserStore = assign({}, EventEmitter.prototype, {
     BrowserStore.setItem("sessions", sessions);
   },
   getSessions: function() {
-    return BrowserStore.getItem("sessions", []);
+    return BrowserStore.getItem("sessions", {loading: true});
   },
   setAudits: function(audits) {
     BrowserStore.setItem("audits", audits);
   },
   getAudits: function() {
-    return BrowserStore.getItem("audits", []);
+    return BrowserStore.getItem("audits", {loading: true});
   },
   setTeams: function(teams) {
     BrowserStore.setItem("teams", teams);
-- 
cgit v1.2.3-1-g7c22