Adds displayName for WrappedReactions and alreadyReacted

client/coral-framework/helpers/hoc.js

@@ -0,0 +1,3 @@
+export function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}

client/coral-framework/hocs/withFragments.js

@@ -1,11 +1,7 @@
 import React from 'react';
+import {getDisplayName} from '../helpers/hoc';
 
 // TODO: revisit `filtering` after https://github.com/apollographql/graphql-anywhere/issues/38.
-
-function getDisplayName(WrappedComponent) {
-  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
-}
-
 export default fragments => WrappedComponent => {
   class WithFragments extends React.Component {
     render() {

client/coral-framework/hocs/withReaction.js

@@ -3,6 +3,7 @@ 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';
@@ -31,7 +32,10 @@ export default reaction => WrappedComponent => {
         comment
       );
 
-      const withReactionProps = {reactionSummary, count};
+      const alreadyReacted = () => !!reactionSummary;
+
+      const withReactionProps = {reactionSummary, count, alreadyReacted};
+
 
       return <WrappedComponent {...this.props} {...withReactionProps} />;
     }
@@ -234,5 +238,7 @@ export default reaction => WrappedComponent => {
     withPostReaction
   );
 
+  WithReactions.displayName = `WithReactions(${getDisplayName(WrappedComponent)})`;
+
   return enhance(WithReactions);
 };

plugins/coral-plugin-love/client/LoveButton.js

@@ -12,7 +12,7 @@ class LoveButton extends React.Component {
       postReaction,
       deleteReaction,
       showSignInDialog,
-      reactionSummary
+      alreadyReacted
     } = this.props;
     const {root: {me}, comment} = this.props;
 
@@ -27,7 +27,7 @@ class LoveButton extends React.Component {
       return;
     }
 
-    if (reactionSummary) {
+    if (alreadyReacted()) {
       deleteReaction();
     } else {
       postReaction();
@@ -35,13 +35,13 @@ class LoveButton extends React.Component {
   };
 
   render() {
-    const {count, reactionSummary} = this.props;
+    const {count, alreadyReacted} = this.props;
     return (
       <button
-        className={`${styles.button} ${reactionSummary ? styles.loved : ''}`}
+        className={`${styles.button} ${alreadyReacted() ? styles.loved : ''}`}
         onClick={this.handleClick}
       >
-        <span>{lang.t(reactionSummary ? 'loved' : 'love')}</span>
+        <span>{lang.t(alreadyReacted() ? 'loved' : 'love')}</span>
         <Icon name="favorite" />
         <span>{count > 0 && count}</span>
       </button>