Merge branch 'master' into story-134624635

client/coral-admin/src/actions/auth.js

@@ -14,7 +14,10 @@ export const checkLogin = () => dispatch => {
       const isAdmin = !!result.user.roles.filter(i => i === 'ADMIN').length;
       dispatch(checkLoginSuccess(result.user, isAdmin));
     })
-    .catch(error => dispatch(checkLoginFailure(error)));
+    .catch(error => {
+      console.error(error);
+      dispatch(checkLoginFailure(`${error.message}`));
+    });
 };
 
 // LogOut Actions

client/coral-admin/src/actions/comments.js

@@ -15,17 +15,18 @@ export const fetchModerationQueueComments = () => {
 
     return Promise.all([
       coralApi('/queue/comments/pending'),
+      coralApi('/queue/users/pending'),
       coralApi('/queue/comments/rejected'),
       coralApi('/queue/comments/flagged')
     ])
-    .then(([pending, rejected, flagged]) => {
+    .then(([pendingComments, pendingUsers, rejected, flagged]) => {
 
       /* Combine seperate calls into a single object */
       flagged.comments.forEach(comment => comment.flagged = true);
       return {
-        comments: [...pending.comments, ...rejected.comments, ...flagged.comments],
-        users: [...pending.users, ...rejected.users, ...flagged.users],
-        actions: [...pending.actions, ...rejected.actions, ...flagged.actions]
+        comments: [...pendingComments.comments, ...rejected.comments, ...flagged.comments],
+        users: [...pendingComments.users, ...pendingUsers.users, ...rejected.users, ...flagged.users],
+        actions: [...pendingComments.actions, ...pendingUsers.actions, ...rejected.actions, ...flagged.actions]
       };
     })
     .then(addUsersCommentsActions.bind(this, dispatch));
@@ -41,6 +42,15 @@ export const fetchPendingQueue = () => {
   };
 };
 
+export const fetchPendingUsersQueue = () => {
+  return dispatch => {
+    dispatch({type: commentTypes.COMMENTS_MODERATION_QUEUE_FETCH_REQUEST});
+
+    return coralApi('/queue/users/pending')
+      .then(addUsersCommentsActions.bind(this, dispatch));
+  };
+};
+
 export const fetchRejectedQueue = () => {
   return dispatch => {
     dispatch({type: commentTypes.COMMENTS_MODERATION_QUEUE_FETCH_REQUEST});

client/coral-admin/src/actions/users.js

@@ -1,5 +1,5 @@
 import coralApi from '../../../coral-framework/helpers/response';
-import * as actions from '../constants/user';
+import * as userTypes from '../constants/users';
 
 /**
  * Action disptacher related to users
@@ -7,9 +7,17 @@ import * as actions from '../constants/user';
 // change status of a user
 export const userStatusUpdate = (status, userId, commentId) => {
   return (dispatch) => {
-    dispatch({type: actions.UPDATE_STATUS_REQUEST});
+    dispatch({type: userTypes.UPDATE_STATUS_REQUEST});
     return coralApi(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
-      .then(res => dispatch({type: actions.UPDATE_STATUS_SUCCESS, res}))
-      .catch(error => dispatch({type: actions.UPDATE_STATUS_FAILURE, error}));
+      .then(res => dispatch({type: userTypes.UPDATE_STATUS_SUCCESS, res}))
+      .catch(error => dispatch({type: userTypes.UPDATE_STATUS_FAILURE, error}));
+  };
+};
+
+// change status of a user
+export const sendNotificationEmail = (userId, subject, body) => {
+  return (dispatch) => {
+    return coralApi(`/users/${userId}/email`, {method: 'POST', body: {subject, body}})
+      .catch(error => dispatch({type: userTypes.USER_EMAIL_FAILURE, error}));
   };
 };

client/coral-admin/src/components/ActionButton.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styles from './ModerationList.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations.json';
+import {FabButton, Button, Icon} from 'coral-ui';
+
+const ActionButton = ({option, type, comment = {}, user, menuOptionsMap, onClickAction, onClickShowBanDialog}) =>
+{
+  const banned = user.status === 'BANNED';
+
+  if (option === 'flag' && (type === 'USERS' || comment.status || comment.flagged === true)) {
+    return null;
+  }
+  if (option === 'ban') {
+    return (
+      <div className={styles.ban}>
+        <Button
+          className={`ban ${styles.banButton}`}
+          cStyle='darkGrey'
+          disabled={banned ? 'disabled' : ''}
+          onClick={() => onClickShowBanDialog(user.id, user.displayName, comment.id)
+          }
+          raised
+        >
+          <Icon name='not_interested' className={styles.banIcon} />
+          {lang.t('comment.ban_user')}
+        </Button>
+      </div>
+    );
+  }
+  const menuOption = menuOptionsMap[option];
+  const action = {
+    item_type: type,
+    item_id: type === 'COMMENTS' ? comment.id : user.id
+  };
+  return (
+    <FabButton
+      className={`${option} ${styles.actionButton}`}
+      cStyle={option}
+      icon={menuOption.icon}
+      onClick={() => onClickAction(menuOption.status, type === 'COMMENTS' ? comment : user, action)}
+    />
+  );
+};
+
+export default ActionButton;
+
+const lang = new I18n(translations);

client/coral-admin/src/components/BanUserDialog.js

@@ -35,7 +35,7 @@ const BanUserDialog = ({open, handleClose, onClickBanUser, user = {}}) => (
         <Button cStyle="cancel" className={styles.cancel} onClick={() => handleClose()} raised>
           {lang.t('bandialog.cancel')}
         </Button>
-        <Button cStyle="black" className={styles.ban} onClick={() => onClickBanUser(user.userId, user.commentId)} raised>
+        <Button cStyle="black" className={styles.ban} onClick={() => onClickBanUser('BANNED', user.userId, user.commentId)} raised>
           {lang.t('bandialog.yes_ban_user')}
         </Button>
       </div>

client/coral-admin/src/components/Comment.js

@@ -2,18 +2,19 @@ import React from 'react';
 import timeago from 'timeago.js';
 import Linkify from 'react-linkify';
 
-import styles from './CommentList.css';
+import styles from './ModerationList.css';
 
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
 
 import Highlighter from 'react-highlight-words';
-import {FabButton, Button, Icon} from 'coral-ui';
+import {Icon} from 'coral-ui';
+import ActionButton from './ActionButton';
 
 const linkify = new Linkify();
 
 // Render a single comment for the list
-export default props => {
+const Comment = props => {
   const {comment, author} = props;
   let authorStatus = author.status;
   const links = linkify.getMatches(comment.body);
@@ -30,7 +31,18 @@ export default props => {
           {links ?
           <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
           <div className={`actions ${styles.actions}`}>
-            {props.modActions.map((action, i) => getActionButton(action, i, props))}
+            {props.modActions.map(
+              (action, i) =>
+              <ActionButton
+                option={action}
+                key={i}
+                type='COMMENTS'
+                comment={comment}
+                user={author}
+                menuOptionsMap={props.menuOptionsMap}
+                onClickAction={props.onClickAction}
+                onClickShowBanDialog={props.onClickShowBanDialog}/>
+            )}
           </div>
           {authorStatus === 'banned' ?
           <span className={styles.banned}><Icon name='error_outline'/> {lang.t('comment.banned_user')}</span> : null}
@@ -49,43 +61,7 @@ export default props => {
   );
 };
 
-// Get the button of the action performed over a comment if any
-const getActionButton = (action, i, props) => {
-  const {comment, author} = props;
-  const status = comment.status;
-  const flagged = comment.flagged;
-  const banned = (author.status === 'banned');
-
-  if (action === 'flag' && (status || flagged === true)) {
-    return null;
-  }
-  if (action === 'ban') {
-    return (
-      <div className={styles.ban}>
-        <Button
-          className={`ban ${styles.banButton}`}
-          cStyle='darkGrey'
-          disabled={banned ? 'disabled' : ''}
-          onClick={() => props.onClickShowBanDialog(author.id, author.displayName, comment.id)}
-          key={i}
-          raised
-        >
-          <Icon name='not_interested' className={styles.banIcon} />
-          {lang.t('comment.ban_user')}
-        </Button>
-      </div>
-    );
-  }
-  return (
-    <FabButton
-      className={`${action} ${styles.actionButton}`}
-      cStyle={action}
-      icon={props.actionsMap[action].icon}
-      key={i}
-      onClick={() => props.onClickAction(props.actionsMap[action].status, comment)}
-    />
-  );
-};
+export default Comment;
 
 const linkStyles = {
   backgroundColor: 'rgb(255, 219, 135)',

client/coral-admin/src/components/CommentList.js

@@ -1,166 +0,0 @@
-import React, {PropTypes} from 'react';
-import styles from './CommentList.css';
-import key from 'keymaster';
-import Hammer from 'hammerjs';
-import Comment from 'components/Comment';
-
-// Each action has different meaning and configuration
-const modActions = {
-  'reject': {status: 'REJECTED', icon: 'close', key: 'r'},
-  'approve': {status: 'ACCEPTED', icon: 'done', key: 't'},
-  'flag': {status: 'FLAGGED', icon: 'flag', filter: 'Untouched'},
-  'ban': {status: 'BANNED', icon: 'not interested'}
-};
-
-// Renders a comment list and allow performing actions
-export default class CommentList extends React.Component {
-  static propTypes = {
-    isActive: PropTypes.bool,
-    singleView: PropTypes.bool,
-    commentIds: PropTypes.arrayOf(PropTypes.string).isRequired,
-    comments: PropTypes.object.isRequired,
-    users: PropTypes.object.isRequired,
-    onClickAction: PropTypes.func,
-
-    // list of actions (flags, etc) associated with the comments
-    modActions: PropTypes.arrayOf(PropTypes.string).isRequired,
-    loading: PropTypes.bool,
-
-    suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired
-  }
-
-  constructor (props) {
-    super(props);
-
-    this.state = {active: null};
-    this.onClickAction = this.onClickAction.bind(this);
-    this.onClickShowBanDialog = this.onClickShowBanDialog.bind(this);
-  }
-
-  // remove key handlers before leaving
-  componentWillUnmount () {
-    this.unbindKeyHandlers();
-  }
-
-  // add key handlers and gestures
-  componentDidMount () {
-    this.bindKeyHandlers();
-
-    // this.bindGestures() // need to check whether we're on a mobile device or this throws an Error
-  }
-
-  // If entering to singleview and no active, active is the first eleement
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.singleView && !this.state.active) {
-      this.setState({active: nextProps.commentIds[0]});
-    }
-  }
-
-  // Add swipe to approve or reject
-  bindGestures () {
-    const {modActions} = this.props;
-    this._hammer = new Hammer(this.base);
-    this._hammer.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
-
-    if (modActions.indexOf('reject') !== -1) {
-      this._hammer.on('swipeleft', () => this.props.singleView && this.actionKeyHandler('Rejected'));
-    }
-    if (modActions.indexOf('approve') !== -1) {
-      this._hammer.on('swiperight', () => this.props.singleView && this.actionKeyHandler('Approved'));
-    }
-  }
-
-  // Add key handlers. Each action has one and added j/k for moving around
-  bindKeyHandlers () {
-    this.props.modActions.filter(action => modActions[action].key).forEach(action => {
-      key(modActions[action].key, 'commentList', () => this.props.isActive && this.actionKeyHandler(modActions[action].status));
-    });
-    key('j', 'commentList', () => this.props.isActive && this.moveKeyHandler('down'));
-    key('k', 'commentList', () => this.props.isActive && this.moveKeyHandler('up'));
-    key.setScope('commentList');
-  }
-
-  // Perform an action using the keys only if the comment is active
-  actionKeyHandler (action) {
-    if (this.props.isActive && this.state.active) {
-      this.onClickAction(action, this.state.active);
-    }
-  }
-
-  // move around with j/k
-  moveKeyHandler (direction) {
-    if (!this.props.isActive) {
-      return;
-    }
-
-    const {commentIds} = this.props;
-    const {active} = this.state;
-
-    // check boundaries
-    if (active === null || !commentIds.length) {
-      this.setState({active: commentIds[0]});
-    } else if (direction === 'up' && active !== commentIds[0]) {
-      this.setState({active: commentIds[commentIds.indexOf(active) - 1]});
-    } else if (direction === 'down' && active !== commentIds[commentIds.length - 1]) {
-      this.setState({active: commentIds[commentIds.indexOf(active) + 1]});
-    }
-
-    // scroll to the position
-    const index = Math.max(commentIds.indexOf(this.state.active), 0);
-    this.base.childNodes[index] && this.base.childNodes[index].focus();
-  }
-
-  unbindKeyHandlers () {
-    key.deleteScope('commentList');
-  }
-
-  // If we are performing an action over a comment (aka removing from the list) we need to select a new active.
-  // TODO: In the future this can be improved and look at the actual state to
-  // resolve since the content of the list could change externally. For now it works as expected
-  onClickAction (action, id, author_id) {
-
-    // activate the next comment
-    if (id === this.state.active) {
-      const {commentIds} = this.props;
-      if (commentIds[commentIds.length - 1] === this.state.active) {
-        this.setState({active: commentIds[commentIds.length - 2]});
-      } else {
-        this.setState({active: commentIds[Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.length - 1)]});
-      }
-    }
-    this.props.onClickAction(action, id, author_id);
-  }
-
-  onClickShowBanDialog(userId, userName, commentId) {
-    this.props.onClickShowBanDialog(userId, userName, commentId);
-  }
-
-  render () {
-    const {singleView, commentIds, comments, users, hideActive, key, suspectWords} = this.props;
-    const {active} = this.state;
-
-    return (
-      <ul
-        className={`${styles.list} ${singleView ? styles.singleView : ''}`} {...key}
-        id='commentList'
-      >
-        {commentIds.map((commentId, index) => {
-          const comment = comments[commentId];
-          const author = users[comment.author_id];
-          return <Comment
-            suspectWords={suspectWords}
-            comment={comment}
-            author={author}
-            key={index}
-            index={index}
-            onClickAction={this.onClickAction}
-            onClickShowBanDialog={this.onClickShowBanDialog}
-            modActions={this.props.modActions}
-            actionsMap={modActions}
-            isActive={commentId === active}
-            hideActive={hideActive} />;
-        })}
-      </ul>
-    );
-  }
-}

client/coral-admin/src/components/Modal.css

@@ -19,7 +19,6 @@
 
 .inner {
   width: 100vw;
-  height: 100vh;
   background-color: #fff;
   box-shadow: 2px 2px 5px 0px rgba(153,153,153,1);
   padding: 20px;
@@ -37,7 +36,6 @@
 @media (--big-viewport) {
   .inner {
     width: 600px;
-    height: 50vh;
     border-radius: 4px;
   }
 }

client/coral-admin/src/components/ModerationList.css

@@ -69,6 +69,7 @@
     justify-content: space-between;
 
     .author {
+      min-width: 230px;
       display: flex;
       align-items: center;
     }
@@ -112,6 +113,12 @@
     padding-top: 15px;
     padding-left: 10px;
   }
+
+  .flagCount{
+    font-size: 12px;
+    color: #d32f2f;
+  }
+
 }
 
 .empty {

client/coral-admin/src/components/ModerationList.js

@@ -0,0 +1,227 @@
+import React, {PropTypes} from 'react';
+import styles from './ModerationList.css';
+import key from 'keymaster';
+import Hammer from 'hammerjs';
+import Comment from './Comment';
+import UserAction from './UserAction';
+import SuspendUserModal from './SuspendUserModal';
+
+// Each action has different meaning and configuration
+const menuOptionsMap = {
+  'reject': {status: 'REJECTED', icon: 'close', key: 'r'},
+  'approve': {status: 'ACCEPTED', icon: 'done', key: 't'},
+  'flag': {status: 'FLAGGED', icon: 'flag', filter: 'Untouched'},
+  'ban': {status: 'BANNED', icon: 'not interested'}
+};
+
+// Renders a comment list and allow performing actions
+export default class ModerationList extends React.Component {
+  static propTypes = {
+    isActive: PropTypes.bool,
+    singleView: PropTypes.bool,
+    commentIds: PropTypes.arrayOf(PropTypes.string),
+    actionIds: PropTypes.arrayOf(PropTypes.string),
+    comments: PropTypes.object,
+    users: PropTypes.object.isRequired,
+    actions: PropTypes.object,
+    userStatusUpdate: PropTypes.func.isRequired,
+    suspendUser: PropTypes.func.isRequired,
+
+    // list of actions (flags, etc) associated with the comments
+    modActions: PropTypes.arrayOf(PropTypes.string).isRequired,
+    loading: PropTypes.bool,
+
+    suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired
+  }
+
+  state = {active: null, suspendUserModal: null, email: null};
+
+  // remove key handlers before leaving
+  componentWillUnmount () {
+    this.unbindKeyHandlers();
+  }
+
+  // add key handlers and gestures
+  componentDidMount () {
+    this.bindKeyHandlers();
+
+    // this.bindGestures() // need to check whether we're on a mobile device or this throws an Error
+  }
+
+  // If entering to singleview and no active, active is the first eleement
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.singleView && !this.state.active) {
+      this.setState({active: nextProps.commentIds[0]});
+    }
+  }
+
+  // Add swipe to approve or reject
+  bindGestures () {
+    const {modActions} = this.props;
+    this._hammer = new Hammer(this.base);
+    this._hammer.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
+
+    if (modActions.indexOf('reject') !== -1) {
+      this._hammer.on('swipeleft', () => this.props.singleView && this.actionKeyHandler('Rejected'));
+    }
+    if (modActions.indexOf('approve') !== -1) {
+      this._hammer.on('swiperight', () => this.props.singleView && this.actionKeyHandler('Approved'));
+    }
+  }
+
+  // Add key handlers. Each action has one and added j/k for moving around
+  bindKeyHandlers () {
+    const {modActions, isActive} = this.props;
+    modActions.filter(action => menuOptionsMap[action].key).forEach(action => {
+      key(menuOptionsMap[action].key, 'moderationList', () => isActive && this.actionKeyHandler(menuOptionsMap[action].status));
+    });
+    key('j', 'moderationList', () => isActive && this.moveKeyHandler('down'));
+    key('k', 'moderationList', () => isActive && this.moveKeyHandler('up'));
+    key.setScope('moderationList');
+  }
+
+  // Perform an action using the keys only if the comment is active
+  actionKeyHandler (action) {
+    if (this.props.isActive && this.state.active) {
+      this.onClickAction(action, this.state.active);
+    }
+  }
+
+  // move around with j/k
+  moveKeyHandler (direction) {
+    if (!this.props.isActive) {
+      return;
+    }
+
+    const {commentIds} = this.props;
+    const {active} = this.state;
+
+    // check boundaries
+    if (active === null || !commentIds.length) {
+      this.setState({active: commentIds[0]});
+    } else if (direction === 'up' && active !== commentIds[0]) {
+      this.setState({active: commentIds[commentIds.indexOf(active) - 1]});
+    } else if (direction === 'down' && active !== commentIds[commentIds.length - 1]) {
+      this.setState({active: commentIds[commentIds.indexOf(active) + 1]});
+    }
+
+    // scroll to the position
+    const index = Math.max(commentIds.indexOf(this.state.active), 0);
+    this.base.childNodes[index] && this.base.childNodes[index].focus();
+  }
+
+  unbindKeyHandlers () {
+    key.deleteScope('moderationList');
+  }
+
+  // If we are performing an action over a comment (aka removing from the list) we need to select a new active.
+  // TODO: In the future this can be improved and look at the actual state to
+  // resolve since the content of the list could change externally. For now it works as expected
+  onClickAction = (menuOption, id, action) => {
+
+    // activate the next comment
+    if (id === this.state.active) {
+      const moderationIds = this.getModerationIds();
+      if (moderationIds[moderationIds.length - 1] === this.state.active) {
+        this.setState({active: moderationIds[moderationIds.length - 2]});
+      } else {
+        this.setState({active: moderationIds[Math.min(moderationIds.indexOf(this.state.active) + 1, moderationIds.length - 1)]});
+      }
+    }
+
+    // Update the status right away if this is a comment
+    if (action.item_type === 'COMMENTS') {
+      this.props.updateCommentStatus(menuOption, id);
+    } else if (action.item_type === 'USERS') {
+
+      // If a user bio or name is rejected, bring up a dialog before suspending them.
+      if (menuOption === 'REJECTED') {
+        this.setState({suspendUserModal: action});
+      } else if (menuOption === 'ACCEPTED') {
+        this.props.userStatusUpdate('ACTIVE', action.item_id);
+      }
+    }
+  }
+
+  onClickShowBanDialog = (userId, userName, commentId) => {
+    this.props.onClickShowBanDialog(userId, userName, commentId);
+  }
+
+  mapModItems = (itemId, index) => {
+
+    const {comments = {}, users, actions = {}, modActions, suspectWords, hideActive} = this.props;
+    const {active} = this.state;
+
+    // Because ids are unique, the id will either appear as an action or as a comment.
+
+    const item = comments[itemId] || actions[itemId];
+    let modItem;
+
+    if (item.body) {
+
+      // If the item is a comment...
+      const author = users[item.author_id];
+      modItem = <Comment
+        suspectWords={suspectWords}
+        comment={item}
+        author={author}
+        key={index}
+        index={index}
+        onClickAction={this.onClickAction}
+        onClickShowBanDialog={this.onClickShowBanDialog}
+        modActions={modActions}
+        menuOptionsMap={menuOptionsMap}
+        isActive={itemId === active}
+        hideActive={hideActive} />;
+    } else {
+
+      // If the item is an action...
+      const user = users[item.item_id];
+      modItem = user && <UserAction
+        suspectWords={suspectWords}
+        action={item}
+        user={user}
+        key={index}
+        index={index}
+        onClickAction={this.onClickAction}
+        onClickShowBanDialog={this.onClickShowBanDialog}
+        modActions={modActions}
+        menuOptionsMap={menuOptionsMap}
+        isActive={itemId === active}
+        hideActive={hideActive} />;
+    }
+    return modItem;
+  }
+
+  getModerationIds = () => {
+    const {commentIds = [], actionIds = [], comments, actions} = this.props;
+    if (comments && actions) {
+      return [ ...commentIds, ...actionIds ].sort((a, b) => {
+        const itemA = comments[a] || actions[a];
+        const itemB = comments[b] || actions[b];
+        return itemB.updated_at - itemA.updated_at;
+      });
+    } else {
+      return comments ? commentIds : actionIds;
+    }
+  }
+
+  render () {
+    const {singleView, key, suspendUser} = this.props;
+
+    // Combine moderations and actions into a single stream and sort by most recently updated.
+    const moderationIds = this.getModerationIds();
+
+    return (
+      <ul
+        className={`${styles.list} ${singleView ? styles.singleView : ''}`} {...key}
+        id='moderationList'>
+        {moderationIds.map(this.mapModItems)}
+        <SuspendUserModal
+          action = {this.state.suspendUserModal}
+          onClose={() => this.setState({suspendUserModal:null})}
+          suspendUser={suspendUser} />
+      </ul>
+    );
+  }
+}

client/coral-admin/src/components/SuspendUserModal.css

@@ -0,0 +1,31 @@
+
+.modalButtons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 50px;
+}
+
+.emailInput {
+  border-radius: 3px;
+  width: 100%;
+  padding: 10px;
+  font-size: 14px;
+}
+
+.writeContainer {
+    margin-top: 20px;
+}
+
+.emailContainer {
+  display: flex;
+}
+
+.emailMessage {
+  font-weight: 800;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 800;
+  margin-bottom: 20px;
+}

client/coral-admin/src/components/SuspendUserModal.js

@@ -0,0 +1,106 @@
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations.json';
+import React, {Component, PropTypes} from 'react';
+import Modal from 'components/Modal';
+import styles from './SuspendUserModal.css';
+import {Button} from 'coral-ui';
+
+const stages = [
+  {
+    title: 'suspenduser.title_0',
+    description: 'suspenduser.description_0',
+    options: {
+      'j': 'suspenduser.no_cancel',
+      'k': 'suspenduser.yes_suspend'
+    }
+  },
+  {
+    title: 'suspenduser.title_1',
+    description: 'suspenduser.description_1',
+    options: {
+      'j': 'bandialog.cancel',
+      'k': 'suspenduser.send'
+    }
+  }
+];
+
+class SuspendUserModal extends Component  {
+
+  state = {email: '', stage: 0}
+
+  static propTypes = {
+    stage: PropTypes.number,
+    actionType: PropTypes.string,
+    onClose: PropTypes.func.isRequired,
+    suspendUser: PropTypes.func.isRequired
+  }
+
+  componentDidMount() {
+    const about = this.props.actionType === 'flag_bio' ? lang.t('suspenduser.bio') : lang.t('suspenduser.username');
+    this.setState({email: lang.t('suspenduser.email', about)});
+  }
+
+  /*
+  * When an admin clicks to suspend a user a dialog is shown, this function
+  * handles the possible actions for that dialog.
+  */
+  onActionClick = (stage, menuOption) => () => {
+    const {suspendUser, action} = this.props;
+    const {stage, email} = this.state;
+    const cancel = this.props.onClose;
+    const next = () => this.setState({stage: stage + 1});
+    const suspend = () => suspendUser(action.item_id, lang.t('suspenduser.email_subject'), email)
+      .then(this.props.onClose);
+    const suspendModalActions = [
+      [ cancel, next ],
+      [ cancel, suspend ]
+    ];
+    return suspendModalActions[stage][menuOption]();
+  }
+
+  onEmailChange = (e) => this.setState({email: e.target.value})
+
+  render () {
+    const {action, onClose} = this.props;
+
+    if (!action) {
+      return null;
+    }
+
+    const {stage} = this.state;
+    const actionType = action.actionType;
+    const about = actionType === 'flag_bio' ? lang.t('suspenduser.bio') : lang.t('suspenduser.username');
+    return <Modal open={true} onClose={onClose}>
+        <div className={styles.title}>{lang.t(stages[stage].title, about)}</div>
+        <div className={styles.container}>
+          <div className={styles.description}>
+            {lang.t(stages[stage].description, about)}
+          </div>
+          {
+            stage === 1 &&
+            <div className={styles.writeContainer}>
+              <div className={styles.emailMessage}>{lang.t('suspenduser.write_message')}</div>
+              <div className={styles.emailContainer}>
+                <textarea
+                  rows={5}
+                  className={styles.emailInput}
+                  value={this.state.email}
+                  onChange={this.onEmailChange}/>
+              </div>
+            </div>
+          }
+          <div className={styles.modalButtons}>
+            {Object.keys(stages[stage].options).map((key, i) => (
+              <Button key={i} onClick={this.onActionClick(stage, i)}>
+                {lang.t(stages[stage].options[key], about)}
+              </Button>
+            ))}
+        </div>
+        </div>
+      </Modal>;
+  }
+}
+
+export default SuspendUserModal;
+
+const lang = new I18n(translations);

client/coral-admin/src/components/UserAction.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import Linkify from 'react-linkify';
+
+import styles from './ModerationList.css';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations.json';
+
+import {Icon} from 'react-mdl';
+import Highlighter from 'react-highlight-words';
+import ActionButton from './ActionButton';
+
+const linkify = new Linkify();
+
+// Render a single comment for the list
+const UserAction = props => {
+  const {action, user} = props;
+  let userStatus = user.status;
+  const links = user.settings.bio ? linkify.getMatches(user.settings.bio) : [];
+
+  // Do not display unless the user status is 'pending' or 'banned'.
+  // This means that they have already been reviewed and approved.
+  return (userStatus === 'PENDING' ||  userStatus === 'BANNED') &&
+    <li tabIndex={props.index} className={`mdl-card mdl-shadow--2dp ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
+      <div className={styles.itemHeader}>
+        <div className={styles.author}>
+          <span>{user.displayName}</span>
+          </div>
+        <div className={styles.sideActions}>
+          {links ?
+          <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
+          <div className={`actions ${styles.actions}`}>
+            {props.modActions.map(
+              (action, i) =>
+              <ActionButton
+                option={action}
+                key={i}
+                type='USERS'
+                user={user}
+                menuOptionsMap={props.menuOptionsMap}
+                onClickAction={props.onClickAction}
+                onClickShowBanDialog={props.onClickShowBanDialog}/>
+            )}
+          </div>
+        </div>
+        <div>
+          {userStatus === 'banned' ?
+          <span className={styles.banned}><Icon name='error_outline'/> {lang.t('comment.banned_user')}</span> : null}
+        </div>
+      </div>
+      {
+        user.settings.bio &&
+        <div>
+          <div className={styles.itemBody}>
+            <div>{lang.t('user.user_bio')}:</div>
+            <span className={styles.body}>
+              <Linkify  component='span' properties={{style: linkStyles}}>
+                <Highlighter
+                  searchWords={props.suspectWords}
+                  textToHighlight={user.settings.bio} />
+              </Linkify>
+            </span>
+          </div>
+        </div>
+      }
+      <div className={styles.flagCount}>
+        {`${action.count} ${action.action_type === 'flag_bio' ? lang.t('user.bio_flags') : lang.t('user.username_flags')}`}
+      </div>
+    </li>;
+};
+
+export default UserAction;
+
+const linkStyles = {
+  backgroundColor: 'rgb(255, 219, 135)',
+  padding: '1px 2px'
+};
+
+const lang = new I18n(translations);

client/coral-admin/src/constants/users.js

@@ -1,3 +1,5 @@
 export const UPDATE_STATUS_REQUEST = 'UPDATE_STATUS_REQUEST';
 export const UPDATE_STATUS_SUCCESS = 'UPDATE_STATUS_SUCCESS';
 export const UPDATE_STATUS_FAILURE = 'UPDATE_STATUS_FAILURE';
+export const USER_EMAIL_FAILURE = 'USER_EMAIL_FAILURE';
+export const USERS_MODERATION_QUEUE_FETCH_SUCCESS = 'USERS_MODERATION_QUEUE_FETCH_SUCCESS';

client/coral-admin/src/containers/CommentStream/CommentStream.js

@@ -3,11 +3,11 @@ import styles from './CommentStream.css';
 import {Snackbar} from 'react-mdl';
 import {connect} from 'react-redux';
 import {createComment, flagComment} from 'actions/comments';
-import CommentList from 'components/CommentList';
+import ModerationList from 'components/ModerationList';
 import CommentBox from 'components/CommentBox';
 
 /**
- * Renders a comment stream using a CommentList component
+ * Renders a comment stream using a ModerationList component
  * and adds a box for adding a new comment
  */
 
@@ -39,12 +39,12 @@ class CommentStream extends React.Component {
     }
   }
 
-  // Render the comment box along with the CommentList
+  // Render the comment box along with the ModerationList
   render ({comments, users}, {snackbar, snackbarMsg}) {
     return (
       <div className={styles.container}>
-        <CommentBox onSubmit={this.onSubmit}/>
-        <CommentList isActive hideActive
+        <CommentBox onSubmit={this.onSubmit} />
+        <ModerationList isActive hideActive
           singleView={false}
           commentIds={comments.ids}
           comments={comments.byId}

client/coral-admin/src/containers/LayoutContainer.js

@@ -32,4 +32,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(LayoutContainer);
-

client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js

@@ -11,7 +11,7 @@ import {
   fetchFlaggedQueue,
   fetchModerationQueueComments,
 } from 'actions/comments';
-import {userStatusUpdate} from 'actions/users';
+import {userStatusUpdate, sendNotificationEmail} from 'actions/users';
 import {fetchSettings} from 'actions/settings';
 
 import ModerationQueue from './ModerationQueue';
@@ -22,7 +22,7 @@ class ModerationContainer extends React.Component {
     super(props);
 
     this.state = {
-      activeTab: 'pending',
+      activeTab: 'all',
       singleView: false,
       modalOpen: false
     };
@@ -74,7 +74,7 @@ class ModerationContainer extends React.Component {
   }
 
   render () {
-    const {comments} = this.props;
+    const {comments, actions} = this.props;
     const premodIds = comments.ids.filter(id => comments.byId[id].status === 'PREMOD');
     const rejectedIds = comments.ids.filter(id => comments.byId[id].status === 'REJECTED');
     const flaggedIds = comments.ids.filter(id =>
@@ -82,12 +82,14 @@ class ModerationContainer extends React.Component {
         comments.byId[id].status !== 'REJECTED' &&
         comments.byId[id].status !== 'ACCEPTED'
       );
+    const userActionIds = actions.ids.filter(id => actions.byId[id].item_type === 'USERS');
 
     return (
       <ModerationQueue
         onTabClick={this.onTabClick}
         onClose={this.onClose}
         premodIds={premodIds}
+        userActionIds={userActionIds}
         rejectedIds={rejectedIds}
         flaggedIds={flaggedIds}
         {...this.props}
@@ -100,7 +102,8 @@ class ModerationContainer extends React.Component {
 const mapStateToProps = state => ({
   comments: state.comments.toJS(),
   settings: state.settings.toJS(),
-  users: state.users.toJS()
+  users: state.users.toJS(),
+  actions: state.actions.toJS(),
 });
 
 const mapDispatchToProps = dispatch => {
@@ -112,9 +115,13 @@ const mapDispatchToProps = dispatch => {
     fetchFlaggedQueue: () => dispatch(fetchFlaggedQueue()),
     showBanUserDialog: (userId, userName, commentId) => dispatch(showBanUserDialog(userId, userName, commentId)),
     hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
-    banUser: (userId, commentId) => dispatch(userStatusUpdate('BANNED', userId, commentId)).then(() => {
+    userStatusUpdate: (status, userId, commentId) => dispatch(userStatusUpdate(status, userId, commentId)).then(() => {
       dispatch(fetchModerationQueueComments());
     }),
+    suspendUser: (userId, subject, text) => dispatch(userStatusUpdate('suspended', userId))
+    .then(() => dispatch(sendNotificationEmail(userId, subject, text)))
+    .then(() => dispatch(fetchModerationQueueComments()))
+    ,
     updateStatus: (action, comment) => dispatch(updateStatus(action, comment))
   };
 };

client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './ModerationQueue.css';
 
 import ModerationKeysModal from 'components/ModerationKeysModal';
-import CommentList from 'components/CommentList';
+import ModerationList from 'components/ModerationList';
 import BanUserDialog from 'components/BanUserDialog';
 
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -10,23 +10,40 @@ import translations from '../../translations.json';
 
 const lang = new I18n(translations);
 
-export default ({onTabClick, ...props}) => (
+export default (props) => (
   <div>
     <div className='mdl-tabs'>
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
+        <a href='#all'
+           onClick={(e) => {
+             e.preventDefault();
+             props.onTabClick('all');
+           }}
+           className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'all' ? styles.active : ''}`}
+        >
+          {lang.t('modqueue.all')}
+        </a>
         <a href='#pending'
            onClick={(e) => {
              e.preventDefault();
-             onTabClick('pending');
+             props.onTabClick('pending');
            }}
            className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'pending' ? styles.active : ''}`}
         >
           {lang.t('modqueue.pending')}
         </a>
+        <a href='#account'
+          onClick={(e) => {
+            e.preventDefault();
+            props.onTabClick('account');
+          }}
+         className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'account' ? styles.active : ''}`}>
+         {lang.t('modqueue.account')}
+       </a>
         <a href='#rejected'
            onClick={(e) => {
              e.preventDefault();
-             onTabClick('rejected');
+             props.onTabClick('rejected');
            }}
            className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'rejected' ? styles.active : ''}`}
         >
@@ -35,69 +52,146 @@ export default ({onTabClick, ...props}) => (
         <a href='#flagged'
            onClick={(e) => {
              e.preventDefault();
-             onTabClick('flagged');
+             props.onTabClick('flagged');
            }}
            className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'flagged' ? styles.active : ''}`}
         >
           {lang.t('modqueue.flagged')}
         </a>
       </div>
