From b03e8da41bded7bbc9c09c58620db44bd1ecefaa Mon Sep 17 00:00:00 2001 From: Johnny Oshika Date: Fri, 10 Jan 2020 18:18:12 -0800 Subject: [PATCH 1/6] Pass issue instead of issueId to CommentAdd --- src/Comment/CommentAdd/index.js | 4 ++-- src/Comment/CommentList/index.js | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Comment/CommentAdd/index.js b/src/Comment/CommentAdd/index.js index bf6f92b..a45ff56 100755 --- a/src/Comment/CommentAdd/index.js +++ b/src/Comment/CommentAdd/index.js @@ -23,13 +23,13 @@ class CommentAdd extends Component { }; render() { - const { issueId } = this.props; + const { issue } = this.props; const { value } = this.state; return ( {(addComment, { data, loading, error }) => (
diff --git a/src/Comment/CommentList/index.js b/src/Comment/CommentList/index.js index 41b5384..ee85cb7 100755 --- a/src/Comment/CommentList/index.js +++ b/src/Comment/CommentList/index.js @@ -68,7 +68,9 @@ const Comments = ({ repositoryOwner, repositoryName, issue }) => ( fetchMore={fetchMore} /> - + ); }} From f408638eedb55794ba4b7825710929eb1c551e45 Mon Sep 17 00:00:00 2001 From: Johnny Oshika Date: Fri, 10 Jan 2020 19:46:23 -0800 Subject: [PATCH 2/6] Use fragment in comments query and mutation --- src/Comment/CommentAdd/mutations.js | 5 ++++- src/Comment/CommentList/queries.js | 9 ++++----- src/Comment/fragment.js | 11 +++++++++++ 3 files changed, 19 insertions(+), 6 deletions(-) create mode 100644 src/Comment/fragment.js diff --git a/src/Comment/CommentAdd/mutations.js b/src/Comment/CommentAdd/mutations.js index 8e7dbea..01ae960 100755 --- a/src/Comment/CommentAdd/mutations.js +++ b/src/Comment/CommentAdd/mutations.js @@ -1,13 +1,16 @@ import gql from 'graphql-tag'; +import ISSUECOMMENT_FRAGMENT from '../fragment'; + export const ADD_COMMENT = gql` mutation($subjectId: ID!, $body: String!) { addComment(input: { subjectId: $subjectId, body: $body }) { commentEdge { node { - body + ...issueComment } } } } + ${ISSUECOMMENT_FRAGMENT} `; diff --git a/src/Comment/CommentList/queries.js b/src/Comment/CommentList/queries.js index 47b6cde..8967a8c 100755 --- a/src/Comment/CommentList/queries.js +++ b/src/Comment/CommentList/queries.js @@ -1,5 +1,7 @@ import gql from 'graphql-tag'; +import ISSUECOMMENT_FRAGMENT from '../fragment'; + export const GET_COMMENTS_OF_ISSUE = gql` query( $repositoryOwner: String! @@ -13,11 +15,7 @@ export const GET_COMMENTS_OF_ISSUE = gql` comments(first: 1, after: $cursor) { edges { node { - id - bodyHTML - author { - login - } + ...issueComment } } pageInfo { @@ -28,4 +26,5 @@ export const GET_COMMENTS_OF_ISSUE = gql` } } } + ${ISSUECOMMENT_FRAGMENT} `; diff --git a/src/Comment/fragment.js b/src/Comment/fragment.js new file mode 100644 index 0000000..2bf7360 --- /dev/null +++ b/src/Comment/fragment.js @@ -0,0 +1,11 @@ +import gql from 'graphql-tag'; + +export default gql` + fragment issueComment on IssueComment { + id + bodyHTML + author { + login + } + } +`; \ No newline at end of file From ec6d2ce9abeab7265118c459e59b305ef90593ff Mon Sep 17 00:00:00 2001 From: Johnny Oshika Date: Fri, 10 Jan 2020 19:47:48 -0800 Subject: [PATCH 3/6] Merge new comment into comments list --- src/Comment/CommentAdd/index.js | 57 +++++++++++++++++++++++++++++++- src/Comment/CommentList/index.js | 2 ++ 2 files changed, 58 insertions(+), 1 deletion(-) diff --git a/src/Comment/CommentAdd/index.js b/src/Comment/CommentAdd/index.js index a45ff56..060d23a 100755 --- a/src/Comment/CommentAdd/index.js +++ b/src/Comment/CommentAdd/index.js @@ -1,12 +1,62 @@ import React, { Component } from 'react'; import { Mutation } from 'react-apollo'; +import { GET_COMMENTS_OF_ISSUE } from '../CommentList/queries'; import { ADD_COMMENT } from './mutations'; import TextArea from '../../TextArea'; import Button from '../../Button'; import ErrorMessage from '../../Error'; +const updateComments = ({ + repositoryOwner, + repositoryName, + issue +}, +client, +{ + data: { + addComment: { + commentEdge + } + } +} +) => { + const data = client.readQuery({ + query: GET_COMMENTS_OF_ISSUE, + variables: { + repositoryOwner, + repositoryName, + number: issue.number + } + }); + + client.writeQuery({ + query: GET_COMMENTS_OF_ISSUE, + variables: { + repositoryOwner, + repositoryName, + number: issue.number + }, + data: { + ...data, + repository: { + ...data.repository, + issue: { + ...data.repository.issue, + comments: { + ...data.repository.issue.comments, + edges: [ + ...data.repository.issue.comments.edges, + commentEdge + ] + } + } + } + } + }) +}; + class CommentAdd extends Component { state = { value: '', @@ -23,13 +73,18 @@ class CommentAdd extends Component { }; render() { - const { issue } = this.props; + const { issue, repositoryOwner, repositoryName } = this.props; const { value } = this.state; return ( updateComments({ + repositoryOwner, + repositoryName, + issue + }, client, data)} > {(addComment, { data, loading, error }) => (
diff --git a/src/Comment/CommentList/index.js b/src/Comment/CommentList/index.js index ee85cb7..649ca51 100755 --- a/src/Comment/CommentList/index.js +++ b/src/Comment/CommentList/index.js @@ -70,6 +70,8 @@ const Comments = ({ repositoryOwner, repositoryName, issue }) => ( ); From 5946dea07eca576300df40996aaae665f4a3cd40 Mon Sep 17 00:00:00 2001 From: Johnny Oshika Date: Fri, 10 Jan 2020 19:48:02 -0800 Subject: [PATCH 4/6] Optimistically update comments list with new comment --- src/Comment/CommentAdd/index.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/Comment/CommentAdd/index.js b/src/Comment/CommentAdd/index.js index 060d23a..376660e 100755 --- a/src/Comment/CommentAdd/index.js +++ b/src/Comment/CommentAdd/index.js @@ -80,6 +80,23 @@ class CommentAdd extends Component { updateComments({ repositoryOwner, repositoryName, From b20e7a133c9e56a63e7fb537bafaf4c2285fd7d1 Mon Sep 17 00:00:00 2001 From: Johnny Oshika Date: Sat, 18 Jan 2020 12:32:07 -0800 Subject: [PATCH 5/6] Prevent duplicate comment collision when paging after comment insertion --- src/Comment/CommentList/index.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/Comment/CommentList/index.js b/src/Comment/CommentList/index.js index 649ca51..ad711aa 100755 --- a/src/Comment/CommentList/index.js +++ b/src/Comment/CommentList/index.js @@ -27,12 +27,19 @@ const updateQuery = (previousResult, { fetchMoreResult }) => { ...previousResult.repository.issue.comments, ...fetchMoreResult.repository.issue.comments, edges: [ - ...previousResult.repository.issue.comments.edges, - ...fetchMoreResult.repository.issue.comments.edges, - ], - }, - }, - }, + ...previousResult + .repository + .issue + .comments + .edges + .filter( + previousEdge => !fetchMoreResult.repository.issue.comments.edges.some( + fetchMoreEdge => fetchMoreEdge.node.id === previousEdge.node.id)), + ...fetchMoreResult.repository.issue.comments.edges + ] + } + } + } }; }; From 931fabd9bb22968d8d2dea9b9cd8cea922dc2517 Mon Sep 17 00:00:00 2001 From: Johnny Oshika Date: Sat, 18 Jan 2020 12:33:38 -0800 Subject: [PATCH 6/6] Sort issue comments client-side so that newly added comment stays at the end --- src/Comment/CommentAdd/index.js | 1 + src/Comment/CommentList/index.js | 2 +- src/Comment/fragment.js | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Comment/CommentAdd/index.js b/src/Comment/CommentAdd/index.js index 376660e..c258c98 100755 --- a/src/Comment/CommentAdd/index.js +++ b/src/Comment/CommentAdd/index.js @@ -88,6 +88,7 @@ class CommentAdd extends Component { node: { __typename: 'IssueComment', id: new Date().getTime() + '', + databaseId: new Date().getTime(), author: { __typename: 'User', login: 'me' diff --git a/src/Comment/CommentList/index.js b/src/Comment/CommentList/index.js index ad711aa..b156fdf 100755 --- a/src/Comment/CommentList/index.js +++ b/src/Comment/CommentList/index.js @@ -36,7 +36,7 @@ const updateQuery = (previousResult, { fetchMoreResult }) => { previousEdge => !fetchMoreResult.repository.issue.comments.edges.some( fetchMoreEdge => fetchMoreEdge.node.id === previousEdge.node.id)), ...fetchMoreResult.repository.issue.comments.edges - ] + ].sort((a, b) => a.node.databaseId - b.node.databaseId) } } } diff --git a/src/Comment/fragment.js b/src/Comment/fragment.js index 2bf7360..b784b78 100644 --- a/src/Comment/fragment.js +++ b/src/Comment/fragment.js @@ -3,6 +3,7 @@ import gql from 'graphql-tag'; export default gql` fragment issueComment on IssueComment { id + databaseId bodyHTML author { login