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