Activating post and delete actions on likebutton.

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

@@ -13,9 +13,10 @@ 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 LikeButton from '../../coral-plugin-likes/LikeButton';
 
-const Comment = ({comment, currentUser, asset, depth}) => {
+const Comment = ({comment, currentUser, asset, depth, showSignInDialog, postAction, deleteAction}) => {
+  const like = comment.actions.filter((a) => a.type === 'LIKE')[0];
   return (
     <div
       className="comment"
@@ -36,10 +37,22 @@ const Comment = ({comment, currentUser, asset, depth}) => {
       <PubDate created_at={comment.created_at} />
       <Content body={comment.body} />
       <div className="commentActionsLeft">
-
+        {/*
+          <ReplyButton/>
+          */}
+          <LikeButton
+            like={like}
+            id={comment.id}
+            postAction={postAction}
+            deleteAction={deleteAction}
+            showSignInDialog={showSignInDialog}
+            currentUser={currentUser}
+            />
       </div>
       <div className="commentActionsRight">
-
+        {/*
+          <FlagButton/>
+          */}
         <PermalinkButton articleURL={asset.url} commentId={comment.id} />
       </div>
       {
@@ -49,6 +62,10 @@ const Comment = ({comment, currentUser, asset, depth}) => {
             depth={depth + 1}
             asset={asset}
             currentUser={currentUser}
+            currentUser={currentUser}
+            postAction={postAction}
+            deleteAction={deleteAction}
+            showSignInDialog={showSignInDialog}
             key={reply.id}
             comment={reply} />;
         })

client/coral-embed-stream/src/Embed.js

@@ -3,7 +3,7 @@ import React, {Component, PropTypes} from 'react';
 import {compose} from 'react-apollo';
 import {connect} from 'react-redux';
 
-import {postComment} from './graphql/mutations';
+import {postComment, postAction, deleteAction} from './graphql/mutations';
 import {queryStream} from './graphql/queries';
 
 import {
@@ -149,6 +149,9 @@ class Embed extends Component {
                 <Stream
                   asset={asset}
                   currentUser={user}
+                  postAction={this.props.postAction}
+                  deleteAction={this.props.deleteAction}
+                  showSignInDialog={showSignInDialog}
                   comments={asset.comments} />
                 <Notification
                   notifLength={4500}
@@ -211,5 +214,7 @@ const mapDispatchToProps = dispatch => ({
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   postComment,
+  postAction,
+  deleteAction,
   queryStream
 )(Embed);

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

@@ -1,8 +1,7 @@
 import React, {PropTypes} from 'react';
 import Comment from './Comment';
 
-const Stream = ({comments, currentUser, asset}) => {
-  console.log('currentUser', currentUser);
+const Stream = ({comments, currentUser, asset, postAction, deleteAction, showSignInDialog}) => {
   return (
     <div>
       {
@@ -11,6 +10,9 @@ const Stream = ({comments, currentUser, asset}) => {
             depth={0}
             asset={asset}
             currentUser={currentUser}
+            postAction={postAction}
+            deleteAction={deleteAction}
+            showSignInDialog={showSignInDialog}
             key={comment.id}
             comment={comment} />;
         })

client/coral-embed-stream/src/graphql/mutations/deleteAction.graphql

@@ -0,0 +1,3 @@
+mutation deleteAction ($id: ID!) {
+    deleteAction(id:$id)
+}

client/coral-embed-stream/src/graphql/mutations/index.js

@@ -1,5 +1,7 @@
 import {graphql} from 'react-apollo';
 import POST_COMMENT from './postComment.graphql';
+import POST_ACTION from './postAction.graphql';
+import DELETE_ACTION from './deleteAction.graphql';
 
 export const postComment = graphql(POST_COMMENT, {
   props: ({mutate}) => ({
@@ -13,3 +15,25 @@ export const postComment = graphql(POST_COMMENT, {
       });
     }}),
 });
+
+export const postAction = graphql(POST_ACTION, {
+  props: ({mutate}) => ({
+    postAction: (action) => {
+      return mutate({
+        variables: {
+          action
+        }
+      });
+    }}),
+});
+
+export const deleteAction = graphql(DELETE_ACTION, {
+  props: ({mutate}) => ({
+    deleteAction: (id) => {
+      return mutate({
+        variables: {
+          id
+        }
+      });
+    }}),
+});

client/coral-embed-stream/src/graphql/mutations/postAction.graphql

@@ -1,5 +1,5 @@
-mutation CreateAction ($action: ActionInput) {
+mutation CreateAction ($action: CreateActionInput!) {
     createAction(action:$action) {
-        ...action
+        id
     }
 }

client/coral-embed-stream/src/graphql/queries/index.js

@@ -3,7 +3,7 @@ import STREAM_QUERY from './streamQuery.graphql';
 import Pym from 'pym.js';
 
 const pym = new Pym.Child({polling: 100});
-let url = pym.parentUrl;
+let url = pym.parentUrl || 'http://localhost:3000/';
 
 export const queryStream = graphql(STREAM_QUERY, {
   options: {variables: {asset_url: url}}

client/coral-plugin-likes/LikeButton.js

@@ -4,33 +4,26 @@ import translations from './translations.json';
 
 const name = 'coral-plugin-likes';
 
-const LikeButton = ({like, id, postAction, deleteAction, addItem, showSignInDialog, updateItem, currentUser, banned}) => {
-  const liked = like && like.current_user;
+const LikeButton = ({like, id, postAction, deleteAction, showSignInDialog, currentUser}) => {
+  const liked = like && like.current;
   const onLikeClick = () => {
     if (!currentUser) {
       const offset = document.getElementById(`c_${id}`).getBoundingClientRect().top - 75;
       showSignInDialog(offset);
       return;
     }
-    if (banned) {
+    if (currentUser.banned) {
       return;
     }
     if (!liked) {
-      const action = {
-        action_type: 'like'
-      };
-      postAction(id, 'comments', action)
-        .then((action) => {
-          let id = `${action.action_type}_${action.item_id}`;
-          addItem({id, current_user: action, count: like ? like.count + 1 : 1}, 'actions');
-          updateItem(action.item_id, action.action_type, id, 'comments');
-        });
+      postAction({
+        item_id: id,
+        item_type: 'COMMENTS',
+        action_type: 'LIKE'
+      });
+      // TODO: frontend update from mutation
     } else {
-      deleteAction(liked.id)
-        .then(() => {
-          updateItem(like.id, 'count', like.count - 1, 'actions');
-          updateItem(like.id, 'current_user', false, 'actions');
-        });
+      deleteAction(liked.id);
     }
   };