Remove context for plugins

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

@@ -142,12 +142,6 @@ 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
-    };
-
     return (
       <div
         className={commentClass}
@@ -155,7 +149,7 @@ class Comment extends React.Component {
         style={{marginLeft: depth * 30}}>
         <hr aria-hidden={true} />
 
-        <div id="Comment.InfoBar">
+        <div>
           <AuthorName
             author={comment.user}/>
           { isStaff(comment.tags)
@@ -166,7 +160,7 @@ class Comment extends React.Component {
             ? <TagLabel><BestIndicator /></TagLabel>
             : null }
           <PubDate created_at={comment.created_at} />
-          <Slot fill="Comment.InfoBar" {...pluginProps} />
+          <Slot fill="Comment.InfoBar" commentId={comment.id} />
         </div>
 
         <Content body={comment.body} />
@@ -198,7 +192,7 @@ class Comment extends React.Component {
                   removeBest={removeBestTag} />
               </IfUserCanModifyBest>
             </ActionButton>
-            <Slot fill="Comment.Detail" {...pluginProps} />
+            <Slot fill="Comment.Detail" commentId={comment.id} />
           </div>
         <div className="commentActionsRight comment__action-container">
           <ActionButton>
@@ -253,7 +247,6 @@ class Comment extends React.Component {
               reactKey={reply.id}
               key={reply.id}
               comment={reply}
-              pluginProps={pluginProps}
             />;
           })
         }

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

@@ -6,7 +6,6 @@ import isEqual from 'lodash/isEqual';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations';
 const lang = new I18n(translations);
-import {getPluginQueriesAndMutators} from 'coral-framework/helpers/plugins';
 
 import {TabBar, Tab, TabContent, Spinner} from 'coral-ui';
 
@@ -124,22 +123,9 @@ class Embed extends Component {
       ? asset.comments[0].created_at
       : new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
 
-    /**
-     * Plugins Section
-     *
-     */
-    const {state, ...currentProps} = this.props;
-
-    const pluginProps = {
-      state,
-      context: currentProps,
-      actions: this.pluginActions,
-    };
-
     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>
@@ -212,7 +198,6 @@ class Embed extends Component {
                 key={highlightedComment.id}
                 reactKey={highlightedComment.id}
                 comment={highlightedComment}
-                pluginProps={pluginProps}
               />
             }
             <NewCount
@@ -243,7 +228,6 @@ class Embed extends Component {
                 deleteAction={this.props.deleteAction}
                 showSignInDialog={this.props.showSignInDialog}
                 comments={asset.comments}
-                pluginProps={pluginProps}
               />
             </div>
           <LoadMore
@@ -274,19 +258,11 @@ class Embed extends Component {
   }
 }
 
-const mapStateToProps = (state) => Object
-  .keys(state)
-  .reduce((entry, key) => {
-    if (key !== 'apollo') {
-      entry.state[key] = state[key].toJS();
-    }
-    return entry;
-  }, {
-    auth: state.auth.toJS(),
-    userData: state.user.toJS(),
-    asset: state.asset.toJS(),
-    state: {}
-  });
+const mapStateToProps = state => ({
+  auth: state.auth.toJS(),
+  userData: state.user.toJS(),
+  asset: state.asset.toJS()
+});
 
 const mapDispatchToProps = dispatch => ({
   requestConfirmEmail: () => dispatch(requestConfirmEmail()),
@@ -310,5 +286,4 @@ export default compose(
   removeCommentTag,
   deleteAction,
   queryStream,
-  ...getPluginQueriesAndMutators(),
 )(Embed);

client/coral-framework/actions/asset.js

@@ -2,7 +2,7 @@ import * as actions from '../constants/asset';
 import coralApi from '../helpers/response';
 import {addNotification} from '../actions/notification';
 
-import I18n from '../../coral-framework/modules/i18n/i18n';
+import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from './../translations';
 const lang = new I18n(translations);
 

client/coral-framework/actions/auth.js

@@ -1,3 +1,5 @@
+import {gql} from 'react-apollo';
+import client from 'coral-framework/services/client';
 import I18n from '../../coral-framework/modules/i18n/i18n';
 import translations from './../translations';
 const lang = new I18n(translations);
@@ -5,6 +7,22 @@ import * as actions from '../constants/auth';
 import coralApi, {base} from '../helpers/response';
 import {pym} from 'coral-framework';
 
+// TODO: error reporting.
+
+const ME_QUERY = gql`
+  query Me {
+    me {
+      status
+    }
+  }
+`;
+
+function updateStore() {
+  return client.query({
+    fetchPolicy: 'network-only',
+    query: ME_QUERY});
+}
+
 // Dialog Actions
 export const showSignInDialog = (offset = 0) => ({type: actions.SHOW_SIGNIN_DIALOG, offset});
 export const hideSignInDialog = () => ({type: actions.HIDE_SIGNIN_DIALOG});
@@ -52,6 +70,7 @@ export const fetchSignIn = (formData) => (dispatch) => {
       const isAdmin = !!user && !!user.roles.filter(i => i === 'ADMIN').length;
       dispatch(signInSuccess(user, isAdmin));
       dispatch(hideSignInDialog());
+      updateStore();
     })
     .catch(error => {
       if (error.metadata) {
@@ -151,7 +170,10 @@ const logOutFailure = () => ({type: actions.LOGOUT_FAILURE});
 export const logout = () => dispatch => {
   dispatch(logOutRequest());
   return coralApi('/auth', {method: 'DELETE'})
-    .then(() => dispatch(logOutSuccess()))
+    .then(() => {
+      dispatch(logOutSuccess());
+      updateStore();
+    })
     .catch(error => dispatch(logOutFailure(error)));
 };
 

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

@@ -2,13 +2,19 @@ import React from 'react';
 import styles from './style.css';
 import Icon from './components/Icon';
 
+import {compose, gql, graphql} from 'react-apollo';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import {I18n} from 'coral-framework';
 import cn from 'classnames';
 import translations from './translations.json';
+import {withPostRespect} from './mutations';
 
 const lang = new I18n(translations);
 
 import {getActionSummary} from 'coral-framework/utils';
+import {showSignInDialog} from 'coral-framework/actions/auth';
+import {deleteAction} from 'coral-framework/graphql/mutations';
 
 class RespectButton extends React.Component {
   constructor(props) {
@@ -21,7 +27,9 @@ class RespectButton extends React.Component {
   }
 
   handleClick = () => {
-    const {comment, postRespect, showSignInDialog, currentUser, deleteAction} = this.props.context;
+    const {postRespect, showSignInDialog, deleteAction, commentId} = this.props;
+    const {me, comment} = this.props.data;
+
     const {localPost, localDelete} = this.state;
     const respect = getActionSummary('RespectActionSummary', comment);
     const respected = (respect && respect.current_user && !localDelete) || localPost;
@@ -30,8 +38,8 @@ class RespectButton extends React.Component {
      *  If the current user does not exist, trigger signIn Box
      */
 
-    if (!currentUser) {
-      const offset = document.getElementById(`c_${comment.id}`).getBoundingClientRect().top - 75;
+    if (!me) {
+      const offset = document.getElementById(`c_${commentId}`).getBoundingClientRect().top - 75;
       showSignInDialog(offset);
       return;
     }
@@ -40,7 +48,7 @@ class RespectButton extends React.Component {
      *  If the current user is banned, do nothing
      */
 
-    if (currentUser.banned) {
+    if (me.status === 'BANNED') {
       return;
     }
 
@@ -50,7 +58,7 @@ class RespectButton extends React.Component {
       });
 
       postRespect({
-        item_id: comment.id,
+        item_id: commentId,
         item_type: 'COMMENTS'
       }).then(({data}) => {
         this.setState({
@@ -65,9 +73,9 @@ class RespectButton extends React.Component {
   }
 
   render() {
-    const {comment} = this.props.context;
+    const {comment} = this.props.data;
     const {localPost, localDelete} = this.state;
-    const respect = getActionSummary('RespectActionSummary', comment);
+    const respect = comment && getActionSummary('RespectActionSummary', comment);
     const respected = (respect && respect.current_user && !localDelete) || localPost;
     let count = respect ? respect.count : 0;
 
@@ -88,5 +96,33 @@ class RespectButton extends React.Component {
   }
 }
 
-export default RespectButton;
+const withQuery = graphql(gql`
+  query CommentQuery($commentId: ID!) {
+    comment(id: $commentId) {
+      action_summaries {
+        ... on RespectActionSummary {
+          count
+          current_user {
+            id
+          }
+        }
+      }
+    }
+    me {
+      status
+    }
+  }
+`);
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({showSignInDialog}, dispatch);
+
+const enhance = compose(
+  connect(null, mapDispatchToProps),
+  deleteAction,
+  withPostRespect,
+  withQuery,
+);
+
+export default enhance(RespectButton);
 

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

@@ -1,7 +1,7 @@
 import {graphql} from 'react-apollo';
 import POST_RESPECT from './postRespect.graphql';
 
-export const postRespect = graphql(POST_RESPECT, {
+export const withPostRespect = graphql(POST_RESPECT, {
   props: ({mutate}) => ({
     postRespect: (respect) => {
       return mutate({