From 44a06aef46c41f11ccb4251adb426d31c23a5241 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Fri, 13 Jan 2017 14:33:01 -0700
Subject: [PATCH] do not render tab content unless they're active

---
 client/coral-admin/src/actions/comments.js    |  6 +-
 .../ModerationQueue/ModerationQueue.js        | 90 +++++++++++--------
 2 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/client/coral-admin/src/actions/comments.js b/client/coral-admin/src/actions/comments.js
index f37c79b4f..fe4895ed3 100644
--- a/client/coral-admin/src/actions/comments.js
+++ b/client/coral-admin/src/actions/comments.js
@@ -55,9 +55,9 @@ export const fetchFlaggedQueue = () => {
     dispatch({type: commentTypes.COMMENTS_MODERATION_QUEUE_FETCH_REQUEST});
 
     return coralApi('/queue/comments/flagged')
-      .then(comments => {
-        comments.forEach(comment => comment.flagged = true);
-        return comments;
+      .then(results => {
+        results.comments.forEach(comment => comment.flagged = true);
+        return results;
       })
       .then(addUsersCommentsActions.bind(this, dispatch));
   };
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
index d46a9b35d..6121ca307 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
@@ -22,49 +22,61 @@ export default ({onTabClick, ...props}) => (
            className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.flagged')}</a>
       </div>
       <div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='pending'>
-        <CommentList
-          suspectWords={props.settings.settings.wordlist.suspect}
-          isActive={props.activeTab === 'pending'}
-          singleView={props.singleView}
-          commentIds={props.premodIds}
-          comments={props.comments.byId}
-          users={props.users.byId}
-          onClickAction={props.updateStatus}
-          onClickShowBanDialog={props.showBanUserDialog}
-          modActions={['reject', 'approve', 'ban']}
-          loading={props.comments.loading}/>
-        <BanUserDialog
-          open={props.comments.showBanUserDialog}
-          handleClose={props.hideBanUserDialog}
-          onClickBanUser={props.banUser}
-          user={props.comments.banUser}
-        />
+        {
+          props.activeTab === 'pending'
+          ? <div>
+              <CommentList
+                suspectWords={props.settings.settings.wordlist.suspect}
+                isActive={props.activeTab === 'pending'}
+                singleView={props.singleView}
+                commentIds={props.premodIds}
+                comments={props.comments.byId}
+                users={props.users.byId}
+                onClickAction={props.updateStatus}
+                onClickShowBanDialog={props.showBanUserDialog}
+                modActions={['reject', 'approve', 'ban']}
+                loading={props.comments.loading} />
+              <BanUserDialog
+                open={props.comments.showBanUserDialog}
+                handleClose={props.hideBanUserDialog}
+                onClickBanUser={props.banUser}
+                user={props.comments.banUser} />
+            </div>
+          : null
+        }
       </div>
       <div className={`mdl-tabs__panel ${styles.listContainer}`} id='rejected'>
-        <CommentList
-          suspectWords={props.settings.settings.wordlist.suspect}
-          isActive={props.activeTab === 'rejected'}
-          singleView={props.singleView}
-          commentIds={props.rejectedIds}
-          comments={props.comments.byId}
-          users={props.users.byId}
-          onClickAction={props.updateStatus}
-          modActions={['approve']}
-          loading={props.comments.loading}
-        />
+      {
+        props.activeTab === 'rejected'
+        ? <CommentList
+            suspectWords={props.settings.settings.wordlist.suspect}
+            isActive={props.activeTab === 'rejected'}
+            singleView={props.singleView}
+            commentIds={props.rejectedIds}
+            comments={props.comments.byId}
+            users={props.users.byId}
+            onClickAction={props.updateStatus}
+            modActions={['approve']}
+            loading={props.comments.loading} />
+        : null
+      }
       </div>
       <div className={`mdl-tabs__panel ${styles.listContainer}`} id='flagged'>
-        <CommentList
-          suspectWords={props.settings.settings.wordlist.suspect}
-          isActive={props.activeTab === 'flagged'}
-          singleView={props.singleView}
-          commentIds={props.flaggedIds}
-          comments={props.comments.byId}
-          users={props.users.byId}
-          onClickAction={props.updateStatus}
-          modActions={['reject', 'approve']}
-          loading={props.comments.loading}/>
-      </div>
+      {
+        props.activeTab === 'flagged'
+        ? <CommentList
+            suspectWords={props.settings.settings.wordlist.suspect}
+            isActive={props.activeTab === 'flagged'}
+            singleView={props.singleView}
+            commentIds={props.flaggedIds}
+            comments={props.comments.byId}
+            users={props.users.byId}
+            onClickAction={props.updateStatus}
+            modActions={['reject', 'approve']}
+            loading={props.comments.loading} />
+        : null
+      }
+       </div>
       <ModerationKeysModal open={props.modalOpen} onClose={props.closeModal} />
     </div>
   </div>