From a23bad49c693cd621582b49f4b4a25dd14ae1e75 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 23 Aug 2017 03:48:20 +0700 Subject: [PATCH] Remove global dependency on notification on admin --- .../src/containers/SuspendUserDialog.js | 11 ++++-- client/coral-admin/src/index.js | 5 ++- .../Moderation/containers/Moderation.js | 31 ++++++++++------ .../src/routes/Moderation/graphql.js | 14 +++---- .../coral-admin/src/services/notification.js | 37 ++++++------------- .../client/containers/ModSubscription.js | 4 +- 6 files changed, 50 insertions(+), 52 deletions(-) diff --git a/client/coral-admin/src/containers/SuspendUserDialog.js b/client/coral-admin/src/containers/SuspendUserDialog.js index bd95328a3..f60014832 100644 --- a/client/coral-admin/src/containers/SuspendUserDialog.js +++ b/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), }); diff --git a/client/coral-admin/src/index.js b/client/coral-admin/src/index.js index f433af4c2..2b0a982b4 100644 --- a/client/coral-admin/src/index.js +++ b/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( diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js index 8df83da2a..0b9fc2f38 100644 --- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js +++ b/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), }); diff --git a/client/coral-admin/src/routes/Moderation/graphql.js b/client/coral-admin/src/routes/Moderation/graphql.js index 0d4991f72..2039fb0e5 100644 --- a/client/coral-admin/src/routes/Moderation/graphql.js +++ b/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; diff --git a/client/coral-admin/src/services/notification.js b/client/coral-admin/src/services/notification.js index 5e8673060..7ad85692b 100644 --- a/client/coral-admin/src/services/notification.js +++ b/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'}); + }, + }; } diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js b/plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js index 82f323530..0e9fc8c89 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js +++ b/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); }, }, {