From 173e1c16ea9479955502d28e9eeb94322bfe2f79 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 30 Mar 2017 22:51:16 -0300
Subject: [PATCH] Plugin now support statefull components

---
 client/coral-embed-stream/src/Embed.js        |  1 +
 plugins.json                                  |  3 +-
 .../coral-plugin-respect/client/actions.js    |  1 -
 plugins/coral-plugin-respect/client/index.js  | 63 ++++++++++++++++---
 .../client/translations.json                  | 10 +++
 5 files changed, 65 insertions(+), 13 deletions(-)
 create mode 100644 plugins/coral-plugin-respect/client/translations.json

diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index 54630847a..fb130d26e 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -135,6 +135,7 @@ class Embed extends Component {
     return (
       <div style={expandForLogin}>
         <div className="commentStream">
+          {/* <Slot fill="Stream" pluginProps={pluginProps} />*/}
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
             <Tab><Count count={asset.totalCommentCount}/></Tab>
             <Tab>{lang.t('MY_COMMENTS')}</Tab>
diff --git a/plugins.json b/plugins.json
index cbe97c6bf..6ac303c35 100644
--- a/plugins.json
+++ b/plugins.json
@@ -3,7 +3,6 @@
     "coral-plugin-respect"
   ],
   "client": [
-    "coral-plugin-respect",
-    "coral-plugin-love"
+    "coral-plugin-respect"
   ]
 }
\ No newline at end of file
diff --git a/plugins/coral-plugin-respect/client/actions.js b/plugins/coral-plugin-respect/client/actions.js
index 14964cc26..9af883182 100644
--- a/plugins/coral-plugin-respect/client/actions.js
+++ b/plugins/coral-plugin-respect/client/actions.js
@@ -1,7 +1,6 @@
 const buttonClicked = () => ({type: 'BUTTON_CLICKED'});
 
 export const clickButton = () => dispatch => {
-  console.log('here');
   dispatch(buttonClicked());
 };
 
diff --git a/plugins/coral-plugin-respect/client/index.js b/plugins/coral-plugin-respect/client/index.js
index fefdc1f72..341363571 100644
--- a/plugins/coral-plugin-respect/client/index.js
+++ b/plugins/coral-plugin-respect/client/index.js
@@ -7,28 +7,71 @@ import {getActionSummary} from 'coral-framework/utils';
 class RespectButton extends React.Component {
   constructor(props) {
     super(props);
+
+    this.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.
+    };
   }
 
   handleClick = () => {
-    const {comment} = this.props.context;
+    const {comment, postRespect, showSignInDialog, currentUser} = this.props.context;
+    const {localPost, localDelete} = this.state;
+    const respect = getActionSummary('RespectActionSummary', comment);
+    const respected = (respect && respect.current_user && !localDelete) || localPost;
 
-    this.props.context.postRespect({
-      item_id: comment.id,
-      item_type: 'COMMENTS'
-    });
+    /**
+     *  If the current user does not exist, trigger signIn Box
+     */
+
+    if (!currentUser) {
+      const offset = document.getElementById(`c_${comment.id}`).getBoundingClientRect().top - 75;
+      showSignInDialog(offset);
+      return;
+    }
+
+    /**
+     *  If the current user is banned, do nothing
+     */
+
+    if (currentUser.banned) {
+      return;
+    }
+
+    if (!respected) {
+      this.setState({
+        localPost: 'temp'
+      });
+
+      postRespect({
+        item_id: comment.id,
+        item_type: 'COMMENTS'
+      }).then(({data}) => {
+        this.setState({
+          localPost: data.createRespect.respect.id
+        });
+      });
+
+    } else {
+      this.setState((prev) => prev.localPost ? {...prev, localPost: null} : {...prev, localDelete: true});
+    }
   }
-  
+
   render() {
     const {comment} = this.props.context;
-    const respectActionSummary = getActionSummary('RespectActionSummary', comment);
+    const {localPost, localDelete} = this.state;
+    const respect = getActionSummary('RespectActionSummary', comment);
+    let count = respect ? respect.count : 0;
+
+    if (localPost) {count += 1;}
+    if (localDelete) {count -= 1;}
 
     return (
       <div className={styles.Respect}>
-        <button
-          onClick={this.handleClick}>
+        <button onClick={this.handleClick}>
           Respect
           <Icon />
-          {respectActionSummary ? <span>{respectActionSummary.count}</span> : null}
+          {count > 0 && count}
         </button>
       </div>
     );
diff --git a/plugins/coral-plugin-respect/client/translations.json b/plugins/coral-plugin-respect/client/translations.json
new file mode 100644
index 000000000..643f32ccf
--- /dev/null
+++ b/plugins/coral-plugin-respect/client/translations.json
@@ -0,0 +1,10 @@
+{
+  "en": {
+    "respect": "Respect",
+    "respected": "Respected"
+  },
+  "es": {
+    "respect": "Respeto",
+    "respected": "Respetado"
+  }
+}