Refactor notification

client/coral-embed-stream/src/actions/asset.js

@@ -1,5 +1,5 @@
 import * as actions from '../constants/asset';
-import {addNotification} from 'coral-framework/actions/notification';
+import {notify} from 'coral-framework/actions/notification';
 
 import t from 'coral-framework/services/i18n';
 
@@ -16,7 +16,7 @@ export const updateConfiguration = (newConfig) => (dispatch, getState, {rest}) =
   dispatch(updateAssetSettingsRequest());
   rest(`/assets/${assetId}/settings`, {method: 'PUT', body: newConfig})
     .then(() => {
-      dispatch(addNotification('success', t('framework.success_update_settings')));
+      dispatch(notify('success', t('framework.success_update_settings')));
       dispatch(updateAssetSettingsSuccess(newConfig));
     })
     .catch((error) => {
@@ -30,7 +30,7 @@ export const updateOpenStream = (closedBody) => (dispatch, getState, {rest}) =>
   dispatch(fetchAssetRequest());
   rest(`/assets/${assetId}/status`, {method: 'PUT', body: closedBody})
     .then(() => {
-      dispatch(addNotification('success', t('framework.success_update_settings')));
+      dispatch(notify('success', t('framework.success_update_settings')));
       dispatch(fetchAssetSuccess(closedBody));
     })
     .catch((error) => {

client/coral-embed-stream/src/actions/auth.js

@@ -2,7 +2,7 @@ import jwtDecode from 'jwt-decode';
 import bowser from 'bowser';
 import * as actions from '../constants/auth';
 import * as Storage from 'coral-framework/helpers/storage';
-import {addNotification} from 'coral-framework/actions/notification';
+import {notify} from 'coral-framework/actions/notification';
 
 import t from 'coral-framework/services/i18n';
 
@@ -387,7 +387,7 @@ export const editName = (username) => (dispatch, _, {rest}) => {
   return rest('/account/username', {method: 'PUT', body: {username}})
     .then(() => {
       dispatch(editUsernameSuccess());
-      dispatch(addNotification('success', t('framework.success_name_update')));
+      dispatch(notify('success', t('framework.success_name_update')));
     })
     .catch((error) => {
       console.error(error);

client/coral-embed-stream/src/components/AllCommentsPane.js

@@ -87,7 +87,7 @@ class AllCommentsPane extends React.Component {
       })
       .catch((error) => {
         this.setState({loadingState: 'error'});
-        forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
+        forEachError(error, ({msg}) => {this.props.notify('error', msg);});
       });
   }
 
@@ -129,7 +129,7 @@ class AllCommentsPane extends React.Component {
       ignoreUser,
       setActiveReplyBox,
       activeReplyBox,
-      addNotification,
+      notify,
       disableReply,
       postComment,
       asset,
@@ -166,7 +166,7 @@ class AllCommentsPane extends React.Component {
                   disableReply={disableReply}
                   setActiveReplyBox={setActiveReplyBox}
                   activeReplyBox={activeReplyBox}
-                  addNotification={addNotification}
+                  notify={notify}
                   depth={0}
                   postComment={postComment}
                   asset={asset}

client/coral-embed-stream/src/components/Comment.js

@@ -152,7 +152,7 @@ export default class Comment extends React.Component {
     deleteAction: PropTypes.func.isRequired,
     parentId: PropTypes.string,
     highlighted: PropTypes.string,
-    addNotification: PropTypes.func.isRequired,
+    notify: PropTypes.func.isRequired,
     postComment: PropTypes.func.isRequired,
     depth: PropTypes.number.isRequired,
     liveUpdates: PropTypes.bool,
@@ -205,7 +205,7 @@ export default class Comment extends React.Component {
   onClickEdit (e) {
     e.preventDefault();
     if (!can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
-      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
+      this.props.notify('error', t('error.NOT_AUTHORIZED'));
       return;
     }
     this.setState({isEditing: true});
@@ -235,7 +235,7 @@ export default class Comment extends React.Component {
         })
         .catch((error) => {
           this.setState({loadingState: 'error'});
-          forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
+          forEachError(error, ({msg}) => {this.props.notify('error', msg);});
         });
       emit('ui.Comment.showMoreReplies', {id});
       return;
@@ -252,7 +252,7 @@ export default class Comment extends React.Component {
     if (can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
       this.props.setActiveReplyBox(this.props.comment.id);
     } else {
-      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
+      this.props.notify('error', t('error.NOT_AUTHORIZED'));
     }
     return;
   }
@@ -331,7 +331,7 @@ export default class Comment extends React.Component {
       deleteAction,
       disableReply,
       maxCharCount,
-      addNotification,
+      notify,
       charCountEnable,
       showSignInDialog,
       liveUpdates,
@@ -475,7 +475,7 @@ export default class Comment extends React.Component {
                     <TopRightMenu
                       comment={comment}
                       ignoreUser={ignoreUser}
-                      addNotification={addNotification} />
+                      notify={notify} />
                   </span>
               }
               { !isActive &&
@@ -487,7 +487,7 @@ export default class Comment extends React.Component {
                 this.state.isEditing
                 ? <EditableCommentContent
                     editComment={this.editComment}
-                    addNotification={addNotification}
+                    notify={notify}
                     comment={comment}
                     currentUser={currentUser}
                     charCountEnable={charCountEnable}
@@ -539,7 +539,7 @@ export default class Comment extends React.Component {
                         id={comment.id}
                         author_id={comment.user.id}
                         postFlag={postFlag}
-                        addNotification={addNotification}
+                        notify={notify}
                         postDontAgree={postDontAgree}
                         deleteAction={deleteAction}
                         showSignInDialog={showSignInDialog}
@@ -560,7 +560,7 @@ export default class Comment extends React.Component {
               maxCharCount={maxCharCount}
               setActiveReplyBox={setActiveReplyBox}
               parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
-              addNotification={addNotification}
+              notify={notify}
               postComment={postComment}
               currentUser={currentUser}
               assetId={asset.id}
@@ -577,7 +577,7 @@ export default class Comment extends React.Component {
                 setActiveReplyBox={setActiveReplyBox}
                 disableReply={disableReply}
                 activeReplyBox={activeReplyBox}
-                addNotification={addNotification}
+                notify={notify}
                 parentId={comment.id}
                 postComment={postComment}
                 editComment={this.props.editComment}

client/coral-embed-stream/src/components/EditableCommentContent.js

@@ -17,7 +17,7 @@ export class EditableCommentContent extends React.Component {
   static propTypes = {
 
     // show notification to the user (e.g. for errors)
-    addNotification: PropTypes.func.isRequired,
+    notify: PropTypes.func.isRequired,
 
     // comment that is being edited
     comment: PropTypes.shape({
@@ -74,26 +74,26 @@ export class EditableCommentContent extends React.Component {
 
   handleSubmit = async () => {
     if (!can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
-      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
+      this.props.notify('error', t('error.NOT_AUTHORIZED'));
       return;
     }
 
     this.setState({loadingState: 'loading'});
 
-    const {editComment, addNotification, stopEditing} = this.props;
+    const {editComment, notify, stopEditing} = this.props;
     if (typeof editComment !== 'function') {return;}
     let response;
     try {
       response = await editComment({body: this.state.body});
       this.setState({loadingState: 'success'});
       const status = response.data.editComment.comment.status;
-      notifyForNewCommentStatus(this.props.addNotification, status);
+      notifyForNewCommentStatus(this.props.notify, status);
       if (typeof stopEditing === 'function') {
         stopEditing();
       }
     } catch (error) {
       this.setState({loadingState: 'error'});
-      forEachError(error, ({msg}) => addNotification('error', msg));
+      forEachError(error, ({msg}) => notify('error', msg));
     }
   }
 

client/coral-embed-stream/src/components/Stream.js

@@ -59,7 +59,7 @@ class Stream extends React.Component {
       commentClassNames,
       root: {asset, asset: {comment, comments, totalCommentCount}},
       postComment,
-      addNotification,
+      notify,
       editComment,
       postFlag,
       postDontAgree,
@@ -147,7 +147,7 @@ class Stream extends React.Component {
                 />}
               {showCommentBox &&
                 <CommentBox
-                  addNotification={addNotification}
+                  notify={notify}
                   postComment={postComment}
                   appendItemArray={appendItemArray}
                   updateItem={updateItem}
@@ -185,7 +185,7 @@ class Stream extends React.Component {
                 ignoreUser={ignoreUser}
                 setActiveReplyBox={setActiveReplyBox}
                 activeReplyBox={activeReplyBox}
-                addNotification={addNotification}
+                notify={notify}
                 depth={0}
                 disableReply={!open}
                 postComment={postComment}
@@ -241,7 +241,7 @@ class Stream extends React.Component {
                       ignoreUser={ignoreUser}
                       setActiveReplyBox={setActiveReplyBox}
                       activeReplyBox={activeReplyBox}
-                      addNotification={addNotification}
+                      notify={notify}
                       disableReply={!open}
                       postComment={postComment}
                       asset={asset}
@@ -270,7 +270,7 @@ class Stream extends React.Component {
 }
 
 Stream.propTypes = {
-  addNotification: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,
 
   // dispatch action to ignore another user

client/coral-embed-stream/src/components/TopRightMenu.js

@@ -18,7 +18,7 @@ export class TopRightMenu extends React.Component {
     ignoreUser: PropTypes.func,
 
     // show notification to the user (e.g. for errors)
-    addNotification: PropTypes.func.isRequired,
+    notify: PropTypes.func.isRequired,
   }
   constructor(props) {
     super(props);
@@ -27,7 +27,7 @@ export class TopRightMenu extends React.Component {
     };
   }
   render() {
-    const {comment, ignoreUser, addNotification} = this.props;
+    const {comment, ignoreUser, notify} = this.props;
 
     // timesReset is used as Toggleable key so it re-renders on reset (closing the toggleable)
     const reset = () => this.setState({timesReset: this.state.timesReset + 1});
@@ -40,7 +40,7 @@ export class TopRightMenu extends React.Component {
       try {
         await ignoreUser({id});
       } catch (error) {
-        addNotification('error', 'Failed to ignore user');
+        notify('error', 'Failed to ignore user');
         throw error;
       }
     };

client/coral-embed-stream/src/containers/Embed.js

@@ -14,7 +14,7 @@ import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {withQuery} from 'coral-framework/hocs';
 import Embed from '../components/Embed';
 import Stream from './Stream';
-import {addNotification} from 'coral-framework/actions/notification';
+import {notify} from 'coral-framework/actions/notification';
 import t from 'coral-framework/services/i18n';
 import PropTypes from 'prop-types';
 import {setActiveTab} from '../actions/embed';
@@ -34,19 +34,19 @@ class EmbedContainer extends React.Component {
       const newSubscriptions = [{
         document: USER_BANNED_SUBSCRIPTION,
         updateQuery: () => {
-          addNotification('info', t('your_account_has_been_banned'));
+          notify('info', t('your_account_has_been_banned'));
         },
       },
       {
         document: USER_SUSPENDED_SUBSCRIPTION,
         updateQuery: () => {
-          addNotification('info', t('your_account_has_been_suspended'));
+          notify('info', t('your_account_has_been_suspended'));
         },
       },
       {
         document: USERNAME_REJECTED_SUBSCRIPTION,
         updateQuery: () => {
-          addNotification('info', t('your_username_has_been_rejected'));
+          notify('info', t('your_username_has_been_rejected'));
         },
       }];
 
@@ -193,7 +193,7 @@ const mapDispatchToProps = (dispatch) =>
       checkLogin,
       setActiveTab,
       fetchAssetSuccess,
-      addNotification,
+      notify,
       focusSignInDialog,
       blurSignInDialog,
       hideSignInDialog,

client/coral-embed-stream/src/containers/Stream.js

@@ -26,7 +26,7 @@ import {
 } from '../graphql/utils';
 
 const {showSignInDialog, editName} = authActions;
-const {addNotification} = notificationActions;
+const {notify} = notificationActions;
 
 class StreamContainer extends React.Component {
   subscriptions = [];
@@ -303,7 +303,7 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     showSignInDialog,
-    addNotification,
+    notify,
     setActiveReplyBox,
     editName,
     viewAllComments,

client/coral-framework/actions/notification.js

@@ -1,18 +1,22 @@
 import * as actions from '../constants/notification';
 
 export const notify = (kind, msg) => (dispatch, _, {notification}) => {
-  switch (kind) {
-  case 'error':
-    notification.error(msg);
-    break;
-  case 'info':
-    notification.info(msg);
-    break;
-  case 'success':
-    notification.success(msg);
-    break;
-  default:
-    throw new Error(`Unknown notification kind ${kind}`);
-  }
-  dispatch({type: actions.NOTIFY, kind, msg});
+  const messages = Array.isArray(msg) ? msg : [msg];
+
+  messages.forEach((message) => {
+    switch (kind) {
+    case 'error':
+      notification.error(message);
+      break;
+    case 'info':
+      notification.info(message);
+      break;
+    case 'success':
+      notification.success(message);
+      break;
+    default:
+      throw new Error(`Unknown notification kind ${kind}`);
+    }
+    dispatch({type: actions.NOTIFY, kind, message});
+  });
 };

client/coral-framework/utils/index.js

@@ -147,6 +147,12 @@ export function forEachError(error, callback) {
   });
 }
 
+export function getErrorMessages(error) {
+  const result = [];
+  forEachError(error, ({msg}) => result.push(msg));
+  return result;
+}
+
 const ascending = (a, b) => {
   const dateA = new Date(a.created_at);
   const dateB = new Date(b.created_at);

client/talk-plugin-commentbox/CommentBox.js

@@ -12,11 +12,11 @@ export const name = 'talk-plugin-commentbox';
 
 // Given a newly posted comment's status, show a notification to the user
 // if needed
-export const notifyForNewCommentStatus = (addNotification, status) => {
+export const notifyForNewCommentStatus = (notify, status) => {
   if (status === 'REJECTED') {
-    addNotification('error', t('comment_box.comment_post_banned_word'));
+    notify('error', t('comment_box.comment_post_banned_word'));
   } else if (status === 'PREMOD') {
-    addNotification('success', t('comment_box.comment_post_notif_premod'));
+    notify('success', t('comment_box.comment_post_notif_premod'));
   }
 };
 
@@ -45,12 +45,12 @@ class CommentBox extends React.Component {
       postComment,
       assetId,
       parentId,
-      addNotification,
+      notify,
       currentUser,
     } = this.props;
 
     if (!can(currentUser, 'INTERACT_WITH_COMMUNITY')) {
-      addNotification('error', t('error.NOT_AUTHORIZED'));
+      notify('error', t('error.NOT_AUTHORIZED'));
       return;
     }
 
@@ -73,7 +73,7 @@ class CommentBox extends React.Component {
         // Execute postSubmit Hooks
         this.state.hooks.postSubmit.forEach((hook) => hook(data));
 
-        notifyForNewCommentStatus(addNotification, postedComment.status);
+        notifyForNewCommentStatus(notify, postedComment.status);
 
         if (commentPostedHandler) {
           commentPostedHandler();
@@ -81,7 +81,7 @@ class CommentBox extends React.Component {
       })
       .catch((err) => {
         this.setState({loadingState: 'error'});
-        forEachError(err, ({msg}) => addNotification('error', msg));
+        forEachError(err, ({msg}) => notify('error', msg));
       });
   }
 
@@ -186,7 +186,7 @@ CommentBox.propTypes = {
   currentUser: PropTypes.object.isRequired,
   isReply: PropTypes.bool.isRequired,
   canPost: PropTypes.bool,
-  addNotification: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = ({commentBox}) => ({commentBox});

client/talk-plugin-flags/components/FlagButton.js

@@ -42,7 +42,7 @@ export default class FlagButton extends Component {
         this.setState({showMenu: true});
       }
     } else {
-      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
+      this.props.notify('error', t('error.NOT_AUTHORIZED'));
     }
   }
 

client/talk-plugin-history/CommentHistory.js

@@ -17,7 +17,7 @@ class CommentHistory extends React.Component {
       })
       .catch((error) => {
         this.setState({loadingState: 'error'});
-        forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
+        forEachError(error, ({msg}) => {this.props.notify('error', msg);});
       });
   }
 

client/talk-plugin-replies/ReplyBox.js

@@ -19,7 +19,7 @@ class ReplyBox extends Component {
       postComment,
       assetId,
       currentUser,
-      addNotification,
+      notify,
       parentId,
       commentPostedHandler,
       maxCharCount,
@@ -32,7 +32,7 @@ class ReplyBox extends Component {
         commentPostedHandler={commentPostedHandler}
         parentId={parentId}
         onCancel={this.cancelReply}
-        addNotification={addNotification}
+        notify={notify}
         currentUser={currentUser}
         assetId={assetId}
         postComment={postComment}
@@ -47,7 +47,7 @@ ReplyBox.propTypes = {
   setActiveReplyBox: PropTypes.func.isRequired,
   commentPostedHandler: PropTypes.func,
   parentId: PropTypes.string,
-  addNotification: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,
   assetId: PropTypes.string.isRequired
 };