Merge pull request #1008 from coralproject/revert-1002-es6-modules-tree-shaking

Revert "Es6 modules + tree shaking"

.eslintignore

@@ -22,5 +22,11 @@ plugins/*
 !plugins/talk-plugin-author-menu
 !plugins/talk-plugin-member-since
 !plugins/talk-plugin-ignore-user
+!plugins/talk-plugin-moderation-actions
+!plugins/talk-plugin-toxic-comments
+!plugins/talk-plugin-remember-sort
+!plugins/talk-plugin-deep-reply-count
+!plugins/talk-plugin-subscriber
+!plugins/talk-plugin-flag-details
 
 node_modules

.eslintrc.json

@@ -1,75 +1,3 @@
 {
-    "env": {
-        "es6": true,
-        "node": true
-    },
-    "extends": "eslint:recommended",
-    "parserOptions": {
-        "ecmaVersion": 2017
-    },
-    "plugins": [
-      "promise",
-      "json"
-    ],
-    "rules": {
-        "indent": ["error",
-            2
-        ],
-        "no-console": "off",
-        "linebreak-style": ["error", "unix"],
-        "quotes": ["error", "single"],
-        "semi": ["error", "always"],
-        "no-template-curly-in-string": "warn",
-        "no-unsafe-negation": "warn",
-        "array-callback-return": "warn",
-        "arrow-parens": ["warn", "always"],
-        "template-curly-spacing": "warn",
-        "eqeqeq": ["error", "smart"],
-        "no-eval": "error",
-        "no-global-assign": "error",
-        "no-implied-eval": "error",
-        "lines-around-comment": ["warn", {"beforeLineComment": true}],
-        "spaced-comment": ["warn", "always", { "line": { "exceptions": ["-", "="] } }],
-        "no-script-url": "error",
-        "no-throw-literal": "error",
-        "yoda": "warn",
-        "no-path-concat": "error",
-        "eol-last": "warn",
-        "no-nested-ternary": "warn",
-        "no-tabs": "error",
-        "no-unneeded-ternary": "warn",
-        "object-curly-spacing": "warn",
-        "space-infix-ops": ["error"],
-        "space-in-parens": ["error", "never"],
-        "space-unary-ops": ["error", {
-          "words": true,
-          "nonwords": false
-        }],
-        "no-const-assign": "error",
-        "no-duplicate-imports": "error",
-        "prefer-template": "warn",
-        "comma-spacing": ["error", {
-            "after": true
-        }],
-        "no-var": "error",
-        "no-lonely-if": "error",
-        "curly": "error",
-        "no-unused-vars": ["error", {
-            "argsIgnorePattern": "^_|next",
-            "varsIgnorePattern": "^_"
-        }],
-        "no-multiple-empty-lines": ["error", {
-            "max": 1
-        }],
-        "newline-per-chained-call": ["error", {
-            "ignoreChainWithDepth": 2
-        }],
-        "promise/no-return-wrap": "error",
-        "promise/param-names": "error",
-        "promise/catch-or-return": "error",
-        "promise/no-native": "off",
-        "promise/no-nesting": "warn",
-        "promise/no-promise-in-callback": "warn",
-        "promise/no-callback-in-promise": "warn"
-    }
+  "extends": "@coralproject/eslint-config-talk"
 }

.gitignore

@@ -29,6 +29,7 @@ plugins/*
 !plugins/talk-plugin-comment-content
 !plugins/talk-plugin-permalink
 !plugins/talk-plugin-featured-comments
+!plugins/talk-plugin-toxic-comments
 !plugins/talk-plugin-sort-newest
 !plugins/talk-plugin-sort-oldest
 !plugins/talk-plugin-sort-most-replied
@@ -38,5 +39,11 @@ plugins/*
 !plugins/talk-plugin-author-menu
 !plugins/talk-plugin-member-since
 !plugins/talk-plugin-ignore-user
+!plugins/talk-plugin-moderation-actions
+!plugins/talk-plugin-toxic-comments
+!plugins/talk-plugin-remember-sort
+!plugins/talk-plugin-deep-reply-count
+!plugins/talk-plugin-subscriber
+!plugins/talk-plugin-flag-details
 
 **/node_modules/*

CODE_OF_CONDUCT.md

@@ -1,7 +1,4 @@
----
-title: Contributor Covenant Code of Conduct
-permalink: /docs/development/code-of-conduct/
----
+# Contributor Covenant Code of Conduct
 
 ## Our Pledge
 
@@ -46,7 +43,7 @@ Other inappropriate behavior:
 *	Impersonation of someone else
 *	Violating someone’s privacy
 
-If you feel that someone has harassed you or otherwise treated you or someone else inappropriately, please alert the project lead at [andrewl@mozillafoundation.org](mailto:andrewl@mozillafoundation.org).
+If you feel that someone has harassed you or otherwise treated you or someone else inappropriately, please alert the project lead at [andrewl@mozillafoundation.org](mailto:andrewl@mozillafoundation.org).
 
 
 ## Our Responsibilities
@@ -71,11 +68,11 @@ If you’re too frustrated to have a direct conversation, there are a number of
 
 * Contact the project lead, Andrew Losowsky, [andrewl@mozillafoundation.org](mailto:andrewl@mozillafoundation.org), or the technical lead. We will work with you to help you figure out how to ensure that any conflict doesn’t interfere with your work, in confidence if you would prefer.
 
-* Talk to Chris Lawrence. Chris oversees the project. He can be contacted at [clawrence@mozillafoundation.org](mailto:clawrence@mozillafoundation.org).
+* Talk to Chris Lawrence. Chris oversees the project. He can be contacted at [clawrence@mozillafoundation.org](mailto:clawrence@mozillafoundation.org).
 
 If you feel you have been unfairly accused of violating this code of conduct, you should contact Chris with a concise description of your grievance.
 
 ## Conclusion
 
 We welcome your feedback on this and every other aspect of what we do as The Coral Project, and we thank you for working with us to make it a safe, enjoyable, and friendly experience for everyone involved in the project and what we do.
-Above text is licensed CC BY-SA 4.0, adapted from the SRCCON code of conduct, FreeBSD’s code of conduct, Vox Media’s product team code of conduct, Medium’s code of conduct, as well as adapted from the Contributor Covenant.
+Above text is licensed CC BY-SA 4.0, adapted from the SRCCON code of conduct, FreeBSD’s code of conduct, Vox Media’s product team code of conduct, Medium’s code of conduct, as well as adapted from the Contributor Covenant.

CONTRIBUTING.md

@@ -1,13 +1,10 @@
----
-title: Contributor's Guide
-permalink: /docs/development/contributing/
----
+# Contributor's Guide
 
 Welcome! We are very excited that you are interested in contributing to Talk.
 
 This document is a companion to help you approach contributing. If it does not do so, please [let us know how we can improve it](https://github.com/coralproject/talk/issues)!
 
-By contributing to this project you agree to the [Code of Conduct](https://coralproject.net/code-of-conduct).
+By contributing to this project you agree to the [Code of Conduct](CODE_OF_CONDUCT.md).
 
 ## What should I Contribute?
 
@@ -33,7 +30,7 @@ Please file issues if:
 
 ### What should I include?
 
-Coral has adopted an iterative, agile development philosophy. All contributions that make it into the Talk repo should start with a story or this form:
+Coral has adopted an iterative, agile development philosophy. All contributions that make it into the Talk repository should start with a story or this form:
 
 > As a [type of person] I'd like to be able to [do something] so that I can [get some result].
 
@@ -56,15 +53,24 @@ We are looking for _documentarians_ to:
 * create new / missing sections, and
 * take the lead in making sections, or the over all structure better.
 
-Information about how to update docs can be found in our [FAQ]({{ "/docs/faq" | absolute_url }}#how-do-i-contribute-to-these-docs).
+Our documentation is stored in markdown files in the [docs](docs) directory. We
+use Jekyll to provide our docs. To preview:
+
+```shell
+cd docs
+bundle install
+bundle exec jekyll serve
+```
+
+Then visit http://127.0.0.1:4000/talk/.
 
 If you'd like to discuss a contribution, please [file an issue](https://github.com/coralproject/talk/issues) describing the changes you would like to see.
 
 ## Contributing Translations
 
-Talk's tranlations are stored in `.yml` files [here](https://github.com/coralproject/talk/tree/master/locales).
+Talk's translations are stored in `.yml` files [here](https://github.com/coralproject/talk/tree/master/locales).
 
-Translations can be submitted via pull request. If you do not use github, you can use 'en.yml' as a template and [email](https://coralproject.net/contact) the translations to us. We can import it into the repo.
+Translations can be submitted via pull request. If you do not use github, you can use 'en.yml' as a template and [email](https://coralproject.net/contact) the translations to us. We can import it into the repository.
 
 ## I want to contribute but I'm not sure what to do!
 
@@ -84,4 +90,4 @@ Have a favorite analytics engine? Data science service? CMS? Auth platform? Depl
 
 ### Favorite Features?
 
-Do you have a favorite feature of an existing platform that's not yet been done in Talk? Sounds like Talk needs that feature.
+Do you have a favorite feature of an existing platform that's not yet been done in Talk? Sounds like Talk needs that feature.

README.md

@@ -1,26 +1,19 @@
 # Talk [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
 [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fcoralproject%2Ftalk&env[TALK_FACEBOOK_APP_ID]=ignore&env[TALK_FACEBOOK_APP_SECRET]=ignore)
 
-Online comments are broken. Our open-source Talk tool rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here.](https://coralproject.net/products/talk.html)
+Online comments are broken. Our open-source Talk tool rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here](https://coralproject.net/products/talk.html).
 
-Third party licenses are available via the `/client/3rdpartylicenses.txt`
-endpoint when the server is running with built assets.
+## Documentation
 
-## Important Links
+Developer Documentation & Setup Guides https://coralproject.github.io/talk/.
 
-- Developer Documentation & Setup Guides: https://coralproject.github.io/talk/
-
-- Pivotal Tracker Backlog & Release Schedule: https://www.pivotaltracker.com/n/projects/1863625
-
-## Learn More about Coral
+## Relevant Links
 
+- Blog: https://blog.coralproject.net/
 - Community Forums: https://community.coralproject.net/
-
-- Website: https://coralproject.net
-
-- Blog: https://blog.coralproject.net
-
 - Community Guides for Journalism: https://guides.coralproject.net/
+- Project: https://coralproject.net/
+- Roadmap: https://www.pivotaltracker.com/n/projects/1863625
 
 ## License
 

app.js

@@ -2,10 +2,13 @@ const express = require('express');
 const bodyParser = require('body-parser');
 const morgan = require('morgan');
 const path = require('path');
+const merge = require('lodash/merge');
 const helmet = require('helmet');
 const compression = require('compression');
 const cookieParser = require('cookie-parser');
-const {BASE_URL, BASE_PATH, MOUNT_PATH} = require('./url');
+const {HELMET_CONFIGURATION} = require('./config');
+const {MOUNT_PATH} = require('./url');
+const {applyLocals} = require('./services/locals');
 const routes = require('./routes');
 const debug = require('debug')('talk:app');
 
@@ -26,9 +29,9 @@ app.set('trust proxy', 1);
 
 // Enable a suite of security good practices through helmet. We disable
 // frameguard to allow crossdomain injection of the embed.
-app.use(helmet({
+app.use(helmet(merge(HELMET_CONFIGURATION, {
   frameguard: false,
-}));
+})));
 
 // Compress the responses if appropriate.
 app.use(compression());
@@ -50,11 +53,8 @@ app.set('view engine', 'ejs');
 // ROUTES
 //==============================================================================
 
-// Apply the BASE_PATH, BASE_URL, and MOUNT_PATH on the app.locals, which will
-// make them available on the templates and the routers.
-app.locals.BASE_URL = BASE_URL;
-app.locals.BASE_PATH = BASE_PATH;
-app.locals.MOUNT_PATH = MOUNT_PATH;
+// Add the locals to the app renderer.
+applyLocals(app.locals);
 
 debug(`mounting routes on the ${MOUNT_PATH} path`);
 

client/.eslintrc.json

@@ -1,24 +1,3 @@
 {
-    "env": {
-        "browser": true,
-        "es6": true,
-        "mocha": true
-    },
-    "extends": "../.eslintrc.json",
-    "parserOptions": {
-        "sourceType": "module",
-        "ecmaFeatures": {
-            "experimentalObjectRestSpread": true,
-            "jsx": true
-        }
-    },
-    "parser": "babel-eslint",
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-        "react/jsx-uses-react": "error",
-        "react/jsx-uses-vars": "error",
-        "no-console": ["warn", { "allow": ["warn", "error"] }]
-    }
+  "extends": "@coralproject/eslint-config-talk/client"
 }

client/coral-admin/src/AppRouter.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
 import PropTypes from 'prop-types';
+import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
 
 import Configure from 'routes/Configure';
 import Dashboard from 'routes/Dashboard';
 import Install from 'routes/Install';
 import Stories from 'routes/Stories';
-import {CommunityLayout, Community} from 'routes/Community';
+import Community from 'routes/Community/containers/Community';
 import {ModerationLayout, Moderation} from 'routes/Moderation';
 
 import Layout from 'containers/Layout';
@@ -22,7 +22,7 @@ const routes = (
 
       {/* Community Routes */}
 
-      <Route path='community' component={CommunityLayout}>
+      <Route path='community'>
         <Route path='flagged' components={Community}>
           <Route path=':id' components={Community} />
         </Route>

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