-      <div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='pending'>
+      <div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='all'>
         {
-          props.activeTab === 'pending'
-          ? <div>
-              <CommentList
-                suspectWords={props.settings.settings.wordlist.suspect}
-                isActive={props.activeTab === 'pending'}
-                singleView={props.singleView}
-                commentIds={props.premodIds}
-                comments={props.comments.byId}
-                users={props.users.byId}
-                onClickAction={props.updateStatus}
-                onClickShowBanDialog={props.showBanUserDialog}
-                modActions={['reject', 'approve', 'ban']}
-                loading={props.comments.loading} />
-              <BanUserDialog
-                open={props.comments.showBanUserDialog}
-                handleClose={props.hideBanUserDialog}
-                onClickBanUser={props.banUser}
-                user={props.comments.banUser} />
-            </div>
-          : null
+          props.activeTab === 'all' &&
+          <div>
+            <ModerationList
+              suspectWords={props.settings.settings.wordlist.suspect}
+              isActive={props.activeTab === 'all'}
+              singleView={props.singleView}
+              commentIds={[...props.premodIds, ...props.flaggedIds]}
+              comments={props.comments.byId}
+              users={props.users.byId}
+              actionIds={props.userActionIds}
+              actions={props.actions.byId}
+              userStatusUpdate={props.userStatusUpdate}
+              suspendUser={props.suspendUser}
+              updateCommentStatus={props.updateStatus}
+              onClickShowBanDialog={props.showBanUserDialog}
+              modActions={['reject', 'approve', 'ban']}
+              loading={props.comments.loading}/>
+            <BanUserDialog
+              open={props.comments.showBanUserDialog}
+              handleClose={props.hideBanUserDialog}
+              onClickBanUser={props.userStatusUpdate}
+              user={props.comments.banUser}
+            />
+          </div>
         }
       </div>
