-
{this.props.userData.username}
+
{this.props.user.username}
{ emailAddress
?
{ emailAddress }
: null
diff --git a/client/coral-sign-in/components/FakeComment.js b/client/coral-sign-in/components/FakeComment.js
index f5926852c..37630383d 100644
--- a/client/coral-sign-in/components/FakeComment.js
+++ b/client/coral-sign-in/components/FakeComment.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from 'coral-embed-stream/src/Comment.css';
+import styles from 'coral-embed-stream/src/components/Comment.css';
import AuthorName from 'coral-plugin-author-name/AuthorName';
import Content from 'coral-plugin-commentcontent/CommentContent';
diff --git a/package.json b/package.json
index 6c725a852..e2bd683ca 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,8 @@
"parse-duration": "^0.1.1",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
- "react-apollo": "^1.0.0",
+ "prop-types": "^15.5.8",
+ "react-apollo": "^1.1.0",
"react-recaptcha": "^2.2.6",
"redis": "^2.7.1",
"resolve": "^1.3.2",
@@ -100,7 +101,7 @@
"uuid": "^2.0.3"
},
"devDependencies": {
- "apollo-client": "^1.0.0",
+ "apollo-client": "^1.0.4",
"autoprefixer": "^6.5.2",
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
diff --git a/plugins/coral-plugin-respect/client/components/RespectButton.js b/plugins/coral-plugin-respect/client/components/RespectButton.js
index c1e0c1b47..faeda1991 100644
--- a/plugins/coral-plugin-respect/client/components/RespectButton.js
+++ b/plugins/coral-plugin-respect/client/components/RespectButton.js
@@ -12,8 +12,8 @@ const lang = new I18n(translations);
class RespectButton extends Component {
handleClick = () => {
- const {postRespect, showSignInDialog, deleteAction, commentId} = this.props;
- const {me, comment} = this.props.data;
+ const {postRespect, showSignInDialog, deleteAction} = this.props;
+ const {root: {me}, comment} = this.props;
const myRespectActionSummary = getMyActionSummary('RespectActionSummary', comment);
@@ -29,17 +29,17 @@ class RespectButton extends Component {
}
if (myRespectActionSummary) {
- deleteAction(myRespectActionSummary.current_user.id);
+ deleteAction(myRespectActionSummary.current_user.id, comment.id);
} else {
postRespect({
- item_id: commentId,
+ item_id: comment.id,
item_type: 'COMMENTS'
});
}
}
render() {
- const {comment} = this.props.data;
+ const {comment} = this.props;
if (!comment) {
return null;
diff --git a/plugins/coral-plugin-respect/client/containers/RespectButton.js b/plugins/coral-plugin-respect/client/containers/RespectButton.js
index bcf0e342d..38be8a978 100644
--- a/plugins/coral-plugin-respect/client/containers/RespectButton.js
+++ b/plugins/coral-plugin-respect/client/containers/RespectButton.js
@@ -2,37 +2,25 @@ import {compose, gql, graphql} from 'react-apollo';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import get from 'lodash/get';
-
+import withFragments from 'coral-framework/hocs/withFragments';
import {showSignInDialog} from 'coral-framework/actions/auth';
import RespectButton from '../components/RespectButton';
-// TODO: use `update` instead of `updateQueries` for optimistic mutations.
-// See https://dev-blog.apollodata.com/apollo-clients-new-imperative-store-api-6cb69318a1e3
-// and https://github.com/apollographql/apollo-client/issues/1224
-
const isRespectAction = (a) => a.__typename === 'RespectActionSummary';
-export const RESPECT_QUERY = gql`
- query RespectQuery($commentId: ID!) {
- comment(id: $commentId) {
- id
- action_summaries {
- ... on RespectActionSummary {
- count
- current_user {
- id
- }
+const COMMENT_FRAGMENT = gql`
+ fragment RespectButton_updateFragment on Comment {
+ action_summaries {
+ ... on RespectActionSummary {
+ count
+ current_user {
+ id
}
}
}
- me {
- status
- }
}
`;
-const withQuery = graphql(RESPECT_QUERY);
-
const withDeleteAction = graphql(gql`
mutation deleteAction($id: ID!) {
deleteAction(id:$id) {
@@ -43,7 +31,7 @@ const withDeleteAction = graphql(gql`
}
`, {
props: ({mutate}) => ({
- deleteAction: (id) => {
+ deleteAction: (id, commentId) => {
return mutate({
variables: {id},
optimisticResponse: {
@@ -52,27 +40,26 @@ const withDeleteAction = graphql(gql`
errors: null,
}
},
- updateQueries: {
- RespectQuery: (prev) => {
- const action_summaries = prev.comment.action_summaries;
- const idx = action_summaries.findIndex(isRespectAction);
- if (idx < 0 || get(action_summaries[idx], 'current_user.id') !== id) {
- return prev;
- }
- const next = {
- ...prev,
- comment: {
- ...prev.comment,
- action_summaries: action_summaries.map(
- (a, i) => i !== idx ? a : ({
- ...a,
- count: a.count - 1,
- current_user: null,
- })),
- }
- };
- return next;
- },
+ update: (proxy) => {
+ const fragmentId = `Comment_${commentId}`;
+
+ // Read the data from our cache for this query.
+ const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId});
+
+ // Check whether we respected this comment.
+ const idx = data.action_summaries.findIndex(isRespectAction);
+ if (idx < 0 || get(data.action_summaries[idx], 'current_user.id') !== id) {
+ return;
+ }
+
+ data.action_summaries[idx] = {
+ ...data.action_summaries[idx],
+ count: data.action_summaries[idx].count - 1,
+ current_user: null,
+ };
+
+ // Write our data back to the cache.
+ proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data});
},
});
},
@@ -105,46 +92,39 @@ const withPostRespect = graphql(gql`
},
}
},
- updateQueries: {
- RespectQuery: (prev, {mutationResult, queryVariables}) => {
- if (queryVariables.commentId !== respect.item_id) {
- return prev;
- }
+ update: (proxy, mutationResult) => {
+ const fragmentId = `Comment_${respect.item_id}`;
- let action_summaries = prev.comment.action_summaries;
- let idx = action_summaries.findIndex(isRespectAction);
+ // Read the data from our cache for this query.
+ const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId});
- // Check whether we already respected this comment.
- if (idx >= 0 && action_summaries[idx].current_user) {
- return prev;
- }
+ // Add our comment from the mutation to the end.
+ let idx = data.action_summaries.findIndex(isRespectAction);
- if (idx < 0) {
+ // Check whether we already respected this comment.
+ if (idx >= 0 && data.action_summaries[idx].current_user) {
+ return;
+ }
- // Add initial action when it doesn't exist.
- action_summaries = action_summaries.concat([{
- __typename: 'RespectActionSummary',
- count: 0,
- current_user: null,
- }]);
- idx = action_summaries.length - 1;
- }
+ if (idx < 0) {
- const respectAction = mutationResult.data.createRespect.respect;
- const next = {
- ...prev,
- comment: {
- ...prev.comment,
- action_summaries: action_summaries.map(
- (a, i) => i !== idx ? a : ({
- ...a,
- count: a.count + 1,
- current_user: respectAction,
- })),
- }
- };
- return next;
- },
+ // Add initial action when it doesn't exist.
+ data.action_summaries.push({
+ __typename: 'RespectActionSummary',
+ count: 0,
+ current_user: null,
+ });
+ idx = data.action_summaries.length - 1;
+ }
+
+ data.action_summaries[idx] = {
+ ...data.action_summaries[idx],
+ count: data.action_summaries[idx].count + 1,
+ current_user: mutationResult.data.createRespect.respect,
+ };
+
+ // Write our data back to the cache.
+ proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data});
},
});
},
@@ -155,10 +135,29 @@ const mapDispatchToProps = dispatch =>
bindActionCreators({showSignInDialog}, dispatch);
const enhance = compose(
+ withFragments({
+ root: gql`
+ fragment RespectButton_root on RootQuery {
+ me {
+ status
+ }
+ }
+ `,
+ comment: gql`
+ fragment RespectButton_comment on Comment {
+ action_summaries {
+ ... on RespectActionSummary {
+ count
+ current_user {
+ id
+ }
+ }
+ }
+ }`,
+ }),
connect(null, mapDispatchToProps),
withDeleteAction,
withPostRespect,
- withQuery,
);
export default enhance(RespectButton);
diff --git a/yarn.lock b/yarn.lock
index 378e5a6c0..34025cfd8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -179,11 +179,11 @@ anymatch@^1.3.0:
arrify "^1.0.0"
micromatch "^2.1.5"
-apollo-client@^1.0.0, apollo-client@^1.0.0-rc.9:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/apollo-client/-/apollo-client-1.0.2.tgz#4355bd49d53a1489bc91d9f56d5b3d0ffe33fb3c"
+apollo-client@^1.0.2, apollo-client@^1.0.4:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/apollo-client/-/apollo-client-1.0.4.tgz#af75db8cdd27e08a835ddfb39807849e178540f9"
dependencies:
- graphql "^0.9.1"
+ graphql "^0.9.3"
graphql-anywhere "^3.0.1"
graphql-tag "^2.0.0"
redux "^3.4.0"
@@ -2948,6 +2948,18 @@ fbjs@^0.8.1, fbjs@^0.8.4:
setimmediate "^1.0.5"
ua-parser-js "^0.7.9"
+fbjs@^0.8.9:
+ version "0.8.12"
+ resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
+ dependencies:
+ core-js "^1.0.0"
+ isomorphic-fetch "^2.1.1"
+ loose-envify "^1.0.0"
+ object-assign "^4.1.0"
+ promise "^7.1.1"
+ setimmediate "^1.0.5"
+ ua-parser-js "^0.7.9"
+
fd-slicer@~1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
@@ -3513,10 +3525,6 @@ graphql-tag@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-1.2.3.tgz#74c62443fbf3e693647426d7359f7e3e6ce7dace"
-graphql-tag@^1.3.1:
- version "1.3.2"
- resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-1.3.2.tgz#7abb3a8fd9f3415d07163314ed237061c785b759"
-
graphql-tag@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.0.0.tgz#f3efe3b4d64f33bfe8479ae06a461c9d72f2a6fe"
@@ -3543,9 +3551,9 @@ graphql@^0.8.2:
dependencies:
iterall "1.0.2"
-graphql@^0.9.1:
- version "0.9.2"
- resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.9.2.tgz#2cb5c635de13f790a77c5879649cb401b1589386"
+graphql@^0.9.3:
+ version "0.9.3"
+ resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.9.3.tgz#71fc0fa331bffb9c20678485861cfb370803118e"
dependencies:
iterall "1.0.3"
@@ -6366,6 +6374,12 @@ promise@^7.0.1, promise@^7.1.1:
dependencies:
asap "~2.0.3"
+prop-types@^15.5.8:
+ version "15.5.8"
+ resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
+ dependencies:
+ fbjs "^0.8.9"
+
protocols@^1.1.0, protocols@^1.4.0:
version "1.4.3"
resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.3.tgz#635b1c0785f0b389e8a012df1b1afffda9608b76"
@@ -6613,13 +6627,13 @@ react-addons-test-utils@^15.4.2:
fbjs "^0.8.4"
object-assign "^4.1.0"
-react-apollo@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/react-apollo/-/react-apollo-1.0.0.tgz#7fcc14adcc7aa4ca4d9e04ddedf50b8fb74daa91"
+react-apollo@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/react-apollo/-/react-apollo-1.1.0.tgz#0c5027da72420919b62083e4c473cf406959892c"
dependencies:
- apollo-client "^1.0.0-rc.9"
+ apollo-client "^1.0.2"
graphql-anywhere "^3.0.0"
- graphql-tag "^1.3.1"
+ graphql-tag "^2.0.0"
hoist-non-react-statics "^1.2.0"
invariant "^2.2.1"
lodash.flatten "^4.2.0"