From e2a361276b49d9b0114f25c42708e838140a6684 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 19 Jan 2018 15:33:34 +0100
Subject: [PATCH] show notification on errors

---
 .../Community/containers/FlaggedAccounts.js   |  2 ++
 .../containers/RejectUsernameDialog.js        |  6 +++-
 client/coral-framework/hocs/index.js          |  1 +
 .../hocs/notifyOnMutationError.js             | 35 +++++++++++++++++++
 4 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 client/coral-framework/hocs/notifyOnMutationError.js

diff --git a/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js
index 1d7e089e2..09240b8f3 100644
--- a/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js
+++ b/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js
@@ -15,6 +15,7 @@ import { handleFlaggedUsernameChange } from '../graphql';
 import { notify } from 'coral-framework/actions/notification';
 import { isFlaggedUserDangling } from '../utils';
 import t from 'coral-framework/services/i18n';
+import { notifyOnMutationError } from 'coral-framework/hocs';
 
 import FlaggedAccounts from '../components/FlaggedAccounts';
 import FlaggedUser from '../containers/FlaggedUser';
@@ -294,6 +295,7 @@ const mapDispatchToProps = dispatch =>
 export default compose(
   connect(null, mapDispatchToProps),
   withApproveUsername,
+  notifyOnMutationError(['approveUsername']),
   withQuery(
     gql`
       query TalkAdmin_Community_FlaggedAccounts {
diff --git a/client/coral-admin/src/routes/Community/containers/RejectUsernameDialog.js b/client/coral-admin/src/routes/Community/containers/RejectUsernameDialog.js
index 325eadfb5..f9ada0945 100644
--- a/client/coral-admin/src/routes/Community/containers/RejectUsernameDialog.js
+++ b/client/coral-admin/src/routes/Community/containers/RejectUsernameDialog.js
@@ -4,6 +4,8 @@ import { hideRejectUsernameDialog } from '../../../actions/community';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { compose } from 'react-apollo';
+import { notify } from 'coral-framework/actions/notification';
+import { notifyOnMutationError } from 'coral-framework/hocs';
 
 const mapStateToProps = state => ({
   user: state.community.user,
@@ -14,11 +16,13 @@ const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       handleClose: hideRejectUsernameDialog,
+      notify,
     },
     dispatch
   );
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  withRejectUsername
+  withRejectUsername,
+  notifyOnMutationError(['rejectUsername'])
 )(RejectUsernameDialog);
diff --git a/client/coral-framework/hocs/index.js b/client/coral-framework/hocs/index.js
index 174f25a63..275f6df42 100644
--- a/client/coral-framework/hocs/index.js
+++ b/client/coral-framework/hocs/index.js
@@ -6,3 +6,4 @@ export { default as withEmit } from './withEmit';
 export { default as excludeIf } from './excludeIf';
 export { default as connect } from './connect';
 export { default as withMergedSettings } from './withMergedSettings';
+export { default as notifyOnMutationError } from './notifyOnMutationError';
diff --git a/client/coral-framework/hocs/notifyOnMutationError.js b/client/coral-framework/hocs/notifyOnMutationError.js
new file mode 100644
index 000000000..c9429ad15
--- /dev/null
+++ b/client/coral-framework/hocs/notifyOnMutationError.js
@@ -0,0 +1,35 @@
+import { connect } from 'react-redux';
+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';
+
+const notifyOnMutationError = keys =>
+  compose(
+    connect(null, dispatch =>
+      bindActionCreators(
+        {
+          notify,
+        },
+        dispatch
+      )
+    ),
+    withProps(ownProps =>
+      keys.reduce((props, key) => {
+        props[key] = async (...args) => {
+          try {
+            return await ownProps[key](...args);
+          } catch (e) {
+            forEachError(e, ({ msg }) => {
+              ownProps.notify('error', msg);
+            });
+            throw e;
+          }
+        };
+        return props;
+      }, {})
+    )
+  );
+
+export default notifyOnMutationError;