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 && } + {moderation.userDetailId && ( + + )} ); } 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 (

{user.username}

@@ -48,6 +55,14 @@ class UserDetail extends React.Component {
Data represents the last six months of activity

+
+

Total Comments

+

{totalComments}

+
+
+

Reject Rate

+

{`${(rejectedPercent).toFixed(1)}%`}

+
); 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 {