Remove global dependency on notification on admin

client/coral-admin/src/containers/SuspendUserDialog.js

@@ -5,22 +5,24 @@ import SuspendUserDialog from '../components/SuspendUserDialog';
 import {hideSuspendUserDialog} from '../actions/suspendUserDialog';
 import {withSetCommentStatus, withSuspendUser} from 'coral-framework/graphql/mutations';
 import {compose, gql} from 'react-apollo';
-import * as notification from 'coral-admin/src/services/notification';
 import t, {timeago} from 'coral-framework/services/i18n';
 import withQuery from 'coral-framework/hocs/withQuery';
+import {getErrorMessages} from 'coral-framework/utils';
 import get from 'lodash/get';
+import {notify} from 'coral-framework/actions/notification';
 
 class SuspendUserDialogContainer extends Component {
 
   suspendUser = async ({message, until}) => {
-    const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser} = this.props;
+    const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser, notify} = this.props;
     hideSuspendUserDialog();
     try {
       const result = await suspendUser({id: userId, message, until});
       if (result.data.suspendUser.errors) {
         throw result.data.suspendUser.errors;
       }
-      notification.success(
+      notify(
+        'success',
         t('suspenduser.notify_suspend_until', username, timeago(until)),
       );
       if (commentId && commentStatus && commentStatus !== 'REJECTED') {
@@ -33,7 +35,7 @@ class SuspendUserDialogContainer extends Component {
       }
     }
     catch(err) {
-      notification.showMutationErrors(err);
+      notify('error', getErrorMessages(err));
     }
   };
 
@@ -69,6 +71,7 @@ const mapStateToProps = ({suspendUserDialog: {open, userId, username, commentId,
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     hideSuspendUserDialog,
+    notify,
   }, dispatch),
 });
 

client/coral-admin/src/index.js

@@ -8,10 +8,13 @@ import App from './components/App';
 import 'react-mdl/extra/material.js';
 import graphqlExtension from './graphql';
 import pluginsConfig from 'pluginsConfig';
+import {toast} from 'react-toastify';
+import {createNotificationService} from './services/notification';
 
 smoothscroll.polyfill();
 
-const context = createContext({reducers, graphqlExtension, pluginsConfig});
+const notification = createNotificationService(toast);
+const context = createContext({reducers, graphqlExtension, pluginsConfig, notification});
 
 render(
   <TalkProvider {...context}>

client/coral-admin/src/routes/Moderation/containers/Moderation.js

@@ -27,6 +27,7 @@ import {
   clearState
 } from 'actions/moderation';
 import withQueueConfig from '../hoc/withQueueConfig';
+import {notify} from 'coral-framework/actions/notification';
 
 import {Spinner} from 'coral-ui';
 import Moderation from '../components/Moderation';
@@ -54,8 +55,15 @@ function getTab(props) {
 class ModerationContainer extends Component {
   subscriptions = [];
 
-  handleCommentChange = (root, comment, notify) => {
-    return handleCommentChange(root, comment, this.props.data.variables.sort, notify, this.props.queueConfig, this.activeTab);
+  handleCommentChange = (root, comment, notifyText) => {
+    return handleCommentChange(
+      root,
+      comment,
+      this.props.data.variables.sort,
+      () => notifyText && this.props.notify('info', notifyText),
+      this.props.queueConfig,
+      this.activeTab
+    );
   };
 
   get activeTab() {
@@ -79,10 +87,10 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentAccepted: comment}}}) => {
         const user = comment.status_history[comment.status_history.length - 1].assigned_by;
-        const notify = this.props.auth.user.id === user.id
+        const notifyText = this.props.auth.user.id === user.id
           ? ''
           : t('modqueue.notify_accepted', user.username, prepareNotificationText(comment.body));
-        return this.handleCommentChange(prev, comment, notify);
+        return this.handleCommentChange(prev, comment, notifyText);
       },
     });
 
@@ -91,10 +99,10 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentRejected: comment}}}) => {
         const user = comment.status_history[comment.status_history.length - 1].assigned_by;
-        const notify = this.props.auth.user.id === user.id
+        const notifyText = this.props.auth.user.id === user.id
           ? ''
           : t('modqueue.notify_rejected', user.username, prepareNotificationText(comment.body));
-        return this.handleCommentChange(prev, comment, notify);
+        return this.handleCommentChange(prev, comment, notifyText);
       },
     });
 
@@ -102,8 +110,8 @@ class ModerationContainer extends Component {
       document: COMMENT_EDITED_SUBSCRIPTION,
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentEdited: comment}}}) => {
-        const notify = t('modqueue.notify_edited', comment.user.username, prepareNotificationText(comment.body));
-        return this.handleCommentChange(prev, comment, notify);
+        const notifyText = t('modqueue.notify_edited', comment.user.username, prepareNotificationText(comment.body));
+        return this.handleCommentChange(prev, comment, notifyText);
       },
     });
 
