Plugin api, state, actions, context

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>

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()),

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>
     );
   }

plugins/coral-plugin-respect/client/actions.js

@@ -4,3 +4,4 @@ export const clickButton = () => dispatch => {
   console.log('here');
   dispatch(buttonClicked());
 };
+

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>
+  );
+};
 

plugins/coral-plugin-respect/client/style.css

@@ -8,4 +8,8 @@
         border: none;
         font-size: inherit;
     }
+
+    .clicked {
+        color: #ffcc00;
+    }
 }