From f4e4c1d810416957cfe4c79fee5f461dc92adace Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 23 Jan 2018 16:27:02 +0100 Subject: [PATCH] Notify on error (UserDetail) --- .../coral-admin/src/components/UserDetail.js | 38 ++++--------------- .../coral-admin/src/containers/UserDetail.js | 7 ++-- .../Moderation/containers/Moderation.js | 15 ++------ client/coral-framework/hocs/index.js | 1 + .../coral-framework/hocs/notifyOnDataError.js | 32 ++++++++++++++++ .../hocs/notifyOnMutationError.js | 17 +++++---- 6 files changed, 58 insertions(+), 52 deletions(-) create mode 100644 client/coral-framework/hocs/notifyOnDataError.js diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js index d226ac744..e99668b38 100644 --- a/client/coral-admin/src/components/UserDetail.js +++ b/client/coral-admin/src/components/UserDetail.js @@ -2,7 +2,6 @@ import React from 'react'; import cn from 'classnames'; import PropTypes from 'prop-types'; import capitalize from 'lodash/capitalize'; -import { getErrorMessages } from 'coral-framework/utils'; import styles from './UserDetail.css'; import AccountHistory from './AccountHistory'; import { Slot } from 'coral-framework/components'; @@ -29,43 +28,23 @@ import UserInfoTooltip from './UserInfoTooltip'; class UserDetail extends React.Component { rejectThenReload = async info => { - try { - await this.props.rejectComment(info); - this.props.data.refetch(); - } catch (err) { - console.error(err); - this.props.notify('error', getErrorMessages(err)); - } + await this.props.rejectComment(info); + this.props.data.refetch(); }; acceptThenReload = async info => { - try { - await this.props.acceptComment(info); - this.props.data.refetch(); - } catch (err) { - console.error(err); - this.props.notify('error', getErrorMessages(err)); - } + await this.props.acceptComment(info); + this.props.data.refetch(); }; bulkAcceptThenReload = async () => { - try { - await this.props.bulkAccept(); - this.props.data.refetch(); - } catch (err) { - console.error(err); - this.props.notify('error', getErrorMessages(err)); - } + await this.props.bulkAccept(); + this.props.data.refetch(); }; bulkRejectThenReload = async () => { - try { - await this.props.bulkReject(); - this.props.data.refetch(); - } catch (err) { - console.error(err); - this.props.notify('error', getErrorMessages(err)); - } + await this.props.bulkReject(); + this.props.data.refetch(); }; changeTab = tab => { @@ -371,7 +350,6 @@ UserDetail.propTypes = { selectedCommentIds: PropTypes.array.isRequired, viewUserDetail: PropTypes.any.isRequired, loadMore: PropTypes.any.isRequired, - notify: PropTypes.func.isRequired, showSuspendUserDialog: PropTypes.func, showBanUserDialog: PropTypes.func, unbanUser: PropTypes.func.isRequired, diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js index bd34ac4d8..ea9a3a5b2 100644 --- a/client/coral-admin/src/containers/UserDetail.js +++ b/client/coral-admin/src/containers/UserDetail.js @@ -24,9 +24,9 @@ import { } from 'coral-framework/graphql/mutations'; import UserDetailComment from './UserDetailComment'; import update from 'immutability-helper'; -import { notify } from 'coral-framework/actions/notification'; import { showBanUserDialog } from 'actions/banUserDialog'; import { showSuspendUserDialog } from 'actions/suspendUserDialog'; +import { notifyOnMutationError, notifyOnDataError } from 'coral-framework/hocs'; const commentConnectionFragment = gql` fragment CoralAdmin_UserDetail_CommentConnection on CommentConnection { @@ -271,7 +271,6 @@ const mapDispatchToProps = dispatch => ({ viewUserDetail, hideUserDetail, toggleSelectAllCommentInUserDetail, - notify, }, dispatch ), @@ -282,5 +281,7 @@ export default compose( withUserDetailQuery, withSetCommentStatus, withUnbanUser, - withUnsuspendUser + withUnsuspendUser, + notifyOnMutationError(['unbanUser', 'unsuspendUser', 'setCommentStatus']), + notifyOnDataError )(UserDetailContainer); diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js index c315cdca2..70dd2730d 100644 --- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js +++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js @@ -35,7 +35,7 @@ import { Spinner } from 'coral-ui'; import Moderation from '../components/Moderation'; import Comment from './Comment'; import baseQueueConfig from '../queueConfig'; -import { notifyOnMutationError } from 'coral-framework/hocs'; +import { notifyOnMutationError, notifyOnDataError } from 'coral-framework/hocs'; function prepareNotificationText(text) { return truncate(text, { length: 50 }).replace('\n', ' '); @@ -214,16 +214,6 @@ class ModerationContainer extends Component { ) { this.resubscribe(nextProps.data.variables); } - - // Notify on fetching errors. - if ( - (!this.props.data.error && nextProps.data.error) || - (this.props.data.error && - nextProps.data.error && - this.props.data.error.message !== nextProps.data.error.message) - ) { - return this.props.notify('error', nextProps.data.error.message); - } } cleanUpQueue = queue => { @@ -542,5 +532,6 @@ export default compose( connect(mapStateToProps, mapDispatchToProps), withSetCommentStatus, notifyOnMutationError(['setCommentStatus']), - withModQueueQuery + withModQueueQuery, + notifyOnDataError )(ModerationContainer); diff --git a/client/coral-framework/hocs/index.js b/client/coral-framework/hocs/index.js index 275f6df42..7094ad53d 100644 --- a/client/coral-framework/hocs/index.js +++ b/client/coral-framework/hocs/index.js @@ -7,3 +7,4 @@ export { default as excludeIf } from './excludeIf'; export { default as connect } from './connect'; export { default as withMergedSettings } from './withMergedSettings'; export { default as notifyOnMutationError } from './notifyOnMutationError'; +export { default as notifyOnDataError } from './notifyOnDataError'; diff --git a/client/coral-framework/hocs/notifyOnDataError.js b/client/coral-framework/hocs/notifyOnDataError.js new file mode 100644 index 000000000..77e675ba1 --- /dev/null +++ b/client/coral-framework/hocs/notifyOnDataError.js @@ -0,0 +1,32 @@ +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import { notify } from 'coral-framework/actions/notification'; +import { branch, lifecycle, compose } from 'recompose'; +import { get } from 'lodash'; + +const notifyOnMutationError = compose( + branch( + ({ notify }) => !notify, + connect(null, dispatch => + bindActionCreators( + { + notify, + }, + dispatch + ) + ) + ), + lifecycle({ + componentWillReceiveProps(next) { + if ( + get(next, 'data.error.message') && + get(this.props, 'data.error.message') !== + get(next, 'data.error.message') + ) { + return this.props.notify('error', next.data.error.message); + } + }, + }) +); + +export default notifyOnMutationError; diff --git a/client/coral-framework/hocs/notifyOnMutationError.js b/client/coral-framework/hocs/notifyOnMutationError.js index c9429ad15..4046d8927 100644 --- a/client/coral-framework/hocs/notifyOnMutationError.js +++ b/client/coral-framework/hocs/notifyOnMutationError.js @@ -3,16 +3,19 @@ import { bindActionCreators } from 'redux'; import { compose } from 'react-apollo'; import { notify } from 'coral-framework/actions/notification'; import { forEachError } from 'coral-framework/utils'; -import { withProps } from 'recompose'; +import { withProps, branch } from 'recompose'; const notifyOnMutationError = keys => compose( - connect(null, dispatch => - bindActionCreators( - { - notify, - }, - dispatch + branch( + ({ notify }) => !notify, + connect(null, dispatch => + bindActionCreators( + { + notify, + }, + dispatch + ) ) ), withProps(ownProps =>