From a0f41bb19dd29c69b336799484a7d2925b3ce577 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 17 May 2017 10:54:14 -0600
Subject: [PATCH] show total comments and rejected %

---
 .../ModerationQueue/ModerationContainer.js    |  6 +++++-
 .../containers/ModerationQueue/UserDetail.css | 20 +++++++++++++++++++
 .../containers/ModerationQueue/UserDetail.js  | 17 +++++++++++++++-
 .../coral-admin/src/graphql/queries/index.js  |  2 +-
 .../src/graphql/queries/userDetail.graphql    |  6 ++++--
 client/coral-ui/components/Drawer.css         |  2 ++
 6 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index 52282f630..e6062674d 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -208,7 +208,11 @@ class ModerationContainer extends Component {
           shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={onClose}/>
-        {moderation.userDetailId && <UserDetail id={moderation.userDetailId} hideUserDetail={hideUserDetail}/>}
+        {moderation.userDetailId && (
+          <UserDetail
+            id={moderation.userDetailId}
+            hideUserDetail={hideUserDetail} />
+        )}
       </div>
     );
   }
diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.css b/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
index 9f41a9d8d..eb3f2e4c7 100644
--- a/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
+++ b/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
@@ -10,3 +10,23 @@
 .small {
   color: #aaa;
 }
+
+.stats {
+  display: flex;
+
+  .stat {
+    margin: 0 4px 12px;
+  }
+
+  .stat:last-child {
+    margin-right: 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .stat p:first-child {
+    font-weight: bold;
+  }
+}
diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
index 02e28dd84..200b8537d 100644
--- a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
+++ b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
@@ -28,13 +28,20 @@ class UserDetail extends React.Component {
       return null;
     }
 
-    const {user} = data;
+    const {user, totalComments, rejectedComments} = data;
     const localProfile = user.profiles.find((p) => p.provider === 'local');
     let profile;
     if (localProfile) {
       profile = localProfile.id;
     }
 
+    let rejectedPercent = rejectedComments / totalComments;
+    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
+
+      // if totalComments is 0, you're dividing by zero, which is naughty
+      rejectedPercent = 0;
+    }
+
     return (
       <Drawer handleClickOutside={hideUserDetail}>
         <h3>{user.username}</h3>
@@ -48,6 +55,14 @@ class UserDetail extends React.Component {
           <br/><small className={styles.small}>Data represents the last six months of activity</small>
         </p>
         <div className={styles.stats}>
+          <div className={styles.stat}>
+            <p>Total Comments</p>
+            <p>{totalComments}</p>
+          </div>
+          <div className={styles.stat}>
+            <p>Reject Rate</p>
+            <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
+          </div>
         </div>
       </Drawer>
     );
diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js
index 9caa90ad0..ae94d70c3 100644
--- a/client/coral-admin/src/graphql/queries/index.js
+++ b/client/coral-admin/src/graphql/queries/index.js
@@ -99,7 +99,7 @@ export const modQueueResort = (id, fetchMore) => (sort) => {
 export const getUserDetail = graphql(USER_DETAIL, {
   options: ({id}) => {
     return {
-      variables: {id}
+      variables: {author_id: id}
     };
   }
 });
diff --git a/client/coral-admin/src/graphql/queries/userDetail.graphql b/client/coral-admin/src/graphql/queries/userDetail.graphql
index 6d42682ea..c375b80ff 100644
--- a/client/coral-admin/src/graphql/queries/userDetail.graphql
+++ b/client/coral-admin/src/graphql/queries/userDetail.graphql
@@ -1,5 +1,5 @@
-query UserDetail ($id: ID!) {
-  user(id: $id) {
+query UserDetail ($author_id: ID!) {
+  user(id: $author_id) {
     id
     username
     created_at
@@ -8,4 +8,6 @@ query UserDetail ($id: ID!) {
       provider
     }
   }
+  totalComments: commentCount(query: {author_id: $author_id})
+  rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
 }
diff --git a/client/coral-ui/components/Drawer.css b/client/coral-ui/components/Drawer.css
index b967b20ab..d22512a3a 100644
--- a/client/coral-ui/components/Drawer.css
+++ b/client/coral-ui/components/Drawer.css
@@ -1,5 +1,6 @@
 .drawer {
   max-width: 700px;
+  min-width: 400px;
   padding: 20px;
   position: fixed;
   top: 0;
@@ -8,6 +9,7 @@
   background-color: white;
   transition: transform 500ms ease-in-out;
   box-shadow: -3px 0px 4px 0px rgba(0,0,0,0.15);
+  z-index: 10000;
 }
 
 .closeButton {