Notify on error (UserDetail)

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,

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);

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);

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';

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;

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 =>