From 2d99206b5185eb63f571d347328a0c835dca7571 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 30 Mar 2017 18:25:25 -0300
Subject: [PATCH] Plugin api, state, actions, context

---
 client/coral-embed-stream/src/Comment.js      | 13 +++++++--
 client/coral-embed-stream/src/Embed.js        | 16 ++++++----
 client/coral-framework/components/Slot.js     |  3 +-
 .../coral-plugin-respect/client/actions.js    |  1 +
 plugins/coral-plugin-respect/client/index.js  | 29 +++++++++++++++----
 plugins/coral-plugin-respect/client/style.css |  4 +++
 6 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index c43200c71..622d48b90 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -112,7 +112,6 @@ class Comment extends React.Component {
       addCommentTag,
       removeCommentTag,
       disableReply,
-      pluginProps
     } = this.props;
 
     const like = getActionSummary('LikeActionSummary', comment);
@@ -143,6 +142,14 @@ class Comment extends React.Component {
       tag: BEST_TAG,
     }), () => 'Failed to remove best comment tag');
 
+    const {context, ...rest} = this.props.pluginProps;
+    const pluginProps = {
+      context: {...context, ...this.props},
+      ...rest
+    };
+
+    console.log('Commnet --------', pluginProps)
+
     return (
       <div
         className={commentClass}
@@ -161,7 +168,7 @@ class Comment extends React.Component {
             ? <TagLabel><BestIndicator /></TagLabel>
             : null }
           <PubDate created_at={comment.created_at} />
-          <Slot fill="Comment.InfoBar" {...this.props} />
+          <Slot fill="Comment.InfoBar" {...pluginProps} />
         </div>
 
         <Content body={comment.body} />
@@ -193,7 +200,7 @@ class Comment extends React.Component {
                   removeBest={removeBestTag} />
               </IfUserCanModifyBest>
             </ActionButton>
-            <Slot fill="Comment.Detail" {...this.props} />
+            <Slot fill="Comment.Detail" {...pluginProps} />
           </div>
         <div className="commentActionsRight comment__action-container">
           <ActionButton>
diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index ab5033c5a..b42b54f03 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -122,19 +122,20 @@ class Embed extends Component {
      * Plugins Section
      *
      */
-    const {dispatch} = this.props;
+    const {dispatch, state, ...currentProps} = this.props;
     const {pluginActions} = actions;
     let boundActionCreators = bindActionCreators(pluginActions, dispatch);
 
     const pluginProps = {
-      ...this.props,
+      state,
+      context: currentProps,
       actions: boundActionCreators
     };
 
     return (
       <div style={expandForLogin}>
         <div className="commentStream">
-          <Slot fill="Stream" {...pluginProps} />
+          {/*<Slot fill="Stream" pluginProps={pluginProps} />*/}
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
             <Tab><Count count={asset.totalCommentCount}/></Tab>
             <Tab>{lang.t('MY_COMMENTS')}</Tab>
@@ -273,10 +274,15 @@ const mapStateToProps = (state) => Object
   .keys(state)
   .reduce((entry, key) => {
     if (key !== 'apollo') {
-      entry[key] = state[key].toJS();
+      entry.state[key] = state[key].toJS();
     }
     return entry;
-  }, {});
+  }, {
+    auth: state.auth.toJS(),
+    userData: state.user.toJS(),
+    asset: state.asset.toJS(),
+    state: {}
+});
 
 const mapDispatchToProps = dispatch => ({
   requestConfirmEmail: () => dispatch(requestConfirmEmail()),
diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js
index 0288bbc51..ecadd716c 100644
--- a/client/coral-framework/components/Slot.js
+++ b/client/coral-framework/components/Slot.js
@@ -3,10 +3,9 @@ import {injectPlugins} from 'coral-framework/helpers/plugins';
 
 class Slot extends Component {
   render() {
-    const {pluginProps, ...props} = this.props;
     return (
       <div>
-        {injectPlugins({...props, ...pluginProps})}
+        {injectPlugins(this.props)}
       </div>
     );
   }
diff --git a/plugins/coral-plugin-respect/client/actions.js b/plugins/coral-plugin-respect/client/actions.js
index 21705e201..14964cc26 100644
--- a/plugins/coral-plugin-respect/client/actions.js
+++ b/plugins/coral-plugin-respect/client/actions.js
@@ -4,3 +4,4 @@ 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 9eb9b7cb9..234a3178d 100644
--- a/plugins/coral-plugin-respect/client/index.js
+++ b/plugins/coral-plugin-respect/client/index.js
@@ -1,10 +1,27 @@
 import React from 'react';
 import styles from './style.css';
+import {Icon} from 'coral-ui';
 
-export default (props) => (
-  <div className={styles.Respect} key={props.key}>
-    {console.log(props)}
-    <button onClick={props.actions.clickButton}>Respect</button>
-  </div>
-);
+export default (props) => {
+  const handleClick = () => {
+    props.actions.clickButton();
+    // props.postRespect({
+    //   item_id: props.comment.id,
+    //   item_type: 'COMMENTS'
+    // });
+  };
+  const {clicked} = props.state.respect;
+
+  return (
+    <div className={styles.Respect} key={props.key}>
+      <button
+        className={clicked ? styles.clicked : ''}
+        onClick={handleClick}>
+        Respect
+        <Icon name="done"/>
+        <span>9</span>
+      </button>
+    </div>
+  );
+};
 
diff --git a/plugins/coral-plugin-respect/client/style.css b/plugins/coral-plugin-respect/client/style.css
index 32773ed26..6bb7746d3 100644
--- a/plugins/coral-plugin-respect/client/style.css
+++ b/plugins/coral-plugin-respect/client/style.css
@@ -8,4 +8,8 @@
         border: none;
         font-size: inherit;
     }
+
+    .clicked {
+        color: #ffcc00;
+    }
 }
\ No newline at end of file