-      <div className={`mdl-tabs__panel ${styles.listContainer}`} id='rejected'>
-      {
-        props.activeTab === 'rejected'
-        ? <CommentList
-            suspectWords={props.settings.settings.wordlist.suspect}
-            isActive={props.activeTab === 'rejected'}
-            singleView={props.singleView}
-            commentIds={props.rejectedIds}
-            comments={props.comments.byId}
-            users={props.users.byId}
-            onClickAction={props.updateStatus}
-            modActions={['approve']}
-            loading={props.comments.loading} />
-        : null
-      }
+      <div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='pending'>
+        {
+          props.activeTab === 'pending' &&
+          <div>
+            <ModerationList
+              suspectWords={props.settings.settings.wordlist.suspect}
+              isActive={props.activeTab === 'pending'}
+              singleView={props.singleView}
+              commentIds={props.premodIds}
+              comments={props.comments.byId}
+              users={props.users.byId}
+              actions={props.actions.byId}
+              userStatusUpdate={props.userStatusUpdate}
+              suspendUser={props.suspendUser}
+              updateCommentStatus={props.updateStatus}
+              onClickShowBanDialog={props.showBanUserDialog}
+              modActions={['reject', 'approve', 'ban']}
+              loading={props.comments.loading}/>
+            <BanUserDialog
+              open={props.comments.showBanUserDialog}
+              handleClose={props.hideBanUserDialog}
+              onClickBanUser={props.userStatusUpdate}
+              user={props.comments.banUser}
+            />
+          </div>
+        }
+      </div>
+      <div className={`mdl-tabs__panel ${styles.listContainer}`} id='account'>
+        {
+          props.activeTab === 'account' &&
+          <div>
+            <ModerationList
+              suspectWords={props.settings.settings.wordlist.suspect}
+              isActive={props.activeTab === 'account'}
+              singleView={props.singleView}
+              users={props.users.byId}
+              actionIds={props.userActionIds}
+              actions={props.actions.byId}
+              userStatusUpdate={props.userStatusUpdate}
+              suspendUser={props.suspendUser}
+              updateCommentStatus={props.updateStatus}
+              onClickShowBanDialog={props.showBanUserDialog}
+              modActions={['reject', 'approve', 'ban']}
+              loading={props.comments.loading}/>
+            <BanUserDialog
+              open={props.comments.showBanUserDialog}
+              handleClose={props.hideBanUserDialog}
+              onClickBanUser={props.userStatusUpdate}
+              user={props.comments.banUser}
+            />
+          </div>
+        }
       </div>
       <div className={`mdl-tabs__panel ${styles.listContainer}`} id='flagged'>
       {
-        props.activeTab === 'flagged'
-        ? <CommentList
+        props.activeTab === 'flagged' &&
+        <div>
+          <ModerationList
             suspectWords={props.settings.settings.wordlist.suspect}
             isActive={props.activeTab === 'flagged'}
             singleView={props.singleView}
             commentIds={props.flaggedIds}
+            userStatusUpdate={props.userStatusUpdate}
+            suspendUser={props.suspendUser}
             comments={props.comments.byId}
             users={props.users.byId}
-            onClickAction={props.updateStatus}
+            updateCommentStatus={props.updateStatus}
             modActions={['reject', 'approve']}
-            loading={props.comments.loading} />
-        : null
-      }
+            loading={props.comments.loading}/>
+          <BanUserDialog
+            open={props.comments.showBanUserDialog}
+            handleClose={props.hideBanUserDialog}
+            onClickBanUser={props.userStatusUpdate}
+            user={props.comments.banUser}
+          />
+        </div>
+        }
        </div>
