editComment mutation doesn't refetch streamQuery. Instead a reducer updates streamQuery client-side

This commit is contained in:
Benjamin Goering
2017-05-11 10:38:48 -07:00
parent cb90802896
commit cd7b1f2b2b
3 changed files with 54 additions and 19 deletions
@@ -43,6 +43,7 @@ class Comment extends React.Component {
// timeout to keep track of Comment edit window expiration
this.editWindowExpiryTimeout = null;
this.onClickEdit = this.onClickEdit.bind(this);
this.stopEditing = this.stopEditing.bind(this);
this.state = {
// Whether the comment should be editable (e.g. after a commenter clicking the 'Edit' button on their own comment)
@@ -125,7 +126,14 @@ class Comment extends React.Component {
this.setState({isEditing: true});
}
stopEditing () {
if (this._isMounted) {
this.setState({isEditing: false});
}
}
componentDidMount() {
this._isMounted = true;
if (this.editWindowExpiryTimeout) {
this.editWindowExpiryTimeout = clearTimeout(this.editWindowExpiryTimeout);
}
@@ -143,7 +151,8 @@ class Comment extends React.Component {
componentWillUnmount() {
if (this.editWindowExpiryTimeout) {
this.editWindowExpiryTimeout = clearTimeout(this.editWindowExpiryTimeout);
}
}
this._isMounted = false;
}
render () {
const {
@@ -287,7 +296,7 @@ class Comment extends React.Component {
currentUser={currentUser}
maxCharCount={maxCharCount}
parentId={parentId}
stopEditing={() => this.setState({isEditing: false})}
stopEditing={this.stopEditing}
/>
: <div>
<Content body={comment.body} />
@@ -140,7 +140,7 @@ function reduceEditCommentActionsToUpdateStreamQuery(previousResult, action) {
if (resultHasErrors(action.result)) {
return previousResult;
}
const {variables: {id, edit}} = action;
const {variables: {id, edit}, result: {data: {editComment: {comment: {status}}}}} = action;
const updateCommentWithEdit = (comment, edit) => {
const {body} = edit;
const editedComment = update(comment, {
@@ -151,24 +151,52 @@ function reduceEditCommentActionsToUpdateStreamQuery(previousResult, action) {
});
return editedComment;
};
const commentIsStillVisible = (comment) => {
return ! ((id === comment.id) && (['PREMOD', 'REJECTED'].includes(status)));
};
const resultReflectingEdit = update(previousResult, {
asset: {
comments: {
$apply: comments => comments.map(comment => {
if (comment.id === id) {
return updateCommentWithEdit(comment, edit);
}
return update(comment, {
replies: {
$apply: (comments) => comments.map(comment => {
if (comment.id === id) {
return updateCommentWithEdit(comment, edit);
$apply: comments => {
return comments.filter(commentIsStillVisible).map(comment => {
let replyWasEditedToBeHidden = false;
if (comment.id === id) {
return updateCommentWithEdit(comment, edit);
}
const commentWithUpdatedReplies = update(comment, {
replies: {
$apply: (comments) => {
return comments
.filter(c => {
if (commentIsStillVisible(c)) {
return true;
}
replyWasEditedToBeHidden = true;
return false;
})
.map(comment => {
if (comment.id === id) {
return updateCommentWithEdit(comment, edit);
}
return comment;
});
}
return comment;
})
},
},
});
// If a reply was edited to be hdiden, then this parent needs its replyCount to be decremented.
if (replyWasEditedToBeHidden) {
return update(commentWithUpdatedReplies, {
replyCount: {
$apply: (replyCount) => {
return replyCount - 1;
}
}
});
}
return commentWithUpdatedReplies;
});
})
}
}
}
});
@@ -183,9 +183,7 @@ export const editComment = graphql(EDIT_COMMENT, {
asset_id,
edit,
},
refetchQueries: [
'EmbedQuery'
]
refetchQueries: []
});
}
};