From 1adac5cde1186282975f93db26a3db75f4592c5f Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Fri, 11 Nov 2016 16:25:47 -0500
Subject: [PATCH] Adding like button.

---
 .../coral-embed-stream/src/CommentStream.js   | 55 +++++++++++++------
 client/coral-embed-stream/style/default.css   | 21 ++++++-
 client/coral-plugin-flags/FlagButton.js       | 24 ++++----
 client/coral-plugin-likes/LikeButton.js       | 35 ++++++++++++
 client/coral-plugin-likes/translations.json   | 10 ++++
 client/coral-plugin-replies/ReplyButton.js    |  2 +-
 6 files changed, 116 insertions(+), 31 deletions(-)
 create mode 100644 client/coral-plugin-likes/LikeButton.js
 create mode 100644 client/coral-plugin-likes/translations.json

diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index d6edfddda..e3832a0dc 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -14,6 +14,7 @@ import AuthorName from '../../coral-plugin-author-name/AuthorName';
 import {ReplyBox, ReplyButton} from '../../coral-plugin-replies';
 import Pym from 'pym.js';
 import FlagButton from '../../coral-plugin-flags/FlagButton';
+import LikeButton from '../../coral-plugin-likes/LikeButton';
 
 const {addItem, updateItem, postItem, getStream, postAction, appendItemArray} = itemActions;
 const {addNotification, clearNotification} = notificationActions;