@@ -1,4 +1,4 @@
-import qs from 'qs';
+import queryString from 'query-string';
 
 import {
   FETCH_COMMENTERS_REQUEST,
@@ -17,9 +17,8 @@ import {
 import t from 'coral-framework/services/i18n';
 
 export const fetchAccounts = (query = {}) => (dispatch, _, {rest}) => {
-
   dispatch(requestFetchAccounts());
-  rest(`/users?${qs.stringify(query)}`)
+  rest(`/users?${queryString.stringify(query)}`)
     .then(({result, page, count, limit, totalPages}) =>{
       dispatch({
         type: FETCH_COMMENTERS_SUCCESS,

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

@@ -128,18 +128,18 @@ const checkInstallRequest = () => ({type: actions.CHECK_INSTALL_REQUEST});
 const checkInstallSuccess = (installed) => ({type: actions.CHECK_INSTALL_SUCCESS, installed});
 const checkInstallFailure = (error) => ({type: actions.CHECK_INSTALL_FAILURE, error});
 
-export const checkInstall = (next) => (dispatch, _, {rest}) => {
+export const checkInstall = (next) => async (dispatch, _, {rest}) => {
   dispatch(checkInstallRequest());
-  rest('/setup')
-    .then(({installed}) => {
-      dispatch(checkInstallSuccess(installed));
-      if (installed) {
-        next();
-      }
-    })
-    .catch((error) => {
-      console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch(checkInstallFailure(errorMessage));
-    });
+
+  try {
+    const {installed} = await rest('/setup');
+    dispatch(checkInstallSuccess(installed));
+    if (installed) {
+      next();
+    }
+  } catch (error) {
+    console.error(error);
+    const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+    dispatch(checkInstallFailure(errorMessage));
+  }
 };

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

@@ -4,10 +4,8 @@ export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, user
 export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
 
 export const changeUserDetailStatuses = (tab) => {
-  let statuses;
-  if (tab === 'all') {
-    statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'];
-  } else if (tab === 'rejected') {
+  let statuses = null;
+  if (tab === 'rejected') {
     statuses = ['REJECTED'];
   }
   return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};

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

@@ -1,32 +0,0 @@
-import React, {PropTypes} from 'react';
-import styles from './ModerationList.css';
-import {Button} from 'coral-ui';
-import {menuActionsMap} from '../utils/moderationQueueActionsMap';
-
-import t from 'coral-framework/services/i18n';
-
-const ActionButton = ({type = '', active, ...props}) => {
-  const typeName = type.toLowerCase();
-  let text = menuActionsMap[type].text;
-
-  if (text === 'approve' && active) {
-    text = 'approved';
-  } else if (text === 'reject' && active) {
-    text = 'rejected';
-  }
-
-  return (
-    <Button
-      className={`${typeName} ${styles.actionButton} ${props.minimal ? styles.minimal : ''} ${active ? styles[`${typeName}__active`] : ''}`}
-      cStyle={typeName}
-      icon={menuActionsMap[type].icon}
-      onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
-    >{props.minimal ? '' : t(`modqueue.${text}`)}</Button>
-  );
-};
-
-ActionButton.propTypes = {
-  active: PropTypes.bool
-};
-
-export default ActionButton;

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Button, Icon} from 'coral-ui';
 import {Menu} from 'react-mdl';
 import cn from 'classnames';
@@ -57,6 +58,7 @@ class ActionsMenu extends React.Component {
 
 ActionsMenu.propTypes = {
   icon: PropTypes.string,
+  children: PropTypes.node,
 };
 
 export default ActionsMenu;

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

@@ -1,9 +1,14 @@
 import React from 'react';
 import cn from 'classnames';
 import {MenuItem} from 'react-mdl';
+import PropTypes from 'prop-types';
 import styles from './ActionsMenu.css';
 
 const ActionsMenuItem = (props) =>
   <MenuItem className={cn(styles.menuItem, props.className)} {...props} />;
 
+ActionsMenuItem.propTypes = {
+  className: PropTypes.string,
+};
+
 export default ActionsMenuItem;

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Layout from 'coral-admin/src/components/ui/Layout';
 import styles from './NotFound.css';
 import {Button, TextField, Alert, Success} from 'coral-ui';
@@ -104,7 +105,9 @@ AdminLogin.propTypes = {
   handleLogin: PropTypes.func.isRequired,
   passwordRequestSuccess: PropTypes.string,
   loginError: PropTypes.string,
-  recaptchaPublic: PropTypes.string
+  recaptchaPublic: PropTypes.string,
+  requestPasswordReset: PropTypes.func,
+  errorMessage: PropTypes.string,
 };
 
 export default AdminLogin;

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

@@ -0,0 +1,44 @@
+.root {
+  display: block;
+  color: #519954;
+  border: solid 2px rgba(81, 153, 84, 0.75);
+  background: white;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 24px;
+  font-size: 17px;
+  height: 47px;
+  border-radius: 3px;
+  text-transform: capitalize;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.09);
+  width: 129px;
+  transform: scale(.8);
+  margin: 0;
+
+  &:hover {
+   box-shadow: none;
+   color: white;
+   background-color: #519954;
+   cursor: pointer;
+  }
+}
+
+.active {
+  box-shadow: none;
+  color: white;
+  background-color: #519954;
+
+  &:hover {
+    cursor: not-allowed;
+  }
+}
+
+.minimal {
+  width: 45px;
+  min-width: 0;
+}
+
+.icon {
+  margin-right: 5px;
+}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import cn from 'classnames';
+import styles from './ApproveButton.css';
+import {Icon} from 'coral-ui';
+
+import t from 'coral-framework/services/i18n';
+
+const ApproveButton = ({active, minimal, onClick}) => {
+  const text = active ? t('modqueue.approved') : t('modqueue.approve');
+  return (
+    <button
+      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active})}
+      onClick={onClick}
+    >
+      <Icon name={'done'} className={styles.icon} />
+      {!minimal && text}
+    </button>
+  );
+};
+
+ApproveButton.propTypes = {
+  active: PropTypes.bool,
+  minimal: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export default ApproveButton;
+

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Dialog} from 'coral-ui';
 import styles from './BanUserDialog.css';
 

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

@@ -1,3 +1,7 @@
+.root {
+  position: relative;
+}
+
 .bodyLeave {
   position: absolute;
   width: 100%;

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

@@ -2,11 +2,13 @@ import React from 'react';
 import {murmur3} from 'murmurhash-js';
 import {CSSTransitionGroup} from 'react-transition-group';
 import styles from './CommentAnimatedEdit.css';
+import PropTypes from 'prop-types';
 
-export default ({children, body}) => {
+const CommentBodyHighlighter = ({children, body}) => {
   return (
     <CSSTransitionGroup
       component={'div'}
+      className={styles.root}
       transitionName={{
         enter: styles.bodyEnter,
         enterActive: styles.bodyEnterActive,
@@ -22,3 +24,10 @@ export default ({children, body}) => {
     </CSSTransitionGroup>
   );
 };
+
+CommentBodyHighlighter.propTypes = {
+  children: PropTypes.node,
+  body: PropTypes.string,
+};
+
+export default CommentBodyHighlighter;

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

@@ -1,25 +1,78 @@
 import React from 'react';
-import Highlighter from 'react-highlight-words';
-import Linkify from 'react-linkify';
-const linkify = new Linkify();
+import {matchLinks} from '../utils';
+import memoize from 'lodash/memoize';
+
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+
+// generate a regulare expression that catches the `phrases`.
+function generateRegExp(phrases) {
+  const inner = phrases
+    .map((phrase) =>
+      phrase.split(/\s+/)
+        .map((word) => escapeRegExp(word))
+        .join('[\\s"?!.]+')
+    ).join('|');
+
+  return new RegExp(`(^|[^\\w])(${inner})(?=[^\\w]|$)`, 'iu');
+}
+
+// Generate a regular expression detecting `suspectWords` and `bannedWords` phrases.
+function getPhrasesRegexp(suspectWords, bannedWords) {
+  return generateRegExp([...suspectWords, ...bannedWords]);
+}
+
+// Memoized version as arguments rarely change.
+const getPhrasesRegexpMemoized = memoize(getPhrasesRegexp);
+
+// markPhrases looks for `supsectWords` and `bannedWords` inside `body` and highlights them by returning
+// an array of React Elements.
+function markPhrases(body, suspectWords, bannedWords, keyPrefix) {
+  const regexp = getPhrasesRegexpMemoized(suspectWords, bannedWords);
+  const tokens = body.split(regexp);
+  return tokens.map((token, i) =>
+    i % 3 === 2
+      ? <mark key={`${keyPrefix}_${i}`}>{token}</mark>
+      : token
+  );
+}
+
+// markLinks looks for links inside `body` and highlights them by returning
+// an array of React Elements.
+function markLinks(body) {
+  const matches = matchLinks(body);
+  const content = [];
+  let index = 0;
+  if (matches) {
+    matches
+      .forEach((match, i) => {
+        content.push(body.substring(index, match.index));
+        content.push(<mark key={i}>{match.text}</mark>);
+        index = match.lastIndex;
+      });
+  }
+  content.push(body.substring(index));
+  return content;
+}
 
 export default ({suspectWords, bannedWords, body, ...rest}) => {
 
-  const links = linkify.getMatches(body);
-  const linkText = links ? links.map((link) => link.raw) : [];
+  // First highlight links.
+  const content = markLinks(body)
+    .map((element, index) => {
 
-  const searchWords = [
-    ...suspectWords,
-    ...bannedWords,
-    ...linkText
-  ];
+      // Keep highlighted links.
+      if (typeof element !== 'string') {
+        return element;
+      }
 
+      // Highlight suspect and banned phrase inside this part of text.
+      return markPhrases(element, suspectWords, bannedWords, index);
+    });
   return (
-    <Highlighter
-      {...rest}
-      autoEscape={true}
-      searchWords={searchWords}
-      textToHighlight={body}
-    />
+    <div {...rest}>
+      {content}
+    </div>
   );
 };

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

@@ -1,4 +0,0 @@
-
-.textareaContainer {
-  width: 100%;
-}

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

@@ -1,35 +0,0 @@
-
-import React from 'react';
-import styles from './CommentBox.css';
-import {Button} from 'react-mdl';
-
-// Renders a comment box for creating a new comment
-export default class CommentBox extends React.Component {
-  constructor (props) {
-    super(props);
-    this.state = {name: '', body: ''};
-    this.onSubmit = this.onSubmit.bind(this);
-  }
-
-  onSubmit () {
-    const {name, body} = this.state;
-    this.props.onSubmit({name, body});
-    this.setState({body: '', name: ''});
-  }
-
-  render (props, {name, body}) {
-    return (
-      <div>
-        <div class={`${styles.textareaContainer} mdl-textfield mdl-js-textfield`}>
-          <input type='text' value={name} onInput={this.linkState('name')} class='mdl-textfield__input' id='name' />
-          <label class='mdl-textfield__label' for='name'>Your name</label>
-        </div>
-        <div class={`${styles.textareaContainer} mdl-textfield mdl-js-textfield`}>
-          <textarea value={body} onInput={this.linkState('body')} class='mdl-textfield__input' type='text' rows='5' id='comment' />
-          <label class='mdl-textfield__label' for='comment'>Write your comment</label>
-        </div>
-        <Button onClick={this.onSubmit} raised>Post</Button>
-      </div>
-    );
-  }
-}

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

@@ -0,0 +1,18 @@
+.root {
+  min-height: 25px;
+  padding: 0 16px;
+}
+
+.moreDetail {
+  position: absolute;
+  font-size: 12px;
+  font-weight: 500;
+  color: black;
+  right: 16px;
+
+  &:hover {
+    opacity: 0.9;
+    cursor: pointer;
+  }
+}
+

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

@@ -0,0 +1,66 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import styles from './CommentDetails.css';
+import t from 'coral-framework/services/i18n';
+import Slot from 'coral-framework/components/Slot';
+import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
+
+class CommentDetails extends Component {
+  state = {
+    showDetail: false
+  };
+
+  constructor () {
+    super();
+    this.state = {
+      showDetail: false
+    };
+  }
+
+  toggleDetail = () => {
+    this.setState((state) => ({
+      showDetail: !state.showDetail
+    }));
+  }
+
+  render() {
+    const {data, root, comment} = this.props;
+    const {showDetail} = this.state;
+    const queryData = {
+      root,
+      comment,
+    };
+
+    return (
+      <div className={styles.root}>
+        <IfSlotIsNotEmpty
+          queryData={queryData}
+          slot={['adminCommentMoreDetails', 'adminCommentMoreFlagDetails']}
+        >
+          <a onClick={this.toggleDetail} className={styles.moreDetail}>
+            {showDetail ? t('modqueue.less_detail') : t('modqueue.more_detail')}
+          </a>
+        </IfSlotIsNotEmpty>
+        <Slot
+          fill="adminCommentDetailArea"
+          data={data}
+          queryData={queryData}
+          more={showDetail}
+        />
+        {showDetail && <Slot
+          fill="adminCommentMoreDetails"
+          data={data}
+          queryData={queryData}
+        />}
+      </div>
+    );
+  }
+}
+
+CommentDetails.propTypes = {
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  comment: PropTypes.object.isRequired,
+};
+
+export default CommentDetails;

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

@@ -0,0 +1,27 @@
+.root {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.coreLabels {
+  > *:not(:last-child) {
+    margin-right: 3px;
+  }
+}
+
+.slot {
+  &:not(:empty) {
+    padding-left: 3px;
+  }
+  > *:not(:last-child) {
+    margin-right: 3px;
+  }
+}
+
+.replyLabel {
+  background-color: #3D73D5;
+}
+
+.premodLabel {
+  background-color: #063B9A;
+}

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Label from 'coral-ui/components/Label';
+import Slot from 'coral-framework/components/Slot';
+import FlagLabel from 'coral-ui/components/FlagLabel';
+import cn from 'classnames';
+import styles from './CommentLabels.css';
+
+function isUserFlagged(actions) {
+  return actions.some((action) => action.__typename === 'FlagAction' && action.user);
+}
+
+function hasSuspectedWords(actions) {
+  return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'Matched suspect word filter');
+}
+
+function hasHistoryFlag(actions) {
+  return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TRUST');
+}
+
+const CommentLabels = ({comment, comment: {className, status, actions, hasParent}}) => {
+  return (
+    <div className={cn(className, styles.root)}>
+      <div className={styles.coreLabels}>
+        {hasParent && <Label iconName="reply" className={styles.replyLabel}>reply</Label>}
+        {status === 'PREMOD' && <Label iconName="query_builder" className={styles.premodLabel}>Pre-Mod</Label>}
+        {isUserFlagged(actions) && <FlagLabel iconName="person">User</FlagLabel>}
+        {hasSuspectedWords(actions) && <FlagLabel iconName="sms_failed">Suspect</FlagLabel>}
+        {hasHistoryFlag(actions) && <FlagLabel iconName="sentiment_very_dissatisfied">History</FlagLabel>}
+      </div>
+      <Slot className={styles.slot} fill="adminCommentLabels" queryData={{comment}} />
+    </div>
+  );
+};
+
+CommentLabels.propTypes = {
+  comment: PropTypes.shape({
+    className: PropTypes.string,
+    status: PropTypes.string,
+    actions: PropTypes.array,
+    hasParent: PropTypes.bool,
+  }),
+};
+
+export default CommentLabels;

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

@@ -1,30 +0,0 @@
-.commentType {
-  display: inline-block;
-  color: white;
-  background: grey;
-  box-sizing: border-box;
-  padding: 2px 5px;
-  font-size: 12px;
-  height: 24px;
-  letter-spacing: 0.4px;
-  line-height: 22px;
-  
-  > i {
-    font-size: 14px;
-    vertical-align: text-top;
-    margin: 0;
-    margin-right: 4px;
-  }
-
-  &.premod {
-    background: #063B9A;
-  }
-
-  &.flagged {
-    background: #d03235;
-  }
-
-  &.no-type {
-    display: none;
-  }
-}

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

@@ -1,31 +0,0 @@
-import React, {PropTypes} from 'react';
-import styles from './CommentType.css';
-import {Icon} from 'coral-ui';
-import cn from 'classnames';
-
-const CommentType = (props) => {
-  const typeData = getTypeData(props.type);
-
-  return (
-    <span className={cn(styles.commentType, styles[typeData.className], props.className)}>
-      <Icon name={typeData.icon}/>{typeData.text}
-    </span>
-  );
-};
-
-const getTypeData = (type) => {
-  switch (type) {
-  case 'premod':
-    return {icon: 'query_builder', text: 'Pre-Mod', className: 'premod'};
-  case 'flagged':
-    return {icon: 'flag', text: 'Flagged', className: 'flagged'};
-  default:
-    return {icon: 'flag', className: 'no-type'};
-  }
-};
-
-CommentType.propTypes = {
-  type: PropTypes.string.isRequired
-};
-
-export default CommentType;

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

@@ -5,7 +5,7 @@
   vertical-align: middle;
   padding: 1px 5px;
   border-radius: 2px;
-  margin-left: 2px;
+  margin-left: 5px;
   line-height: 18px;
   box-sizing: border-box;
   height: 18px;

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

@@ -1,9 +1,10 @@
-import React, {PropTypes} from 'react';
-import styles from './CommentCount.css';
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CountBadge.css';
 
 import t from 'coral-framework/services/i18n';
 
-const CommentCount = ({count}) => {
+const CountBadge = ({count}) => {
   let number = count;
 
   // shorten large counts to abbreviations
@@ -20,8 +21,8 @@ const CommentCount = ({count}) => {
   );
 };
 
-CommentCount.propTypes = {
+CountBadge.propTypes = {
   count: PropTypes.number.isRequired
 };
 
-export default CommentCount;
+export default CountBadge;

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Card} from 'coral-ui';
 
 const EmptyCard = (props) => (

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

@@ -1,83 +0,0 @@
-.flagBox {
-  border-top: 1px solid rgba(66, 66, 66, 0.12);
-  margin-top: 10px;
-  .container {
-    padding: 0 14px;
-  }
-
-  .detail {
-    padding: 0 20px 16px;
-    ul {
-      padding: 0;
-      list-style: none;
-      font-size: 12px;
-      font-weight: 500;
-    }
-  }
-
-  .header {
-    position: relative;
-    .moreDetail {
-      float: right;
-      font-size: 12px;
-      font-weight: 500;
-      margin-right: 10px;
-      margin-top: 8px;
-      color: black;
-
-      &:hover {
-        opacity: 0.9;
-        cursor: pointer;
-      }
-    }
-    i {
-      vertical-align: middle;
-      font-size: 12px;
-    }
-    ul {
-      vertical-align: middle;
-      list-style: none;
-      display: inline-block;
-      padding: 0;
-      margin-left: 10px;
-      font-size: 12px;
-    }
-  }
-
-  h3 {
-    vertical-align: middle;
-    margin: 0;
-    font-weight: 500;
-    display: inline-block;
-    margin-left: 7px;
-    font-size: 12px;
-  }
-}
-
-.lessDetail {
-  display: inline-block;
-  margin-right: 10px;
-}
-
-.subDetail {
-  font-weight: normal;
-  color: #888;
-
-  span {
-    color: black;
-  }
-}
-
-.username {
-  color: #393B44;
-  text-decoration: none;
-  cursor: pointer;
-  font-weight: 600;
-  padding: 2px 5px;
-  border-radius: 2px;
-  margin-left: -5px;
-  transition: background-color 200ms ease;
-&:hover {
-   background-color: #E0E0E0;
- }
-}

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

@@ -1,96 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import {Icon} from 'coral-ui';
-import styles from './FlagBox.css';
-import t from 'coral-framework/services/i18n';
-
-const shortReasons = {
-  'This comment is offensive': t('modqueue.offensive'),
-  'This looks like an ad/marketing': t('modqueue.spam_ads'),
-  'This user is impersonating': t('modqueue.impersonating'),
-  'I don\'t like this username': t('modqueue.dont_like_username'),
-  'Other': t('modqueue.other')
-};
-
-class FlagBox extends Component {
-  constructor () {
-    super();
-    this.state = {
-      showDetail: false
-    };
-  }
-
-  toggleDetail = () => {
-    this.setState((state) => ({
-      showDetail: !state.showDetail
-    }));
-  }
-
-  reasonMap = (reason) => {
-    const shortReason = shortReasons[reason];
-
-    // if the short reason isn't found, just return the long one.
-    return shortReason ? shortReason : reason;
-  }
-
-  render() {
-    const {actionSummaries, actions, viewUserDetail} = this.props;
-    const {showDetail} = this.state;
-
-    return (
-      <div className={styles.flagBox}>
-        <div className={styles.container}>
-          <div className={styles.header}>
-            <Icon name='flag'/><h3>{t('community.flags')} ({actionSummaries.length}):</h3>
-            <ul>
-              {actionSummaries.map((action, i) =>
-                <li key={i} className={styles.lessDetail}> {this.reasonMap(action.reason)} (<strong>{action.count}</strong>)</li>
-              )}
-            </ul>
-            <a onClick={this.toggleDetail} className={styles.moreDetail}>{showDetail ? t('modqueue.less_detail') : t('modqueue.more_detail')}</a>
-          </div>
-          {showDetail && (
-            <div className={styles.detail}>
-              <ul>
-                {actionSummaries.map((summary, i) => {
-
-                  const actionList = actions.filter((a) => a.reason === summary.reason);
-
-                  return (
-                    <li key={i}>
-                      {this.reasonMap(summary.reason)} (<strong>{summary.count}</strong>)
-                      <ul>
-                        {actionList.map((action, j) =>
-                          <li key={`${i}_${j}`} className={styles.subDetail}>
-                            {action.user &&
-                              <a className={styles.username} onClick={() => viewUserDetail(action.user.id)}>
-                                {action.user.username}
-                              </a>
-                            }
-                            {action.message}
-                          </li>
-                        )}
-                      </ul>
-                    </li>
-                  );
-                })}
-              </ul>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-}
-
-FlagBox.propTypes = {
-  actionSummaries: PropTypes.arrayOf(PropTypes.shape({
-    reason: PropTypes.string,
-    count: PropTypes.number
-  })).isRequired,
-  actions: PropTypes.arrayOf(PropTypes.shape({
-    message: PropTypes.string,
-    user: PropTypes.shape({username: PropTypes.string})
-  })).isRequired
-};
-
-export default FlagBox;

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import Linkify from 'react-linkify';
-const linkify = new Linkify();
+import {matchLinks} from '../utils';
 
 export default ({text, children}) => {
-  const hasLinks = !!linkify.getMatches(text);
+  const hasLinks = !!matchLinks(text);
 
   if (!hasLinks) {
     return null;

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Button} from 'coral-ui';
 import styles from './LoadMore.css';
 import cn from 'classnames';

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Modal from 'components/Modal';
 import styles from './ModerationKeysModal.css';
 import t from 'coral-framework/services/i18n';

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

@@ -1,208 +0,0 @@
-
-@custom-media --big-viewport (min-width: 780px);
-
-.list {
-  padding: 8px 0;
-  list-style: none;
-  display: block;
-
-  &.singleView .listItem {
-    display: none;
-  }
-
-  &.singleView .listItem.activeItem {
-    display: block;
-    height: 100%;
-    font-size: 1.5em;
-    line-height: 1.5em;
-    border: none;
-
-    .actions {
-      position: fixed;
-      bottom: 60px;
-      left: 25%;
-      margin: 0 auto;
-      display: flex;
-      justify-content: space-around;
-      width: 50%;
-      margin: 0;
-    }
-
-    .actionButton {
-      transform: scale(1.4);
-    }
-  }
-}
-
-.listItem {
-  border-bottom: 1px solid #e0e0e0;
-  font-size: 16px;
-  width: 100%;
-  max-width: 660px;
-  min-width: 400px;
-  margin: 0 auto;
-  padding: 16px 14px;
-  position: relative;
-  transition: box-shadow 200ms;
-
-
-  &:hover {
-     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-   .sideActions {
-     position: absolute;
-     right: 0;
-     height: 100%;
-     top: 0;
-     padding: 40px 18px;
-     box-sizing: border-box;
-   }
-
-  .itemHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .author {
-      min-width: 230px;
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .itemBody {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .avatar {
-    margin-right: 16px;
-    height: 40px;
-    width: 40px;
-    border-radius: 50%;
-    background-color: #757575;
-    font-size: 40px;
-    color: #fff;
-  }
-
-  .created {
-    color: #666;
-    font-size: 13px;
-    margin-left: 40px;
-  }
-
-  .body {
-    margin-top: 20px;
-    flex: 1;
-    font-size: 0.88em;
-    color: black;
-  }
-
-  .flagged {
-    color: rgba(255, 0, 0, .5);
-    padding-top: 15px;
-    padding-left: 10px;
-  }
-
-  .flagCount{
-    font-size: 12px;
-    color: #d32f2f;
-  }
-
-}
-
-.empty {
-  color: #444;
-  margin-top: 50px;
-  text-align: center;
-}
-
-
-@media (--big-viewport) {
-  .listItem {
-    border: 1px solid #e0e0e0;
-    margin-bottom: 30px;
-
-    &:last-child {
-      border-bottom: 1px solid #e0e0e0;
-    }
-
-    &.activeItem {
-      border: 2px solid #333;
-    }
-  }
-
-}
-
-.hasLinks {
-  color: #f00;
-  text-align: right;
-  display: flex;
-  align-items: center;
-
-  i {
-    margin-right: 5px;
-  }
-}
-
-.banned {
-  color: #f00;
-  text-align: left;
-  display: flex;
-  align-items: center;
-
-  i {
-    margin-right: 5px;
-  }
-}
-
-.ban {
-  display: block;
-  text-align: center;
-  margin-top: 5px;
-}
-
-.banButton {
-  width: 114px;
-  letter-spacing: 1px;
-
-  i {
-    vertical-align: middle;
-    margin-right: 10px;
-    font-size: 14px;
-  }
-}
-
-.selected {
-  border-radius: 10px;
-}
-
-
-.actionButton {
-  transform: scale(.8);
-  margin: 0;
-}
-
-.minimal {
-  width: 45px;
-  min-width: 0;
-}
-
-.approve__active {
-  box-shadow: none;
-  color: white;
-  background-color: #519954;
-  cursor: not-allowed;
-}
-
-.reject__active, .rejected__active {
-  color: white;
-  background-color: #D03235;
-  box-shadow: none;
-  cursor: not-allowed;
-}

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

@@ -1,227 +0,0 @@
-import React, {PropTypes} from 'react';
-import styles from './ModerationList.css';
-import key from 'keymaster';
-import Hammer from 'hammerjs';
-import Comment from './Comment';
-import User from './User';
-import SuspendUserModal from './SuspendUserModal';
-
-// Each action has different meaning and configuration
-const menuOptionsMap = {
-  'reject': {status: 'REJECTED', icon: 'close', key: 'f'},
-  'approve': {status: 'ACCEPTED', icon: 'done', key: 'd'},
-  '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('APPROVED', 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 && <User
-        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/RejectButton.css

@@ -0,0 +1,44 @@
+.root {
+  display: block;
+  color: #D03235;
+  border: solid 1px #D03235;
+  background: white;
+  padding: 10px 11px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 24px;
+  font-size: 17px;
+  height: 47px;
+  border-radius: 3px;
+  text-transform: capitalize;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.09);
+  width: 129px;
+  transform: scale(.8);
+  margin: 0;
+
+  &:hover {
+   color: white;
+   background-color: #D03235;
+   box-shadow: none;
+   cursor: pointer;
+ }
+}
+
+.active {
+  color: white;
+  background-color: #D03235;
+  box-shadow: none;
+
+  &:hover {
+    cursor: not-allowed;
+  }
+}
+
+.minimal {
+  width: 45px;
+  min-width: 0;
+}
+
+.icon {
+  margin-right: 5px;
+}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import cn from 'classnames';
+import styles from './RejectButton.css';
+import {Icon} from 'coral-ui';
+
+import t from 'coral-framework/services/i18n';
+
+const RejectButton = ({active, minimal, onClick}) => {
+  const text = active ? t('modqueue.rejected') : t('modqueue.reject');
+  return (
+    <button
+      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active})}
+      onClick={onClick}
+    >
+      <Icon name={'close'} className={styles.icon} />
+      {!minimal && text}
+    </button>
+  );
+};
+
+RejectButton.propTypes = {
+  active: PropTypes.bool,
+  minimal: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export default RejectButton;
+

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import {Badge} from 'coral-ui';
-import t from 'coral-framework/services/i18n';
-
-const ReplyBadge = () => (
-  <Badge icon="reply">
-    {t('modqueue.reply')}
-  </Badge>
-);
-
-export default ReplyBadge;

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Dialog} from 'coral-ui';
 import {RadioGroup, Radio} from 'react-mdl';
 import styles from './SuspendUserDialog.css';

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

@@ -5,7 +5,6 @@ import styles from './UserDetail.css';
 import {Icon, Button, Drawer, Spinner} from 'coral-ui';
 import {Slot} from 'coral-framework/components';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
-import {actionsMap} from '../utils/moderationQueueActionsMap';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 import LoadMore from '../components/LoadMore';
 import cn from 'classnames';
@@ -28,16 +27,26 @@ export default class UserDetail extends React.Component {
     bulkReject: PropTypes.func.isRequired,
   }
 
-  rejectThenReload = (info) => {
-    this.props.rejectComment(info).then(() => {
+  rejectThenReload = async (info) => {
+    try {
+      await this.props.rejectComment(info);
       this.props.data.refetch();
-    });
+    } catch (err) {
+
+      // TODO: handle error.
+      console.error(err);
+    }
   }
 
-  acceptThenReload = (info) => {
-    this.props.acceptComment(info).then(() => {
+  acceptThenReload = async (info) => {
+    try {
+      await this.props.acceptComment(info);
       this.props.data.refetch();
-    });
+    } catch (err) {
+
+      // TODO: handle error.
+      console.error(err);
+    }
   }
 
   showAll = () => {
@@ -60,6 +69,7 @@ export default class UserDetail extends React.Component {
 
   renderLoaded() {
     const {
+      data,
       root,
       root: {
         user,
@@ -133,7 +143,7 @@ export default class UserDetail extends React.Component {
           <Slot
             fill="userProfile"
             data={this.props.data}
-            queryData={root, user}
+            queryData={{root, user}}
           />
 
           <hr/>
@@ -167,16 +177,15 @@ export default class UserDetail extends React.Component {
           <div>
             {
               nodes.map((comment) => {
-                const status = comment.action_summaries ? 'FLAGGED' : comment.status;
                 const selected = selectedCommentIds.indexOf(comment.id) !== -1;
                 return <Comment
                   key={comment.id}
                   user={user}
+                  root={root}
+                  data={data}
                   comment={comment}
-                  selected={false}
                   suspectWords={suspectWords}
                   bannedWords={bannedWords}
-                  actions={actionsMap[status]}
                   acceptComment={this.acceptThenReload}
                   rejectComment={this.rejectThenReload}
                   selected={selected}

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

@@ -1,4 +1,5 @@
 .root {
+  position: relative;
   display: block;
   margin: 0;
   border-bottom: 1px solid #e0e0e0;
@@ -55,7 +56,7 @@
   position: relative;
 }
 
-.badgeBar {
+.labels {
   position: absolute;
   right: 0px;
 }

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

@@ -1,41 +1,43 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Link} from 'react-router';
 
 import {Icon} from 'coral-ui';
-import FlagBox from './FlagBox';
-import ReplyBadge from './ReplyBadge';
+import CommentDetails from './CommentDetails';
 import styles from './UserDetailComment.css';
-import CommentType from './CommentType';
-import {getActionSummary} from 'coral-framework/utils';
-import ActionButton from 'coral-admin/src/components/ActionButton';
 import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
-import {getCommentType} from 'coral-admin/src/utils/comment';
 import CommentAnimatedEdit from './CommentAnimatedEdit';
+import CommentLabels from '../containers/CommentLabels';
+import ApproveButton from './ApproveButton';
+import RejectButton from 'coral-admin/src/components/RejectButton';
 
 import t, {timeago} from 'coral-framework/services/i18n';
 
 class UserDetailComment extends React.Component {
 
+  approve = () => (this.props.comment.status === 'ACCEPTED'
+    ? null
+    : this.props.acceptComment({commentId: this.props.comment.id})
+  );
+
+  reject = () => (this.props.comment.status === 'REJECTED'
+    ? null
+    : this.props.rejectComment({commentId: this.props.comment.id})
+  );
+
   render() {
     const {
-      actions = [],
       comment,
-      viewUserDetail,
       suspectWords,
       bannedWords,
       selected,
       toggleSelect,
       className,
-      user,
-      ...props
+      data,
     } = this.props;
 
-    const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
-    const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
-    const commentType = getCommentType(comment);
-
     return (
       <li
         tabIndex={0}
@@ -58,9 +60,8 @@ class UserDetailComment extends React.Component {
                 : null
             }
 
-            <div className={styles.badgeBar}>
-              {comment.hasParent && <ReplyBadge/>}
-              <CommentType type={commentType}/>
+            <div className={styles.labels}>
+              <CommentLabels comment={comment} />
             </div>
           </div>
           <div className={styles.story}>
@@ -69,7 +70,7 @@ class UserDetailComment extends React.Component {
           </div>
           <CommentAnimatedEdit body={comment.body}>
             <div className={styles.bodyContainer}>
-              <p className={styles.body}>
+              <div className={styles.body}>
                 <CommentBodyHighlighter
                   suspectWords={suspectWords}
                   bannedWords={bannedWords}
@@ -83,7 +84,7 @@ class UserDetailComment extends React.Component {
                 >
                   <Icon name="open_in_new" /> {t('comment.view_context')}
                 </a>
-              </p>
+              </div>
               <div className={styles.sideActions}>
                 <IfHasLink text={comment.body}>
                   <span className={styles.hasLinks}>
@@ -91,41 +92,26 @@ class UserDetailComment extends React.Component {
                   </span>
                 </IfHasLink>
                 <div className={styles.actions}>
-                  {actions.map((action, i) => {
-                    const active =
-                      (action === 'REJECT' && comment.status === 'REJECTED') ||
-                      (action === 'APPROVE' && comment.status === 'ACCEPTED');
-                    return (
-                      <ActionButton
-                        minimal={true}
-                        key={i}
-                        type={action}
-                        user={user}
-                        status={comment.status}
-                        active={active}
-                        acceptComment={() =>
-                          (comment.status === 'ACCEPTED'
-                            ? null
-                            : props.acceptComment({commentId: comment.id}))}
-                        rejectComment={() =>
-                          (comment.status === 'REJECTED'
-                            ? null
-                            : props.rejectComment({commentId: comment.id}))}
-                      />
-                    );
-                  })}
+                  <ApproveButton
+                    active={comment.status === 'ACCEPTED'}
+                    onClick={this.approve}
+                    minimal
+                  />
+                  <RejectButton
+                    active={comment.status === 'REJECTED'}
+                    onClick={this.reject}
+                    minimal
+                  />
                 </div>
               </div>
             </div>
           </CommentAnimatedEdit>
         </div>
-        {flagActions && flagActions.length
-          ? <FlagBox
-            actions={flagActions}
-            actionSummaries={flagActionSummaries}
-            viewUserDetail={viewUserDetail}
-          />
-          : null}
+        <CommentDetails
+          data={data}
+          root={root}
+          comment={comment}
+        />
       </li>
     );
   }
@@ -141,8 +127,9 @@ UserDetailComment.propTypes = {
   bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   toggleSelect: PropTypes.func,
   comment: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    status: PropTypes.string.isRequired,
     body: PropTypes.string.isRequired,
-    action_summaries: PropTypes.array,
     actions: PropTypes.array,
     created_at: PropTypes.string.isRequired,
     asset: PropTypes.shape({

client/coral-admin/src/components/ui/Drawer.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Navigation, Drawer} from 'react-mdl';
 import {IndexLink, Link} from 'react-router';
 import styles from './Drawer.css';

client/coral-admin/src/components/ui/Header.js

@@ -1,105 +1,115 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
 import {Link, IndexLink} from 'react-router';
 import styles from './Header.css';
 import t from 'coral-framework/services/i18n';
 import {Logo} from './Logo';
 import {can} from 'coral-framework/services/perms';
+import Indicator from './Indicator';
 
 const CoralHeader = ({
   handleLogout,
   showShortcuts = () => {},
-  auth
-}) => (
-  <Header className={styles.header}>
-    <Logo className={styles.logo} />
-    <div>
-      {
-        auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
-          <Navigation className={styles.nav}>
-            <IndexLink
-              id='dashboardNav'
-              className={styles.navLink}
-              to="/admin/dashboard"
-              activeClassName={styles.active}>
-              {t('configure.dashboard')}
-            </IndexLink>
-            {
-              can(auth.user, 'MODERATE_COMMENTS') && (
-                <Link
-                  id='moderateNav'
-                  className={styles.navLink}
-                  to="/admin/moderate"
-                  activeClassName={styles.active}>
-                  {t('configure.moderate')}
-                </Link>
-              )
-            }
-            <Link
-              id='streamsNav'
-              className={styles.navLink}
-              to="/admin/stories"
-              activeClassName={styles.active}>
-              {t('configure.stories')}
-            </Link>
-            <Link
-              id='communityNav'
-              className={styles.navLink}
-              to="/admin/community"
-              activeClassName={styles.active}>
-              {t('configure.community')}
-            </Link>
-            {
-              can(auth.user, 'UPDATE_CONFIG') && (
-                <Link
-                  id='configureNav'
-                  className={styles.navLink}
-                  to="/admin/configure"
-                  activeClassName={styles.active}>
-                  {t('configure.configure')}
-                </Link>
-              )
-            }
-          </Navigation>
-          :
-          null
-      }
-      <div className={styles.rightPanel}>
-        <ul>
-          <li className={styles.settings}>
-            <div>
-              <IconButton name="settings" id="menu-settings"/>
-              <Menu target="menu-settings" align="right">
-                <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
-                <MenuItem>
-                  <a href="https://github.com/coralproject/talk/releases" target="_blank">
-                      View latest version
-                  </a>
-                </MenuItem>
-                <MenuItem>
-                  <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank">
-                      Report a bug or give feedback
-                  </a>
-                </MenuItem>
-                <MenuItem onClick={handleLogout}>
-                  {t('configure.sign_out')}
-                </MenuItem>
-              </Menu>
-            </div>
-          </li>
-          <li>        
-            {`v${process.env.VERSION}`}        
-          </li>
-        </ul>
+  auth,
+  root
+}) => {
+  return (
+    <Header className={styles.header}>
+      <Logo className={styles.logo} />
+      <div> 
+        {
+          auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
+            <Navigation className={styles.nav}>
+              <IndexLink
+                id='dashboardNav'
+                className={styles.navLink}
+                to="/admin/dashboard"
+                activeClassName={styles.active}>
+                {t('configure.dashboard')}
+              </IndexLink>
+              {
+                can(auth.user, 'MODERATE_COMMENTS') && (
+                  <Link
+                    id='moderateNav'
+                    className={styles.navLink}
+                    to="/admin/moderate"
+                    activeClassName={styles.active}>
+                    {t('configure.moderate')}
+                    {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
+                  </Link>
+                )
+              }
+              <Link
+                id='streamsNav'
+                className={styles.navLink}
+                to="/admin/stories"
+                activeClassName={styles.active}>
+                {t('configure.stories')}
+              </Link>
+
+              <Link
+                id='communityNav'
+                className={styles.navLink}
+                to="/admin/community"
+                activeClassName={styles.active}>
+                {t('configure.community')}
+                {root.flaggedUsernamesCount !== 0 && <Indicator />}
+              </Link>
+
+              {
+                can(auth.user, 'UPDATE_CONFIG') && (
+                  <Link
+                    id='configureNav'
+                    className={styles.navLink}
+                    to="/admin/configure"
+                    activeClassName={styles.active}>
+                    {t('configure.configure')}
+                  </Link>
+                )
+              }
+            </Navigation>
+            :
+            null
+        }
+        <div className={styles.rightPanel}>
+          <ul>
+            <li className={styles.settings}>
+              <div>
+                <IconButton name="settings" id="menu-settings"/>
+                <Menu target="menu-settings" align="right">
+                  <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                  <MenuItem>
+                    <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
+                        View latest version
+                    </a>
+                  </MenuItem>
+                  <MenuItem>
+                    <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
+                        Report a bug or give feedback
+                    </a>
+                  </MenuItem>
+                  <MenuItem onClick={handleLogout}>
+                    {t('configure.sign_out')}
+                  </MenuItem>
+                </Menu>
+              </div>
+            </li>
+            <li>
+              {`v${process.env.VERSION}`}
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
-  </Header>
-);
+    </Header>
+  );
+};
 
 CoralHeader.propTypes = {
   auth: PropTypes.object,
   showShortcuts: PropTypes.func,
-  handleLogout: PropTypes.func.isRequired
+  handleLogout: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired
 };
 
 export default CoralHeader;

client/coral-admin/src/components/ui/Indicator.css

@@ -0,0 +1,10 @@
+.indicator {
+  background-color: #E46D59;
+  border-radius: 10px;
+  position: absolute;
+  top: 50%;
+  width: 7px;
+  height: 7px;
+  margin-top: -4px;
+  margin-left: 7px;
+}

client/coral-admin/src/components/ui/Indicator.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import styles from './Indicator.css';
+
+const Indicator = () => 
+  <span className={styles.indicator}></span>;
+
+export default Indicator;

client/coral-admin/src/components/ui/Layout.js

@@ -1,21 +1,27 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Layout as LayoutMDL} from 'react-mdl';
-import Header from './Header';
+import Header from '../../containers/Header';
 import Drawer from './Drawer';
 import styles from './Layout.css';
 
 const Layout = ({
   children,
   handleLogout = () => {},
-  toggleShortcutModal,
+  toggleShortcutModal = () => {},
   restricted = false,
-  ...props}) => (
+  auth,
+}) => (
   <LayoutMDL className={styles.layout} fixedDrawer>
     <Header
       handleLogout={handleLogout}
       showShortcuts={toggleShortcutModal}
-      {...props} />
-    <Drawer handleLogout={handleLogout} restricted={restricted} {...props} />
+      auth={auth}
+    />
+    <Drawer 
+      handleLogout={handleLogout}
+      restricted={restricted}
+    />
     <div className={styles.layout}>
       {children}
     </div>
@@ -23,6 +29,8 @@ const Layout = ({
 );
 
 Layout.propTypes = {
+  children: PropTypes.node,
+  auth: PropTypes.object,
   handleLogout: PropTypes.func,
   toggleShortcutModal: PropTypes.func,
   restricted: PropTypes.bool // hide elements from a user that's logged out

client/coral-admin/src/components/ui/Logo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './Logo.css';
 import {CoralLogo} from 'coral-ui';
+import PropTypes from 'prop-types';
 
 export const Logo = ({className = ''}) => (
   <div className={`${styles.logo} ${className}`}>
@@ -10,3 +11,7 @@ export const Logo = ({className = ''}) => (
     </h1>
   </div>
 );
+
+Logo.propTypes = {
+  className: PropTypes.string
+};

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

@@ -6,15 +6,22 @@ import {hideBanUserDialog} from '../actions/banUserDialog';
 import {withSetUserStatus, withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import {compose} from 'react-apollo';
 import t from 'coral-framework/services/i18n';
+import {getErrorMessages} from 'coral-framework/utils';
+import {notify} from 'coral-framework/actions/notification';
 
 class BanUserDialogContainer extends Component {
 
   banUser = async () => {
-    const {userId, commentId, commentStatus, setUserStatus, setCommentStatus, hideBanUserDialog} = this.props;
-    await setUserStatus({userId, status: 'BANNED'});
-    hideBanUserDialog();
-    if (commentId && commentStatus && commentStatus !== 'REJECTED') {
-      await setCommentStatus({commentId, status: 'REJECTED'});
+    const {userId, commentId, commentStatus, setUserStatus, setCommentStatus, hideBanUserDialog, notify} = this.props;
+    try {
+      await setUserStatus({userId, status: 'BANNED'});
+      hideBanUserDialog();
+      if (commentId && commentStatus && commentStatus !== 'REJECTED') {
+        await setCommentStatus({commentId, status: 'REJECTED'});
+      }
+    }
+    catch(err) {
+      notify('error', getErrorMessages(err));
     }
   }
 
@@ -50,6 +57,7 @@ const mapStateToProps = ({banUserDialog: {open, userId, username, commentId, com
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     hideBanUserDialog,
+    notify,
   }, dispatch),
 });
 

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

@@ -0,0 +1,24 @@
+import {gql} from 'react-apollo';
+import CommentDetails from '../components/CommentDetails';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import withFragments from 'coral-framework/hocs/withFragments';
+
+const slots = [
+  'adminCommentDetailArea',
+  'adminCommentMoreDetails',
+];
+
+export default withFragments({
+  root: gql`
+    fragment CoralAdmin_CommentDetails_root on RootQuery {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'root')}
+    }
+  `,
+  comment: gql`
+    fragment CoralAdmin_CommentDetails_comment on Comment {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'comment')}
+    }
+  `
+})(CommentDetails);

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

@@ -0,0 +1,33 @@
+import {gql} from 'react-apollo';
+import CommentLabels from '../components/CommentLabels';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+
+const slots = [
+  'adminCommentLabels',
+];
+
+export default withFragments({
+  root: gql`
+    fragment CoralAdmin_CommentLabels_root on RootQuery {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'root')}
+    }
+  `,
+  comment: gql`
+    fragment CoralAdmin_CommentLabels_comment on Comment {
+      hasParent
+      status
+      actions {
+        __typename
+        ... on FlagAction {
+          reason
+        }
+        user {
+          id
+        }
+      }
+      ${getSlotFragmentSpreads(slots, 'comment')}
+    }
+  `
+})(CommentLabels);

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

@@ -0,0 +1,24 @@
+import {gql} from 'react-apollo';
+import withQuery from 'coral-framework/hocs/withQuery';
+import Header from '../components/ui/Header';
+
+export default withQuery(gql`
+  query TalkAdmin_Header {
+    __typename
+    premodCount: commentCount(query: {
+      statuses: [PREMOD]
+    })
+    reportedCount: commentCount(query: {
+      statuses: [NONE, PREMOD, SYSTEM_WITHHELD],
+      action_type: FLAG
+    })
+    flaggedUsernamesCount: userCount(query: {
+      action_type: FLAG,
+      statuses: [PENDING]
+    })
+  }
+`, {
+    options: {
+      pollInterval: 5000
+    }
+  })(Header);

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

@@ -1,5 +1,6 @@
-import React, {Component} from 'react';
+import React from 'react';
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import Layout from '../components/ui/Layout';
 import {fetchConfig} from '../actions/config';
 import AdminLogin from '../components/AdminLogin';
@@ -10,15 +11,18 @@ import {toggleModal as toggleShortcutModal} from '../actions/moderation';
 import {checkLogin, handleLogin, requestPasswordReset, logout} from '../actions/auth';
 import {can} from 'coral-framework/services/perms';
 import UserDetail from 'coral-admin/src/containers/UserDetail';
+import PropTypes from 'prop-types';
 
-class LayoutContainer extends Component {
+class LayoutContainer extends React.Component {
   componentWillMount() {
     const {checkLogin, fetchConfig} = this.props;
 
     checkLogin();
     fetchConfig();
   }
+
   render() {
+
     const {
       user,
       loggedIn,
@@ -29,13 +33,16 @@ class LayoutContainer extends Component {
     } = this.props.auth;
 
     const {
-      handleLogout,
+      children,
+      logout,
       toggleShortcutModal,
-      TALK_RECAPTCHA_PUBLIC
+      TALK_RECAPTCHA_PUBLIC,
     } = this.props;
+
     if (loadingUser) {
       return <FullLoading />;
     }
+
     if (!loggedIn) {
       return (
         <AdminLogin
@@ -48,17 +55,17 @@ class LayoutContainer extends Component {
         />
       );
     }
+
     if (can(user, 'ACCESS_ADMIN') && loggedIn) {
       return (
         <Layout
-          handleLogout={handleLogout}
+          handleLogout={logout}
           toggleShortcutModal={toggleShortcutModal}
-          {...this.props}
-        >
+          auth={this.props.auth} >
           <BanUserDialog />
           <SuspendUserDialog />
           <UserDetail />
-          {this.props.children}
+          {children}
         </Layout>
       );
     } else if (loggedIn) {
@@ -72,19 +79,32 @@ class LayoutContainer extends Component {
   }
 }
 
+LayoutContainer.propTypes = {
+  children: PropTypes.node,
+  requestPasswordReset: PropTypes.func,
+  handleLogin: PropTypes.func,
+  auth: PropTypes.object,
+  handleLogout: PropTypes.func,
+  logout: PropTypes.func,
+  toggleShortcutModal: PropTypes.func,
+  TALK_RECAPTCHA_PUBLIC: PropTypes.string,
+  checkLogin: PropTypes.func,
+  fetchConfig: PropTypes.func
+};
+
 const mapStateToProps = (state) => ({
   auth: state.auth,
   TALK_RECAPTCHA_PUBLIC: state.config.data.TALK_RECAPTCHA_PUBLIC,
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  checkLogin: () => dispatch(checkLogin()),
-  fetchConfig: () => dispatch(fetchConfig()),
-  handleLogin: (username, password, recaptchaResponse) =>
-    dispatch(handleLogin(username, password, recaptchaResponse)),
-  requestPasswordReset: (email) => dispatch(requestPasswordReset(email)),
-  toggleShortcutModal: (toggle) => dispatch(toggleShortcutModal(toggle)),
-  handleLogout: () => dispatch(logout())
-});
-
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    checkLogin,
+    fetchConfig,
+    handleLogin,
+    requestPasswordReset,
+    toggleShortcutModal,
+    logout
+  }, dispatch);
+  
 export default connect(mapStateToProps, mapDispatchToProps)(LayoutContainer);

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

@@ -17,21 +17,13 @@ class SuspendUserDialogContainer extends Component {
     const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser, notify} = this.props;
     hideSuspendUserDialog();
     try {
-      const result = await suspendUser({id: userId, message, until});
-      if (result.data.suspendUser.errors) {
-        throw result.data.suspendUser.errors;
-      }
+      await suspendUser({id: userId, message, until});
       notify(
         'success',
         t('suspenduser.notify_suspend_until', username, timeago(until)),
       );
       if (commentId && commentStatus && commentStatus !== 'REJECTED') {
-        return setCommentStatus({commentId, status: 'REJECTED'})
-          .then((result) => {
-            if (result.data.setCommentStatus.errors) {
-              throw result.data.setCommentStatus.errors;
-            }
-          });
+        await setCommentStatus({commentId, status: 'REJECTED'});
       }
     }
     catch(err) {

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

@@ -36,14 +36,19 @@ class UserDetailContainer extends React.Component {
   isLoadingMore = false;
 
   // status can be 'ACCEPTED' or 'REJECTED'
-  bulkSetCommentStatus = (status) => {
+  bulkSetCommentStatus = async (status) => {
     const changes = this.props.selectedCommentIds.map((commentId) => {
       return this.props.setCommentStatus({commentId, status});
     });
 
-    Promise.all(changes).then(() => {
+    try {
+      await Promise.all(changes);
       this.props.clearUserDetailSelections(); // un-select everything
-    });
+    } catch (err) {
+
+      // TODO: handle error.
+      console.error(err);
+    }
   }
 
   bulkReject = () => {
@@ -155,8 +160,10 @@ export const withUserDetailQuery = withQuery(gql`
     }) {
       ...CoralAdmin_Moderation_CommentConnection
     }
+    ...${getDefinitionName(UserDetailComment.fragments.root)}
     ${getSlotFragmentSpreads(slots, 'root')}
   }
+  ${UserDetailComment.fragments.root}
   ${commentConnectionFragment}
 `, {
   options: ({userId, statuses}) => {

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

@@ -1,10 +1,22 @@
 import {gql} from 'react-apollo';
 import UserDetailComment from '../components/UserDetailComment';
 import withFragments from 'coral-framework/hocs/withFragments';
+import {getDefinitionName} from 'coral-framework/utils';
+import CommentLabels from './CommentLabels';
+import CommentDetails from './CommentDetails';
 
 export default withFragments({
+  root: gql`
+    fragment CoralAdmin_UserDetailComment_root on RootQuery {
+      __typename
+      ...${getDefinitionName(CommentLabels.fragments.root)}
+      ...${getDefinitionName(CommentDetails.fragments.root)}
+    }
+    ${CommentLabels.fragments.root}
+    ${CommentDetails.fragments.root}
+  `,
   comment: gql`
-    fragment CoralAdmin_UserDetail_comment on Comment {
+    fragment CoralAdmin_UserDetailComment_comment on Comment {
       id
       body
       created_at
@@ -15,26 +27,13 @@ export default withFragments({
         title
         url
       }
-      action_summaries {
-        count
-        ... on FlagActionSummary {
-          reason
-        }
-      }
-      actions {
-        ... on FlagAction {
-          id
-          reason
-          message
-          user {
-            id
-            username
-          }
-        }
-      }
       editing {
         edited
       }
+      ...${getDefinitionName(CommentLabels.fragments.comment)}
+      ...${getDefinitionName(CommentDetails.fragments.comment)}
     }
+    ${CommentLabels.fragments.comment}
+    ${CommentDetails.fragments.comment}
   `
 })(UserDetailComment);

client/coral-admin/src/graphql/index.js

@@ -4,7 +4,7 @@ export default {
   mutations: {
     SetUserStatus: ({variables: {status, userId}}) => ({
       updateQueries: {
-        TalkAdmin_FlaggedAccounts: (prev) => {
+        TalkAdmin_Community: (prev) => {
           if (status !== 'APPROVED') {
             return prev;
           }
@@ -19,7 +19,7 @@ export default {
     }),
     RejectUsername: ({variables: {input: {id: userId}}})  => ({
       updateQueries: {
-        TalkAdmin_FlaggedAccounts: (prev) => {
+        TalkAdmin_Community: (prev) => {
           const updated = update(prev, {
             users: {
               nodes: {$apply: (nodes) => nodes.filter((node) => node.id !== userId)},

client/coral-admin/src/index.js

@@ -12,23 +12,23 @@ import {toast} from 'react-toastify';
 import {createNotificationService} from './services/notification';
 import {hideShortcutsNote} from './actions/moderation';
 
-function hidrateStore({store, storage}) {
+smoothscroll.polyfill();
+
+function init({store, storage}) {
   if (storage && storage.getItem('coral:shortcutsNote') === 'hide') {
     store.dispatch(hideShortcutsNote());
   }
 }
 
-smoothscroll.polyfill();
+async function main() {
+  const notification = createNotificationService(toast);
+  const context = await createContext({reducers, graphqlExtension, pluginsConfig, notification, init});
+  render(
+    <TalkProvider {...context}>
+      <App />
+    </TalkProvider>
+    , document.querySelector('#root')
+  );
+}
 
-const notification = createNotificationService(toast);
-const context = createContext({reducers, graphqlExtension, pluginsConfig, notification});
-
-// hidrate Store with external data.
-hidrateStore(context);
-
-render(
-  <TalkProvider {...context}>
-    <App />
-  </TalkProvider>
-  , document.querySelector('#root')
-);
+main();

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

@@ -3,7 +3,7 @@ import * as actions from '../constants/userDetail';
 const initialState = {
   userId: null,
   activeTab: 'all',
-  statuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
+  statuses: null,
   selectedCommentIds: [],
 };
 

client/coral-admin/src/routes/Community/components/ActionButton.css

@@ -1,4 +0,0 @@
-.actionButton {
-  transform: scale(.8);
-  margin: 0;
-}

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import styles from './ActionButton.css';
-import {Button} from 'coral-ui';
-import {menuActionsMap} from '../../../utils/moderationQueueActionsMap';
-
-import t from 'coral-framework/services/i18n';
-
-// TODO: Needs refactoring.
-const ActionButton = ({type = '', user, ...props}) => {
-  return (
-    <Button
-      className={`${type.toLowerCase()} ${styles.actionButton}`}
-      cStyle={type.toLowerCase()}
-      icon={menuActionsMap[type].icon}
-      onClick={() => {
-        type === 'APPROVE' ? props.approveUser({userId: user.id}) : props.showRejectUsernameDialog({user: user});
-      }}
-    >{t(`modqueue.${menuActionsMap[type].text}`)}</Button>
-  );
-};
-
-export default ActionButton;

client/coral-admin/src/routes/Community/components/Community.js

@@ -4,6 +4,7 @@ import CommunityMenu from './CommunityMenu';
 import People from './People';
 import FlaggedAccounts from '../containers/FlaggedAccounts';
 import RejectUsernameDialog from './RejectUsernameDialog';
+import PropTypes from 'prop-types';
 
 export default class Community extends Component {
 
@@ -76,7 +77,10 @@ export default class Community extends Component {
 
     return (
       <div>
-        <FlaggedAccounts />
+        <FlaggedAccounts
+          data={this.props.data}
+          root={this.props.root}
+        />
         <RejectUsernameDialog
           open={community.rejectUsernameDialog}
           handleClose={props.hideRejectUsernameDialog}
@@ -90,15 +94,25 @@ export default class Community extends Component {
   render() {
     const {searchValue} = this.state;
     const tab = this.getTabContent(searchValue, this.props);
+    const {root: {flaggedUsernamesCount}} = this.props;
 
     return (
       <div>
-        <CommunityMenu />
-        <div>
-          { tab }
-        </div>
+        <CommunityMenu flaggedUsernamesCount={flaggedUsernamesCount} />
+        <div>{tab}</div>
       </div>
     );
   }
 }
 
+Community.propTypes = {
+  community: PropTypes.object,
+  fetchAccounts: PropTypes.func,
+  hideRejectUsernameDialog: PropTypes.func,
+  updateSorting: PropTypes.func,
+  newPage: PropTypes.func,
+  route: PropTypes.object,
+  rejectUsername: PropTypes.func,
+  data: PropTypes.object,
+  root: PropTypes.object
+};

client/coral-admin/src/routes/Community/components/CommunityLayout.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const CommunityLayout = (props) => (
-  <div>
-    {props.children}
-  </div>
-);
-
-export default CommunityLayout;

client/coral-admin/src/routes/Community/components/CommunityMenu.js

@@ -1,18 +1,21 @@
 import React from 'react';
-
 import styles from './CommunityMenu.css';
 import t from 'coral-framework/services/i18n';
 import {Link} from 'react-router';
+import PropTypes from 'prop-types';
+import CountBadge from '../../../components/CountBadge';
 
-const CommunityMenu = () => {
+const CommunityMenu = ({flaggedUsernamesCount = 0}) => {
   const flaggedPath = '/admin/community/flagged';
   const peoplePath = '/admin/community/people';
+
   return (
     <div className='mdl-tabs'>
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
         <div>
           <Link to={flaggedPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
             {t('community.flaggedaccounts')}
+            <CountBadge count={flaggedUsernamesCount} />
           </Link>
           <Link to={peoplePath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
             {t('community.people')}
@@ -23,4 +26,8 @@ const CommunityMenu = () => {
   );
 };
 
+CommunityMenu.propTypes = {
+  flaggedUsernamesCount: PropTypes.number,
+};
+
 export default CommunityMenu;

client/coral-admin/src/routes/Community/components/FlaggedAccounts.js

@@ -47,7 +47,6 @@ class FlaggedAccounts extends React.Component {
                       <FlaggedUser
                         user={user}
                         key={user.id}
-                        modActionButtons={['APPROVE', 'REJECT']}
                         showBanUserDialog={showBanUserDialog}
                         showSuspendUserDialog={showSuspendUserDialog}
                         showRejectUsernameDialog={showRejectUsernameDialog}

client/coral-admin/src/routes/Community/components/FlaggedUser.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import styles from './FlaggedUser.css';
 
-import ActionButton from './ActionButton';
-
 // TODO: Should not rely on plugin.
 import {username} from 'talk-plugin-flags/helpers/flagReasons';
 
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
+import ApproveButton from 'coral-admin/src/components/ApproveButton';
+import RejectButton from 'coral-admin/src/components/RejectButton';
 
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
@@ -35,15 +35,16 @@ class User extends React.Component {
   });
 
   viewAuthorDetail = () => this.props.viewUserDetail(this.props.user.id);
+  showRejectUsernameDialog = () => this.props.showRejectUsernameDialog({id: this.props.user.id});
+  approveUser = () => this.props.approveUser({
+    userId: this.props.user.id,
+  });
 
   render() {
     const {
       user,
-      modActionButtons,
       viewUserDetail,
       selected,
-      approveUser,
-      showRejectUsernameDialog,
       me,
       className,
     } = this.props;
@@ -85,7 +86,7 @@ class User extends React.Component {
                 <span className={styles.flaggedByLabel}>
                   {t('community.flags')}({ user.actions.length })
                 </span>:
-                  { user.action_summaries.map(
+                { user.action_summaries.map(
                   (action, i) => {
                     return <span className={styles.flaggedBy} key={i}>
                       {shortReasons[action.reason]} ({action.count})
@@ -125,14 +126,12 @@ class User extends React.Component {
             </div>
             <div className={styles.sideActions}>
               <div className={styles.actions}>
-                {modActionButtons.map((action, i) =>
-                  <ActionButton key={i}
-                    type={action.toUpperCase()}
-                    user={user}
-                    approveUser={approveUser}
-                    showRejectUsernameDialog={showRejectUsernameDialog}
-                  />
-                )}
+                <ApproveButton
+                  onClick={this.approveUser}
+                />
+                <RejectButton
+                  onClick={this.showRejectUsernameDialog}
+                />
               </div>
             </div>
           </div>

client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 
 import {Dialog, Button} from 'coral-ui';
 import styles from './RejectUsernameDialog.css';
@@ -48,11 +49,15 @@ class RejectUsernameDialog extends Component  {
 
     const cancel = this.props.handleClose;
     const next = () => this.setState({stage: stage + 1});
-    const suspend = () => {
-      rejectUsername({id: user.user.id, message: this.state.email})
-        .then(() => {
-          this.props.handleClose();
-        });
+    const suspend = async () => {
+      try {
+        await rejectUsername({id: user.id, message: this.state.email});
+        this.props.handleClose();
+      } catch (err) {
+
+        // TODO: handle error.
+        console.error(err);
+      }
     };
 
     const suspendModalActions = [

client/coral-admin/src/routes/Community/components/Table.js

@@ -28,7 +28,8 @@ export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onComm
             {row.created_at}
           </td>
           <td className="mdl-data-table__cell--non-numeric">
-            <SelectField label={'Select me'} value={row.status || ''}
+            <SelectField
+              value={row.status || ''}
               className={styles.selectField}
               label={t('community.status')}
               onChange={(status) => onCommenterStatusChange(row.id, status)}>
@@ -37,7 +38,8 @@ export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onComm
             </SelectField>
           </td>
           <td className="mdl-data-table__cell--non-numeric">
-            <SelectField label={'Select me'} value={row.roles[0] || ''}
+            <SelectField
+              value={row.roles[0] || ''}
               className={styles.selectField}
               label={t('community.role')}
               onChange={(role) => onRoleChange(row.id, role)}>

client/coral-admin/src/routes/Community/containers/Community.js

@@ -1,9 +1,14 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {compose} from 'react-apollo';
-
+import PropTypes from 'prop-types';
+import {compose, gql} from 'react-apollo';
+import withQuery from 'coral-framework/hocs/withQuery';
+import {getDefinitionName} from 'coral-framework/utils';
 import {withSetUserStatus, withRejectUsername} from 'coral-framework/graphql/mutations';
+import FlaggedAccounts from '../containers/FlaggedAccounts';
+import FlaggedUser from '../containers/FlaggedUser';
+
 import {
   fetchAccounts,
   updateSorting,
@@ -20,15 +25,35 @@ class CommunityContainer extends Component {
   }
 
   render() {
-    return (
-      <Community {...this.props} />
-    );
+    return <Community
+      fetchAccounts={this.props.fetchAccounts}
+      community={this.props.community}
+      hideRejectUsernameDialog={this.props.hideRejectUsernameDialog}
+      updateSorting={this.props.updateSorting}
+      newPage={this.props.newPage}
+      route={this.props.route}
+      rejectUsername={this.props.rejectUsername}
+      data={this.props.data}
+      root={this.props.root}
+    />;
   }
 }
 const mapStateToProps = (state) => ({
   community: state.community,
 });
 
+CommunityContainer.propTypes = {
+  community: PropTypes.object,
+  fetchAccounts: PropTypes.func,
+  hideRejectUsernameDialog: PropTypes.func,
+  updateSorting: PropTypes.func,
+  newPage: PropTypes.func,
+  route: PropTypes.object,
+  rejectUsername: PropTypes.func,
+  data: PropTypes.object,
+  root: PropTypes.object
+};
+
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     fetchAccounts,
@@ -37,8 +62,31 @@ const mapDispatchToProps = (dispatch) =>
     newPage,
   }, dispatch);
 
+const withData = withQuery(gql`
+  query TalkAdmin_Community {
+    flaggedUsernamesCount: userCount(query: {
+      action_type: FLAG,
+      statuses: [PENDING]
+    })
+    ...${getDefinitionName(FlaggedAccounts.fragments.root)}
+    ...${getDefinitionName(FlaggedUser.fragments.root)}
+    me {
+      ...${getDefinitionName(FlaggedUser.fragments.me)}
+      __typename
+    }
+  }
+  ${FlaggedAccounts.fragments.root}
+  ${FlaggedUser.fragments.root}
+  ${FlaggedUser.fragments.me}
+`, {
+  options: {
+    fetchPolicy: 'network-only',
+  },
+});
+
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   withSetUserStatus,
   withRejectUsername,
+  withData
 )(CommunityContainer);

client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js

@@ -2,8 +2,9 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {compose, gql} from 'react-apollo';
-import withQuery from 'coral-framework/hocs/withQuery';
+import {withFragments} from 'plugin-api/beta/client/hocs';
 import {Spinner} from 'coral-ui';
+import PropTypes from 'prop-types';
 
 import {withSetUserStatus} from 'coral-framework/graphql/mutations';
 import {showBanUserDialog} from 'actions/banUserDialog';
@@ -24,7 +25,10 @@ class FlaggedAccountsContainer extends Component {
   }
 
   approveUser = ({userId}) => {
-    return this.props.setUserStatus({userId, status: 'APPROVED'});
+    return this.props.setUserStatus({
+      userId,
+      status: 'APPROVED'
+    });
   }
 
   loadMore = () => {
@@ -74,6 +78,16 @@ class FlaggedAccountsContainer extends Component {
   }
 }
 
+FlaggedAccountsContainer.propTypes = {
+  showBanUserDialog: PropTypes.func,
+  showSuspendUserDialog: PropTypes.func,
+  showRejectUsernameDialog: PropTypes.func,
+  viewUserDetail: PropTypes.func,
+  setUserStatus: PropTypes.func,
+  data: PropTypes.object,
+  root: PropTypes.object
+};
+
 const LOAD_MORE_QUERY = gql`
   query TalkAdmin_LoadMoreFlaggedAccounts($limit: Int, $cursor: Cursor) {
     users(query:{action_type: FLAG, statuses: [PENDING], limit: $limit, cursor: $cursor}){
@@ -88,31 +102,6 @@ const LOAD_MORE_QUERY = gql`
   ${FlaggedUser.fragments.user}
 `;
 
-export const withFlaggedAccountsyQuery = withQuery(gql`
-  query TalkAdmin_FlaggedAccounts {
-    ...${getDefinitionName(FlaggedUser.fragments.root)}
-    users(query:{action_type: FLAG, statuses: [PENDING], limit: 10}){
-      hasNextPage
-      endCursor
-      nodes {
-        __typename
-        ...${getDefinitionName(FlaggedUser.fragments.user)}
-      }
-    }
-    me {
-      __typename
-      ...${getDefinitionName(FlaggedUser.fragments.me)}
-    }
-  }
-  ${FlaggedUser.fragments.root}
-  ${FlaggedUser.fragments.user}
-  ${FlaggedUser.fragments.me}
-`, {
-  options: {
-    fetchPolicy: 'network-only',
-  },
-});
-
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     showBanUserDialog,
@@ -123,6 +112,23 @@ const mapDispatchToProps = (dispatch) =>
 
 export default compose(
   connect(null, mapDispatchToProps),
-  withFlaggedAccountsyQuery,
   withSetUserStatus,
+  withFragments({
+    root: gql`
+      fragment TalkAdminCommunity_FlaggedAccounts_root on RootQuery {
+        users(query:{action_type: FLAG, statuses: [PENDING], limit: 10}){
+          hasNextPage
+          endCursor
+          nodes {
+            __typename
+            ...${getDefinitionName(FlaggedUser.fragments.user)}
+          }
+        }
+        me {
+          id
+        }
+      }
+      ${FlaggedUser.fragments.user}
+    `,
+  }),
 )(FlaggedAccountsContainer);

client/coral-admin/src/routes/Community/index.js

@@ -1,2 +0,0 @@
-export {default as Community} from './containers/Community';
-export {default as CommunityLayout} from './components/CommunityLayout';

client/coral-admin/src/routes/Configure/components/EmbedLink.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import t from 'coral-framework/services/i18n';
-import {join} from 'path';
+import join from 'url-join';
 import styles from './Configure.css';
 import {Button, Card} from 'coral-ui';
 import {BASE_URL} from 'coral-framework/constants/url';

client/coral-admin/src/routes/Configure/components/ModerationSettings.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Configure.css';
 import {Card} from 'coral-ui';
 import {Checkbox} from 'react-mdl';

client/coral-admin/src/routes/Configure/components/TechSettings.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Card} from 'coral-ui';
 import Domainlist from './Domainlist';
 import EmbedLink from './EmbedLink';

client/coral-admin/src/routes/Dashboard/components/ActivityWidget.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Link} from 'react-router';
 import styles from './Widget.css';
 import t from 'coral-framework/services/i18n';

client/coral-admin/src/routes/Dashboard/components/CountdownTimer.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Dashboard.css';
 import {Icon} from 'coral-ui';
 

client/coral-admin/src/routes/Dashboard/components/FlagWidget.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Link} from 'react-router';
 import styles from './Widget.css';
 

client/coral-admin/src/routes/Dashboard/components/LikeWidget.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Link} from 'react-router';
 import styles from './Widget.css';
 import t from 'coral-framework/services/i18n';

client/coral-admin/src/routes/Install/containers/Install.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {compose} from 'react-apollo';
@@ -31,7 +32,7 @@ class InstallContainer extends Component {
 }
 
 InstallContainer.contextTypes = {
-  router: React.PropTypes.object
+  router: PropTypes.object
 };
 
 const mapStateToProps = (state) => ({

client/coral-admin/src/routes/Moderation/components/Comment.css

@@ -0,0 +1,181 @@
+@custom-media --big-viewport (min-width: 780px);
+
+.root {
+  border-bottom: 1px solid #e0e0e0;
+  font-size: 18px;
+  width: 100%;
+  max-width: 650px;
+  min-width: 400px;
+  margin: 0 auto;
+  position: relative;
+  transition: all 200ms;
+  padding: 10px 0;
+  min-height: 0;
+
+  /*
+   Fix rendering issues in Safari by promoting this
+   into its own layer.
+
+   https://www.pivotaltracker.com/story/show/151142211
+  */
+  transform: translateZ(0);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.container {
+  padding: 0 14px;
+}
+
+.itemHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+}
+
+.author {
+  font-weight: 300;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  color: #262626;
+  font-size: 16px;
+  position: relative;
+}
+
+.sideActions {
+  height: 100%;
+  top: 0;
+  box-sizing: border-box;
+}
+
+.itemBody {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 300;
+  margin-bottom: 8px;
+}
+
+.body {
+  margin-top: 0px;
+  flex: 1;
+  color: black;
+  max-width: 500px;
+  word-wrap: break-word;
+  font-weight: 300;
+  font-size: 16px;
+}
+
+.created {
+  padding: 5px;
+  color: #262626;
+  font-size: 14px;
+  line-height: 1px;
+  font-weight: 300;
+}
+
+.moderateArticle {
+  font-size: 14px;
+  margin: 10px 0;
+  font-weight: 500;
+  line-height: 1.2;
+  max-width: 500px;
+
+  a {
+    display: inline-block;
+    color: #063b9a;
+    text-decoration: none;
+    font-weight: 500;
+    letter-spacing: .5px;
+    margin-left: 10px;
+
+    font-size: 13px;
+    margin-left: 5px;
+    padding-bottom: 0px;
+    border-bottom: solid 1px;
+    line-height: 16px;
+
+    &:hover {
+      opacity: .9;
+      cursor: pointer;
+     }
+  }
+}
+
+.username {
+  color: #393B44;
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 600;
+  padding: 2px 5px;
+  border-radius: 2px;
+  margin-left: -5px;
+  transition: background-color 200ms ease;
+  &:hover {
+    background-color: #E0E0E0;
+  }
+}
+
+.external {
+  font-size: .7em;
+  text-decoration: none;
+  color: #063b9a;
+  cursor: pointer;
+  font-weight: normal;
+  margin-left: 10px;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: underline;
+    opacity: .9;
+  }
+
+  i {
+    font-size: 12px;
+    top: 2px;
+    position: relative;
+  }
+}
+
+.editedMarker {
+  font-style: italic;
+  color: #666;
+  font-size: 12px;
+  line-height: 1px;
+  font-weight: 300;
+}
+
+.adminCommentInfoBar {
+  min-width: 100px;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  text-align: right;
+}
+
+.hasLinks {
+  color: #f00;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 14px;
+
+  i {
+    margin-right: 5px;
+  }
+}
+
+@media (--big-viewport) {
+  .root {
+    margin-bottom: 30px;
+
+    &:last-child {
+      border-bottom: 1px solid #e0e0e0;
+    }
+  }
+}

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

@@ -1,21 +1,20 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Link} from 'react-router';
 
 import {Icon} from 'coral-ui';
-import ReplyBadge from 'coral-admin/src/components/ReplyBadge';
-import FlagBox from 'coral-admin/src/components/FlagBox';
-import styles from './styles.css';
-import CommentType from 'coral-admin/src/components/CommentType';
+import CommentDetails from 'coral-admin/src/components/CommentDetails';
+import styles from './Comment.css';
+import CommentLabels from 'coral-admin/src/components/CommentLabels';
 import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
 import Slot from 'coral-framework/components/Slot';
-import {getActionSummary} from 'coral-framework/utils';
-import ActionButton from 'coral-admin/src/components/ActionButton';
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
-import {getCommentType} from 'coral-admin/src/utils/comment';
+import ApproveButton from 'coral-admin/src/components/ApproveButton';
+import RejectButton from 'coral-admin/src/components/RejectButton';
 
 import t, {timeago} from 'coral-framework/services/i18n';
 
@@ -46,11 +45,19 @@ class Comment extends React.Component {
     return viewUserDetail(comment.user.id);
   };
 
+  approve = () => (this.props.comment.status === 'ACCEPTED'
+    ? null
+    : this.props.acceptComment({commentId: this.props.comment.id})
+  );
+
+  reject = () => (this.props.comment.status === 'REJECTED'
+    ? null
+    : this.props.rejectComment({commentId: this.props.comment.id})
+  );
+
   render() {
     const {
-      actions = [],
       comment,
-      viewUserDetail,
       suspectWords,
       bannedWords,
       selected,
@@ -59,22 +66,16 @@ class Comment extends React.Component {
       root,
       currentUserId,
       currentAsset,
-      acceptComment,
-      rejectComment,
     } = this.props;
 
-    const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
-    const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
-    const commentType = getCommentType(comment);
-
     const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
-
     const queryData = {root, comment, asset: comment.asset};
 
     return (
       <li
         tabIndex={0}
-        className={cn(className, 'mdl-card', selectionStateCSS, styles.Comment, styles.listItem, {[styles.selected]: selected})}
+        className={cn(className, 'mdl-card', selectionStateCSS, styles.root, {[styles.selected]: selected})}
+        id={`comment_${comment.id}`}
       >
         <div className={styles.container}>
           <div className={styles.itemHeader}>
@@ -108,8 +109,9 @@ class Comment extends React.Component {
                 </ActionsMenu>
               }
               <div className={styles.adminCommentInfoBar}>
-                {comment.hasParent && <ReplyBadge/>}
-                <CommentType type={commentType} className={styles.commentType}/>
+                <CommentLabels
+                  comment={comment}
+                />
                 <Slot
                   fill="adminCommentInfoBar"
                   data={data}
@@ -126,7 +128,7 @@ class Comment extends React.Component {
           </div>
           <CommentAnimatedEdit body={comment.body}>
             <div className={styles.itemBody}>
-              <p className={styles.body}>
+              <div className={styles.body}>
                 <CommentBodyHighlighter
                   suspectWords={suspectWords}
                   bannedWords={bannedWords}
@@ -140,7 +142,7 @@ class Comment extends React.Component {
                 >
                   <Icon name="open_in_new" /> {t('comment.view_context')}
                 </a>
-              </p>
+              </div>
               <Slot
                 fill="adminCommentContent"
                 data={data}
@@ -153,28 +155,14 @@ class Comment extends React.Component {
                   </span>
                 </IfHasLink>
                 <div className={`actions ${styles.actions}`}>
-                  {actions.map((action, i) => {
-                    const active =
-                      (action === 'REJECT' && comment.status === 'REJECTED') ||
-                      (action === 'APPROVE' && comment.status === 'ACCEPTED');
-                    return (
-                      <ActionButton
-                        key={i}
-                        type={action}
-                        user={comment.user}
-                        status={comment.status}
-                        active={active}
-                        acceptComment={() =>
-                          (comment.status === 'ACCEPTED'
-                            ? null
-                            : acceptComment({commentId: comment.id}))}
-                        rejectComment={() =>
-                          (comment.status === 'REJECTED'
-                            ? null
-                            : rejectComment({commentId: comment.id}))}
-                      />
-                    );
-                  })}
+                  <ApproveButton
+                    active={comment.status === 'ACCEPTED'}
+                    onClick={this.approve}
+                  />
+                  <RejectButton
+                    active={comment.status === 'REJECTED'}
+                    onClick={this.reject}
+                  />
                 </div>
                 <Slot
                   fill="adminSideActions"
@@ -185,18 +173,11 @@ class Comment extends React.Component {
             </div>
           </CommentAnimatedEdit>
         </div>
-        <Slot
-          fill="adminCommentDetailArea"
+        <CommentDetails
           data={data}
-          queryData={queryData}
+          root={root}
+          comment={comment}
         />
-        {flagActions && flagActions.length
-          ? <FlagBox
-            actions={flagActions}
-            actionSummaries={flagActionSummaries}
-            viewUserDetail={viewUserDetail}
-          />
-          : null}
       </li>
     );
   }
@@ -214,6 +195,8 @@ Comment.propTypes = {
   showSuspendUserDialog: PropTypes.func.isRequired,
   currentUserId: PropTypes.string.isRequired,
   comment: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    status: PropTypes.string.isRequired,
     body: PropTypes.string.isRequired,
     action_summaries: PropTypes.array,
     actions: PropTypes.array,
@@ -226,8 +209,11 @@ Comment.propTypes = {
       title: PropTypes.string,
       url: PropTypes.string,
       id: PropTypes.string
-    })
-  })
+    }),
+  }),
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  selected: PropTypes.bool,
 };
 
 export default Comment;

client/coral-admin/src/routes/Moderation/components/Moderation.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import key from 'keymaster';
-import styles from './styles.css';
 
 import ModerationQueue from './ModerationQueue';
 import ModerationMenu from './ModerationMenu';
@@ -9,12 +9,13 @@ import ModerationKeysModal from '../../../components/ModerationKeysModal';
 import StorySearch from '../containers/StorySearch';
 import Slot from 'coral-framework/components/Slot';
 
-export default class Moderation extends Component {
-  constructor() {
-    super();
+class Moderation extends Component {
+  constructor(props) {
+    super(props);
+    const comments = this.getComments(props);
 
     this.state = {
-      selectedIndex: 0
+      selectedCommentId: comments[0] ? comments[0].id : null,
     };
 
   }
@@ -25,10 +26,10 @@ export default class Moderation extends Component {
     key('s', () => singleView());
     key('shift+/', () => toggleModal(true));
     key('esc', () => toggleModal(false));
-    key('j', this.select(true));
-    key('k', this.select(false));
-    key('f', this.moderate(false));
-    key('d', this.moderate(true));
+    key('j', () => this.select(true));
+    key('k', () => this.select(false));
+    key('f', () => this.moderate(false));
+    key('d', () => this.moderate(true));
   }
 
   onClose = () => {
@@ -44,39 +45,102 @@ export default class Moderation extends Component {
     this.props.toggleStorySearch(true);
   }
 
-  moderate = (accept) => () => {
-    const {acceptComment, rejectComment} = this.props;
-    const {selectedIndex} = this.state;
-    const comments = this.getComments();
-    const comment = comments[selectedIndex];
-    const commentId = {commentId: comment.id};
+  getActiveTabCount = (props = this.props) => {
+    return props.root[`${props.activeTab}Count`];
+  }
 
+  moderate = (accept) => {
+    const {acceptComment, rejectComment} = this.props;
+    const {selectedCommentId} = this.state;
+
+    const comments = this.getComments();
+    const commentIdx = comments.findIndex((comment) => comment.id === selectedCommentId);
+    const comment = comments[commentIdx];
+    
     if (accept) {
-      comment.status !== 'ACCEPTED' && acceptComment(commentId);
+      comment.status !== 'ACCEPTED' && acceptComment({commentId: comment.id});
     } else {
-      comment.status !== 'REJECTED' && rejectComment(commentId);
+      comment.status !== 'REJECTED' && rejectComment({commentId: comment.id});
     }
   }
 
-  getComments = () => {
-    const {root, activeTab} = this.props;
+  getComments = (props = this.props) => {
+    const {root, activeTab} = props;
     return root[activeTab].nodes;
   }
 
-  select = (next) => () => {
-    if (next) {
-      this.setState((state) => ({
-        ...state,
-        selectedIndex: state.selectedIndex < this.getComments().length - 1
-          ? state.selectedIndex + 1 : state.selectedIndex
-      }));
-    } else {
-      this.setState((state) => ({
-        ...state,
-        selectedIndex: state.selectedIndex > 0
-          ? state.selectedIndex - 1 : state.selectedIndex
-      }));
+  scrollTo = (toId, smooth = true) =>
+    document.querySelector(`#comment_${toId}`).scrollIntoView(smooth ? {behavior: 'smooth'} : {});
+
+  select = async (next, props = this.props, selectedCommentId = this.state.selectedCommentId) => {
+    const comments = this.getComments(props);
+
+    // No comments to be selected.
+    if (comments.length === 0){
+      return;
     }
+
+    // Find current index if we have a selected comment.
+    const index = selectedCommentId
+      ? comments.findIndex((comment) => comment.id === selectedCommentId)
+      : null;
+
+    if (next) {
+
+      // Grab first one if we don't have a selected comment yet.
+      if (!selectedCommentId) {
+        this.setState({selectedCommentId: comments[0].id}, () => this.scrollTo(comments[0].id));
+        return;
+      }
+
+      // Select next one when we still have more comments left.
+      if (index < comments.length - 1) {
+        this.setState({selectedCommentId: comments[index + 1].id}, () => this.scrollTo(comments[index + 1].id));
+        return;
+      } else {
+
+        // We hit the end of the list, load more comments if we have.
+        if (comments.length < this.getActiveTabCount()) {
+          const res = await this.loadMore();
+
+          // If `loadMore` was already in progress, res would be false.
+          if (res) {
+
+            // Select next comment after loading has completed.
+            this.select(true);
+          }
+        }
+        return;
+      }
+    } else {
+
+      // We have no selected comment, so just skip it.
+      if (!selectedCommentId) {
+        return;
+      }
+
+      // If we still have previous comments take the one before.
+      if (index > 0) {
+        this.setState({selectedCommentId: comments[index - 1].id}, () => this.scrollTo(comments[index - 1].id));
+        return;
+      }
+    }
+  }
+
+  loadMore = async () => {
+    if (!this.isLoadingMore) {
+      this.isLoadingMore = true;
+      try {
+        const result = await this.props.loadMore(this.props.activeTab);
+        this.isLoadingMore = false;
+        return result;
+      }
+      catch (e) {
+        this.isLoadingMore = false;
+        throw e;
+      }
+    }
+    return false;
   }
 
   componentWillUnmount() {
@@ -89,25 +153,56 @@ export default class Moderation extends Component {
     key.unbind('d');
   }
 
-  componentDidUpdate(_, prevState) {
+  componentWillReceiveProps(nextProps) {
 
-    // If paging through using keybaord shortcuts, scroll the page to keep the selected
-    // comment in view.
-    if (prevState.selectedIndex !== this.state.selectedIndex) {
+    if (this.props.activeTab !== nextProps.activeTab) {
 
-      // the 'smooth' flag only works in FF as of March 2017
-      document.querySelector(`.${styles.selected}`).scrollIntoView({behavior: 'smooth'});
+      // Reset selection when changing tabs.
+      this.select(true, nextProps, null);
+    } else {
+
+      // Detect if comment has left the queue and find next or prev selected comment to set it
+      // as the new selectedCommentId.
+      const prevComments = this.getComments(this.props);
+      const nextComments = this.getComments(nextProps);
+      if (nextComments.length < prevComments.length) {
+
+        // Comments have changed, now check if our selected comment has left the queue.
+        if (
+          this.state.selectedCommentId &&
+          !nextComments.some((comment) => comment.id === this.state.selectedCommentId)
+        ) {
+
+          // Determine a comment to select.
+          const prevIndex = prevComments.findIndex((comment) => comment.id === this.state.selectedCommentId);
+          if (prevIndex !== prevComments.length - 1) {
+            this.setState({selectedCommentId: prevComments[prevIndex + 1].id});
+          } else if(prevIndex > 0) {
+            this.setState({selectedCommentId: prevComments[prevIndex - 1].id});
+          } else {
+            this.setState({selectedCommentId: null});
+          }
+        }
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+
+    // Scroll to comment when changing from single wiew to normal view.
+    if (prevProps.moderation.singleView !== this.props.moderation.singleView && this.state.selectedCommentId) {
+      this.scrollTo(this.state.selectedCommentId, false);
     }
   }
 
   render () {
-    const {root, data, moderation, settings, viewUserDetail, hideUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
+    const {root, data, moderation, settings, viewUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
     const {asset} = root;
     const assetId = asset && asset.id;
 
     const comments = root[activeTab];
 
-    const activeTabCount = root[`${activeTab}Count`];
+    const activeTabCount = this.getActiveTabCount();
     const menuItems = Object.keys(queueConfig).map((queue) => ({
       key: queue,
       name: queueConfig[queue].name,
@@ -132,26 +227,26 @@ export default class Moderation extends Component {
           activeTab={activeTab}
         />
         <ModerationQueue
+          key={`${activeTab}_${this.props.moderation.sortOrder}`}
           data={this.props.data}
           root={this.props.root}
           currentAsset={asset}
           comments={comments.nodes}
           activeTab={activeTab}
           singleView={moderation.singleView}
-          selectedIndex={this.state.selectedIndex}
+          selectedCommentId={this.state.selectedCommentId}
           bannedWords={settings.wordlist.banned}
           suspectWords={settings.wordlist.suspect}
           showBanUserDialog={props.showBanUserDialog}
           showSuspendUserDialog={props.showSuspendUserDialog}
           acceptComment={props.acceptComment}
           rejectComment={props.rejectComment}
-          loadMore={props.loadMore}
+          loadMore={this.loadMore}
           assetId={assetId}
           sort={this.props.moderation.sortOrder}
           commentCount={activeTabCount}
           currentUserId={this.props.auth.user.id}
           viewUserDetail={viewUserDetail}
-          hideUserDetail={hideUserDetail}
         />
         <ModerationKeysModal
           hideShortcutsNote={props.hideShortcutsNote}
@@ -177,3 +272,28 @@ export default class Moderation extends Component {
     );
   }
 }
+
+Moderation.propTypes = {
+  viewUserDetail: PropTypes.func.isRequired,
+  toggleModal: PropTypes.func.isRequired,
+  toggleStorySearch: PropTypes.func.isRequired,
+  getModPath: PropTypes.func.isRequired,
+  storySearchChange: PropTypes.func.isRequired,
+  moderation: PropTypes.object.isRequired,
+  auth: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
+  queueConfig: PropTypes.object.isRequired,
+  handleCommentChange: PropTypes.func.isRequired,
+  setSortOrder: PropTypes.func.isRequired,
+  showBanUserDialog: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  loadMore: PropTypes.func.isRequired,
+  singleView: PropTypes.func.isRequired,
+  activeTab: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+};
+
+export default Moderation;

client/coral-admin/src/routes/Moderation/components/ModerationHeader.css

@@ -0,0 +1,39 @@
+.header {
+  background-color: #2c2c2c;
+  color: white;
+  margin-bottom: -1px;
+}
+
+.searchTrigger {
+  position: relative;
+  top: .2em;
+}
+
+.moderateAsset {
+  a {
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    color: white;
+    text-transform: capitalize;
+    font-weight: 400;
+    font-size: 20px;
+    letter-spacing: 1px;
+    transition: background-color 200ms;
+    opacity: 1;
+
+    &:hover {
+       cursor: pointer;
+       background-color: #212121;
+    }
+    span {
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      max-width: 344px;
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
+}

client/coral-admin/src/routes/Moderation/components/ModerationHeader.js

@@ -1,6 +1,7 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Icon} from 'coral-ui';
-import styles from './styles.css';
+import styles from './ModerationHeader.css';
 import t from 'coral-framework/services/i18n';
 
 const ModerationHeader = ({asset, searchVisible, openSearch, closeSearch}) => {
@@ -29,7 +30,8 @@ ModerationHeader.propTypes = {
     id: PropTypes.string
   }),
   openSearch: PropTypes.func.isRequired,
-  closeSearch: PropTypes.func.isRequired
+  closeSearch: PropTypes.func.isRequired,
+  searchVisible: PropTypes.bool,
 };
 
 export default ModerationHeader;

client/coral-admin/src/routes/Moderation/components/ModerationLayout.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const ModerationLayout = (props) => (
   <div>
@@ -6,4 +7,8 @@ const ModerationLayout = (props) => (
   </div>
 );
 
+ModerationLayout.propTypes = {
+  children: PropTypes.node,
+};
+
 export default ModerationLayout;

client/coral-admin/src/routes/Moderation/components/ModerationMenu.css

@@ -0,0 +1,102 @@
+@custom-media --big-viewport (min-width: 780px);
+
+.tabBar {
+  background-color: rgba(44, 44, 44, 0.89);
+  z-index: 5;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tabBarPadding {
+  width: 150px;
+}
+
+.tab {
+  flex: 1;
+  color: #BDBDBD;
+  text-transform: capitalize;
+  font-weight: 100;
+  font-size: 14px;
+  letter-spacing: 1px;
+  transition: border-bottom 200ms;
+  transition: color 200ms;
+  padding: 0px 10px;
+  margin-right: 20px;
+  &:hover {
+    color: white;
+    /*border-bottom: solid 2px #F36451;*/
+    box-sizing: border-box;
+  }
+}
+
+.active {
+  color: white;
+  box-sizing: border-box;
+  border-bottom: solid 4px #F36451;
+  font-weight: 400;
+  &:hover {
+    border-bottom: solid 4px #F36451;
+    font-weight: 400;
+  }
+}
+
+.active > span {
+  color: white;
+}
+
+.active:after {
+  background: transparent !important;
+}
+
+.selectField {
+  position: relative;
+  width: 140px;
+  height: 36px;
+  top: 5px;
+  margin-right: 10px;
+  background: #FFF;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  bor
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  > div {
+    padding: 0;
+  }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    padding: 0;
+    font-size: 13px;
+    letter-spacing: 0.7px;
+    font-weight: 400;
+    border-bottom: 0px;
+  }
+
+  label {
+    top: -4px;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
+}
+
+.tabIcon {
+  position: relative;
+  top: 3px;
+  font-size: 16px;
+}
+
+
+@media (--big-viewport) {
+  .tab {
+    flex: none;
+  }
+}

client/coral-admin/src/routes/Moderation/components/ModerationMenu.js

@@ -1,6 +1,7 @@
-import React, {PropTypes} from 'react';
-import CommentCount from './CommentCount';
-import styles from './styles.css';
+import React from 'react';
+import PropTypes from 'prop-types';
+import CountBadge from '../../../components/CountBadge';
+import styles from './ModerationMenu.css';
 import {SelectField, Option} from 'react-mdl-selectfield';
 import {Icon} from 'coral-ui';
 import {Link} from 'react-router';
@@ -27,7 +28,7 @@ const ModerationMenu = ({
               to={getModPath(queue.key, asset.id)}
               className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === queue.key})}
               activeClassName={styles.active}>
-              <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name} <CommentCount count={queue.count} />
+              <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name} <CountBadge count={queue.count} />
             </Link>
           )}
         </div>
@@ -48,7 +49,11 @@ ModerationMenu.propTypes = {
   items: PropTypes.array.isRequired,
   asset: PropTypes.shape({
     id: PropTypes.string
-  })
+  }),
+  selectSort: PropTypes.func.isRequired,
+  sort: PropTypes.string.isRequired,
+  getModPath: PropTypes.func.isRequired,
+  activeTab: PropTypes.string.isRequired,
 };
 
 export default ModerationMenu;

client/coral-admin/src/routes/Moderation/components/ModerationQueue.css

@@ -0,0 +1,30 @@
+.root {
+  padding: 8px 0;
+  list-style: none;
+  display: block;
+  margin-top: 16px;
+}
+
+.list {
+  padding: 0;
+  margin: 0;
+}
+
+.commentLeave {
+  opacity: 1.0;
+}
+
+.commentLeaveActive {
+  opacity: 0;
+  transition: opacity 800ms;
+}
+
+.commentEnter {
+  opacity: 0;
+}
+
+.commentEnterActive {
+  opacity: 1.0;
+  transition: opacity 800ms;
+}
+

client/coral-admin/src/routes/Moderation/components/ModerationQueue.js

@@ -1,42 +1,56 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import Comment from '../containers/Comment';
-import styles from './styles.css';
+import styles from './ModerationQueue.css';
 import EmptyCard from '../../../components/EmptyCard';
-import {actionsMap} from '../../../utils/moderationQueueActionsMap';
 import LoadMore from '../../../components/LoadMore';
+import ViewMore from './ViewMore';
 import t from 'coral-framework/services/i18n';
 import {CSSTransitionGroup} from 'react-transition-group';
 
+const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
+
+// resetCursors will return the id cursors of the first and second comment of
+// the current comment list. The cursors are used to dertermine which
+// comments to show. The spare cursor functions as a backup in case one
+// of the comments gets deleted.
+function resetCursors(state, props) {
+  if (props.comments && props.comments.length) {
+    const idCursors = [props.comments[0].id];
+    if (props.comments[1]) {
+      idCursors.push(props.comments[1].id);
+    }
+    return {idCursors};
+  }
+  return {idCursors: []};
+}
+
+// invalidateCursor is called whenever a comment is removed which is referenced
+// by one of the 2 id cursors. It returns a new set of id cursors calculated
+// using the help of the backup cursor.
+function invalidateCursor(invalidated, state, props) {
+  const alt = invalidated === 1 ? 0 : 1;
+  const idCursors = [];
+  if (state.idCursors[alt]) {
+    idCursors.push(state.idCursors[alt]);
+    const index = props.comments.findIndex((node) => node.id === idCursors[0]);
+    const nextInLine = props.comments[index + 1];
+    if (nextInLine) {
+      idCursors.push(nextInLine.id);
+    }
+  }
+  return {idCursors};
+}
+
 class ModerationQueue extends React.Component {
   isLoadingMore = false;
 
-  static propTypes = {
-    viewUserDetail: PropTypes.func.isRequired,
-    bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-    suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-    currentAsset: PropTypes.object,
-    showBanUserDialog: PropTypes.func.isRequired,
-    showSuspendUserDialog: PropTypes.func.isRequired,
-    rejectComment: PropTypes.func.isRequired,
-    acceptComment: PropTypes.func.isRequired,
-    comments: PropTypes.array.isRequired
-  }
-
-  loadMore = () => {
-    if (!this.isLoadingMore) {
-      this.isLoadingMore = true;
-      this.props.loadMore(this.props.activeTab)
-        .then(() => this.isLoadingMore = false)
-        .catch((e) => {
-          this.isLoadingMore = false;
-          throw e;
-        });
-    }
-  }
-
   constructor(props) {
     super(props);
+    this.state = {
+      ...resetCursors(this.state, props),
+    };
   }
 
   componentDidUpdate (prev) {
@@ -46,14 +60,67 @@ class ModerationQueue extends React.Component {
     // AND there are more comments available on the server,
     // go ahead and load more comments
     if (prev.comments.length > 0 && comments.length === 0 && commentCount > 0) {
-      this.loadMore();
+      this.props.loadMore();
     }
   }
 
+  componentWillReceiveProps(next) {
+    const {comments: prevComments} = this.props;
+    const {comments: nextComments} = next;
+
+    if (!prevComments && nextComments) {
+      this.setState(resetCursors);
+      return;
+    }
+
+    if (
+      prevComments && nextComments &&
+        nextComments.length < prevComments.length
+    ) {
+
+      // Invalidate first cursor if referenced comment was removed.
+      if (this.state.idCursors[0] && !hasComment(nextComments, this.state.idCursors[0])) {
+        this.setState(invalidateCursor(0, this.state, next));
+      }
+
+      // Invalidate second cursor if referenced comment was removed.
+      if (this.state.idCursors[1] && !hasComment(nextComments, this.state.idCursors[1])) {
+        this.setState(invalidateCursor(1, this.state, next));
+      }
+    }
+  }
+
+  viewNewComments = () => {
+    this.setState(resetCursors);
+  };
+
+  // getVisibileComments returns a list containing comments
+  // which comes after the `idCursor`.
+  getVisibleComments() {
+    const {comments} = this.props;
+    const idCursor = this.state.idCursors[0];
+
+    if (!comments) {
+      return [];
+    }
+
+    const view = [];
+    let pastCursor = false;
+    comments.forEach((comment) => {
+      if (comment.id === idCursor) {
+        pastCursor = true;
+      }
+      if (pastCursor) {
+        view.push(comment);
+      }
+    });
+    return view;
+  }
+
   render () {
     const {
       comments,
-      selectedIndex,
+      selectedCommentId,
       commentCount,
       singleView,
       viewUserDetail,
@@ -61,12 +128,51 @@ class ModerationQueue extends React.Component {
       ...props
     } = this.props;
 
+    if (comments.length === 0) {
+      return (
+        <div className={styles.root}>
+          <EmptyCard>{t('modqueue.empty_queue')}</EmptyCard>
+        </div>
+      );
+    }
+
+    if (singleView) {
+      const index = comments.findIndex((comment) => comment.id === selectedCommentId);
+      const comment = comments[index];
+      return (
+        <div className={styles.root}>
+          <Comment
+            data={this.props.data}
+            root={this.props.root}
+            key={comment.id}
+            comment={comment}
+            selected={true}
+            suspectWords={props.suspectWords}
+            bannedWords={props.bannedWords}
+            viewUserDetail={viewUserDetail}
+            showBanUserDialog={props.showBanUserDialog}
+            showSuspendUserDialog={props.showSuspendUserDialog}
+            acceptComment={props.acceptComment}
+            rejectComment={props.rejectComment}
+            currentAsset={props.currentAsset}
+            currentUserId={this.props.currentUserId}
+          />;
+        </div>
+      );
+    }
+
+    const view = this.getVisibleComments();
+
     return (
-      <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
+      <div className={styles.root}>
+        <ViewMore
+          viewMore={this.viewNewComments}
+          count={comments.length - view.length}
+        />
         <CSSTransitionGroup
           key={activeTab}
           component={'ul'}
-          style={{paddingLeft: 0}}
+          className={styles.list}
           transitionName={{
             enter: styles.commentEnter,
             enterActive: styles.commentEnterActive,
@@ -79,36 +185,30 @@ class ModerationQueue extends React.Component {
           transitionLeaveTimeout={1000}
         >
           {
-            comments.map((comment, i) => {
-              const status = comment.action_summaries ? 'FLAGGED' : comment.status;
-              return <Comment
-                data={this.props.data}
-                root={this.props.root}
-                key={comment.id}
-                comment={comment}
-                selected={i === selectedIndex}
-                suspectWords={props.suspectWords}
-                bannedWords={props.bannedWords}
-                viewUserDetail={viewUserDetail}
-                actions={actionsMap[status]}
-                showBanUserDialog={props.showBanUserDialog}
-                showSuspendUserDialog={props.showSuspendUserDialog}
-                acceptComment={props.acceptComment}
-                rejectComment={props.rejectComment}
-                currentAsset={props.currentAsset}
-                currentUserId={this.props.currentUserId}
-              />;
-            })
+            view
+              .map((comment) => {
+                return <Comment
+                  data={this.props.data}
+                  root={this.props.root}
+                  key={comment.id}
+                  comment={comment}
+                  selected={comment.id === selectedCommentId}
+                  suspectWords={props.suspectWords}
+                  bannedWords={props.bannedWords}
+                  viewUserDetail={viewUserDetail}
+                  showBanUserDialog={props.showBanUserDialog}
+                  showSuspendUserDialog={props.showSuspendUserDialog}
+                  acceptComment={props.acceptComment}
+                  rejectComment={props.rejectComment}
+                  currentAsset={props.currentAsset}
+                  currentUserId={this.props.currentUserId}
+                />;
+              })
           }
         </CSSTransitionGroup>
-        {comments.length === 0 &&
-            <div className={styles.emptyCardContainer}>
-              <EmptyCard>{t('modqueue.empty_queue')}</EmptyCard>
-            </div>
-        }
 
         <LoadMore
-          loadMore={this.loadMore}
+          loadMore={this.props.loadMore}
           showLoadMore={comments.length < commentCount}
         />
       </div>
@@ -116,4 +216,24 @@ class ModerationQueue extends React.Component {
   }
 }
 
+ModerationQueue.propTypes = {
+  viewUserDetail: PropTypes.func.isRequired,
+  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  currentAsset: PropTypes.object,
+  showBanUserDialog: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  comments: PropTypes.array.isRequired,
+  commentCount: PropTypes.number.isRequired,
+  loadMore: PropTypes.func.isRequired,
+  selectedCommentId: PropTypes.string,
+  singleView: PropTypes.bool,
+  activeTab: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  currentUserId: PropTypes.string.isRequired,
+};
+
 export default ModerationQueue;

client/coral-admin/src/routes/Moderation/components/NotFoundAsset.css

@@ -0,0 +1,20 @@
+
+.notFound {
+  position: relative;
+  margin: 20px auto;
+  text-align: center;
+  padding: 68px 45px;
+  vertical-align: middle;
+  min-width: 500px;
+
+  a {
+    color: rgb(244, 126, 107);
+    font-weight: 500;
+  }
+}
+
+.goToStreams {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}

client/coral-admin/src/routes/Moderation/components/NotFoundAsset.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {Link} from 'react-router';
-import styles from './styles.css';
+import styles from './NotFoundAsset.css';
+import PropTypes from 'prop-types';
 
 const NotFound = (props) => (
   <div className={`mdl-card mdl-shadow--2dp ${styles.notFound}`}>
@@ -11,4 +12,8 @@ const NotFound = (props) => (
   </div>
 );
 
+NotFound.propTypes = {
+  assetId: PropTypes.string.isRequired,
+};
+
 export default NotFound;

client/coral-admin/src/routes/Moderation/components/Story.css

@@ -0,0 +1,49 @@
+
+.story {
+  padding: 7px 50px;
+  border-bottom: 1px solid #ddd;
+  cursor: pointer;
+  display: block;
+  text-decoration: none;
+  min-height: 50px;
+  box-sizing: border-box;
+  transition: background-color 400ms;
+
+  &:hover {
+    background-color: #efefef;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.title, .meta {
+  margin: 0;
+  color: black;
+  font-size: 15px;
+}
+
+.author, .createdAt, .status {
+  font-size: 17px;
+  display: inline-block;
+  font-size: .8em;
+}
+
+.createdAt {
+  text-align: center;
+}
+
+.author {
+  display: inline-block;
+  width: 200px;
+  color: #aaa;
+}
+
+.createdAt {
+  display: inline-block;
+  width: 200px;
+  color: #aaa;
+}
+
+

client/coral-admin/src/routes/Moderation/components/Story.js

@@ -1,5 +1,6 @@
-import React, {PropTypes} from 'react';
-import styles from './StorySearch.css';
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Story.css';
 
 const formatDate = (date) => {
   const d = new Date(date);
@@ -24,7 +25,8 @@ Story.propTypes = {
   author: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   createdAt: PropTypes.string.isRequired,
-  open: PropTypes.bool.isRequired
+  open: PropTypes.bool.isRequired,
+  goToStory: PropTypes.func.isRequired,
 };
 
 export default Story;

client/coral-admin/src/routes/Moderation/components/StorySearch.css

@@ -67,54 +67,6 @@
 /*.storyList {
   border-top: 1px solid #ddd;
 }*/
-
-.story {
-  padding: 7px 50px;
-  border-bottom: 1px solid #ddd;
-  cursor: pointer;
-  display: block;
-  text-decoration: none;
-  min-height: 50px;
-  box-sizing: border-box;
-  transition: background-color 400ms;
-
-  &:hover {
-    background-color: #efefef;
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.title, .meta {
-  margin: 0;
-  color: black;
-  font-size: 15px;
-}
-
-.author, .createdAt, .status {
-  font-size: 17px;
-  display: inline-block;
-  font-size: .8em;
-}
-
-.createdAt {
-  text-align: center;
-}
-
-.author {
-  display: inline-block;
-  width: 200px;
-  color: #aaa;
-}
-
-.createdAt {
-  display: inline-block;
-  width: 200px;
-  color: #aaa;
-}
-
 .searchButton {
   width: 90px;
   height: 35px;

client/coral-admin/src/routes/Moderation/components/StorySearch.js

@@ -8,7 +8,7 @@ const StorySearch = (props) => {
 
   const {
     root: {
-      assets = []
+      assets,
     },
     data: {loading}
   } = props;
@@ -62,7 +62,7 @@ const StorySearch = (props) => {
               {
                 loading
                   ? <Spinner />
-                  : assets.map((story, i) => {
+                  : assets.nodes.map((story, i) => {
                     const storyOpen = story.closedAt === null || new Date(story.closedAt) > new Date();
 
                     return <Story
@@ -77,7 +77,7 @@ const StorySearch = (props) => {
                   })
               }
 
-              {assets.length === 0 && <div className={styles.noResults}>No results</div>}
+              {assets.nodes.length === 0 && <div className={styles.noResults}>No results</div>}
             </div>
           </div>
         </div>
@@ -93,7 +93,13 @@ StorySearch.propTypes = {
   clearAndCloseSearch: PropTypes.func.isRequired,
   moderation: PropTypes.object.isRequired,
   handleSearchChange: PropTypes.func.isRequired,
-  assetId: PropTypes.string
+  assetId: PropTypes.string,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  handleEsc: PropTypes.func.isRequired,
+  handleEnter: PropTypes.func.isRequired,
+  goToModerateAll: PropTypes.func.isRequired,
+  searchValue: PropTypes.string,
 };
 
 export default StorySearch;