+       <div className={`mdl-tabs__panel ${styles.listContainer}`} id='rejected'>
+       {
+         props.activeTab === 'rejected' &&
+         <div>
+           <ModerationList
+             suspectWords={props.settings.settings.wordlist.suspect}
+             isActive={props.activeTab === 'rejected'}
+             singleView={props.singleView}
+             commentIds={props.rejectedIds}
+             userStatusUpdate={props.userStatusUpdate}
+             suspendUser={props.suspendUser}
+             comments={props.comments.byId}
+             users={props.users.byId}
+             updateCommentStatus={props.updateStatus}
+             modActions={['approve']}
+             loading={props.comments.loading}
+           />
+           <BanUserDialog
+             open={props.comments.showBanUserDialog}
+             handleClose={props.hideBanUserDialog}
+             onClickBanUser={props.userStatusUpdate}
+             user={props.comments.banUser}
+           />
+         </div>
+       }
+       </div>
+
       <ModerationKeysModal open={props.modalOpen} onClose={props.closeModal} />
     </div>
   </div>

client/coral-admin/src/reducers/actions.js

@@ -1,8 +1,9 @@
-import {Map, Set} from 'immutable';
+import {Map, Set, fromJS} from 'immutable';
 import * as types from '../constants/actions';
 
 const initialState = Map({
-  ids: Set()
+  ids: Set(),
+  byId: Map()
 });
 
 export default (state = initialState, action) => {
@@ -14,11 +15,13 @@ export default (state = initialState, action) => {
 };
 
 const addActions = (state, action) => {
-  const ids = action.actions.map(action => action.item_id);
+  
+  // Make ids that are unique by item_id and by action type
+  const typeId = (action) => `${action.action_type}_${action.item_id}`;
+  const ids = action.actions.map(action => typeId(action));
   const map = action.actions.reduce((memo, action) => {
-    memo[action.item_id] = action;
+    memo[typeId(action)] = action;
     return memo;
   }, {});
-  const newIds = state.get('ids').concat(ids);
-  return state.merge(map).set('ids', newIds);
+  return state.set('byId', fromJS(map)).set('ids', new Set(ids));
 };

client/coral-admin/src/reducers/comments.js

@@ -1,5 +1,5 @@
 import * as actions from '../constants/comments';
-import * as userActions from '../constants/user';
+import * as userActions from '../constants/users';
 import {Map, List, fromJS} from 'immutable';
 
 /**

client/coral-admin/src/translations.json

@@ -16,9 +16,11 @@
       "loading": "Loading results"
     },
     "modqueue": {
+      "all": "all",
       "pending": "pending",
       "rejected": "rejected",
       "flagged": "flagged",
+      "account": "account flags",
       "shortcuts": "Shortcuts",
       "close": "Close",
       "actions": "Actions",
@@ -37,6 +39,11 @@
       "ban_user": "Ban User",
       "banned_user": "Banned User"
     },
+    "user": {
+      "user_bio": "User Bio",
+      "bio_flags": "flags for this bio",
+      "username_flags": "flags for this username"
+    },
     "embedlink": {
       "copy": "Copy to Clipboard"
     },
@@ -79,6 +86,20 @@
       "cancel": "Cancel",
       "yes_ban_user": "Yes, Ban User"
     },
+    "suspenduser": {
+      "title_0": "We noticed you rejected a {0}",
+      "description_0": "Would you like to temporarily ban this user becuase of their {0}? Doing so will temporarily hide their comments until they rewrite their {0}.",
+      "title_1": "Notify the user of their temporary suspension",
+      "description_1": "Suspending this user will temporarily disable their account and hide all of their comments on the site.",
+      "no_cancel": "No, cancel",
+      "yes_suspend": "Yes, suspend",
+      "send": "Send",
+      "bio": "bio",
+      "username": "username",
+      "email_subject": "Your account has been suspended",
+      "email": "Another member of the community recently flagged your {0} for review. Because of its content your {0} was rejected. This means you can no longer comment, like, or flag content until you rewrite your {0}. Please e-mail moderator@newsorg.com if you have any questions or concerns.",
+      "write_message": "Write a message"
+    },
     "streams": {
       "search": "Search",
       "filter-streams": "Filter Streams",
@@ -126,6 +147,11 @@
       "ban_user": "Suspender Usuario",
       "banned_user": "Usuario Suspendido"
     },
+    "user": {
+      "user_bio": "",
+      "bio_flags": "",
+      "username_flags": ""
+    },
     "configure": {
       "enable-pre-moderation": "Habilitar pre-moderación",
       "enable-pre-moderation-text": "Los moderadores deben aprobar cada comentario antes de que sea publicado.",

client/coral-configure/components/ConfigureCommentStream.js

@@ -7,47 +7,50 @@ import translations from '../translations.json';
 const lang = new I18n(translations);
 
 export default ({handleChange, handleApply, changed, ...props}) => (
-  <div className={styles.wrapper}>
-    <div className={styles.container}>
-      <h3>{lang.t('configureCommentStream.title')}</h3>
-      <p>{lang.t('configureCommentStream.description')}</p>
-      <Button
-        className={styles.apply}
-        cStyle={changed ? 'green' : 'darkGrey'}
-        onClick={handleApply}
-      >
-        {lang.t('configureCommentStream.apply')}
-      </Button>
-    </div>
-    <ul>
-      <li>
-        <Checkbox
-          className={styles.checkbox}
-          cStyle={changed ? 'green' : 'darkGrey'}
-          name="premod"
+  <form onSubmit={handleApply}>
+    <div className={styles.wrapper}>
+      <div className={styles.container}>
+        <h3>{lang.t('configureCommentStream.title')}</h3>
+        <p>{lang.t('configureCommentStream.description')}</p>
+        <Button
+          type="submit"
+          className={styles.apply}
           onChange={handleChange}
-          checked={props.premod}
-          info={{
-            title: lang.t('configureCommentStream.enablePremod'),
-            description: lang.t('configureCommentStream.enablePremodDescription')
-          }}
-        />
-        <ul>
-          <li>
-            <Checkbox
-              className={styles.checkbox}
-              cStyle={changed ? 'green' : 'darkGrey'}
-              name="premodLinks"
-              onChange={handleChange}
-              checked={props.premodLinks}
-              info={{
-                title: lang.t('configureCommentStream.enablePremodLinks'),
-                description: lang.t('configureCommentStream.enablePremodDescription')
-              }}
-            />
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </div>
+          cStyle={changed ? 'green' : 'darkGrey'} >
+          {lang.t('configureCommentStream.apply')}
+        </Button>
+      </div>
+      <ul>
+        <li>
+          <Checkbox
+            className={styles.checkbox}
+            cStyle={changed ? 'green' : 'darkGrey'}
+            name="premod"
+            onChange={handleChange}
+            defaultChecked={props.premod}
+            info={{
+              title: lang.t('configureCommentStream.enablePremod'),
+              description: lang.t('configureCommentStream.enablePremodDescription')
+            }} />
+          {/* To be implimented
+          <ul>
+            <li>
+              <Checkbox
+                className={styles.checkbox}
+                cStyle={changed ? 'green' : 'darkGrey'}
+                name="premodLinks"
+                onChange={handleChange}
+                defaultChecked={props.premodLinks}
+                info={{
+                  title: lang.t('configureCommentStream.enablePremodLinks'),
+                  description: lang.t('configureCommentStream.enablePremodDescription')
+                }} />
+            </li>
+          </ul>
+          */}
+        </li>
+      </ul>
+    </div>
+  </form>
+
 );

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -1,8 +1,9 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
+import {compose} from 'react-apollo';
 
