Support live updates

This commit is contained in:
Chi Vinh Le
2017-06-12 23:21:27 +07:00
parent 74ad3c3a35
commit 2a283a9a5a
16 changed files with 528 additions and 339 deletions
@@ -83,7 +83,7 @@ class StreamContainer extends React.Component {
}
});
this.subscriptions.push(sub1, sub2);
this.subscriptions = [sub1, sub2];
}
unsubscribe() {
+2 -2
View File
@@ -311,11 +311,11 @@ export const checkLogin = () => (dispatch) => {
throw new Error('Not logged in');
}
dispatch(checkLoginSuccess(result.user));
// Reset the websocket.
resetWebsocket();
dispatch(checkLoginSuccess(result.user));
// Display create username dialog if necessary.
if (result.user.canEditName && result.user.status !== 'BANNED') {
dispatch(showCreateUsernameDialog());
-1
View File
@@ -1,5 +1,4 @@
export {default as withFragments} from './withFragments';
export {default as withMutation} from './withMutation';
export {default as withQuery} from './withQuery';
export {default as withReaction} from './withReaction';
-240
View File
@@ -1,240 +0,0 @@
import React from 'react';
import get from 'lodash/get';
import uuid from 'uuid/v4';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {getDisplayName} from '../helpers/hoc';
import {compose, gql, graphql} from 'react-apollo';
import withFragments from 'coral-framework/hocs/withFragments';
import {showSignInDialog} from 'coral-framework/actions/auth';
import {capitalize} from 'coral-framework/helpers/strings';
import {getMyActionSummary, getTotalActionCount} from 'coral-framework/utils';
export default (reaction) => (WrappedComponent) => {
if (typeof reaction !== 'string') {
console.error('Reaction must be a valid string');
return null;
}
reaction = reaction.toLowerCase();
class WithReactions extends React.Component {
render() {
const {comment} = this.props;
const reactionSummary = getMyActionSummary(
`${capitalize(reaction)}ActionSummary`,
comment
);
const count = getTotalActionCount(
`${capitalize(reaction)}ActionSummary`,
comment
);
const alreadyReacted = () => !!reactionSummary;
const withReactionProps = {reactionSummary, count, alreadyReacted};
return <WrappedComponent {...this.props} {...withReactionProps} />;
}
}
const isReaction = (a) =>
a.__typename === `${capitalize(reaction)}ActionSummary`;
const COMMENT_FRAGMENT = gql`
fragment ${capitalize(reaction)}Button_updateFragment on Comment {
action_summaries {
... on ${capitalize(reaction)}ActionSummary {
count
current_user {
id
}
}
}
}
`;
const withDeleteReaction = graphql(
gql`
mutation deleteReaction($id: ID!) {
deleteAction(id:$id) {
errors {
translation_key
}
}
}
`,
{
props: ({mutate, ownProps}) => ({
deleteReaction: () => {
const reactionSummary = getMyActionSummary(
`${capitalize(reaction)}ActionSummary`,
ownProps.comment
);
const reactionData = {
id: reactionSummary.current_user.id,
commentId: ownProps.comment.id
};
return mutate({
variables: {id: reactionData.id},
optimisticResponse: {
deleteAction: {
__typename: 'DeleteActionResponse',
errors: null
}
},
update: (proxy) => {
const fragmentId = `Comment_${reactionData.commentId}`;
// Read the data from our cache for this query.
const data = proxy.readFragment({
fragment: COMMENT_FRAGMENT,
id: fragmentId
});
// Check whether we liked this comment.
const idx = data.action_summaries.findIndex(isReaction);
if (
idx < 0 ||
get(data.action_summaries[idx], 'current_user.id') !== reactionData.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
});
}
});
}
})
}
);
const withPostReaction = graphql(
gql`
mutation create${capitalize(reaction)}($${reaction}: Create${capitalize(reaction)}Input!) {
create${capitalize(reaction)}(${reaction}: $${reaction}) {
${reaction} {
id
}
errors {
translation_key
}
}
}
`,
{
props: ({mutate, ownProps}) => ({
postReaction: () => {
const reactionData = {
item_id: ownProps.comment.id,
item_type: 'COMMENTS'
};
return mutate({
variables: {[reaction]: reactionData},
optimisticResponse: {
[`create${capitalize(reaction)}`]: {
__typename: `Create${capitalize(reaction)}Response`,
errors: null,
[reaction]: {
__typename: `${capitalize(reaction)}Action`,
id: uuid()
}
}
},
update: (proxy, mutationResult) => {
const fragmentId = `Comment_${reactionData.item_id}`;
// Read the data from our cache for this query.
const data = proxy.readFragment({
fragment: COMMENT_FRAGMENT,
id: fragmentId
});
// Add our comment from the mutation to the end.
let idx = data.action_summaries.findIndex(isReaction);
// Check whether we already reactioned this comment.
if (idx >= 0 && data.action_summaries[idx].current_user) {
return;
}
if (idx < 0) {
// Add initial action when it doesn't exist.
data.action_summaries.push({
__typename: `${capitalize(reaction)}ActionSummary`,
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[
`create${capitalize(reaction)}`
][reaction]
};
// Write our data back to the cache.
proxy.writeFragment({
fragment: COMMENT_FRAGMENT,
id: fragmentId,
data
});
}
});
}
})
}
);
const mapStateToProps = (state) => ({
user: state.auth.toJS().user,
});
const mapDispatchToProps = (dispatch) =>
bindActionCreators({showSignInDialog}, dispatch);
const enhance = compose(
withFragments({
comment: gql`
fragment ${capitalize(reaction)}Button_comment on Comment {
action_summaries {
... on ${capitalize(reaction)}ActionSummary {
count
current_user {
id
}
}
}
}`
}),
connect(mapStateToProps, mapDispatchToProps),
withDeleteReaction,
withPostReaction
);
WithReactions.displayName = `WithReactions(${getDisplayName(WrappedComponent)})`;
return enhance(WithReactions);
};
+12 -12
View File
@@ -1,7 +1,7 @@
import ApolloClient, {addTypename} from 'apollo-client';
import {networkInterface} from './transport';
import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';
import {SUBSCRIPTION_END} from 'subscriptions-transport-ws/dist/messageTypes';
import MessageTypes from 'subscriptions-transport-ws/dist/message-types';
import {getAuthToken} from '../helpers/request';
let client, wsClient = null, wsClientToken = null;
@@ -13,18 +13,17 @@ export function resetWebsocket() {
return;
}
// Unsubscribe from all the active subscriptions.
Object.keys(wsClient.subscriptions).forEach((id) => {
// Create the message.
let message = {id: parseInt(id), type: SUBSCRIPTION_END};
// Send the unsubscribe message.
wsClient.client.send(JSON.stringify(message));
});
// Close the client, this will trigger a reconnect.
// Close socket connection which will also unregister subscriptions on the server-side.
wsClient.close();
// Reconnect to the server.
wsClient.connect();
// Reregister all subscriptions (uses non public api).
// See: https://github.com/apollographql/subscriptions-transport-ws/issues/171
Object.keys(wsClient.operations).forEach((id) => {
wsClient.sendMessage(id, MessageTypes.GQL_START, wsClient.operations[id].options);
});
}
export function getClient() {
@@ -35,6 +34,7 @@ export function getClient() {
const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
wsClient = new SubscriptionClient(`${protocol}://${location.host}/api/v1/live`, {
reconnect: true,
lazy: true,
connectionParams: {
get token() {
+1 -1
View File
@@ -39,7 +39,7 @@ const createAction = async ({user = {}}, {item_id, item_type, action_type, group
* @return {Promise} resolves when the action is deleted
*/
const deleteAction = ({user}, {id}) => {
return ActionModel.remove({
return ActionModel.findOneAndRemove({
id,
user_id: user.id
});
+1
View File
@@ -13,6 +13,7 @@ const Action = {
// This will load the user for the specific action. We'll limit this to the
// admin users only or the current logged in user.
user({user_id}, _, {loaders: {Users}, user}) {
console.log(user);
if (user && (user.can(SEARCH_OTHER_USERS) || user_id === user.id)) {
return Users.getByID.load(user_id);
}
+4 -4
View File
@@ -50,7 +50,7 @@ const createSubscriptionManager = (server) => new SubscriptionServer({
connection.upgradeReq.headers['authorization'] = `Bearer ${token}`;
}
},
onSubscribe: (parsedMessage, baseParams, connection) => {
onOperation: (parsedMessage, baseParams, connection) => {
// Cache the upgrade request.
let upgradeReq = connection.upgradeReq;
@@ -58,15 +58,15 @@ const createSubscriptionManager = (server) => new SubscriptionServer({
// Attach the context per request.
baseParams.context = async () => {
let req;
try {
req = await deserializeUser(upgradeReq);
} catch (e) {
console.error(e);
console.error(connection);
return new Context({}, pubsub);
}
return new Context(req, pubsub);
};
+2 -2
View File
@@ -81,7 +81,7 @@
"graphql-errors": "^2.1.0",
"graphql-redis-subscriptions": "^1.1.5",
"graphql-server-express": "^0.6.0",
"graphql-subscriptions": "^0.3.1",
"graphql-subscriptions": "^0.4.3",
"graphql-tools": "^0.10.1",
"helmet": "^3.5.0",
"immutability-helper": "^2.2.0",
@@ -116,7 +116,7 @@
"semver": "^5.3.0",
"simplemde": "^1.11.2",
"snake-case": "^2.1.0",
"subscriptions-transport-ws": "^0.5.5-alpha.0",
"subscriptions-transport-ws": "^0.7.1",
"timekeeper": "^1.0.0",
"uuid": "^3.0.1",
"yaml-loader": "^0.4.0",
+1 -1
View File
@@ -1 +1 @@
export {withReaction} from 'coral-framework/hocs';
export {default as withReaction} from './withReaction';
+337
View File
@@ -0,0 +1,337 @@
import React from 'react';
import get from 'lodash/get';
import uuid from 'uuid/v4';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {getDisplayName} from 'coral-framework/helpers/hoc';
import {compose, gql, graphql} from 'react-apollo';
import withFragments from 'coral-framework/hocs/withFragments';
import {showSignInDialog} from 'coral-framework/actions/auth';
import {capitalize} from 'coral-framework/helpers/strings';
import {getMyActionSummary, getTotalActionCount} from 'coral-framework/utils';
import * as PropTypes from 'prop-types';
export default (reaction) => (WrappedComponent) => {
if (typeof reaction !== 'string') {
console.error('Reaction must be a valid string');
return null;
}
let instances = 0;
let createdSubscription = null;
let deletedSubscription = null;
reaction = reaction.toLowerCase();
const Reaction = capitalize(reaction);
const COMMENT_FRAGMENT = gql`
fragment ${Reaction}Button_updateFragment on Comment {
action_summaries {
... on ${Reaction}ActionSummary {
count
current_user {
id
}
}
}
}
`;
const isReaction = (a) =>
a.__typename === `${Reaction}ActionSummary`;
const addReactionToStore = (proxy, {action, self}) => {
const fragmentId = `Comment_${action.item_id}`;
// Read the data from our cache for this query.
const data = proxy.readFragment({
fragment: COMMENT_FRAGMENT,
id: fragmentId
});
// Add our comment from the mutation to the end.
let idx = data.action_summaries.findIndex(isReaction);
// Check whether we already reactioned this comment.
if (self && idx >= 0 && data.action_summaries[idx].current_user) {
return;
}
if (idx < 0) {
// Add initial action when it doesn't exist.
data.action_summaries.push({
__typename: `${Reaction}ActionSummary`,
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: self ? action : data.action_summaries[idx].current_user
};
// Write our data back to the cache.
proxy.writeFragment({
fragment: COMMENT_FRAGMENT,
id: fragmentId,
data
});
};
const deleteReactionFromStore = (proxy, {action, self}) => {
const fragmentId = `Comment_${action.item_id}`;
// Read the data from our cache for this query.
const data = proxy.readFragment({
fragment: COMMENT_FRAGMENT,
id: fragmentId
});
// Check whether we liked this comment.
const idx = data.action_summaries.findIndex(isReaction);
if (
self &&
(idx < 0 || get(data.action_summaries[idx], 'current_user.id') !== action.id)
) {
return;
}
data.action_summaries[idx] = {
...data.action_summaries[idx],
count: data.action_summaries[idx].count - 1,
current_user: self ? null : data.action_summaries[idx].current_user,
};
// Write our data back to the cache.
proxy.writeFragment({
fragment: COMMENT_FRAGMENT,
id: fragmentId,
data
});
};
const REACTION_CREATED_SUBSCRIPTION = gql`
subscription ${Reaction}ActionCreated($assetId: ID!) {
${reaction}ActionCreated(asset_id: $assetId) {
id
user {
id
}
item_id
}
}
`;
const REACTION_DELETED_SUBSCRIPTION = gql`
subscription ${Reaction}ActionDeleted($assetId: ID!) {
${reaction}ActionDeleted(asset_id: $assetId) {
id
user {
id
}
item_id
}
}
`;
class WithReactions extends React.Component {
static contextTypes = {
client: PropTypes.object.isRequired,
};
constructor(props, context) {
super(props, context);
if (instances === 0) {
createdSubscription = context.client.subscribe({
query: REACTION_CREATED_SUBSCRIPTION,
variables: {
assetId: this.props.root.asset.id,
},
}).subscribe({
next: this.onReactionCreated,
error(err) { console.error('err', err); },
});
deletedSubscription = context.client.subscribe({
query: REACTION_DELETED_SUBSCRIPTION,
variables: {
assetId: this.props.root.asset.id,
},
}).subscribe({
next: this.onReactionDeleted,
error(err) { console.error('err', err); },
});
}
instances++;
}
onReactionCreated = ({[`${reaction}ActionCreated`]: action}) => {
if (this.props.user && action.user && this.props.user.id === action.user.id) {
return;
}
addReactionToStore(this.context.client, {action, self: false});
};
onReactionDeleted = ({[`${reaction}ActionDeleted`]: action}) => {
if (this.props.user && action.user && this.props.user.id === action.user.id) {
return;
}
deleteReactionFromStore(this.context.client, {action, self: false});
};
componentWillUnmount() {
instances--;
if (instances === 0) {
try {
createdSubscription.unsubscribe();
deletedSubscription.unsubscribe();
}
catch(e) {
console.warn(e);
}
}
}
render() {
const {comment} = this.props;
const reactionSummary = getMyActionSummary(
`${Reaction}ActionSummary`,
comment
);
const count = getTotalActionCount(
`${Reaction}ActionSummary`,
comment
);
const alreadyReacted = !!reactionSummary;
const withReactionProps = {reactionSummary, count, alreadyReacted};
return <WrappedComponent {...this.props} {...withReactionProps} />;
}
}
const withDeleteReaction = graphql(
gql`
mutation Delete${Reaction}Action($input: Delete${Reaction}ActionInput!) {
delete${Reaction}Action(input: $input) {
errors {
translation_key
}
}
}
`,
{
props: ({mutate, ownProps}) => ({
deleteReaction: () => {
const reactionSummary = getMyActionSummary(
`${Reaction}ActionSummary`,
ownProps.comment
);
const id = reactionSummary.current_user.id;
const item_id = ownProps.comment.id;
const input = {id};
return mutate({
variables: {input},
optimisticResponse: {
[`delete${Reaction}Action`]: {
__typename: `Delete${Reaction}ActionResponse`,
errors: null
}
},
update: (proxy) => {
deleteReactionFromStore(proxy, {action: {item_id, id}, self: true});
}
});
}
})
}
);
const withPostReaction = graphql(
gql`
mutation Create${Reaction}Action($input: Create${Reaction}ActionInput!) {
create${Reaction}Action(input: $input) {
${reaction} {
id
}
errors {
translation_key
}
}
}
`,
{
props: ({mutate, ownProps}) => ({
postReaction: () => {
const input = {
item_id: ownProps.comment.id,
};
return mutate({
variables: {input},
optimisticResponse: {
[`create${Reaction}Action`]: {
__typename: `Create${Reaction}ActionResponse`,
errors: null,
[reaction]: {
__typename: `${Reaction}Action`,
id: uuid()
}
}
},
update: (proxy, {data: {[`create${Reaction}Action`]: {[reaction]: action}}}) => {
const a = {
...action,
item_id: input.item_id,
};
addReactionToStore(proxy, {action: a, self: true});
}
});
}
})
}
);
const mapStateToProps = (state) => ({
user: state.auth.toJS().user,
});
const mapDispatchToProps = (dispatch) =>
bindActionCreators({showSignInDialog}, dispatch);
const enhance = compose(
withFragments({
comment: gql`
fragment ${Reaction}Button_comment on Comment {
action_summaries {
... on ${Reaction}ActionSummary {
count
current_user {
id
}
}
}
}`
}),
connect(mapStateToProps, mapDispatchToProps),
withDeleteReaction,
withPostReaction
);
WithReactions.displayName = `WithReactions(${getDisplayName(WrappedComponent)})`;
return enhance(WithReactions);
};
+108 -35
View File
@@ -1,4 +1,5 @@
const wrapResponse = require('../../../graph/helpers/response');
const {SEARCH_OTHER_USERS} = require('../../../perms/constants');
function getReactionConfig(reaction) {
const Reaction = reaction.charAt(0).toUpperCase() + reaction.slice(1);
@@ -6,82 +7,142 @@ function getReactionConfig(reaction) {
const typeDefs = `
enum ACTION_TYPE {
# Represents a ${Reaction}.
${REACTION}
# Represents a ${Reaction}.
${REACTION}
}
enum ASSET_METRICS_SORT {
# Represents a ${Reaction}Action.
${REACTION}
# Represents a ${Reaction}Action.
${REACTION}
}
input Create${Reaction}Input {
input Create${Reaction}ActionInput {
# The item's id for which we are to create a ${reaction}.
item_id: ID!
# The item's id for which we are to create a ${reaction}.
item_id: ID!
}
# The type of the item for which we are to create the ${reaction}.
item_type: ACTION_ITEM_TYPE!
input Delete${Reaction}ActionInput {
# The item's id for which we are deleting a ${reaction}.
id: ID!
}
# ${Reaction}Action is used by users who "${reaction}" a specific entity.
type ${Reaction}Action implements Action {
# The ID of the action.
id: ID!
# The ID of the action.
id: ID!
# The author of the action.
user: User
# The author of the action.
user: User
# The time when the Action was updated.
updated_at: Date
# The time when the Action was updated.
updated_at: Date
# The time when the Action was created.
created_at: Date
# The time when the Action was created.
created_at: Date
# The item's id for which the Action was created.
item_id: ID!
}
type ${Reaction}ActionSummary implements ActionSummary {
# The count of actions with this group.
count: Int
# The count of actions with this group.
count: Int
# The current user's action.
current_user: ${Reaction}Action
# The current user's action.
current_user: ${Reaction}Action
}
# A summary of counts related to all the ${Reaction}s on an Asset.
type ${Reaction}AssetActionSummary implements AssetActionSummary {
# Number of ${reaction}s associated with actionable types on this this Asset.
actionCount: Int
# Number of ${reaction}s associated with actionable types on this this Asset.
actionCount: Int
# Number of unique actionable types that are referenced by the ${reaction}s.
actionableItemCount: Int
# Number of unique actionable types that are referenced by the ${reaction}s.
actionableItemCount: Int
}
type Create${Reaction}Response implements Response {
type Create${Reaction}ActionResponse implements Response {
# The ${reaction} that was created.
${reaction}: ${Reaction}Action
# The ${reaction} that was created.
${reaction}: ${Reaction}Action
# An array of errors relating to the mutation that occurred.
errors: [UserError!]
# An array of errors relating to the mutation that occurred.
errors: [UserError!]
}
type Delete${Reaction}ActionResponse implements Response {
# The ${reaction} that was created.
${reaction}: ${Reaction}Action
# An array of errors relating to the mutation that occurred.
errors: [UserError!]
}
type RootMutation {
# Creates a ${reaction} on an entity.
create${Reaction}(${reaction}: Create${Reaction}Input!): Create${Reaction}Response
# Creates a ${reaction} on an entity.
create${Reaction}Action(input: Create${Reaction}ActionInput!): Create${Reaction}ActionResponse
delete${Reaction}Action(input: Delete${Reaction}ActionInput!): Delete${Reaction}ActionResponse
}
type Subscription {
# Subscribe to ${reaction}s.
${reaction}ActionCreated(asset_id: ID!): ${Reaction}Action
# Subscribe to ${reaction} removals.
${reaction}ActionDeleted(asset_id: ID!): ${Reaction}Action
}
`;
return {
typeDefs,
resolvers: {
Subscription: {
[`${reaction}ActionCreated`]: ({action}) => {
return action;
},
[`${reaction}ActionDeleted`]: ({action}) => {
return action;
},
},
[`${Reaction}Action`]: {
// This will load the user for the specific action. We'll limit this to the
// admin users only or the current logged in user.
user({user_id}, _, {loaders: {Users}, user}) {
if (user && (user.can(SEARCH_OTHER_USERS) || user_id === user.id)) {
return Users.getByID.load(user_id);
}
}
},
RootMutation: {
[`create${Reaction}`]: (_, {[reaction]: {item_id, item_type}}, {mutators: {Action}}) => {
return wrapResponse(reaction)(Action.create({item_id, item_type, action_type: REACTION}));
[`create${Reaction}Action`]: (_, {input: {item_id}}, {mutators: {Action}, pubsub, loaders: {Comments}}) => {
const response = Comments.get.load(item_id).then((comment) => {
return Action.create({item_id, item_type: 'COMMENTS', action_type: REACTION})
.then((action) => {
pubsub.publish(`${reaction}ActionCreated`, {action, comment});
return Promise.resolve(action);
});
});
return wrapResponse(reaction)(response);
},
[`delete${Reaction}Action`]: (_, {input: {id}}, {mutators: {Action}, pubsub, loaders: {Comments}}) => {
const response = Action.delete({id})
.then((action) => {
return Comments.get.load(action.item_id).then((comment) => {
pubsub.publish(`${reaction}ActionDeleted`, {action, comment});
return Promise.resolve(action);
});
});
return wrapResponse(reaction)(response);
}
},
},
@@ -106,7 +167,19 @@ function getReactionConfig(reaction) {
}
}
}
}
},
setupFunctions: {
[`${reaction}ActionCreated`]: (options, args) => ({
[`${reaction}ActionCreated`]: {
filter: ({comment}) => comment.asset_id === args.asset_id,
},
}),
[`${reaction}ActionDeleted`]: (options, args) => ({
[`${reaction}ActionDeleted`]: {
filter: ({comment}) => comment.asset_id === args.asset_id,
},
}),
},
};
}
@@ -28,7 +28,7 @@ class LikeButton extends React.Component {
return;
}
if (alreadyReacted()) {
if (alreadyReacted) {
deleteReaction();
} else {
postReaction();
@@ -40,10 +40,10 @@ class LikeButton extends React.Component {
return (
<div className={cn(styles.container, `${plugin}-container`)}>
<button
className={cn(styles.button, {[styles.liked]: alreadyReacted()}, `${plugin}-button`)}
className={cn(styles.button, {[styles.liked]: alreadyReacted}, `${plugin}-button`)}
onClick={this.handleClick}
>
<span>{t(alreadyReacted() ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')}</span>
<span>{t(alreadyReacted ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')}</span>
<Icon name="thumb_up" className={`${plugin}-icon`} />
<span className={`${plugin}-count`}>{count > 0 && count}</span>
</button>
@@ -28,7 +28,7 @@ class LoveButton extends React.Component {
return;
}
if (alreadyReacted()) {
if (alreadyReacted) {
deleteReaction();
} else {
postReaction();
@@ -40,10 +40,10 @@ class LoveButton extends React.Component {
return (
<div className={cn(styles.container, `${plugin}-container`)}>
<button
className={cn(styles.button, {[styles.loved]: alreadyReacted()}, `${plugin}-button`)}
className={cn(styles.button, {[styles.loved]: alreadyReacted}, `${plugin}-button`)}
onClick={this.handleClick}
>
<span>{t(alreadyReacted() ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')}</span>
<span>{t(alreadyReacted ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')}</span>
<Icon name="favorite" className={`${plugin}-icon`} />
<span className={`${plugin}-count`}>{count > 0 && count}</span>
</button>
@@ -28,7 +28,7 @@ class RespectButton extends React.Component {
return;
}
if (alreadyReacted()) {
if (alreadyReacted) {
deleteReaction();
} else {
postReaction();
@@ -40,11 +40,11 @@ class RespectButton extends React.Component {
return (
<div className={cn(styles.container, `${plugin}-container`)}>
<button
className={cn(styles.button, {[styles.respected]: alreadyReacted()}, `${plugin}-button`)}
className={cn(styles.button, {[styles.respected]: alreadyReacted}, `${plugin}-button`)}
onClick={this.handleClick}
>
<span className={`${plugin}-button-text`}>
{t(alreadyReacted() ? 'coral-plugin-respect.respected' : 'coral-plugin-respect.respect')}
{t(alreadyReacted ? 'coral-plugin-respect.respected' : 'coral-plugin-respect.respect')}
</span>
<Icon className={cn(styles.icon, `${plugin}-icon`)} />
<span className={cn(styles.icon, `${plugin}-count`)}>{count > 0 && count}</span>
+50 -31
View File
@@ -34,6 +34,10 @@
version "0.9.0"
resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.9.0.tgz#fccf859f0d2817687f210737dc3be48a18b1d754"
"@types/graphql@^0.9.1":
version "0.9.1"
resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.9.1.tgz#b04ebe84bc997cc60dbea2ed4d0d4342c737f99d"
"@types/isomorphic-fetch@0.0.33":
version "0.0.33"
resolved "https://registry.yarnpkg.com/@types/isomorphic-fetch/-/isomorphic-fetch-0.0.33.tgz#3ea1b86f8b73e6a7430d01d4dbd5b1f63fd72718"
@@ -53,9 +57,9 @@
"@types/express-serve-static-core" "*"
"@types/mime" "*"
"@types/ws@0.0.38":
version "0.0.38"
resolved "https://registry.yarnpkg.com/@types/ws/-/ws-0.0.38.tgz#42106fff4b422ca956734e29f0d73a6d893194d3"
"@types/ws@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/ws/-/ws-3.0.0.tgz#4682a04d385484e73f7d8275cabc8b672d66143c"
dependencies:
"@types/node" "*"
@@ -2704,6 +2708,10 @@ es6-promise@^3.0.2, es6-promise@^3.2.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
es6-promise@^4.0.5:
version "4.1.0"
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.0.tgz#dda03ca8f9f89bc597e689842929de7ba8cebdf0"
es6-set@~0.1.5:
version "0.1.5"
resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
@@ -2941,7 +2949,7 @@ event-stream@~3.3.0:
stream-combiner "~0.0.4"
through "~2.3.1"
eventemitter3@^2.0.2:
eventemitter3@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
@@ -3631,13 +3639,23 @@ graphql-subscriptions@^0.2.0:
dependencies:
es6-promise "^3.2.1"
graphql-subscriptions@^0.3.0, graphql-subscriptions@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/graphql-subscriptions/-/graphql-subscriptions-0.3.1.tgz#0cedc2d507420cf26cf414080b079f05402f0303"
graphql-subscriptions@^0.4.1:
version "0.4.2"
resolved "https://registry.yarnpkg.com/graphql-subscriptions/-/graphql-subscriptions-0.4.2.tgz#a1a41cebdb95103be348c409d0ed6096ad858455"
dependencies:
es6-promise "^3.2.1"
"@types/graphql" "^0.9.1"
es6-promise "^4.0.5"
iterall "^1.1.1"
graphql-tag@^1.2.3, graphql-tag@^1.2.4:
graphql-subscriptions@^0.4.3:
version "0.4.3"
resolved "https://registry.yarnpkg.com/graphql-subscriptions/-/graphql-subscriptions-0.4.3.tgz#2aed6ba87551cc747742b793497ff24b22991867"
dependencies:
"@types/graphql" "^0.9.1"
es6-promise "^4.0.5"
iterall "^1.1.1"
graphql-tag@^1.2.3:
version "1.3.2"
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-1.3.2.tgz#7abb3a8fd9f3415d07163314ed237061c785b759"
@@ -4456,6 +4474,10 @@ iterall@1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.0.3.tgz#e0b31958f835013c323ff0b10943829ac69aa4b7"
iterall@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.1.tgz#f7f0af11e9a04ec6426260f5019d9fcca4d50214"
jju@^1.1.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/jju/-/jju-1.3.0.tgz#dadd9ef01924bc728b03f2f7979bdbd62f7a2aaa"
@@ -5777,10 +5799,6 @@ optionator@^0.8.1, optionator@^0.8.2:
type-check "~0.3.2"
wordwrap "~1.0.0"
options@>=0.0.5:
version "0.0.6"
resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
os-browserify@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
@@ -7386,7 +7404,7 @@ rx@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
safe-buffer@^5.0.1:
safe-buffer@^5.0.1, safe-buffer@~5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
@@ -7834,19 +7852,20 @@ stylus@0.54.5, stylus@~0.54.5:
sax "0.5.x"
source-map "0.1.x"
subscriptions-transport-ws@^0.5.5-alpha.0:
version "0.5.5"
resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.5.5.tgz#7715ed4306f532a9dd53c02cbd789d2ee8871bb9"
subscriptions-transport-ws@^0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.7.1.tgz#32d6a0ab2e29e2246b48952a6ff431774c08c93d"
dependencies:
"@types/ws" "0.0.38"
"@types/ws" "^3.0.0"
backo2 "^1.0.2"
eventemitter3 "^2.0.2"
graphql "^0.9.1"
graphql-subscriptions "^0.3.0"
graphql-tag "^1.2.4"
eventemitter3 "^2.0.3"
graphql-subscriptions "^0.4.1"
graphql-tag "^2.0.0"
iterall "^1.1.1"
lodash.assign "^4.2.0"
lodash.isobject "^3.0.2"
lodash.isstring "^4.0.1"
ws "^1.1.0"
ws "^3.0.0"
sugarss@^0.2.0:
version "0.2.0"
@@ -8190,9 +8209,9 @@ uid-safe@2.1.4, uid-safe@~2.1.4:
dependencies:
random-bytes "~1.0.0"
ultron@1.0.x:
version "1.0.2"
resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
ultron@~1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.0.tgz#b07a2e6a541a815fc6a34ccd4533baec307ca864"
undefsafe@0.0.3:
version "0.0.3"
@@ -8510,12 +8529,12 @@ write@^0.2.1:
dependencies:
mkdirp "^0.5.1"
ws@^1.1.0:
version "1.1.4"
resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.4.tgz#57f40d036832e5f5055662a397c4de76ed66bf61"
ws@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/ws/-/ws-3.0.0.tgz#98ddb00056c8390cb751e7788788497f99103b6c"
dependencies:
options ">=0.0.5"
ultron "1.0.x"
safe-buffer "~5.0.1"
ultron "~1.1.0"
x-xss-protection@1.0.0:
version "1.0.0"