Merge branch 'master' into config-embed

.gitignore

@@ -19,5 +19,6 @@ plugins/*
 !plugins/coral-plugin-facebook-auth
 !plugins/coral-plugin-respect
 !plugins/coral-plugin-offtopic
+!plugins/coral-plugin-like
 
 **/node_modules/*

client/coral-admin/src/services/fragmentMatcher.js

@@ -20,7 +20,6 @@ const fm = new IntrospectionFragmentMatcher({
           name: 'Response',
           possibleTypes: [
             {name: 'CreateCommentResponse'},
-            {name: 'CreateLikeResponse'},
             {name: 'CreateFlagResponse'},
             {name: 'CreateDontAgreeResponse'},
             {name: 'DeleteActionResponse'},
@@ -38,7 +37,6 @@ const fm = new IntrospectionFragmentMatcher({
           name: 'Action',
           possibleTypes: [
             {name: 'FlagAction'},
-            {name: 'LikeAction'},
             {name: 'DontAgreeAction'}
           ],
         },
@@ -47,7 +45,6 @@ const fm = new IntrospectionFragmentMatcher({
           name: 'ActionSummary',
           possibleTypes: [
             {name: 'FlagActionSummary'},
-            {name: 'LikeActionSummary'},
             {name: 'DontAgreeActionSummary'}
           ],
         },
@@ -57,7 +54,6 @@ const fm = new IntrospectionFragmentMatcher({
           possibleTypes: [
             {name: 'DefaultAssetActionSummary'},
             {name: 'FlagAssetActionSummary'},
-            {name: 'LikeAssetActionSummary'}
           ]
         }
       ],

client/coral-embed-stream/src/components/Comment.js

@@ -1,11 +1,3 @@
-// this component will
-// render its children
-// render a like button
-// render a permalink button
-// render a reply button
-// render a flag button
-// translate things?
-
 import React, {PropTypes} from 'react';
 import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
 
@@ -16,25 +8,33 @@ import Content from 'coral-plugin-commentcontent/CommentContent';
 import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
-import LikeButton from 'coral-plugin-likes/LikeButton';
+import {
-import {BestButton, IfUserCanModifyBest, BEST_TAG, commentIsBest, BestIndicator} from 'coral-plugin-best/BestButton';
+  BestButton,
+  IfUserCanModifyBest,
+  BEST_TAG,
+  commentIsBest,
+  BestIndicator
+} from 'coral-plugin-best/BestButton';
 import Slot from 'coral-framework/components/Slot';
 import LoadMore from './LoadMore';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import {TopRightMenu} from './TopRightMenu';
-import {getActionSummary, getTotalActionCount, iPerformedThisAction} from 'coral-framework/utils';
+import {getActionSummary, iPerformedThisAction} from 'coral-framework/utils';
 
 import styles from './Comment.css';
 
-const isStaff = (tags) => !tags.every((t) => t.name !== 'STAFF') ;
+const isStaff = tags => !tags.every(t => t.name !== 'STAFF');
 
-// hold actions links (e.g. Like, Reply) along the comment footer
+// hold actions links (e.g. Reply) along the comment footer
 const ActionButton = ({children}) => {
-  return <span className="comment__action-button comment__action-button--nowrap">{ children }</span>;
+  return (
+    <span className="comment__action-button comment__action-button--nowrap">
+      {children}
+    </span>
+  );
 };
 
 class Comment extends React.Component {
-
   constructor(props) {
     super(props);
     this.state = {replyBoxVisible: false};
@@ -49,7 +49,6 @@ class Comment extends React.Component {
     setActiveReplyBox: PropTypes.func.isRequired,
     showSignInDialog: PropTypes.func.isRequired,
     postFlag: PropTypes.func.isRequired,
-    postLike: PropTypes.func.isRequired,
     deleteAction: PropTypes.func.isRequired,
     parentId: PropTypes.string,
     highlighted: PropTypes.string,
@@ -80,7 +79,8 @@ class Comment extends React.Component {
         PropTypes.shape({
           body: PropTypes.string.isRequired,
           id: PropTypes.string.isRequired
-        })),
+        })
+      ),
       user: PropTypes.shape({
         id: PropTypes.string.isRequired,
         name: PropTypes.string.isRequired
@@ -97,10 +97,10 @@ class Comment extends React.Component {
     removeCommentTag: React.PropTypes.func,
 
     // dispatch action to ignore another user
-    ignoreUser: React.PropTypes.func,
+    ignoreUser: React.PropTypes.func
-  }
+  };
 
-  render () {
+  render() {
     const {
       comment,
       parentId,
@@ -110,7 +110,6 @@ class Comment extends React.Component {
       postItem,
       addNotification,
       showSignInDialog,
-      postLike,
       highlighted,
       postFlag,
       postDontAgree,
@@ -124,12 +123,14 @@ class Comment extends React.Component {
       disableReply,
       commentIsIgnored,
       maxCharCount,
-      charCountEnable,
+      charCountEnable
     } = this.props;
 
-    const likeSummary = getActionSummary('LikeActionSummary', comment);
     const flagSummary = getActionSummary('FlagActionSummary', comment);
-    const dontAgreeSummary = getActionSummary('DontAgreeActionSummary', comment);
+    const dontAgreeSummary = getActionSummary(
+      'DontAgreeActionSummary',
+      comment
+    );
     let myFlag = null;
     if (iPerformedThisAction('FlagActionSummary', comment)) {
       myFlag = flagSummary.find(s => s.current_user);
@@ -137,46 +138,59 @@ class Comment extends React.Component {
       myFlag = dontAgreeSummary.find(s => s.current_user);
     }
 
-    let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`;
+    let commentClass = parentId
+      ? `reply ${styles.Reply}`
+      : `comment ${styles.Comment}`;
     commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : '';
 
     // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
-    const notifyOnError = (fn, errorToMessage) => async function (...args) {
+    const notifyOnError = (fn, errorToMessage) =>
-      if (typeof errorToMessage !== 'function') {errorToMessage = (error) => error.message;}
+      async function(...args) {
-      try {
+        if (typeof errorToMessage !== 'function') {
-        return await fn(...args);
+          errorToMessage = error => error.message;
-      } catch (error) {
+        }
-        addNotification('error', errorToMessage(error));
+        try {
-        throw error;
+          return await fn(...args);
-      }
+        } catch (error) {
-    };
+          addNotification('error', errorToMessage(error));
+          throw error;
+        }
+      };
 
-    const addBestTag = notifyOnError(() => addCommentTag({
+    const addBestTag = notifyOnError(
-      id: comment.id,
+      () =>
-      tag: BEST_TAG,
+        addCommentTag({
-    }), () => 'Failed to tag comment as best');
+          id: comment.id,
+          tag: BEST_TAG
+        }),
+      () => 'Failed to tag comment as best'
+    );
 
-    const removeBestTag = notifyOnError(() => removeCommentTag({
+    const removeBestTag = notifyOnError(
-      id: comment.id,
+      () =>
-      tag: BEST_TAG,
+        removeCommentTag({
-    }), () => 'Failed to remove best comment tag');
+          id: comment.id,
+          tag: BEST_TAG
+        }),
+      () => 'Failed to remove best comment tag'
+    );
 
     return (
       <div
         className={commentClass}
         id={`c_${comment.id}`}
-        style={{marginLeft: depth * 30}}>
+        style={{marginLeft: depth * 30}}
+      >
         <hr aria-hidden={true} />
-        <div className={highlighted === comment.id ? 'highlighted-comment' : ''}>
+        <div
-          <AuthorName
+          className={highlighted === comment.id ? 'highlighted-comment' : ''}
-            author={comment.user}/>
+        >
-          { isStaff(comment.tags)
+          <AuthorName author={comment.user} />
-            ? <TagLabel>Staff</TagLabel>
+          {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
-          : null }
 
-          { commentIsBest(comment)
+          {commentIsBest(comment)
             ? <TagLabel><BestIndicator /></TagLabel>
-          : null }
+            : null}
           <PubDate created_at={comment.created_at} />
           <Slot
             fill="commentInfoBar"
@@ -186,47 +200,43 @@ class Comment extends React.Component {
             commentId={comment.id}
             inline
           />
-          { (currentUser && (comment.user.id !== currentUser.id))
+          {currentUser && comment.user.id !== currentUser.id
             ? <span className={styles.topRightMenu}>
                 <TopRightMenu
                   comment={comment}
                   ignoreUser={ignoreUser}
-                  addNotification={addNotification} />
+                  addNotification={addNotification}
+                />
               </span>
-            : null
+            : null}
-          }
 
           <Content body={comment.body} />
           <Slot fill="commentContent" />
           <div className="commentActionsLeft comment__action-container">
-            <Slot fill="commentReactions" inline />
+            <Slot
-            <ActionButton>
+              fill="commentReactions"
-              {/* TODO implmement iPerformedThisAction for the like */}
+              data={this.props.data}
-              <LikeButton
+              root={this.props.root}
-                totalLikes={getTotalActionCount('LikeActionSummary', comment)}
+              comment={comment}
-                like={likeSummary[0]}
+              commentId={comment.id}
-                id={comment.id}
+              inline
-                postLike={postLike}
+            />
-                deleteAction={deleteAction}
+            {!disableReply &&
-                showSignInDialog={showSignInDialog}
-                currentUser={currentUser} />
-            </ActionButton>
-            {
-              !disableReply &&
               <ActionButton>
                 <ReplyButton
                   onClick={() => setActiveReplyBox(comment.id)}
                   parentCommentId={parentId || comment.id}
                   currentUserId={currentUser && currentUser.id}
-                  banned={false} />
+                  banned={false}
-              </ActionButton>
+                />
-            }
+              </ActionButton>}
             <ActionButton>
               <IfUserCanModifyBest user={currentUser}>
                 <BestButton
                   isBest={commentIsBest(comment)}
                   addBest={addBestTag}
