15-Exercise: Commenting Feature

Author: rwieruch

src/Comment/CommentAdd/index.js

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import { Mutation } from 'react-apollo';
+
+import { ADD_COMMENT } from './mutations';
+
+import TextArea from '../../TextArea';
+import Button from '../../Button';
+import ErrorMessage from '../../Error';
+
+class CommentAdd extends Component {
+  state = {
+    value: '',
+  };
+
+  onChange = value => {
+    this.setState({ value });
+  };
+
+  onSubmit = (event, addComment) => {
+    addComment().then(() => this.setState({ value: '' }));
+
+    event.preventDefault();
+  };
+
+  render() {
+    const { issueId } = this.props;
+    const { value } = this.state;
+
+    return (
+      <Mutation
+        mutation={ADD_COMMENT}
+        variables={{ body: value, subjectId: issueId }}
+      >
+        {(addComment, { data, loading, error }) => (
+          <div>
+            {error && <ErrorMessage error={error} />}
+
+            <form onSubmit={e => this.onSubmit(e, addComment)}>
+              <TextArea
+                value={value}
+                onChange={e => this.onChange(e.target.value)}
+                placeholder="Leave a comment"
+              />
+              <Button type="submit">Comment</Button>
+            </form>
+          </div>
+        )}
+      </Mutation>
+    );
+  }
+}
+
+export default CommentAdd;

src/Comment/CommentAdd/mutations.js

@@ -0,0 +1,13 @@
+import gql from 'graphql-tag';
+
+export const ADD_COMMENT = gql`
+  mutation($subjectId: ID!, $body: String!) {
+    addComment(input: { subjectId: $subjectId, body: $body }) {
+      commentEdge {
+        node {
+          body
+        }
+      }
+    }
+  }
+`;

src/Comment/CommentItem/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import './style.css';
+
+const Comment = ({ comment }) => (
+  <div className="CommentItem">
+    <div>{comment.author.login}:</div>
+    &nbsp;
+    <div dangerouslySetInnerHTML={{ __html: comment.bodyHTML }} />
+  </div>
+);
+
+export default Comment;

src/Comment/CommentItem/style.css

@@ -0,0 +1,4 @@
+.CommentItem {
+  display: flex;
+  align-items: baseline;
+}

src/Comment/CommentList/index.js

@@ -0,0 +1,108 @@
+import React, { Fragment } from 'react';
+import { Query } from 'react-apollo';
+
+import { GET_COMMENTS_OF_ISSUE } from './queries';
+import CommentItem from '../CommentItem';
+import CommentAdd from '../CommentAdd';
+
+import Loading from '../../Loading';
+import ErrorMessage from '../../Error';
+import FetchMore from '../../FetchMore';
+
+import './style.css';
+
+const updateQuery = (previousResult, { fetchMoreResult }) => {
+  if (!fetchMoreResult) {
+    return previousResult;
+  }
+
+  return {
+    ...previousResult,
+    repository: {
+      ...previousResult.repository,
+      issue: {
+        ...previousResult.repository.issue,
+        ...fetchMoreResult.repository.issue,
+        comments: {
+          ...previousResult.repository.issue.comments,
+          ...fetchMoreResult.repository.issue.comments,
+          edges: [
+            ...previousResult.repository.issue.comments.edges,
+            ...fetchMoreResult.repository.issue.comments.edges,
+          ],
+        },
+      },
+    },
+  };
+};
+
+const Comments = ({ repositoryOwner, repositoryName, issue }) => (
+  <Query
+    query={GET_COMMENTS_OF_ISSUE}
+    variables={{
+      repositoryOwner,
+      repositoryName,
+      number: issue.number,
+    }}
+    notifyOnNetworkStatusChange={true}
+  >
+    {({ data, loading, error, fetchMore }) => {
+      if (error) {
+        return <ErrorMessage error={error} />;
+      }
+
+      const { repository } = data;
+
+      if (loading && !repository) {
+        return <Loading />;
+      }
+
+      return (
+        <Fragment>
+          <CommentList
+            comments={repository.issue.comments}
+            loading={loading}
+            number={issue.number}
+            repositoryOwner={repositoryOwner}
+            repositoryName={repositoryName}
+            fetchMore={fetchMore}
+          />
+
+          <CommentAdd issueId={repository.issue.id} />
+        </Fragment>
+      );
+    }}
+  </Query>
+);
+
+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

@@ -0,0 +1,31 @@
+import gql from 'graphql-tag';
+
+export const GET_COMMENTS_OF_ISSUE = gql`
+  query(
+    $repositoryOwner: String!
+    $repositoryName: String!
+    $number: Int!
+    $cursor: String
+  ) {
+    repository(name: $repositoryName, owner: $repositoryOwner) {
+      issue(number: $number) {
+        id
+        comments(first: 1, after: $cursor) {
+          edges {
+            node {
+              id
+              bodyHTML
+              author {
+                login
+              }
+            }
+          }
+          pageInfo {
+            endCursor
+            hasNextPage
+          }
+        }
+      }
+    }
+  }
+`;

src/Comment/CommentList/style.css

@@ -0,0 +1,4 @@
+.CommentList {
+  padding-left: 20px;
+  border-left: 1px solid #000;
+}

src/Comment/index.js

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

src/Issue/IssueItem/index.js

@@ -1,22 +1,41 @@
 import React from 'react';
+import { withState } from 'recompose';
 
+import Button from '../../Button';
+import Comments from '../../Comment';
 import Link from '../../Link';
 
 import './style.css';
 
-const IssueItem = ({ issue }) => (
+const IssueItem = ({
+  issue,
+  repositoryOwner,
+  repositoryName,
+  isShowComments,
+  onShowComments,
+}) => (
   <div className="IssueItem">
-    {/* placeholder to add a show/hide comment button later */}
+    <Button onClick={() => onShowComments(!isShowComments)}>
+      {isShowComments ? '-' : '+'}
+    </Button>
 
     <div className="IssueItem-content">
       <h3>
         <Link href={issue.url}>{issue.title}</Link>
       </h3>
       <div dangerouslySetInnerHTML={{ __html: issue.bodyHTML }} />
 
-      {/* placeholder to render a list of comments later */}
+      {isShowComments && (
+        <Comments
+          repositoryOwner={repositoryOwner}
+          repositoryName={repositoryName}
+          issue={issue}
+        />
+      )}
     </div>
   </div>
 );
 
-export default IssueItem;
+export default withState('isShowComments', 'onShowComments', false)(
+  IssueItem,
+);

src/Issue/IssueList/index.js

@@ -172,7 +172,12 @@ const IssueList = ({
 }) => (
   <div className="IssueList">
     {issues.edges.map(({ node }) => (
-      <IssueItem key={node.id} issue={node} />
+      <IssueItem
+        key={node.id}
+        issue={node}
+        repositoryOwner={repositoryOwner}
+        repositoryName={repositoryName}
+      />
     ))}
 
     <FetchMore