@@ -112,8 +120,8 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentFlagged: comment}}}) => {
         const user = comment.actions[comment.actions.length - 1].user;
-        const notify = t('modqueue.notify_flagged', user.username, prepareNotificationText(comment.body));
-        return this.handleCommentChange(prev, comment, notify);
+        const notifyText = t('modqueue.notify_flagged', user.username, prepareNotificationText(comment.body));
+        return this.handleCommentChange(prev, comment, notifyText);
       },
     });
 
@@ -394,7 +402,8 @@ const mapDispatchToProps = (dispatch) => ({
     viewUserDetail,
     setSortOrder,
     storySearchChange,
-    clearState
+    clearState,
+    notify,
   }, dispatch),
 });
 

client/coral-admin/src/routes/Moderation/graphql.js

@@ -1,5 +1,4 @@
 import update from 'immutability-helper';
-import * as notification from 'coral-admin/src/services/notification';
 
 const limit = 10;
 
@@ -92,10 +91,7 @@ function getCommentQueues(comment, queueConfig) {
  * @param  {Object} root               current state of the store
  * @param  {Object} comment            comment that was changed
  * @param  {string} sort               current sort order of the queues
- * @param  {Object} [notify]           show know notifications if set
- * @param  {string} notify.activeQueue current active queue
- * @param  {string} notify.text        notification text to show
- * @param  {bool}   notify.anyQueue    if true show the notification when the comment is shown
+ * @param  {string} notify             callback to show notification
  *                                     in the current active queue besides the 'all' queue.
  * @param  {Object} queueConfig        queue configuration
  * @return {Object}                    next state of the store
@@ -110,7 +106,7 @@ export function handleCommentChange(root, comment, sort, notify, queueConfig, ac
     if (notificationShown) {
       return;
     }
-    notification.info(notify);
+    notify();
     notificationShown = true;
   };
 
@@ -119,13 +115,13 @@ export function handleCommentChange(root, comment, sort, notify, queueConfig, ac
       if (!queueHasComment(next, queue, comment.id)) {
         next = addCommentToQueue(next, queue, comment, sort);
         if (notify && activeQueue === queue && shouldCommentBeAdded(next, queue, comment, sort)) {
-          showNotificationOnce(comment);
+          showNotificationOnce();
         }
       }
     } else if(queueHasComment(next, queue, comment.id)){
       next = removeCommentFromQueue(next, queue, comment.id);
       if (notify && activeQueue === queue) {
-        showNotificationOnce(comment);
+        showNotificationOnce();
       }
     }
 
@@ -134,7 +130,7 @@ export function handleCommentChange(root, comment, sort, notify, queueConfig, ac
       && queueHasComment(next, queue, comment.id)
       && activeQueue === queue
     ) {
-      showNotificationOnce(comment);
+      showNotificationOnce();
     }
   });
   return next;

client/coral-admin/src/services/notification.js

@@ -1,26 +1,13 @@
-import t from 'coral-framework/services/i18n';
-import {toast} from 'react-toastify';
-
-export function success(msg) {
-  return toast(msg, {type: 'success'});
-}
-
-export function error(msg) {
-  return toast(msg, {type: 'error'});
-}
-
-export function info(msg) {
-  return toast(msg, {type: 'info'});
-}
-
-export function showMutationErrors(error) {
-  console.error(error);
-  if (error.errors) {
-    error.errors.forEach((err) => {
-      toast(
-        err.translation_key ? t(`error.${err.translation_key}`) : err,
-        {type: 'error'}
-      );
-    });
-  }
+export function createNotificationService(toast) {
+  return {
+    success(msg) {
+      toast(msg, {type: 'success'});
+    },
+    error(msg) {
+      toast(msg, {type: 'error'});
+    },
+    info(msg) {
+      toast(msg, {type: 'info'});
+    },
+  };
 }

plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js

@@ -21,14 +21,14 @@ class ModSubscription extends React.Component {
           assetId: this.props.data.variables.asset_id,
         },
         updateQuery: (prev, {subscriptionData: {data: {commentFeatured: {user, comment}}}}) => {
-          const notify = this.props.user.id === user.id
+          const notifyText = this.props.user.id === user.id
             ? ''
             : t(
               'talk-plugin-featured-comments.notify_featured',
               user.username,
               prepareNotificationText(comment.body),
             );
-          return this.props.handleCommentChange(prev, comment, notify);
+          return this.props.handleCommentChange(prev, comment, notifyText);
         },
       },
       {