-                  removeBest={removeBestTag} />
+                  removeBest={removeBestTag}
+                />
               </IfUserCanModifyBest>
             </ActionButton>
             <Slot
@@ -252,12 +262,12 @@ class Comment extends React.Component {
                 postDontAgree={postDontAgree}
                 deleteAction={deleteAction}
                 showSignInDialog={showSignInDialog}
-                currentUser={currentUser} />
+                currentUser={currentUser}
+              />
             </ActionButton>
           </div>
         </div>
-        {
+        {activeReplyBox === comment.id
-          activeReplyBox === comment.id
           ? <ReplyBox
               commentPostedHandler={() => {
                 setActiveReplyBox('');
@@ -269,11 +279,10 @@ class Comment extends React.Component {
               addNotification={addNotification}
               authorId={currentUser.id}
               postItem={postItem}
-              assetId={asset.id} />
+              assetId={asset.id}
-          : null
+            />
-        }
+          : null}
-        {
+        {comment.replies &&
-          comment.replies &&
           comment.replies.map(reply => {
             return commentIsIgnored(reply)
               ? <IgnoredCommentTombstone key={reply.id} />
@@ -290,7 +299,6 @@ class Comment extends React.Component {
                   asset={asset}
                   highlighted={highlighted}
                   currentUser={currentUser}
-                  postLike={postLike}
                   postFlag={postFlag}
                   deleteAction={deleteAction}
                   addCommentTag={addCommentTag}
@@ -301,12 +309,11 @@ class Comment extends React.Component {
                   showSignInDialog={showSignInDialog}
                   reactKey={reply.id}
                   key={reply.id}
-                  comment={reply} />;
+                  comment={reply}
-          })
+                />;
-        }
+          })}
-        {
+        {comment.replies &&
-          comment.replies &&
+          <div className="coral-load-more-replies">
-          <div className='coral-load-more-replies'>
             <LoadMore
               assetId={asset.id}
               comments={comment.replies}
@@ -314,9 +321,9 @@ class Comment extends React.Component {
               topLevel={false}
               replyCount={comment.replyCount}
               moreComments={comment.replyCount > comment.replies.length}
-              loadMore={loadMore}/>
+              loadMore={loadMore}
-          </div>
+            />
-        }
+          </div>}
       </div>
     );
   }

client/coral-embed-stream/src/components/Stream.js

@@ -29,7 +29,6 @@ class Stream extends React.Component {
       postItem,
       addNotification,
       postFlag,
-      postLike,
       postDontAgree,
       loadMore,
       deleteAction,
@@ -127,7 +126,6 @@ class Stream extends React.Component {
               asset={asset}
               currentUser={user}
               highlighted={comment.id}
-              postLike={this.props.postLike}
               postFlag={this.props.postFlag}
               postDontAgree={this.props.postDontAgree}
               loadMore={this.props.loadMore}
@@ -165,7 +163,6 @@ class Stream extends React.Component {
                           postItem={postItem}
                           asset={asset}
                           currentUser={user}
-                          postLike={postLike}
                           postFlag={postFlag}
                           postDontAgree={postDontAgree}
                           addCommentTag={addCommentTag}

client/coral-embed-stream/src/containers/Stream.js

@@ -6,7 +6,7 @@ import uniqBy from 'lodash/uniqBy';
 import sortBy from 'lodash/sortBy';
 import isNil from 'lodash/isNil';
 import {NEW_COMMENT_COUNT_POLL_INTERVAL} from '../constants/stream';
-import {postComment, postFlag, postLike, postDontAgree, deleteAction, addCommentTag, removeCommentTag, ignoreUser} from 'coral-framework/graphql/mutations';
+import {postComment, postFlag, postDontAgree, deleteAction, addCommentTag, removeCommentTag, ignoreUser} from 'coral-framework/graphql/mutations';
 import {notificationActions, authActions} from 'coral-framework';
 import {editName} from 'coral-framework/actions/user';
 import {setCommentCountCache, setActiveReplyBox} from '../actions/stream';
@@ -217,7 +217,6 @@ const mapStateToProps = state => ({
   auth: state.auth.toJS(),
   commentCountCache: state.stream.commentCountCache,
   activeReplyBox: state.stream.activeReplyBox,
-
   commentId: state.stream.commentId,
   assetId: state.stream.assetId,
   assetUrl: state.stream.assetUrl,
@@ -239,7 +238,6 @@ export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   postComment,
   postFlag,
-  postLike,
   postDontAgree,
   addCommentTag,
   removeCommentTag,

client/coral-framework/graphql/mutations/index.js

@@ -1,7 +1,6 @@
 import {graphql} from 'react-apollo';
 import POST_COMMENT from './postComment.graphql';
 import POST_FLAG from './postFlag.graphql';
-import POST_LIKE from './postLike.graphql';
 import POST_DONT_AGREE from './postDontAgree.graphql';
 import DELETE_ACTION from './deleteAction.graphql';
 import ADD_COMMENT_TAG from './addCommentTag.graphql';
@@ -83,17 +82,6 @@ export const postComment = graphql(POST_COMMENT, {
   }),
 });
 
-export const postLike = graphql(POST_LIKE, {
-  props: ({mutate}) => ({
-    postLike: (like) => {
-      return mutate({
-        variables: {
-          like
-        }
-      });
-    }}),
-});
-
 export const postFlag = graphql(POST_FLAG, {
   props: ({mutate}) => ({
     postFlag: (flag) => {

client/coral-framework/graphql/mutations/postLike.graphql

@@ -1,10 +0,0 @@
-mutation CreateLike ($like: CreateLikeInput!) {
-  createLike(like:$like) {
-    like {
-      id
-    }
-    errors {
-      translation_key
-    }
-  }
-}

client/coral-plugin-likes/LikeButton.js

@@ -1,71 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import {I18n} from '../coral-framework';
-import translations from './translations.json';
-
-const name = 'coral-plugin-likes';
-
-class LikeButton extends Component {
-
-  static propTypes = {
-    like: PropTypes.shape({
-      current: PropTypes.object,
-      count: PropTypes.number
-    }),
-    id: PropTypes.string,
-    postLike: PropTypes.func.isRequired,
-    deleteAction: PropTypes.func.isRequired,
-    showSignInDialog: PropTypes.func.isRequired,
-    currentUser: PropTypes.shape({
-      banned: PropTypes.boolean
-    }),
-  }
-
-  state = {
-    localPost: null, // Set to the ID of an action if one is posted
-    localDelete: false // Set to true is the user deletes an action, unless localPost is already set.
-  }
-
-  render() {
-    const {like, id, postLike, deleteAction, showSignInDialog, currentUser} = this.props;
-    let {totalLikes: count} = this.props;
-    const {localPost, localDelete} = this.state;
-    const liked = (like && like.current_user && !localDelete) || localPost;
-    if (localPost) {count += 1;}
-    if (localDelete) {count -= 1;}
-
-    const onLikeClick = () => {
-      if (!currentUser) {
-        showSignInDialog();
-        return;
-      }
-      if (currentUser.banned) {
-        return;
-      }
-      if (!liked) { // this comment has not yet been liked by this user.
-        this.setState({localPost: 'temp'});
-        postLike({
-          item_id: id,
-          item_type: 'COMMENTS'
-        }).then(({data}) => {
-          this.setState({localPost: data.createLike.like.id});
-        });
-      } else {
-        this.setState((prev) => prev.localPost ? {...prev, localPost: null} : {...prev, localDelete: true});
-        deleteAction(localPost || like.current_user.id);
-      }
-    };
-
-    return <div className={`${name}-container`}>
-      <button onClick={onLikeClick} className={`${name}-button ${liked ? 'likedButton' : ''}`}>
-        <span className={`${name}-button-text`}>{lang.t(liked ? 'liked' : 'like')}</span>
-        <i className={`${name}-icon material-icons`}
-          aria-hidden={true}>thumb_up</i>
-        <span className={`${name}-like-count`}>{count > 0 && count}</span>
-      </button>
-    </div>;
-  }
-}
-
-export default LikeButton;
-
-const lang = new I18n(translations);

graph/resolvers/action.js

@@ -5,8 +5,6 @@ const Action = {
       return 'DontAgreeAction';
     case 'FLAG':
       return 'FlagAction';
-    case 'LIKE':
-      return 'LikeAction';
     }
   },
 

graph/resolvers/action_summary.js

@@ -3,8 +3,6 @@ const ActionSummary = {
     switch (action_type) {
     case 'FLAG':
       return 'FlagActionSummary';
-    case 'LIKE':
-      return 'LikeActionSummary';
     case 'DONTAGREE':
       return 'DontAgreeActionSummary';
     }

graph/resolvers/index.js

@@ -12,7 +12,6 @@ const FlagAction = require('./flag_action');
 const DontAgreeAction = require('./dont_agree_action');
 const DontAgreeActionSummary = require('./dont_agree_action_summary');
 const GenericUserError = require('./generic_user_error');
-const LikeAction = require('./like_action');
 const RootMutation = require('./root_mutation');
 const RootQuery = require('./root_query');
 const Settings = require('./settings');
@@ -36,7 +35,6 @@ let resolvers = {
   DontAgreeAction,
   DontAgreeActionSummary,
   GenericUserError,
-  LikeAction,
   RootMutation,
   RootQuery,
   Settings,

graph/resolvers/like_action.js

@@ -1,5 +0,0 @@
-const LikeAction = {
-
-};
-
-module.exports = LikeAction;

graph/resolvers/root_mutation.js

@@ -5,9 +5,6 @@ const RootMutation = {
   createComment(_, {comment}, {mutators: {Comment}}) {
     return wrapResponse('comment')(Comment.create(comment));
   },
-  createLike(_, {like: {item_id, item_type}}, {mutators: {Action}}) {
-    return wrapResponse('like')(Action.create({item_id, item_type, action_type: 'LIKE'}));
-  },
   createFlag(_, {flag: {item_id, item_type, reason, message}}, {mutators: {Action}}) {
     return wrapResponse('flag')(Action.create({item_id, item_type, action_type: 'FLAG', group_id: reason, metadata: {message}}));
   },

graph/typeDefs.graphql

@@ -103,9 +103,6 @@ enum COMMENT_STATUS {
 # The types of action there are as enum's.
 enum ACTION_TYPE {
 
-  # Represents a LikeAction.
-  LIKE
-
   # Represents a FlagAction.
   FLAG
 
@@ -295,41 +292,6 @@ type FlagAssetActionSummary implements AssetActionSummary {
   actionableItemCount: Int
 }
 
-# A summary of counts related to all the Likes on an Asset.
-type LikeAssetActionSummary implements AssetActionSummary {
-
-  # Number of likes associated with actionable types on this this Asset.
-  actionCount: Int
-
-  # Number of unique actionable types that are referenced by the likes.
-  actionableItemCount: Int
-}
-
-# LikeAction is used by users who "like" a specific entity.
-type LikeAction implements Action {
-
-  # The ID of the action.
-  id: ID!
-
-  # The author of the action.
-  user: User
-
-  # The time when the Action was updated.
-  updated_at: Date
-
-  # The time when the Action was created.
-  created_at: Date
-}
-
-# LikeActionSummary is counts the amount of "likes" that a specific entity has.
-type LikeActionSummary implements ActionSummary {
-
-  # The count of likes against the parent entity.
-  count: Int!
-
-  current_user: LikeAction
-}
-
 # A FLAG action that contains flag metadata.
 type FlagAction implements Action {
 
@@ -541,9 +503,6 @@ enum USER_STATUS {
 # Metrics for the assets.
 enum ASSET_METRICS_SORT {
 
-  # Represents a LikeAction.
-  LIKE
-
   # Represents a FlagAction.
   FLAG
 
@@ -629,15 +588,6 @@ enum ACTION_ITEM_TYPE {
   USERS
 }
 
-input CreateLikeInput {
-
-  # The item's id for which we are to create a like.
-  item_id: ID!
-
-  # The type of the item for which we are to create the like.
-  item_type: ACTION_ITEM_TYPE!
-}
-
 enum TAG_TYPE {
   STAFF
 }
@@ -658,15 +608,6 @@ input CreateCommentInput {
 
 }
 
-type CreateLikeResponse implements Response {
-
-  # The like that was created.
-  like: LikeAction
-
-  # An array of errors relating to the mutation that occurred.
-  errors: [UserError]
-}
-
 input CreateFlagInput {
 
   # The item's id for which we are to create a flag.
@@ -786,9 +727,6 @@ type RootMutation {
   # Creates a comment on the asset.
   createComment(comment: CreateCommentInput!): CreateCommentResponse
 
-  # Creates a like on an entity.
-  createLike(like: CreateLikeInput!): CreateLikeResponse
-
   # Creates a flag on an entity.
   createFlag(flag: CreateFlagInput!): CreateFlagResponse
 

plugins/coral-plugin-like/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/coral-plugin-like/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/coral-plugin-like/client/components/Icon.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import cn from 'classnames';
+
+export default ({className}) => (
+  <i className={cn('fa', 'fa-handshake-o', className)} aria-hidden="true"/>
+);

plugins/coral-plugin-like/client/components/LikeButton.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import styles from './style.css';
+import Icon from './Icon';
+
+import { I18n } from 'coral-framework';
+import cn from 'classnames';
+import translations from '../translations.json';
+import { getMyActionSummary, getTotalActionCount } from 'coral-framework/utils';
+
+const lang = new I18n(translations);
+const name = 'coral-plugin-like';
+
+class LikeButton extends Component {
+  handleClick = () => {
+    const { postLike, showSignInDialog, deleteAction } = this.props;
+    const { root: { me }, comment } = this.props;
+
+    const myLikeActionSummary = getMyActionSummary(
+      'LikeActionSummary',
+      comment
+    );
+
+    // If the current user does not exist, trigger sign in dialog.
+    if (!me) {
+      showSignInDialog();
+      return;
+    }
+
+    // If the current user is banned, do nothing.
+    if (me.status === 'BANNED') {
+      return;
+    }
+
+    if (myLikeActionSummary) {
+      deleteAction(myLikeActionSummary.current_user.id, comment.id);
+    } else {
+      postLike({
+        item_id: comment.id,
+        item_type: 'COMMENTS'
+      });
+    }
+  };
+
+  render() {
+    const { comment } = this.props;
+
+    if (!comment) {
+      return null;
+    }
+
+    const myLike = getMyActionSummary('LikeActionSummary', comment);
+    let count = getTotalActionCount('LikeActionSummary', comment);
+
+    return (
+      <div className={cn(styles.like, `${name}-container`)}>
+        <button
+          className={cn(
+            styles.button,
+            { [styles.liked]: myLike },
+            `${name}-button`
+          )}
+          onClick={this.handleClick}
+        >
+          <span className={`${name}-button-text`}>
+            {lang.t(myLike ? 'liked' : 'like')}
+          </span>
+          <i
+            className={cn(
+              styles.icon,
+              'material-icons',
+              { [styles.liked]: myLike },
+              `${name}-icon`
+            )}
+            aria-hidden={true}
+          >
+            thumb_up
+          </i>
+          <span className={`${name}-count`}>{count > 0 && count}</span>
+        </button>
+      </div>
+    );
+  }
+}
+
+LikeButton.propTypes = {
+  data: React.PropTypes.object.isRequired
+};
+
+export default LikeButton;

plugins/coral-plugin-like/client/components/style.css

@@ -0,0 +1,30 @@
+.like {
+  display: inline-block;
+ }
+
+.button {
+  color: #2a2a2a;
+  margin: 5px 10px 5px 0px;
+  background: none;
+  padding: 0px;
+  border: none;
+  font-size: inherit;
+
+  &:hover {
+    color: #767676;
+    cursor: pointer;
+  }
+
+  &.liked {
+    color: rgb(0,134,227);
+
+    &:hover {
+      color: rgb(0,134,227);
+      cursor: pointer;
+    }
+  }
+}
+
+.icon {
+  padding: 0 5px;
+}

plugins/coral-plugin-like/client/containers/LikeButton.js

@@ -0,0 +1,185 @@
+import get from 'lodash/get';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql, graphql } from 'react-apollo';
+import LikeButton from '../components/LikeButton';
+import withFragments from 'coral-framework/hocs/withFragments';
+import { showSignInDialog } from 'coral-framework/actions/auth';
+
+const isLikeAction = a => a.__typename === 'LikeActionSummary';
+
+const COMMENT_FRAGMENT = gql`
+  fragment LikeButton_updateFragment on Comment {
+    action_summaries {
+      ... on LikeActionSummary {
+        count
+        current_user {
+          id
+        }
+      }
+    }
+  }
+`;
+
+const withDeleteAction = graphql(
+  gql`
+  mutation deleteAction($id: ID!) {
+      deleteAction(id:$id) {
+        errors {
+          translation_key
+        }
+      }
+  }
+`,
+  {
+    props: ({ mutate }) => ({
+      deleteAction: (id, commentId) => {
+        return mutate({
+          variables: { id },
+          optimisticResponse: {
+            deleteAction: {
+              __typename: 'DeleteActionResponse',
+              errors: null
+            }
+          },
+          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 liked this comment.
+            const idx = data.action_summaries.findIndex(isLikeAction);
+            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
+            });
+          }
+        });
+      }
+    })
+  }
+);
+
+const withPostLike = graphql(
+  gql`
+  mutation createLike($like: CreateLikeInput!) {
+    createLike(like: $like) {
+      like {
+        id
+      }
+      errors {
+        translation_key
+      }
+    }
+  }
+`,
+  {
+    props: ({ mutate }) => ({
+      postLike: like => {
+        return mutate({
+          variables: { like },
+          optimisticResponse: {
+            createLike: {
+              __typename: 'CreateLikeResponse',
+              errors: null,
+              like: {
+                __typename: 'LikeAction',
+                id: 'pending'
+              }
+            }
+          },
+          update: (proxy, mutationResult) => {
+            const fragmentId = `Comment_${like.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(isLikeAction);
+
+            // Check whether we already liked 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: 'LikeActionSummary',
+                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.createLike.like
+            };
+
+            // Write our data back to the cache.
+            proxy.writeFragment({
+              fragment: COMMENT_FRAGMENT,
+              id: fragmentId,
+              data
+            });
+          }
+        });
+      }
+    })
+  }
+);
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ showSignInDialog }, dispatch);
+
+const enhance = compose(
+  withFragments({
+    root: gql`
+      fragment LikeButton_root on RootQuery {
+        me {
+          status
+        }
+      }
+    `,
+    comment: gql`
+      fragment LikeButton_comment on Comment {
+        action_summaries {
+          ... on LikeActionSummary {
+            count
+            current_user {
+              id
+            }
+          }
+        }
+      }`
+  }),
+  connect(null, mapDispatchToProps),
+  withDeleteAction,
+  withPostLike
+);
+
+export default enhance(LikeButton);

plugins/coral-plugin-like/client/index.js

@@ -0,0 +1,7 @@
+import LikeButton from './containers/LikeButton';
+
+export default {
+  slots: {
+    commentReactions: [LikeButton]
+  }
+};

plugins/coral-plugin-like/index.js

@@ -0,0 +1,36 @@
+const {readFileSync} = require('fs');
+const path = require('path');
+const wrapResponse = require('../../graph/helpers/response');
+
+module.exports = {
+  typeDefs: readFileSync(path.join(__dirname, 'server/typeDefs.graphql'), 'utf8'),
+  resolvers: {
+    RootMutation: {
+      createLike(_, {like: {item_id, item_type}}, {mutators: {Action}}) {
+        return wrapResponse('like')(Action.create({item_id, item_type, action_type: 'LIKE'}));
+      }
+    }
+  },
+  hooks: {
+    Action: {
+      __resolveType: {
+        post({action_type}) {
+          switch (action_type) {
+          case 'LIKE':
+            return 'LikeAction';
+          }
+        }
+      }
+    },
+    ActionSummary: {
+      __resolveType: {
+        post({action_type}) {
+          switch (action_type) {
+          case 'LIKE':
+            return 'LikeActionSummary';
+          }
+        }
+      }
+    }
+  }
+};

plugins/coral-plugin-like/server/typeDefs.graphql

@@ -0,0 +1,70 @@
+enum ACTION_TYPE {
+
+  # Represents a Like.
+  LIKE
+}
+
+enum ASSET_METRICS_SORT {
+
+  # Represents a LikeAction.
+  LIKE
+}
+
+input CreateLikeInput {
+
+  # The item's id for which we are to create a like.
+  item_id: ID!
+
+  # The type of the item for which we are to create the like.
+  item_type: ACTION_ITEM_TYPE!
+}
+
+# LikeAction is used by users who "like" a specific entity.
+type LikeAction implements Action {
+
+  # The ID of the action.
+  id: ID!
+
+  # The author of the action.
+  user: User
+
+  # The time when the Action was updated.
+  updated_at: Date
+
+  # The time when the Action was created.
+  created_at: Date
+}
+
+type LikeActionSummary implements ActionSummary {
+
+  # The count of actions with this group.
+  count: Int
+
+  # The current user's action.
+  current_user: LikeAction
+}
+
+# A summary of counts related to all the Likes on an Asset.
+type LikeAssetActionSummary implements AssetActionSummary {
+
+  # Number of likes associated with actionable types on this this Asset.
+  actionCount: Int
+
+  # Number of unique actionable types that are referenced by the likes.
+  actionableItemCount: Int
+}
+
+type CreateLikeResponse implements Response {
+
+  # The like that was created.
+  like: LikeAction
+
+  # An array of errors relating to the mutation that occurred.
+  errors: [UserError]
+}
+
+type RootMutation {
+
+  # Creates a like on an entity.
+  createLike(like: CreateLikeInput!): CreateLikeResponse
+}

plugins/coral-plugin-respect/index.js

@@ -3,11 +3,16 @@ const path = require('path');
 const wrapResponse = require('../../graph/helpers/response');
 
 module.exports = {
-  typeDefs: readFileSync(path.join(__dirname, 'server/typeDefs.graphql'), 'utf8'),
+  typeDefs: readFileSync(
+    path.join(__dirname, 'server/typeDefs.graphql'),
+    'utf8'
+  ),
   resolvers: {
     RootMutation: {
       createRespect(_, {respect: {item_id, item_type}}, {mutators: {Action}}) {
-        return wrapResponse('respect')(Action.create({item_id, item_type, action_type: 'RESPECT'}));
+        return wrapResponse('respect')(
+          Action.create({item_id, item_type, action_type: 'RESPECT'})
+        );
       }
     }
   },

test/server/graph/loaders/metrics.js

@@ -15,9 +15,6 @@ describe('graph.loaders.Metrics', () => {
   describe('#Comments', () => {
     const query = `
       query CommentMetrics($from: Date!, $to: Date!) {
-        liked: commentMetrics(from: $from, to: $to, sort: LIKE) {
-          id
-        }
         flagged: commentMetrics(from: $from, to: $to, sort: FLAG) {
           id
         }
@@ -33,26 +30,21 @@ describe('graph.loaders.Metrics', () => {
       ]));
 
       [
-        {liked: 0, flagged: 0, actions: []},
+        {flagged: 0, actions: []},
-        {liked: 1, flagged: 0, actions: [{action_type: 'LIKE', item_id: '1', item_type: 'COMMENTS'}]},
+        {flagged: 1, actions: [{action_type: 'FLAG', item_id: '1', item_type: 'COMMENTS'}]},
-        {liked: 0, flagged: 1, actions: [{action_type: 'FLAG', item_id: '1', item_type: 'COMMENTS'}]},
+        {flagged: 1, actions: [
-        {liked: 1, flagged: 1, actions: [
           {action_type: 'FLAG', item_id: '1', item_type: 'COMMENTS'},
-          {action_type: 'LIKE', item_id: '1', item_type: 'COMMENTS'}
         ]},
-        {liked: 3, flagged: 1, actions: [
+        {flagged: 1, actions: [
-          {action_type: 'LIKE', item_id: '1', item_type: 'COMMENTS'},
-          {action_type: 'LIKE', item_id: '2', item_type: 'COMMENTS'},
-          {action_type: 'LIKE', item_id: '3', item_type: 'COMMENTS'},
           {action_type: 'FLAG', item_id: '3', item_type: 'COMMENTS'}
         ]}
-      ].forEach(({liked, flagged, actions}) => {
+      ].forEach(({flagged, actions}) => {
 
         describe(`with actions=${actions.length}`, () => {
 
           beforeEach(() => ActionModel.create(actions));
 
-          it(`returns the correct amount of metrics liked=${liked} flagged=${flagged}`, () => {
+          it(`returns the correct amount of metrics flagged=${flagged}`, () => {
             const context = new Context({user: new UserModel({roles: ['ADMIN']})});
 
             return graphql(schema, query, {}, context, {
@@ -60,8 +52,8 @@ describe('graph.loaders.Metrics', () => {
               to: (new Date()).setMinutes((new Date()).getMinutes() + 5)
             })
               .then(({data, errors}) => {
+                console.log(errors);
                 expect(errors).to.be.undefined;
-                expect(data.liked).to.have.length(liked);
                 expect(data.flagged).to.have.length(flagged);
               });
           });
@@ -88,9 +80,6 @@ describe('graph.loaders.Metrics', () => {
         assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) {
           ...metrics
         }
-        assetsByLike: assetMetrics(from: $from, to: $to, sort: LIKE) {
-          ...metrics
-        }
       }
     `;
 
@@ -109,26 +98,21 @@ describe('graph.loaders.Metrics', () => {
       ]));
 
       [
-        {liked: 0, flagged: 0, actions: []},
+        {flagged: 0, actions: []},
-        {liked: 1, flagged: 0, actions: [{action_type: 'LIKE', item_id: 'c1', item_type: 'COMMENTS'}]},
+        {flagged: 1, actions: [{action_type: 'FLAG', item_id: 'c1', item_type: 'COMMENTS'}]},
-        {liked: 0, flagged: 1, actions: [{action_type: 'FLAG', item_id: 'c1', item_type: 'COMMENTS'}]},
+        {flagged: 1, actions: [
-        {liked: 1, flagged: 1, actions: [
           {action_type: 'FLAG', item_id: 'c1', item_type: 'COMMENTS'},
-          {action_type: 'LIKE', item_id: 'c1', item_type: 'COMMENTS'}
         ]},
-        {liked: 1, flagged: 1, actions: [
+        {flagged: 1, actions: [
-          {action_type: 'LIKE', item_id: 'c1', item_type: 'COMMENTS'},
-          {action_type: 'LIKE', item_id: 'c2', item_type: 'COMMENTS'},
-          {action_type: 'LIKE', item_id: 'c3', item_type: 'COMMENTS'},
           {action_type: 'FLAG', item_id: 'c3', item_type: 'COMMENTS'}
         ]}
-      ].forEach(({liked, flagged, actions}) => {
+      ].forEach(({flagged, actions}) => {
 
         describe(`with actions=${actions.length}`, () => {
 
           beforeEach(() => ActionModel.create(actions));
 
-          it(`returns the correct amount of metrics liked=${liked} flagged=${flagged}`, () => {
+          it(`returns the correct amount of metrics flagged=${flagged}`, () => {
             const context = new Context({user: new UserModel({roles: ['ADMIN']})});
 
             return graphql(schema, query, {}, context, {
@@ -137,7 +121,6 @@ describe('graph.loaders.Metrics', () => {
             })
               .then(({data, errors}) => {
                 expect(errors).to.be.undefined;
-                expect(data.assetsByLike).to.have.length(liked);
                 expect(data.assetsByFlag).to.have.length(flagged);
               });
           });