implement kiwi's pagination changes

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -56,9 +56,13 @@ const Comment = ({
       <div className={styles.container}>
         <div className={styles.itemHeader}>
           <div className={styles.author}>
-            <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
-              {comment.user.name}
-            </span>
+            {
+              !minimal && (
+                <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
+                  {comment.user.name}
+                </span>
+              )
+            }
             <span className={styles.created}>
               {timeago(comment.created_at || Date.now() - props.index * 60 * 1000)}
             </span>

client/coral-admin/src/routes/Moderation/components/UserDetail.js

@@ -34,7 +34,7 @@ export default class UserDetail extends React.Component {
         user,
         totalComments,
         rejectedComments,
-        comments
+        comments: {nodes}
       },
       bannedWords,
       suspectWords,
@@ -87,7 +87,7 @@ export default class UserDetail extends React.Component {
         </div>
         <div>
           {
-            comments.map((comment, i) => {
+            nodes.map((comment, i) => {
               const status = comment.action_summaries ? 'FLAGGED' : comment.status;
               return <Comment
                 key={i}

client/coral-admin/src/routes/Moderation/components/styles.css

@@ -247,6 +247,7 @@ span {
   }
 
   .created {
+    padding: 5px;
     color: #262626;
     font-size: 14px;
     margin-left: 15px;
@@ -433,7 +434,6 @@ span {
 .username {
   color: blue;
   text-decoration: underline;
-  padding: 5px;
   cursor: pointer;
 
   &:hover {

client/coral-admin/src/routes/Moderation/containers/UserDetail.js

@@ -6,6 +6,18 @@ import {getSlotsFragments} from 'coral-framework/helpers/plugins';
 import {getDefinitionName} from 'coral-framework/utils';
 import Comment from './Comment';
 
+const commentConnectionFragment = gql`
+  fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
+    nodes {
+      ...${getDefinitionName(Comment.fragments.comment)}
+    }
+    hasNextPage
+    startCursor
+    endCursor
+  }
+  ${Comment.fragments.comment}
+`;
+
 const pluginFragments = getSlotsFragments([
   'userProfile',
 ]);
@@ -43,13 +55,14 @@ export const withUserDetailQuery = withQuery(gql`
       author_id: $author_id,
       statuses: [NONE, PREMOD, ACCEPTED, REJECTED]
     }) {
-      ...${getDefinitionName(Comment.fragments.comment)}
+      ...CoralAdmin_Moderation_CommentConnection
     }
     ${pluginFragments.spreads('root')}
   }
   ${Comment.fragments.comment}
   ${pluginFragments.definitions('user')}
   ${pluginFragments.definitions('root')}
+  ${commentConnectionFragment}
 `, {
   options: ({id}) => {
     return {