Plugins can trigger own actions with core reducers

client/coral-embed-stream/src/Comment.js

@@ -112,6 +112,7 @@ class Comment extends React.Component {
       addCommentTag,
       removeCommentTag,
       disableReply,
+      pluginProps
     } = this.props;
 
     const like = getActionSummary('LikeActionSummary', comment);
@@ -160,7 +161,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" {...this.props} />
         </div>
 
         <Content body={comment.body} />
@@ -192,7 +193,7 @@ class Comment extends React.Component {
                   removeBest={removeBestTag} />
               </IfUserCanModifyBest>
             </ActionButton>
-            <Slot fill="Comment.Detail"  {...this.props}/>
+            <Slot fill="Comment.Detail" {...this.props} />
           </div>
         <div className="commentActionsRight comment__action-container">
           <ActionButton>
@@ -246,7 +247,9 @@ class Comment extends React.Component {
               showSignInDialog={showSignInDialog}
               reactKey={reply.id}
               key={reply.id}
-              comment={reply} />;
+              comment={reply}
+              pluginProps={pluginProps}
+            />;
           })
         }
         {

client/coral-embed-stream/src/Embed.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {compose} from 'react-apollo';
+import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import isEqual from 'lodash/isEqual';
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -17,7 +18,7 @@ import {queryStream} from 'coral-framework/graphql/queries';
 import {postComment, postFlag, postLike, postDontAgree, deleteAction, addCommentTag, removeCommentTag} from 'coral-framework/graphql/mutations';
 import {editName} from 'coral-framework/actions/user';
 import {updateCountCache} from 'coral-framework/actions/asset';
-import {notificationActions, authActions, assetActions, pym, Slot} from 'coral-framework';
+import {notificationActions, authActions, assetActions, pym, Slot, actions} from 'coral-framework';
 
 import Stream from './Stream';
 import InfoBox from 'coral-plugin-infobox/InfoBox';
@@ -117,10 +118,23 @@ class Embed extends Component {
       ? asset.comments[0].created_at
       : new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
 
+    /**
+     * Plugins Section
+     *
+     */
+    const {dispatch} = this.props;
+    const {pluginActions} = actions;
+    let boundActionCreators = bindActionCreators(pluginActions, dispatch);
+
+    const pluginProps = {
+      ...this.props,
+      ...boundActionCreators
+    };
+
     return (
       <div style={expandForLogin}>
         <div className="commentStream">
-          <Slot fill="Stream" {...this.props} />
+          <Slot fill="Stream" {...pluginProps} />
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
             <Tab><Count count={asset.totalCommentCount}/></Tab>
             <Tab>{lang.t('MY_COMMENTS')}</Tab>
@@ -193,7 +207,7 @@ class Embed extends Component {
                 key={highlightedComment.id}
                 reactKey={highlightedComment.id}
                 comment={highlightedComment}
-                {...this.props}
+                pluginProps={pluginProps}
               />
             }
             <NewCount
@@ -223,7 +237,9 @@ class Embed extends Component {
                 loadMore={this.props.loadMore}
                 deleteAction={this.props.deleteAction}
                 showSignInDialog={this.props.showSignInDialog}
-                comments={asset.comments} />
+                comments={asset.comments}
+                pluginProps={pluginProps}
+              />
             </div>
           <LoadMore
             topLevel={true}

client/coral-embed-stream/src/Stream.js

@@ -62,7 +62,8 @@ class Stream extends React.Component {
       deleteAction,
       showSignInDialog,
       addCommentTag,
-      removeCommentTag
+      removeCommentTag,
+      pluginProps
     } = this.props;
 
     return (
@@ -88,7 +89,9 @@ class Stream extends React.Component {
               showSignInDialog={showSignInDialog}
               key={comment.id}
               reactKey={comment.id}
-              comment={comment} />
+              comment={comment}
+              pluginProps={pluginProps}
+            />
           )
         }
       </div>

client/coral-framework/components/Slot.js

@@ -1,13 +1,11 @@
 import React, {Component} from 'react';
 import {importer as injectPlugins} from 'coral-framework/helpers/importer';
-import actions from 'coral-framework/actions';
 
 class Slot extends Component {
   render() {
-    const slotProps = {...this.props, ...actions};
     return (
       <div>
-        {injectPlugins(slotProps)}
+        {injectPlugins(this.props)}
       </div>
     );
   }

client/coral-framework/helpers/importer.js

@@ -38,7 +38,6 @@ function importer ({fill, ...props}) {
      *  addProps add properties to the injected plugins
      */
     plugin.props = {
-      ...actionsImporter(),
       ...getConfig(plugin.name),
       ...props
     };

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

@@ -1 +1,6 @@
-export const clickButton = () => ({type: 'BUTTON_CLICKED'});
+const buttonClicked = () => ({type: 'BUTTON_CLICKED'});
+
+export const clickButton = () => dispatch => {
+  console.log('here');
+  dispatch(buttonClicked());
+};

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

@@ -3,8 +3,7 @@ import styles from './style.css';
 
 export default (props) => (
   <div className={styles.Respect} key={props.key}>
-    {console.log(props)}
-    <button>Respect</button>
+    <button onClick={props.pluginProps.clickButton}>Respect</button>
   </div>
 );
 

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

@@ -6,6 +6,9 @@ const initialState = Map({
 
 export function respect (state = initialState, action) {
   switch (action.type) {
+  case 'BUTTON_CLICKED' :
+    return state
+      .set('clicked', !state.get('clicked'));
   default:
     return state;
   }