-import {I18n} from '../../coral-framework';
-import {updateOpenStatus, updateConfiguration} from '../../coral-framework/actions/asset';
+import {I18n} from 'coral-framework';
+import {updateOpenStatus, updateConfiguration} from 'coral-framework/actions/asset';
 
 import CloseCommentsInfo from '../components/CloseCommentsInfo';
 import ConfigureCommentStream from '../components/ConfigureCommentStream';
@@ -13,11 +14,8 @@ class ConfigureStreamContainer extends Component {
   constructor (props) {
     super(props);
 
-    console.log('moderation', props.asset.settings.moderation);
-
     this.state = {
-      premod: props.asset.settings.moderation === 'PRE',
-      premodLinks: false
+      changed: false
     };
 
     this.toggleStatus = this.toggleStatus.bind(this);
@@ -25,11 +23,18 @@ class ConfigureStreamContainer extends Component {
     this.handleApply = this.handleApply.bind(this);
   }
 
-  handleApply () {
-    const {premod, changed} = this.state;
+  handleApply (e) {
+    e.preventDefault();
+    const {elements} = e.target;
+    const premod = elements.premod.checked;
+
+    // const premodLinks = elements.premodLinks.checked;
+    const {changed} = this.state;
+
     const newConfig = {
       moderation: premod ? 'PRE' : 'POST'
     };
+
     if (changed) {
       this.props.updateConfiguration(newConfig);
       setTimeout(() => {
@@ -40,16 +45,16 @@ class ConfigureStreamContainer extends Component {
     }
   }
 
-  handleChange (e) {
-    const {name, checked} = e.target;
+  handleChange () {
     this.setState({
-      [name]: checked,
       changed: true
     });
   }
 
   toggleStatus () {
-    this.props.updateStatus(this.props.asset.closedAt === null ? 'closed' : 'open');
+    this.props.updateStatus(
+      this.props.asset.closedAt === null ? 'closed' : 'open'
+    );
   }
 
   getClosedIn () {
@@ -60,13 +65,16 @@ class ConfigureStreamContainer extends Component {
 
   render () {
     const status = this.props.asset.closedAt === null ? 'open' : 'closed';
+    const premod = this.props.asset.settings.moderation === 'PRE';
+
     return (
       <div>
         <ConfigureCommentStream
           handleChange={this.handleChange}
           handleApply={this.handleApply}
           changed={this.state.changed}
-          {...this.state}
+          premodLinks={false}
+          premod={premod}
         />
         <hr />
         <h3>{status === 'open' ? 'Close' : 'Open'} Comment Stream</h3>
@@ -89,7 +97,6 @@ const mapDispatchToProps = dispatch => ({
   updateConfiguration: newConfig => dispatch(updateConfiguration(newConfig))
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps)
 )(ConfigureStreamContainer);

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

@@ -26,6 +26,11 @@ class Comment extends React.Component {
   }
 
   static propTypes = {
+    reactKey: PropTypes.string.isRequired,
+
+    // id of currently opened ReplyBox. tracked in Stream.js
+    activeReplyBox: PropTypes.string.isRequired,
+    setActiveReplyBox: PropTypes.func.isRequired,
     refetch: PropTypes.func.isRequired,
     showSignInDialog: PropTypes.func.isRequired,
     postAction: PropTypes.func.isRequired,
@@ -60,15 +65,6 @@ class Comment extends React.Component {
     }).isRequired
   }
 
-  onReplyBoxClick = () => {
-    if (this.props.currentUser) {
-      this.setState({replyBoxVisible: !this.state.replyBoxVisible});
-    } else {
-      const offset = document.getElementById(`c_${this.props.comment.id}`).getBoundingClientRect().top - 75;
-      this.props.showSignInDialog(offset);
-    }
-  }
-
   render () {
     const {
       comment,
@@ -81,6 +77,8 @@ class Comment extends React.Component {
       addNotification,
       showSignInDialog,
       postAction,
+      setActiveReplyBox,
+      activeReplyBox,
       deleteAction
     } = this.props;
 
@@ -89,7 +87,7 @@ class Comment extends React.Component {
 
     return (
       <div
-        className="comment"
+        className={parentId ? 'reply' : 'comment'}
         id={`c_${comment.id}`}
         style={{marginLeft: depth * 30}}>
         <hr aria-hidden={true} />
@@ -106,7 +104,7 @@ class Comment extends React.Component {
         <Content body={comment.body} />
           <div className="commentActionsLeft">
               <ReplyButton
-                onClick={this.onReplyBoxClick}
+                onClick={() => setActiveReplyBox(comment.id)}
                 parentCommentId={parentId || comment.id}
                 currentUserId={currentUser && currentUser.id}
                 banned={false} />
@@ -130,13 +128,13 @@ class Comment extends React.Component {
           <PermalinkButton articleURL={asset.url} commentId={comment.id} />
         </div>
         {
-          this.state.replyBoxVisible
+          activeReplyBox === comment.id
           ? <ReplyBox
               commentPostedHandler={() => {
-                console.log('replyPostedHandler');
-                this.setState({replyBoxVisible: false});
+                setActiveReplyBox('');
                 refetch();
               }}
+              setActiveReplyBox={setActiveReplyBox}
               parentId={parentId || comment.id}
               addNotification={addNotification}
               authorId={currentUser.id}
@@ -149,6 +147,8 @@ class Comment extends React.Component {
           comment.replies.map(reply => {
             return <Comment
               refetch={refetch}
+              setActiveReplyBox={setActiveReplyBox}
+              activeReplyBox={activeReplyBox}
               addNotification={addNotification}
               parentId={comment.id}
               postItem={postItem}
@@ -158,6 +158,7 @@ class Comment extends React.Component {
               postAction={postAction}
               deleteAction={deleteAction}
               showSignInDialog={showSignInDialog}
+              reactKey={reply.id}
               key={reply.id}
               comment={reply} />;
           })

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

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {compose} from 'react-apollo';
 import {connect} from 'react-redux';
-import {isEqual} from 'lodash';
+import isEqual from 'lodash/isEqual';
 
 import {TabBar, Tab, TabContent, Spinner} from '../../coral-ui';
 
@@ -9,8 +9,8 @@ const {logout, showSignInDialog} = authActions;
 const {addNotification, clearNotification} = notificationActions;
 const {fetchAssetSuccess} = assetActions;
 
-import {queryStream} from './graphql/queries';
-import {postComment, postAction, deleteAction} from './graphql/mutations';
+import {queryStream} from 'coral-framework/graphql/queries';
+import {postComment, postAction, deleteAction} from 'coral-framework/graphql/mutations';
 import {Notification, notificationActions, authActions, assetActions, pym} from 'coral-framework';
 
 import Stream from './Stream';
@@ -82,9 +82,12 @@ class Embed extends Component {
 
   render () {
     const {activeTab} = this.state;
+    const {closedAt} = this.props.asset;
     const {loading, asset, refetch} = this.props.data;
     const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth;
 
+    const openStream = closedAt === null;
+
     const expandForLogin = showSignInDialog ? {
       minHeight: document.body.scrollHeight + 200
     } : {};
@@ -94,14 +97,14 @@ class Embed extends Component {
         loading ? <Spinner/>
       : <div className="commentStream">
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
-            <Tab><Count count={asset.comments.length}/></Tab>
+            <Tab><Count count={asset.commentCount}/></Tab>
             <Tab>Settings</Tab>
             <Tab restricted={!isAdmin}>Configure Stream</Tab>
           </TabBar>
             {loggedIn && user && <UserBox user={user} logout={this.props.logout} />}
             <TabContent show={activeTab === 0}>
                 {
-                  asset.closedAt === null
+                  openStream
                    ? <div id="commentBox">
                        <InfoBox
                          content={asset.settings.infoBoxContent}
@@ -174,10 +177,10 @@ class Embed extends Component {
 }
 
 const mapStateToProps = state => ({
-  items: state.items.toJS(),
   notification: state.notification.toJS(),
   auth: state.auth.toJS(),
-  userData: state.user.toJS()
+  userData: state.user.toJS(),
+  asset: state.asset.toJS()
 });
 
 const mapDispatchToProps = dispatch => ({

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

@@ -1,49 +1,72 @@
 import React, {PropTypes} from 'react';
 import Comment from './Comment';
 
-const Stream = ({
-  comments,
-  currentUser,
-  asset,
-  postItem,
-  addNotification,
-  postAction,
-  deleteAction,
-  showSignInDialog,
-  refetch
-}) => {
-  return (
-    <div>
-      {
-        comments.map(comment => {
-          return <Comment
-            refetch={refetch}
-            addNotification={addNotification}
-            depth={0}
-            postItem={postItem}
-            asset={asset}
-            currentUser={currentUser}
-            postAction={postAction}
-            deleteAction={deleteAction}
-            showSignInDialog={showSignInDialog}
-            key={comment.id}
-            comment={comment} />;
-        })
-      }
-    </div>
-  );
-};
+class Stream extends React.Component {
 
-Stream.propTypes = {
-  refetch: PropTypes.func.isRequired,
-  addNotification: PropTypes.func.isRequired,
-  postItem: PropTypes.func.isRequired,
-  asset: PropTypes.object.isRequired,
-  comments: PropTypes.array.isRequired,
-  currentUser: PropTypes.shape({
-    displayName: PropTypes.string,
-    id: PropTypes.string
-  })
-};
+  static propTypes = {
+    refetch: PropTypes.func.isRequired,
+    addNotification: PropTypes.func.isRequired,
+    postItem: PropTypes.func.isRequired,
+    asset: PropTypes.object.isRequired,
+    comments: PropTypes.array.isRequired,
+    currentUser: PropTypes.shape({
+      displayName: PropTypes.string,
+      id: PropTypes.string
+    })
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {activeReplyBox: ''};
+    this.setActiveReplyBox = this.setActiveReplyBox.bind(this);
+  }
+
+  setActiveReplyBox (reactKey) {
+    if (!this.props.currentUser) {
+      const offset = document.getElementById(`c_${reactKey}`).getBoundingClientRect().top - 75;
+      this.props.showSignInDialog(offset);
+    } else {
+      this.setState({activeReplyBox: reactKey});
+    }
+  }
+
+  render () {
+    const {
+      comments,
+      currentUser,
+      asset,
+      postItem,
+      addNotification,
+      postAction,
+      deleteAction,
+      showSignInDialog,
+      refetch
+    } = this.props;
+
+    return (
+      <div>
+        {
+          comments.map(comment => {
+            return <Comment
+              refetch={refetch}
+              setActiveReplyBox={this.setActiveReplyBox}
+              activeReplyBox={this.state.activeReplyBox}
+              addNotification={addNotification}
+              depth={0}
+              postItem={postItem}
+              asset={asset}
+              currentUser={currentUser}
+              postAction={postAction}
+              deleteAction={deleteAction}
+              showSignInDialog={showSignInDialog}
+              key={comment.id}
+              reactKey={comment.id}
+              comment={comment} />;
+          })
+        }
+      </div>
+    );
+  }
+}
 
 export default Stream;

client/coral-embed-stream/src/graphql/mutations/postComment.graphql

@@ -1,23 +0,0 @@
-
-  fragment commentView on Comment {
-    id
-    body
-    status
-    user {
-      name: displayName
-    }
-    actions {
-      type: action_type
-      count
-      current: current_user {
-        id
-        created_at
-      }
-    }
-  }
-
-mutation CreateComment ($asset_id: ID!, $parent_id: ID, $body: String!) {
-    createComment(asset_id:$asset_id, parent_id:$parent_id, body:$body) {
-        ...commentView
-    }
-}

client/coral-framework/actions/asset.js

@@ -10,30 +10,30 @@ export const fetchAssetRequest = () => ({type: actions.FETCH_ASSET_REQUEST});
 export const fetchAssetSuccess = asset => ({type: actions.FETCH_ASSET_SUCCESS, asset});
 export const fetchAssetFailure = error => ({type: actions.FETCH_ASSET_FAILURE, error});
 
-const updateConfigRequest = () => ({type: actions.UPDATE_CONFIG_REQUEST});
-const updateConfigSuccess = config => ({type: actions.UPDATE_CONFIG_SUCCESS, config});
-const updateConfigFailure = () => ({type: actions.UPDATE_CONFIG_FAILURE});
+const updateAssetSettingsRequest = () => ({type: actions.UPDATE_ASSET_SETTINGS_REQUEST});
+const updateAssetSettingsSuccess = settings => ({type: actions.UPDATE_ASSET_SETTINGS_SUCCESS, settings});
+const updateAssetSettingsFailure = () => ({type: actions.UPDATE_ASSET_SETTINGS_FAILURE});
 
 export const updateConfiguration = newConfig => (dispatch, getState) => {
   const assetId = getState().asset.toJS().id;
-  dispatch(updateConfigRequest());
+  dispatch(updateAssetSettingsRequest());
   coralApi(`/assets/${assetId}/settings`, {method: 'PUT', body: newConfig})
     .then(() => {
       dispatch(addNotification('success', lang.t('successUpdateSettings')));
-      dispatch(updateConfigSuccess(newConfig));
+      dispatch(updateAssetSettingsSuccess(newConfig));
     })
-    .catch(error => dispatch(updateConfigFailure(error)));
+    .catch(error => dispatch(updateAssetSettingsFailure(error)));
 };
 
 export const updateOpenStream = closedBody => (dispatch, getState) => {
   const assetId = getState().asset.toJS().id;
-  dispatch(updateConfigRequest());
+  dispatch(fetchAssetRequest());
   coralApi(`/assets/${assetId}/status`, {method: 'PUT', body: closedBody})
     .then(() => {
       dispatch(addNotification('success', lang.t('successUpdateSettings')));
-      dispatch(updateConfigSuccess(closedBody));
+      dispatch(fetchAssetSuccess(closedBody));
     })
-    .catch(error => dispatch(updateConfigFailure(error)));
+    .catch(error => dispatch(fetchAssetFailure(error)));
 };
 
 const openStream = () => ({type: actions.OPEN_COMMENTS});

client/coral-framework/actions/auth.js

@@ -3,7 +3,6 @@ import translations from './../translations';
 const lang = new I18n(translations);
 import * as actions from '../constants/auth';
 import coralApi, {base} from '../helpers/response';
-import {addItem, updateItem} from './items';
 
 // Dialog Actions
 export const showSignInDialog = (offset = 0) => ({type: actions.SHOW_SIGNIN_DIALOG, offset});
@@ -21,7 +20,6 @@ export const createDisplayName = (userId, formData) => dispatch => {
     .then(() => {
       dispatch(createDisplayNameSuccess());
       dispatch(hideCreateDisplayNameDialog());
-      dispatch(updateItem(userId, 'displayName', formData.displayName, 'users'));
       dispatch(updateDisplayName(formData.displayName));
     })
     .catch(() => {
@@ -53,7 +51,6 @@ export const fetchSignIn = (formData) => (dispatch) => {
       const isAdmin = !!user.roles.filter(i => i === 'ADMIN').length;
       dispatch(signInSuccess(user, isAdmin));
       dispatch(hideSignInDialog());
-      dispatch(addItem(user, 'users'));
     })
     .catch(() => dispatch(signInFailure(lang.t('error.emailPasswordError'))));
 };
@@ -82,8 +79,6 @@ export const facebookCallback = (err, data) => dispatch => {
     const user = JSON.parse(data);
     dispatch(signInFacebookSuccess(user));
     dispatch(hideSignInDialog());
-    dispatch(showCreateDisplayNameDialog());
-    dispatch(addItem(user, 'users'));
   } catch (err) {
     dispatch(signInFacebookFailure(err));
     return;
@@ -159,5 +154,8 @@ export const checkLogin = () => dispatch => {
       const isAdmin = !!result.user.roles.filter(i => i === 'ADMIN').length;
       dispatch(checkLoginSuccess(result.user, isAdmin));
     })
-    .catch(error => dispatch(checkLoginFailure(error)));
+    .catch(error => {
+      console.error(error);
+      dispatch(checkLoginFailure(`${error.message}`));
+    });
 };

client/coral-framework/actions/items.js

@@ -1,267 +0,0 @@
-import coralApi from '../helpers/response';
-import {fromJS} from 'immutable';
-import {UPDATE_CONFIG} from '../constants/config';
-
-/**
-* Action name constants
-*/
-
-export const ADD_ITEM = 'ADD_ITEM';
-export const UPDATE_ITEM = 'UPDATE_ITEM';
-export const APPEND_ITEM_ARRAY = 'APPEND_ITEM_ARRAY';
-
-/**
- * Action creators
- */
-
- /*
- * Adds an item to the local store without posting it to the server
- * Useful for optimistic posting, etc.
- *
- * @params
- *  item - the item to be posted
- *
- */
-
-export const addItem = (item, item_type) => {
-  if (!item.id) {
-    console.warn('addItem called without an item id.');
-  }
-  return {
-    type: ADD_ITEM,
-    item,
-    item_type,
-    id: item.id
-  };
-};
-
-/*
-* Updates an item in the local store without posting it to the server
-* Useful for item-level toggles, etc.
-*
-* @params
-*  id - the id of the item to be posted
-*  property - the property to be updated
-*  value - the value that the property should be set to
-*  item_type - the type of the item being updated (users, comments, etc)
-*
-*/
-export const updateItem = (id, property, value, item_type) => {
-  return {
-    type: UPDATE_ITEM,
-    id,
-    property,
-    value,
-    item_type
-  };
-};
-
-/*
-* Appends data to an array in an item in the local store without posting it to the server
-* Useful for adding a recently posted reply to a comment, etc.
-*
-* @params
-*  id - the id of the item to be posted
-*  property - the property to be updated (should be an array)
-*  value - the value that should be added to the array
-*  add_to_front - boolean that defines whether value is added at the beginning (unshift) or end (push)
-*  item_type - the type of the item being updated (users, comments, etc)
-*
-*/
-export const appendItemArray = (id, property, value, add_to_front, item_type) => {
-  return {
-    type: APPEND_ITEM_ARRAY,
-    id,
-    property,
-    value,
-    add_to_front,
-    item_type
-  };
-};
-
-/*
-* Get Items from Query
-* Gets a set of items from a predefined query
-*
-* @params
-*   Query - a predefiend query for retreiving items
-*
-* @returns
-*   A promise resolving to a set of items
-*
-* @dispatches
-*   A set of items to the item store
-*/
-export function getStream (assetUrl) {
-  return (dispatch) => {
-    return coralApi(`/stream?asset_url=${encodeURIComponent(assetUrl)}`)
-      .then((json) => {
-
-        /* Add items to the store */
-        Object.keys(json).forEach(type => {
-          if (type === 'actions') {
-            json[type].forEach(action => {
-              action.id = `${action.action_type}_${action.item_id}`;
-              dispatch(addItem(action, 'actions'));
-            });
-          } else if (type === 'settings') {
-            dispatch({type: UPDATE_CONFIG, config: fromJS(json[type])});
-          } else {
-            json[type].forEach(item => {
-              dispatch(addItem(item, type));
-            });
-          }
-        });
-
-        const assetId = json.assets[0].id;
-
-        /* Sort comments by date*/
-        json.comments.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
-        const rels = json.comments.reduce((h, item) => {
-
-          /* Check for root and child comments. */
-          if (
-            item.asset_id === assetId &&
-            !item.parent_id) {
-            h.rootComments.push(item.id);
-          } else if (
-            item.asset_id === assetId
-          ) {
-            let children = h.childComments[item.parent_id] || [];
-            h.childComments[item.parent_id] = children.concat(item.id);
-          }
-          return h;
-        }, {rootComments: [], childComments: {}});
-
-        dispatch(updateItem(assetId, 'comments', rels.rootComments, 'assets'));
-
-        Object.keys(rels.childComments).forEach(key => {
-          dispatch(updateItem(key, 'children', rels.childComments[key].reverse(), 'comments'));
-        });
-
-        /* Hydrate actions on comments */
-        json.actions.forEach(action => {
-          dispatch(updateItem(action.item_id, action.action_type, action.id, 'comments'));
-        });
-
-        return (json);
-      });
-  };
-}
-
-/*
-* Get Items Array
-* Gets a set of items from an array of item ids
-*
-* @params
-*   Query - a predefiend query for retreiving items
-*
-* @returns
-*   A promise resolving to a set of items
-*
-* @dispatches
-*   A set of items to the item store
-*/
-
-export function getItemsArray (ids) {
-  return (dispatch) => {
-    return coralApi(`/item/${ids}`)
-      .then((json) => {
-        for (let i = 0; i < json.items.length; i++) {
-          dispatch(addItem(json.items[i]));
-        }
-        return json.items;
-      });
-  };
-}
-
-/*
-* PutItem
-* Puts an item
-*
-* @params
-*   Item - the item to be put
-*
-* @returns
-*   A promise resolving to an item is
-*
-* @dispatches
-*   The newly put item to the item store
-*/
-
-export function postItem (item, type, id, mutate) {
-  console.log(
-    item,
-    type,
-    id,
-    mutate
-  );
-  mutate({
-    variables: {
-      asset_id: id,
-      body: item,
-      parent_id: null
-    }
-  }).then(({data}) => {
-    console.log(data);
-  });
-
-  // return (dispatch) => {
-  //   if (id) {
-  //     item.id = id;
-  //   }
-  //   return coralApi(`/${type}`, {method: 'POST', body: item})
-  //     .then((json) => {
-  //       dispatch(addItem({...item, id:json.id}, type));
-  //       return json;
-  //     });
-  // };
-}
-
-/*
-* PostAction
-* Posts an action to an item
-*
-* @params
-*   id - the id of the item on which the action is taking place
-*   action - the action object.
-*       Must include an 'action_type' string.
-*       May optionally include a `metadata` object with arbitrary action data.
-*   user - the user performing the action
-*   host - the coral host
-*
-* @returns
-*   A promise resolving to null or an error
-*
-*/
-
-export function postAction (item_id, item_type, action) {
-  return (dispatch) => {
-    return coralApi(`/${item_type}/${item_id}/actions`, {method: 'POST', body: action})
-      .then((json) => {
-        dispatch(updateItem(action.item_id, action.action_type, action.id, item_type));
-        return json;
-      });
-  };
-}
-
-/*
-* DeleteAction
-* Deletes an action to an item
-*
-* @params
-*   id - the id of the item on which the action is taking place
-*   action - the name of the action
-*   user - the user performing the action
-*   host - the coral host
-*
-* @returns
-*   A promise resolving to null or an error
-*
-*/
-
-export function deleteAction (action_id) {
-  return () => {
-    return coralApi(`/actions/${action_id}`, {method: 'DELETE'});
-  };
-}

client/coral-framework/actions/user.js

@@ -1,7 +1,5 @@
 import * as actions from '../constants/user';
-import * as assetActions from '../constants/assets';
 import {addNotification} from '../actions/notification';
-import {addItem} from '../actions/items';
 import coralApi from '../helpers/response';
 
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -21,36 +19,3 @@ export const saveBio = (user_id, formData) => dispatch => {
     })
     .catch(error => dispatch(saveBioFailure(error)));
 };
-
-/**
- *
- * Get a list of comments by a single user
- *
- * @param {string} user_id
- * @returns Promise
- */
-export const fetchCommentsByUserId = userId => {
-  return (dispatch, getState) => {
-    dispatch({type: actions.COMMENTS_BY_USER_REQUEST});
-    return coralApi(`/comments?user_id=${userId}`)
-      .then(({comments, assets}) => {
-        const state = getState();
-        comments.forEach(comment => dispatch(addItem(comment, 'comments')));
-        assets.forEach(asset => {
-          const prevAsset = state.items.getIn(['assets', asset.id]);
-
-          if (prevAsset) {
-
-            // Include data such as hydrated comments from assets already in the system.
-            dispatch(addItem({...prevAsset.toJS(), ...asset}, 'assets'));
-          } else {
-            dispatch(addItem(asset, 'assets'));
-          }
-        });
-
-        dispatch({type: actions.COMMENTS_BY_USER_SUCCESS, comments: comments.map(comment => comment.id)});
-        dispatch({type: assetActions.MULTIPLE_ASSETS_SUCCESS, assets: assets.map(asset => asset.id)});
-      })
-      .catch(error => dispatch({type: actions.COMMENTS_BY_USER_FAILURE, error}));
-  };
-};

client/coral-framework/client.js

@@ -2,6 +2,7 @@ import ApolloClient, {addTypename} from 'apollo-client';
 import getNetworkInterface from './transport';
 
 export const client = new ApolloClient({
+  connectToDevTools: true,
   queryTransformer: addTypename,
   dataIdFromObject: (result) => {
     if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle

client/coral-framework/constants/asset.js

@@ -2,12 +2,9 @@ export const FETCH_ASSET_REQUEST = 'FETCH_ASSET_REQUEST';
 export const FETCH_ASSET_FAILURE = 'FETCH_ASSET_FAILURE';
 export const FETCH_ASSET_SUCCESS = 'FETCH_ASSET_SUCCESS';
 
-export const UPDATE_CONFIG_REQUEST = 'UPDATE_CONFIG_REQUEST';
-export const UPDATE_CONFIG_SUCCESS = 'UPDATE_CONFIG_SUCCESS';
-export const UPDATE_CONFIG_FAILURE = 'UPDATE_CONFIG_FAILURE';
-
-export const UPDATE_CONFIG = 'UPDATE_CONFIG';
+export const UPDATE_ASSET_SETTINGS_REQUEST = 'UPDATE_ASSET_SETTINGS_REQUEST';
+export const UPDATE_ASSET_SETTINGS_SUCCESS = 'UPDATE_ASSET_SETTINGS_SUCCESS';
+export const UPDATE_ASSET_SETTINGS_FAILURE = 'UPDATE_ASSET_SETTINGS_FAILURE';
 
 export const OPEN_COMMENTS = 'OPEN_COMMENTS';
 export const CLOSE_COMMENTS = 'CLOSE_COMMENTS';
-export const ADD_ITEM = 'ADD_ITEM';

client/coral-framework/graphql/fragments/commentView.graphql

@@ -0,0 +1,21 @@
+fragment commentView on Comment {
+    id
+    body
+    created_at
+    status
+    user {
+        id
+        name: displayName
+        settings {
+            bio
+        }
+    }
+    actions {
+        type: action_type
+        count
+        current: current_user {
+            id
+            created_at
+        }
+    }
+}

client/coral-framework/graphql/mutations/index.js

@@ -3,7 +3,12 @@ import POST_COMMENT from './postComment.graphql';
 import POST_ACTION from './postAction.graphql';
 import DELETE_ACTION from './deleteAction.graphql';
 
+import commentView from '../fragments/commentView.graphql';
+
 export const postComment = graphql(POST_COMMENT, {
+  options: () => ({
+    fragments: commentView
+  }),
   props: ({mutate}) => ({
     postItem: ({asset_id, body, parent_id} /* , type */ ) => {
       return mutate({

client/coral-framework/graphql/mutations/postComment.graphql

@@ -0,0 +1,7 @@
+#import "../fragments/commentView.graphql"
+
+mutation CreateComment ($asset_id: ID!, $parent_id: ID, $body: String!) {
+    createComment(asset_id:$asset_id, parent_id:$parent_id, body:$body) {
+        ...commentView
+    }
+}

client/coral-framework/graphql/queries/index.js

@@ -1,5 +1,6 @@
 import {graphql} from 'react-apollo';
 import STREAM_QUERY from './streamQuery.graphql';
+import MY_COMMENT_HISTORY from './myCommentHistory.graphql';
 
 function getQueryVariable(variable) {
   let query = window.location.search.substring(1);
@@ -13,5 +14,11 @@ function getQueryVariable(variable) {
 }
 
 export const queryStream = graphql(STREAM_QUERY, {
-  options: {variables: {asset_url: getQueryVariable('asset_url')}}
+  options: () => ({
+    variables: {
+      asset_url: getQueryVariable('asset_url')
+    }
+  })
 });
+
+export const myCommentHistory = graphql(MY_COMMENT_HISTORY, {});

client/coral-framework/graphql/queries/myCommentHistory.graphql

@@ -0,0 +1,9 @@
+query myCommentHistory {
+    me {
+        comments {
+            id
+            body
+            created_at
+        }
+    }
+}

client/coral-framework/graphql/queries/streamQuery.graphql

@@ -1,24 +1,4 @@
-
-fragment commentView on Comment {
-    id
-    body
-    created_at
-    user {
-        id
-        name: displayName
-        settings {
-          bio
-        }
-    }
-    actions {
-        type: action_type
-        count
-        current: current_user {
-            id
-            created_at
-        }
-    }
-}
+#import "../fragments/commentView.graphql"
 
 query AssetQuery($asset_url: String!) {
     asset(url: $asset_url) {
@@ -37,6 +17,7 @@ query AssetQuery($asset_url: String!) {
             charCount
             requireEmailConfirmation
         }
+        commentCount
         comments {
             ...commentView
             replies {

client/coral-framework/index.js

@@ -1,19 +1,17 @@
-import Notification from './modules/notification/Notification';
 import store from './store';
-import * as itemActions from './actions/items';
+import pym from './PymConnection';
 import I18n from './modules/i18n/i18n';
-import * as notificationActions from './actions/notification';
 import * as authActions from './actions/auth';
 import * as assetActions from './actions/asset';
-import pym from './PymConnection';
+import * as notificationActions from './actions/notification';
+import Notification from './modules/notification/Notification';
 
 export {
-  Notification,
-  store,
-  itemActions,
+  pym,
   I18n,
-  notificationActions,
+  store,
   authActions,
   assetActions,
-  pym
+  Notification,
+  notificationActions
 };

client/coral-framework/reducers/asset.js

@@ -13,23 +13,12 @@ const initialState = Map({
 
 export default function asset (state = initialState, action) {
   switch (action.type) {
-  case actions.FETCH_ASSET_SUCCESS :
+  case actions.FETCH_ASSET_SUCCESS:
     return state
         .merge(action.asset);
-  case actions.UPDATE_CONFIG:
+  case actions.UPDATE_ASSET_SETTINGS_SUCCESS:
     return state
-      .merge(action.config);
-  case actions.UPDATE_CONFIG_SUCCESS:
-    return state
-      .merge(action.config);
-  case actions.OPEN_COMMENTS:
-    return state
-      .set('status', 'open')
-      .set('closedAt', null);
-  case actions.CLOSE_COMMENTS:
-    return state
-      .set('status', 'closed')
-      .set('closedAt', Date.now());
+      .setIn(['settings'], action.settings);
   default:
     return state;
   }

client/coral-framework/reducers/index.js

@@ -1,13 +1,11 @@
 import auth from './auth';
 import user from './user';
 import asset from './asset';
-import items from './items';
 import notification from './notification';
 
 export default {
   auth,
   user,
   asset,
-  items,
   notification
 };

client/coral-framework/reducers/items.js

@@ -1,30 +0,0 @@
-/* Items Reducer */
-
-import {fromJS} from 'immutable';
-import * as actions from '../actions/items';
-
-const initialState = fromJS({
-  comments: {},
-  users: {},
-  assets: {},
-  actions: {}
-});
-
-export default (state = initialState, action) => {
-  switch (action.type) {
-  case actions.ADD_ITEM:
-    return state.setIn([action.item_type, action.id], fromJS(action.item));
-  case actions.UPDATE_ITEM:
-    return state.setIn([action.item_type, action.id, action.property], fromJS(action.value));
-  case actions.APPEND_ITEM_ARRAY:
-    return state.updateIn([action.item_type, action.id, action.property], (prop) => {
-      if (action.add_to_front) {
-        return prop ? prop.unshift(fromJS(action.value)) : fromJS([action.value]);
-      } else {
-        return prop ? prop.push(fromJS(action.value)) : fromJS([action.value]);
-      }
-    });
-  default:
-    return state;
-  }
-};

client/coral-plugin-commentbox/CommentBox.js

@@ -13,6 +13,7 @@ class CommentBox extends Component {
     // comments: PropTypes.array,
     commentPostedHandler: PropTypes.func,
     postItem: PropTypes.func.isRequired,
+    cancelButtonClicked: PropTypes.func,
     assetId: PropTypes.string.isRequired,
     parentId: PropTypes.string,
     authorId: PropTypes.string.isRequired,
@@ -74,8 +75,6 @@ class CommentBox extends Component {
         } else if (postedComment.status === 'PREMOD') {
           addNotification('success', lang.t('comment-post-notif-premod'));
         } else {
-
-          // appendItemArray(parent_id || id, related, commentId, !parent_id, parent_type);
           addNotification('success', 'Your comment has been posted.');
         }
 
@@ -89,7 +88,14 @@ class CommentBox extends Component {
 
   render () {
     const {styles, isReply, authorId, charCount} = this.props;
+    let {cancelButtonClicked} = this.props;
     const length = this.state.body.length;
+
+    if (isReply && typeof cancelButtonClicked !== 'function') {
+      console.warn('the CommentBox component should have a cancelButtonClicked callback defined if it lives in a Reply');
+      cancelButtonClicked = () => {};
+    }
+
     return <div>
       <div
         className={`${name}-container`}>
@@ -115,6 +121,19 @@ class CommentBox extends Component {
           }
         </div>
         <div className={`${name}-button-container`}>
+          {
+            isReply && (
+              <Button
+                cStyle='darkGrey'
+                className={`${name}-cancel-button`}
+                onClick={() => {
+                  console.log('cancel button in comment box');
+                  cancelButtonClicked('');
+                }}>
+                {lang.t('cancel')}
+              </Button>
+            )
+          }
           { authorId && (
               <Button
                 cStyle={!length || (charCount && length > charCount) ? 'lightGrey' : 'darkGrey'}

client/coral-plugin-commentbox/translations.json

@@ -1,6 +1,7 @@
 {
   "en": {
     "post": "Post",
+    "cancel": "Cancel",
     "reply": "Reply",
     "comment": "Comment",
     "name": "Name",
@@ -11,6 +12,7 @@
   },
   "es": {
     "post": "Publicar",
+    "cancel": "Cancelar",
     "reply": "Respuesta",
     "comment": "Comentario",
     "name": "Nombre",

client/coral-plugin-commentcontent/CommentContent.js

@@ -1,5 +1,5 @@
 import React from 'react';
-const name = 'coral-plugin-replies';
+const name = 'coral-plugin-content';
 
 const Content = ({body, styles}) => {
   const textbreaks = body.split('\n');

client/coral-plugin-flags/FlagButton.js

@@ -14,6 +14,7 @@ class FlagButton extends Component {
     reason: '',
     note: '',
     step: 0,
+    posted: false,
     localPost: null,
     localDelete: false
   }
@@ -38,7 +39,7 @@ class FlagButton extends Component {
 
   onPopupContinue = () => {
     const {postAction, id, author_id} = this.props;
-    const {itemType, reason, step, localPost} = this.state;
+    const {itemType, reason, step, posted} = this.state;
 
     // Proceed to the next step or close the menu if we've reached the end
     if (step + 1 >= this.props.getPopupMenu.length) {
@@ -48,7 +49,8 @@ class FlagButton extends Component {
     }
 
     // If itemType and reason are both set, post the action
-    if (itemType && reason && !localPost) {
+    if (itemType && reason && !posted) {
+      this.setState({posted: true});
 
       // Set the text from the "other" field if it exists.
       let item_id;

client/coral-plugin-history/CommentHistory.js

@@ -7,12 +7,11 @@ const CommentHistory = props => {
     <div className={`${styles.header} commentHistory`}>
       <div className="commentHistory__list">
         {props.comments.map((comment, i) => {
-          const asset = props.assets.find(asset => asset.id === comment.asset_id);
           return <Comment
             key={i}
             comment={comment}
             link={props.link}
-            asset={asset} />;
+            asset={props.asset} />;
         })}
       </div>
     </div>
@@ -20,8 +19,8 @@ const CommentHistory = props => {
 };
 
 CommentHistory.propTypes = {
-  comments: PropTypes.arrayOf(PropTypes.object).isRequired,
-  assets: PropTypes.arrayOf(PropTypes.object).isRequired
+  comments: PropTypes.array.isRequired,
+  asset: PropTypes.object.isRequired
 };
 
 export default CommentHistory;

client/coral-plugin-replies/ReplyBox.js

@@ -3,11 +3,12 @@ import CommentBox from '../coral-plugin-commentbox/CommentBox';
 
 const name = 'coral-plugin-replies';
 
-const ReplyBox = ({styles, postItem, assetId, authorId, addNotification, parentId, commentPostedHandler}) => (
+const ReplyBox = ({styles, postItem, assetId, authorId, addNotification, parentId, commentPostedHandler, setActiveReplyBox}) => (
   <div className={`${name}-textarea`} style={styles && styles.container}>
     <CommentBox
       commentPostedHandler={commentPostedHandler}
       parentId={parentId}
+      cancelButtonClicked={setActiveReplyBox}
       addNotification={addNotification}
       authorId={authorId}
       assetId={assetId}
@@ -17,6 +18,7 @@ const ReplyBox = ({styles, postItem, assetId, authorId, addNotification, parentI
 );
 
 ReplyBox.propTypes = {
+  setActiveReplyBox: PropTypes.func.isRequired,
   commentPostedHandler: PropTypes.func,
   parentId: PropTypes.string,
   addNotification: PropTypes.func.isRequired,

client/coral-plugin-stream/Stream.js

@@ -73,6 +73,7 @@ query AssetQuery($asset_id: ID!) {
     id
     title
     url
+    commentCount
     comments {
       ...commentView
       replies {

client/coral-settings/components/SettingsHeader.js

@@ -7,7 +7,7 @@ export default ({userData}) => (
 
   {
 
-    // Hiding display of users ID unless there's a use case for it.
+    //  Hiding display of users ID unless there's a use case for it.
     // <h2>{userData.profiles.map(profile => profile.id)}</h2>
   }
   </div>

client/coral-settings/containers/SettingsContainer.js

@@ -1,17 +1,18 @@
-import React, {Component} from 'react';
 import {connect} from 'react-redux';
-
-import {saveBio, fetchCommentsByUserId} from 'coral-framework/actions/user';
-
-import {link} from 'coral-framework/PymConnection';
-import BioContainer from './BioContainer';
-import NotLoggedIn from '../components/NotLoggedIn';
-import {TabBar, Tab, TabContent} from '../../coral-ui';
-import CommentHistory from 'coral-plugin-history/CommentHistory';
-import SettingsHeader from '../components/SettingsHeader';
-import RestrictedContent from 'coral-framework/components/RestrictedContent';
-
+import {compose} from 'react-apollo';
+import React, {Component} from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
+
+import {myCommentHistory} from 'coral-framework/graphql/queries';
+import {saveBio} from 'coral-framework/actions/user';
+
+import BioContainer from './BioContainer';
+import {link} from 'coral-framework/PymConnection';
+import NotLoggedIn from '../components/NotLoggedIn';
+import {TabBar, Tab, TabContent, Spinner} from 'coral-ui';
+import SettingsHeader from '../components/SettingsHeader';
+import CommentHistory from 'coral-plugin-history/CommentHistory';
+
 import translations from '../translations';
 const lang = new I18n(translations);
 
@@ -25,12 +26,6 @@ class SettingsContainer extends Component {
     this.handleTabChange = this.handleTabChange.bind(this);
   }
 
-  componentWillMount () {
-
-    // Fetch commentHistory
-    this.props.fetchCommentsByUserId(this.props.userData.id);
-  }
-
   handleTabChange(tab) {
     this.setState({
       activeTab: tab
@@ -38,55 +33,56 @@ class SettingsContainer extends Component {
   }
 
   render() {
-    const {loggedIn, userData, showSignInDialog, items, user} = this.props;
+    const {loggedIn, userData, asset, showSignInDialog, data, user} = this.props;
     const {activeTab} = this.state;
+    const {me} = this.props.data;
 
-    const commentsMostRecentFirst = user
-      .myComments.map(id => items.comments[id])
-      .sort(({created_at:a}, {created_at:b}) => {
+    if (!loggedIn || !me) {
+      return <NotLoggedIn showSignInDialog={showSignInDialog}/>;
+    }
 
-        // descending order, created_at
-        // js date strings can be sorted lexigraphically.
-        const aLessThanB = a < b ? 1 : 0;
-        return a > b ? -1 : aLessThanB;
-      });
+    if (data.loading) {
+      return <Spinner/>;
+    }
 
     return (
-      <RestrictedContent restricted={!loggedIn} restrictedComp={<NotLoggedIn showSignInDialog={showSignInDialog} />}>
+      <div>
         <SettingsHeader {...this.props} />
         <TabBar onChange={this.handleTabChange} activeTab={activeTab} cStyle='material'>
-          <Tab>All Comments ({user.myComments.length})</Tab>
-          <Tab>Profile Settings</Tab>
+          <Tab>{lang.t('allComments')} ({user.myComments.length})</Tab>
+          <Tab>{lang.t('profileSettings')}</Tab>
         </TabBar>
         <TabContent show={activeTab === 0}>
           {
-            user.myComments.length && user.myAssets.length
-            ? <CommentHistory
-              comments={commentsMostRecentFirst}
-              link={link}
-              assets={user.myAssets.map(id => items.assets[id])} />
-            : <p>{lang.t('user-no-comment')}</p>
+            me.comments.length ?
+              <CommentHistory
+                comments={me.comments}
+                asset={asset}
+                link={link}
+              />
+            :
+              <p>{lang.t('userNoComment')}</p>
           }
         </TabContent>
         <TabContent show={activeTab === 1}>
           <BioContainer bio={userData.settings.bio} handleSave={this.handleSave} {...this.props} />
         </TabContent>
-      </RestrictedContent>
+      </div>
     );
   }
 }
 
 const mapStateToProps = state => ({
-  items: state.items.toJS(),
-  user: state.user.toJS()
+  user: state.user.toJS(),
+  asset: state.asset.toJS(),
+  auth: state.auth.toJS()
 });
 
 const mapDispatchToProps = dispatch => ({
-  saveBio: (user_id, formData) => dispatch(saveBio(user_id, formData)),
-  fetchCommentsByUserId: userId => dispatch(fetchCommentsByUserId(userId))
+  saveBio: (user_id, formData) => dispatch(saveBio(user_id, formData))
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  myCommentHistory
 )(SettingsContainer);

client/coral-settings/translations.json

@@ -1,8 +1,14 @@
 {
   "en":{
-    "user-no-comment": "This user has not yet left a comment."
+    "userNoComment": "This user has not yet left a comment.",
+    "allComments": "All Comments",
+    "profileSettings": "Profile Settings",
+    "myCommentHistory": "My comment History"
   },
   "es":{
-    "user-no-comment": "Aún no ha escrito ningún comentario."
+    "userNoComment": "Aún no ha escrito ningún comentario.",
+    "allComments": "Todos los comentarios",
+    "profileSettings": "Configuración del perfil",
+    "myCommentHistory": "Mi historial de comentarios"
   }
 }

client/coral-sign-in/components/SignDialog.js

@@ -12,7 +12,7 @@ const SignDialog = ({open, view, handleClose, offset, ...props}) => (
     id="signInDialog"
     open={open}
     style={{
-      position: 'relative',
+      position: 'fixed',
       top: offset !== 0 && offset
     }}>
     <span className={styles.close} onClick={handleClose}>×</span>

client/coral-sign-in/containers/SignInContainer.js

@@ -20,7 +20,7 @@ import {
   invalidForm,
   validForm,
   checkLogin
-} from '../../coral-framework/actions/auth';
+} from 'coral-framework/actions/auth';
 
 class SignInContainer extends Component {
   initialState = {

client/coral-ui/components/Checkbox.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import styles from './Checkbox.css';
 
-export default ({name, cStyle = 'base', onChange, label, className, info, checked = 'false'}) => (
+export default ({name, cStyle = 'base', onChange, label, className, info, ...props}) => (
   <label className={`${styles.label} ${styles[`type--${cStyle}`]} ${className}`} htmlFor={name}>
-    <input type="checkbox" id={name} name={name} onChange={onChange} checked={checked} />
+    <input type="checkbox" id={name} name={name} onChange={onChange} {...props} />
     <span className={styles.checkbox}></span>
     {label && <span>{label}</span>}
     {info && (