refactor comment module to match other modules

Author: rwieruch

src/Comment/CommentList/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Query } from 'react-apollo';
 
 import { GET_COMMENTS_OF_ISSUE } from './queries';
@@ -36,7 +36,7 @@ const updateQuery = (previousResult, { fetchMoreResult }) => {
   };
 };
 
-const CommentList = ({ repositoryOwner, repositoryName, issue }) => (
+const Comments = ({ repositoryOwner, repositoryName, issue }) => (
   <Query
     query={GET_COMMENTS_OF_ISSUE}
     variables={{
@@ -58,33 +58,51 @@ const CommentList = ({ repositoryOwner, repositoryName, issue }) => (
       }
 
       return (
-        <div className="CommentList">
-          {repository.issue.comments.edges.map(({ node }) => (
-            <CommentItem key={node.id} comment={node} />
-          ))}
-
-          <FetchMore
+        <Fragment>
+          <CommentList
+            comments={repository.issue.comments}
             loading={loading}
-            hasNextPage={
-              repository.issue.comments.pageInfo.hasNextPage
-            }
-            variables={{
-              cursor: repository.issue.comments.pageInfo.endCursor,
-              repositoryOwner,
-              repositoryName,
-              number: issue.number,
-            }}
-            updateQuery={updateQuery}
+            number={issue.number}
+            repositoryOwner={repositoryOwner}
+            repositoryName={repositoryName}
             fetchMore={fetchMore}
-          >
-            Comments
-          </FetchMore>
+          />
 
           <CommentAdd issueId={repository.issue.id} />
-        </div>
+        </Fragment>
       );
     }}
   </Query>
 );
 
-export default CommentList;
+const CommentList = ({
+  comments,
+  loading,
+  repositoryOwner,
+  repositoryName,
+  number,
+  fetchMore,
+}) => (
+  <div className="CommentList">
+    {comments.edges.map(({ node }) => (
+      <CommentItem key={node.id} comment={node} />
+    ))}
+
+    <FetchMore
+      loading={loading}
+      hasNextPage={comments.pageInfo.hasNextPage}
+      variables={{
+        cursor: comments.pageInfo.endCursor,
+        repositoryOwner,
+        repositoryName,
+        number,
+      }}
+      updateQuery={updateQuery}
+      fetchMore={fetchMore}
+    >
+      Comments
+    </FetchMore>
+  </div>
+);
+
+export default Comments;

src/Comment/CommentList/queries.js

@@ -10,7 +10,7 @@ export const GET_COMMENTS_OF_ISSUE = gql`
     repository(name: $repositoryName, owner: $repositoryOwner) {
       issue(number: $number) {
         id
-        comments(first: 5, after: $cursor) {
+        comments(first: 1, after: $cursor) {
           edges {
             node {
               id

src/Comment/index.js

@@ -1,3 +1,3 @@
-import CommentList from './CommentList';
+import Comments from './CommentList';
 
-export default CommentList;
+export default Comments;

src/Issue/IssueItem/index.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { withState } from 'recompose';
 
 import Button from '../../Button';
-import CommentList from '../../Comment';
+import Comments from '../../Comment';
 import Link from '../../Link';
 
 import './style.css';
 
-const Issue = ({
+const IssueItem = ({
   issue,
   repositoryOwner,
   repositoryName,
@@ -26,7 +26,7 @@ const Issue = ({
       <div dangerouslySetInnerHTML={{ __html: issue.bodyHTML }} />
 
       {isShowComments && (
-        <CommentList
+        <Comments
           repositoryOwner={repositoryOwner}
           repositoryName={repositoryName}
           issue={issue}
@@ -37,5 +37,5 @@ const Issue = ({
 );
 
 export default withState('isShowComments', 'onShowComments', false)(
-  Issue,
+  IssueItem,
 );

src/Issue/IssueList/index.js

@@ -119,11 +119,11 @@ const Issues = ({
 
           return (
             <IssuesList
-              showState={showState}
-              repositoryOwner={repositoryOwner}
-              repositoryName={repositoryName}
               issues={repository.issues}
               loading={loading}
+              repositoryOwner={repositoryOwner}
+              repositoryName={repositoryName}
+              showState={showState}
               fetchMore={fetchMore}
             />
           );
@@ -161,11 +161,11 @@ const IssueFilter = ({
 );
 
 const IssuesList = ({
-  showState,
-  repositoryOwner,
-  repositoryName,
   issues,
   loading,
+  repositoryOwner,
+  repositoryName,
+  showState,
   fetchMore,
 }) => (
   <div className="IssueList">