@@ -119,7 +120,20 @@ class CommentStream extends Component {
                 <AuthorName name={comment.username}/>
                 <PubDate created_at={comment.created_at}/>
                 <Content body={comment.body}/>
-                <div className="commentActions">
+                <div className="commentActionsLeft">
+                  <ReplyButton
+                    updateItem={this.props.updateItem}
+                    id={commentId}/>
+                  <LikeButton
+                    addNotification={this.props.addNotification}
+                    id={commentId}
+                    like={this.props.items.actions[comment.like]}
+                    postAction={this.props.postAction}
+                    addItem={this.props.addItem}
+                    updateItem={this.props.updateItem}
+                    currentUser={this.props.auth.user}/>
+                </div>
+                <div className="commentActionsRight">
                   <FlagButton
                     addNotification={this.props.addNotification}
                     id={commentId}
@@ -128,9 +142,6 @@ class CommentStream extends Component {
                     addItem={this.props.addItem}
                     updateItem={this.props.updateItem}
                     currentUser={this.props.auth.user}/>
-                  <ReplyButton
-                    updateItem={this.props.updateItem}
-                    id={commentId}/>
                 </div>
                   <ReplyBox
                     addNotification={this.props.addNotification}
@@ -150,19 +161,29 @@ class CommentStream extends Component {
                         <AuthorName name={reply.username}/>
                         <PubDate created_at={reply.created_at}/>
                         <Content body={reply.body}/>
-                        <div className="replyActions">
-                          <FlagButton
-                            addNotification={this.props.addNotification}
-                            id={replyId}
-                            flag={this.props.items.actions[reply.flag]}
-                            postAction={this.props.postAction}
-                            addItem={this.props.addItem}
-                            updateItem={this.props.updateItem}
-                            currentUser={this.props.auth.user}/>
-                          <ReplyButton
-                            updateItem={this.props.updateItem}
-                            parent_id={reply.parent_id}/>
-                        </div>
+                        <div className="replyActionsLeft">
+                            <ReplyButton
+                              updateItem={this.props.updateItem}
+                              id={replyId}/>
+                            <LikeButton
+                              addNotification={this.props.addNotification}
+                              id={replyId}
+                              like={this.props.items.actions[reply.like]}
+                              postAction={this.props.postAction}
+                              addItem={this.props.addItem}
+                              updateItem={this.props.updateItem}
+                              currentUser={this.props.auth.user}/>
+                          </div>
+                          <div className="replyActionsRight">
+                            <FlagButton
+                              addNotification={this.props.addNotification}
+                              id={replyId}
+                              flag={this.props.items.actions[reply.flag]}
+                              postAction={this.props.postAction}
+                              addItem={this.props.addItem}
+                              updateItem={this.props.updateItem}
+                              currentUser={this.props.auth.user}/>
+                          </div>
                       </div>;
                     })
                 }
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index e1c730bfc..f68e2a0e3 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -105,16 +105,33 @@ hr {
 
 /* Comment Action Styles */
 
-.commentActions, .replyActions {
+.commentActionsRight, .replyActionsRight {
   display: flex;
   justify-content: flex-end;
+  width: 50%;
+}
+.commentActionsLeft, .replyActionsLeft {
+  display: flex;
+  justify-content: flex-start;
+  float: left;
+  width: 50%;
 }
 
-.commentActions .material-icons, .replyActions .material-icons {
+.commentActionsLeft .material-icons,.commentActionsRight .material-icons,
+.replyActionsLeft .material-icons, .replyActionsRight .material-icons {
   font-size: 12px;
+  margin-left: 3px;
   vertical-align: middle;
 }
 
+.likedButton {
+  color: rgb(0,134,227);
+}
+
+.flaggedIcon {
+  color: #F00;
+}
+
 /* Comment count styles */
 .coral-plugin-comment-count-text {
   margin-bottom: 15px;
diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js
index 4f90dfb7c..7374def5f 100644
--- a/client/coral-plugin-flags/FlagButton.js
+++ b/client/coral-plugin-flags/FlagButton.js
@@ -7,24 +7,26 @@ const name = 'coral-plugin-flags';
 const FlagButton = ({flag, id, postAction, addItem, updateItem, addNotification}) => {
   const flagged = flag && flag.current_user;
   const onFlagClick = () => {
-    postAction(id, 'flag', '123', 'comments')
-      .then((action) => {
-        addItem({...action, current_user:true}, 'actions');
-        updateItem(action.item_id, action.action_type, action.id, 'comments');
-      });
-    addNotification('success', lang.t('flag-notif'));
+    if (!flagged) {
+      postAction(id, 'flag', '123', 'comments')
+        .then((action) => {
+          addItem({...action, current_user:true}, 'actions');
+          updateItem(action.item_id, action.action_type, action.id, 'comments');
+        });
+      addNotification('success', lang.t('flag-notif'));
+    }
   };
 
   return <div className={`${name  }-container`}>
     <button onClick={onFlagClick} className={`${name  }-button`}>
-      <i className={`${name  }-icon material-icons`}
-        style={flagged ? styles.flaggedIcon : styles.unflaggedIcon}
-        aria-hidden={true}>flag</i>
       {
         flagged
-        ? <span className={`${name}-button-text`}>{lang.t('flag')}</span>
-      : <span className={`${name}-button-text`}>{lang.t('flagged')}</span>
+        ? <span className={`${name}-button-text`}>{lang.t('flagged')}</span>
+      : <span className={`${name}-button-text`}>{lang.t('flag')}</span>
       }
+      <i className={`${name  }-icon material-icons ${flagged && 'flaggedIcon'}`}
+        style={flagged && styles.flaggedIcon}
+        aria-hidden={true}>flag</i>
     </button>
   </div>;
 };
diff --git a/client/coral-plugin-likes/LikeButton.js b/client/coral-plugin-likes/LikeButton.js
new file mode 100644
index 000000000..ec8528793
--- /dev/null
+++ b/client/coral-plugin-likes/LikeButton.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import {I18n} from '../coral-framework';
+import translations from './translations.json';
+
+const name = 'coral-plugin-flags';
+
+const LikeButton = ({like, id, postAction, addItem, updateItem}) => {
+  const liked = like && like.current_user;
+  const onLikeClick = () => {
+    if (!liked) {
+      postAction(id, 'like', '123', 'comments')
+        .then((action) => {
+          addItem({id: action.id, current_user:true, count: like ? like.count + 1 : 1}, 'actions');
+          updateItem(action.item_id, action.action_type, action.id, 'comments');
+        });
+    }
+  };
+
+  return <div className={`${name}-container`}>
+    <button onClick={onLikeClick} className={`${name}-button ${liked && 'likedButton'}`}>
+      {
+        liked
+        ? <span className={`${name}-button-text`}>{lang.t('liked')}</span>
+      : <span className={`${name}-button-text`}>{lang.t('like')}</span>
+      }
+      <i className={`${name}-icon material-icons`}
+        aria-hidden={true}>thumb_up</i>
+      <span className={`${name}-like-count`}>{like && like.count}</span>
+    </button>
+  </div>;
+};
+
+export default LikeButton;
+
+const lang = new I18n(translations);
diff --git a/client/coral-plugin-likes/translations.json b/client/coral-plugin-likes/translations.json
new file mode 100644
index 000000000..93d73d3a2
--- /dev/null
+++ b/client/coral-plugin-likes/translations.json
@@ -0,0 +1,10 @@
+{
+  "en": {
+    "like": "Like",
+    "liked": "Liked"
+  },
+  "es": {
+    "like": "Me Gusta",
+    "liked": "Me Gustó"
+  }
+}
diff --git a/client/coral-plugin-replies/ReplyButton.js b/client/coral-plugin-replies/ReplyButton.js
index 44213c2f7..4fbfd5f60 100644
--- a/client/coral-plugin-replies/ReplyButton.js
+++ b/client/coral-plugin-replies/ReplyButton.js
@@ -7,9 +7,9 @@ const name = 'coral-plugin-replies';
 const ReplyButton = (props) => <button
     className={`${name}-reply-button`}
     onClick={() => props.updateItem(props.id || props.parent_id, 'showReply', true, 'comments')}>
+    {lang.t('reply')}
     <i className={`${name}-icon material-icons`}
       aria-hidden={true}>reply</i>
-    {lang.t('reply')}
 </button>;
 
 export default ReplyButton;