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

Revert "Es6 modules + tree shaking"

.dockerignore

@@ -6,7 +6,7 @@ node_modules
 scripts
 !scripts/generateIntrospectionResult.js
 
-# documentation should not be visable in production.
+# documentation should not be visible in production.
 docs
 
 # static assets are rebuild in the docker container.
@@ -14,6 +14,7 @@ dist
 
 # tests are not run in the docker container.
 test
+__tests__
 
 # we won't use the .git folder in production.
 .git

.eslintignore

@@ -1,6 +1,5 @@
 dist
 docs
-client/lib
 **/*.html
 plugins/*
 !plugins/talk-plugin-facebook-auth
@@ -14,5 +13,20 @@ plugins/*
 !plugins/talk-plugin-comment-content
 !plugins/talk-plugin-permalink
 !plugins/talk-plugin-featured-comments
+!plugins/talk-plugin-sort-newest
+!plugins/talk-plugin-sort-oldest
+!plugins/talk-plugin-sort-most-replied
+!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-loved
+!plugins/talk-plugin-sort-most-respected
+!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,66 +1,3 @@
 {
-    "env": {
-        "es6": true,
-        "node": true
-    },
-    "extends": "eslint:recommended",
-    "parserOptions": {
-        "ecmaVersion": 2017
-    },
-    "rules": {
-        "indent": ["error",
-            2
-        ],
-        "no-console": [
-            0
-        ],
-        "linebreak-style": ["error", "unix"],
-        "quotes": ["error", "single"],
-        "semi": ["error", "always"],
-        "no-template-curly-in-string": [1],
-        "no-unsafe-negation": [1],
-        "array-callback-return": [1],
-        "arrow-parens": ["warn", "always"],
-        "template-curly-spacing": "warn",
-        "eqeqeq": [2, "smart"],
-        "no-eval": [2],
-        "no-global-assign": [2],
-        "no-implied-eval": [2],
-        "lines-around-comment": ["warn", {"beforeLineComment": true}],
-        "spaced-comment": ["warn", "always", { "line": { "exceptions": ["-", "="] } }],
-        "no-script-url": [2],
-        "no-throw-literal": [2],
-        "yoda": [1],
-        "no-path-concat": [2],
-        "eol-last": [1],
-        "no-nested-ternary": [1],
-        "no-tabs": [2],
-        "no-unneeded-ternary": [1],
-        "object-curly-spacing": [1],
-        "space-infix-ops": ["error"],
-        "space-in-parens": ["error", "never"],
-        "space-unary-ops": ["error", {
-          "words": true,
-          "nonwords": false
-        }],
-        "no-const-assign": [2],
-        "no-duplicate-imports": [2],
-        "prefer-template": [1],
-        "comma-spacing": ["error", {
-            "after": true
-        }],
-        "no-var": [2],
-        "no-lonely-if": [2],
-        "curly": [2],
-        "no-unused-vars": ["error", {
-            "argsIgnorePattern": "^_|next",
-            "varsIgnorePattern": "^_"
-        }],
-        "no-multiple-empty-lines": ["error", {
-            "max": 1
-        }],
-        "newline-per-chained-call": ["error", {
-            "ignoreChainWithDepth": 2
-        }]
-    }
+  "extends": "@coralproject/eslint-config-talk"
 }

.gitignore

@@ -14,7 +14,6 @@ client/coral-framework/graphql/introspection.json
 *.swp
 *.DS_STORE
 
-test/e2e/reports
 coverage/
 
 plugins.json
@@ -30,5 +29,21 @@ 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
+!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-loved
+!plugins/talk-plugin-sort-most-respected
+!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.

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:8
+FROM node:8-alpine
 
 # Create app directory
 RUN mkdir -p /usr/src/app
@@ -12,6 +12,9 @@ EXPOSE 5000
 # Bundle app source
 COPY . /usr/src/app
 
+# Ensure the runtime of the container is in production mode.
+ENV NODE_ENV production
+
 # Install app dependencies and build static assets.
 RUN yarn global add node-gyp && \
     yarn install --frozen-lockfile && \
@@ -19,7 +22,4 @@ RUN yarn global add node-gyp && \
     yarn build && \
     yarn cache clean
 
-# Ensure the runtime of the container is in production mode.
-ENV NODE_ENV production
-
 CMD ["yarn", "start"]

Dockerfile.onbuild

@@ -7,8 +7,5 @@ ONBUILD COPY . /usr/src/app
 # we need to have webpack available. We then build the new dependancies and
 # clear out the development dependancies again. After this we of course need to
 # clear out the yarn cache, this saves quite a lot of size.
-ONBUILD RUN NODE_ENV=development yarn install --frozen-lockfile && \
-            NODE_ENV=production  cli plugins reconcile && \
-            NODE_ENV=production  yarn build && \
-            NODE_ENV=production  yarn install --production --force && \
-            yarn cache clean
+ONBUILD RUN cli plugins reconcile && \
+            yarn build

README.md

@@ -1,13 +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)
-
-Third party licenses are available via the `/client/3rdpartylicenses.txt`
-endpoint when the server is running with built assets.
+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).
 
 ## Documentation
 
-See our [Talk Documentation & Guides](https://coralproject.github.io/talk/).
+Developer Documentation & Setup Guides https://coralproject.github.io/talk/.
+
+## Relevant Links
+
+- Blog: https://blog.coralproject.net/
+- Community Forums: https://community.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,72 +2,46 @@ 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 authentication = require('./middleware/authentication');
-const {passport} = require('./services/passport');
-const plugins = require('./services/plugins');
-const pubsub = require('./services/pubsub');
-const i18n = require('./services/i18n');
-const enabled = require('debug').enabled;
-const errors = require('./errors');
-const {createGraphOptions} = require('./graph');
-const apollo = require('graphql-server-express');
-const accepts = require('accepts');
 const compression = require('compression');
 const cookieParser = require('cookie-parser');
-const {ROOT_URL} = require('./config');
+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');
 
 const app = express();
 
-// Middleware declarations.
+//==============================================================================
+// APPLICATION WIDE MIDDLEWARE
+//==============================================================================
 
 // Add the logging middleware only if we aren't testing.
-if (app.get('env') !== 'test') {
+if (process.env.NODE_ENV !== 'test') {
   app.use(morgan('dev'));
 }
 
-//==============================================================================
-// APP MIDDLEWARE
-//==============================================================================
-
+// Trust the first proxy in front of us, this will enable us to trust the fact
+// that SSL was terminated correctly.
 app.set('trust proxy', 1);
 
-// We disable frameward on helmet to allow crossdomain injection of the embed
-app.use(helmet({
-  frameguard: false
-}));
+// Enable a suite of security good practices through helmet. We disable
+// frameguard to allow crossdomain injection of the embed.
+app.use(helmet(merge(HELMET_CONFIGURATION, {
+  frameguard: false,
+})));
+
+// Compress the responses if appropriate.
 app.use(compression());
+
+// Parse the cookies on the request.
 app.use(cookieParser());
+
+// Parse the body json if it's there.
 app.use(bodyParser.json());
 
-//==============================================================================
-// STATIC FILES
-//==============================================================================
-
-// If the application is in production mode, then add gzip rewriting for the
-// content.
-if (process.env.NODE_ENV === 'production') {
-  app.get('*.js', (req, res, next) => {
-    const accept = accepts(req);
-    if (accept.encoding(['gzip']) === 'gzip') {
-
-      // Adjsut the headers on the request by adding a content type header
-      // because express won't be able to detect the mime-type with the .gz
-      // extension and we need to decalre support for the gzip encoding.
-      res.set('Content-Type', 'application/javascript');
-      res.set('Content-Encoding', 'gzip');
-
-      // Rewrite the url so that the gzip version will be served instead.
-      req.url = `${req.url}.gz`;
-    }
-
-    next();
-  });
-}
-
-app.use('/client', express.static(path.join(__dirname, 'dist')));
-app.use('/public', express.static(path.join(__dirname, 'public')));
-
 //==============================================================================
 // VIEW CONFIGURATION
 //==============================================================================
@@ -75,124 +49,16 @@ app.use('/public', express.static(path.join(__dirname, 'public')));
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
-// Set the BASE_URL as the ROOT_URL.
-app.locals.BASE_URL = ROOT_URL;
-if (app.locals.BASE_URL[app.locals.BASE_URL.length - 1] !== '/') {
-  app.locals.BASE_URL += '/';
-}
-
-//==============================================================================
-// PASSPORT MIDDLEWARE
-//==============================================================================
-
-const passportDebug = require('debug')('talk:passport');
-
-// Install the passport plugins.
-plugins.get('server', 'passport').forEach((plugin) => {
-  passportDebug(`added plugin '${plugin.plugin.name}'`);
-
-  // Pass the passport.js instance to the plugin to allow it to inject it's
-  // functionality.
-  plugin.passport(passport);
-});
-
-// Setup the PassportJS Middleware.
-app.use(passport.initialize());
-
-// Attach the authentication middleware, this will be responsible for decoding
-// (if present) the JWT on the request.
-app.use('/api', authentication);
-
-const pubsubClient = pubsub.createClientFactory();
-
-// To handle dependancy injection safer, we inject the pubsub handle onto the
-// request object.
-app.use('/api', (req, res, next) => {
-
-  // Attach the pubsub handle to the requests.
-  req.pubsub = pubsubClient();
-
-  // Forward on the request.
-  next();
-});
-
-//==============================================================================
-// GraphQL Router
-//==============================================================================
-
-// GraphQL endpoint.
-app.use('/api/v1/graph/ql', apollo.graphqlExpress(createGraphOptions));
-
-// Only include the graphiql tool if we aren't in production mode.
-if (app.get('env') !== 'production') {
-
-  // Interactive graphiql interface.
-  app.use('/api/v1/graph/iql', (req, res) => {
-    res.render('graphiql', {
-      endpointURL: '/api/v1/graph/ql'
-    });
-  });
-
-  // GraphQL documention.
-  app.get('/admin/docs', (req, res) => {
-    res.render('admin/docs');
-  });
-
-}
-
 //==============================================================================
 // ROUTES
 //==============================================================================
 
-app.use('/', require('./routes'));
+// Add the locals to the app renderer.
+applyLocals(app.locals);
 
-//==============================================================================
-// ERROR HANDLING
-//==============================================================================
+debug(`mounting routes on the ${MOUNT_PATH} path`);
 
-// Catch 404 and forward to error handler.
-app.use((req, res, next) => {
-  next(errors.ErrNotFound);
-});
-
-// General error handler. Respond with the message and error if we have it while
-// returning a status code that makes sense.
-app.use('/api', (err, req, res, next) => {
-  if (err !== errors.ErrNotFound) {
-    if (app.get('env') !== 'test' || enabled('talk:errors')) {
-      console.error(err);
-    }
-  }
-
-  if (err instanceof errors.APIError) {
-    res.status(err.status).json({
-      message: err.message,
-      error: err
-    });
-  } else {
-    res.status(500).json({});
-  }
-});
-
-app.use('/', (err, req, res, next) => {
-  if (err !== errors.ErrNotFound) {
-    console.error(err);
-  }
-
-  i18n.init(req);
-
-  if (err instanceof errors.APIError) {
-    res.status(err.status);
-    res.render('error', {
-      message: err.message,
-      error: app.get('env') === 'development' ? err : {}
-    });
-  } else {
-    res.render('error', {
-      message: err.message,
-      error: app.get('env') === 'development' ? err : {}
-    });
-  }
-});
+// Actually apply the routes.
+app.use(MOUNT_PATH, routes);
 
 module.exports = app;

app.json

@@ -1,10 +1,15 @@
 {
     "name": "The Coral Project: Talk",
     "env": {
-        "TALK_SESSION_SECRET": {
+        "TALK_JWT_SECRET": {
             "description": "The session secret",
             "generator": "secret"
         },
+        "TALK_ROOT_URL": {
+            "description": "Please copy the App Name you choose above. If you did not choose one, please do so now and copy it here. Talk on Heroku will not work without this setting.",
+            "value":"https://<COPY APP NAME HERE>.herokuapp.com",
+            "required": true
+        },
         "TALK_FACEBOOK_APP_ID": {
             "value": "",
             "required": true
@@ -14,8 +19,7 @@
             "required": true
         },
         "NODE_ENV": "production",
-        "TALK_SMTP_PORT": "2525",
-        "REWRITE_ENV": "TALK_PORT:PORT,TALK_MONGO_URL:MONGO_URI,TALK_REDIS_URL:REDIS_URL,TALK_SMTP_HOST:POSTMARK_SMTP_SERVER,TALK_SMTP_USERNAME:POSTMARK_API_TOKEN,TALK_SMTP_PASSWORD:POSTMARK_API_TOKEN",
+        "REWRITE_ENV": "TALK_MONGO_URL:MONGO_URI,TALK_REDIS_URL:REDIS_URL,TALK_SMTP_HOST:MAILGUN_SMTP_SERVER,TALK_SMTP_PORT:MAILGUN_SMTP_PORT,TALK_SMTP_USERNAME:MAILGUN_SMTP_LOGIN,TALK_SMTP_PASSWORD:MAILGUN_SMTP_PASSWORD",
         "NPM_CONFIG_PRODUCTION": "false"
     },
     "addons": [{
@@ -25,8 +29,8 @@
         "plan": "rediscloud:30",
         "as": "REDIS"
     }, {
-        "plan": "postmark:10k",
-        "as": "POSTMARK"
+        "plan": "mailgun:starter",
+        "as": "MAILGUN"
     }],
     "image": "heroku/nodejs",
     "success_url": "/admin/install"

bin/cli

@@ -4,8 +4,9 @@
  * Module dependencies.
  */
 
-// const util = require('./util');
 const program = require('./commander');
+const {head, map} = require('lodash');
+const Matcher = require('did-you-mean');
 
 program
   .command('serve', 'serve the application')
@@ -16,12 +17,28 @@ program
   .command('token', 'work with the access tokens')
   .command('users', 'work with the application auth')
   .command('migration', 'provides utilities for migrating the database')
+  .command('verify', 'provides utilities for performing data verification')
   .command(
     'plugins',
     'provides utilities for interacting with the plugin system'
   )
   .parse(process.argv);
 
+// If the command wasn't found, output help.
+const cmds = map(program.commands, '_name');
+const cmd = head(program.args);
+if (!cmds.includes(cmd)) {
+  const m = new Matcher(cmds);
+  const similarCMDs = m.list(cmd);
+
+  console.error(`cli '${cmd}' is not a talk cli command. See 'cli --help'.`);
+  if (similarCMDs.length > 0) {
+    const sc = similarCMDs.map(({value}) => `\t${value}\n`).join('');
+    console.error(`\nThe most similar commands are\n${sc}`);
+  }
+  process.exit(1);
+}
+
 /**
  * When this provess exists, check to see if we have a running command, if we do
  * check to see if it is still running. If it is, then kill it with a SIGINT
@@ -30,6 +47,8 @@ program
  */
 process.once('exit', () => {
   if (
+
+    // program.runningCommand &&
     program.runningCommand.killed === false &&
     program.runningCommand.exitCode === null
   ) {

bin/cli-jobs

@@ -78,18 +78,23 @@ function rangeJobsByState(state = 'complete', limit) {
 /**
  * Cleans up the jobs that are in the queue.
  */
-function cleanupJobs(options) {
+async function cleanupJobs(options) {
   const n = 100;
 
-  Promise.all([
-    rangeJobsByState('complete', n),
-    options.stuck ? rangeJobsByState('failed', n) : false
-  ])
-  .then((joblists) => joblists.filter((jobs) => jobs).map(removeJobs))
-  .then(() => {
+  try {
+    const joblists = await Promise.all([
+      rangeJobsByState('complete', n),
+      options.stuck ? rangeJobsByState('failed', n) : false
+    ]);
+
+    await joblists.filter((jobs) => jobs).map(removeJobs);
+
     util.shutdown();
     console.log('Removed old jobs');
-  });
+  } catch (err) {
+    console.error(err);
+    util.shutdown(1);
+  }
 }
 
 //==============================================================================

bin/cli-plugins

@@ -53,7 +53,7 @@ function versionMatch(name, version) {
   }
 }
 
-const EXTERNAL = /^\w[a-z\-0-9\.]+$/; // Match "react", "path", "fs", "lodash.random", etc.
+const EXTERNAL = /^\w[a-z\-0-9.]+$/; // Match "react", "path", "fs", "lodash.random", etc.
 
 function reconcilePackages({quiet = false, upgradeRemote = false}) {
   const fetchable = [];

bin/cli-users

@@ -98,39 +98,32 @@ function getUserCreateAnswers(options) {
 /**
  * Prompts for input and registers a user based on those.
  */
-function createUser(options) {
-  getUserCreateAnswers(options)
-    .then((answers) => {
-      if (answers.password !== answers.confirmPassword) {
-        return Promise.reject(new Error('Passwords do not match'));
-      }
+async function createUser(options) {
+  try {
+    const answers = await getUserCreateAnswers(options);
+    if (answers.password !== answers.confirmPassword) {
+      throw new Error('Passwords do not match');
+    }
 
-      return answers;
-    })
-    .then((answers) => {
-      return UsersService
-        .createLocalUser(answers.email.trim(), answers.password.trim(), answers.username.trim())
-        .then((user) => {
-          console.log(`Created user ${user.id}.`);
+    const user = await UsersService.createLocalUser(answers.email.trim(), answers.password.trim(), answers.username.trim());
+    console.log(`Created user ${user.id}.`);
 
-          if (answers.roles.length > 0) {
-            return Promise.all(answers.roles.map((role) => {
-              return UsersService
-                .addRoleToUser(user.id, role)
-                .then(() => {
-                  console.log(`Added the role ${role} to User ${user.id}.`);
-                });
-            }));
-          }
-        });
-    })
-    .then(() => {
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown();
-    });
+    if (answers.roles.length > 0) {
+      return Promise.all(answers.roles.map((role) => {
+        return UsersService
+          .addRoleToUser(user.id, role)
+          .then(() => {
+            console.log(`Added the role ${role} to User ${user.id}.`);
+          });
+      }));
+    }
+
+    util.shutdown();
+
+  } catch (err) {
+    console.error(err);
+    util.shutdown();
+  }
 }
 
 /**
@@ -169,21 +162,21 @@ function passwd(userID) {
       validate: validateRequired('Confirm Password is required')
     }
   ])
-  .then((answers) => {
-    if (answers.password !== answers.confirmPassword) {
-      return Promise.reject(new Error('Password mismatch'));
-    }
+    .then((answers) => {
+      if (answers.password !== answers.confirmPassword) {
+        throw new Error('Password mismatch');
+      }
 
-    return UsersService.changePassword(userID, answers.password);
-  })
-  .then(() => {
-    console.log('Password changed.');
-    util.shutdown();
-  })
-  .catch((err) => {
-    console.error(err);
-    util.shutdown(1);
-  });
+      return UsersService.changePassword(userID, answers.password);
+    })
+    .then(() => {
+      console.log('Password changed.');
+      util.shutdown();
+    })
+    .catch((err) => {
+      console.error(err);
+      util.shutdown(1);
+    });
 }
 
 /**

bin/cli-verify

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+const program = require('./commander');
+const mongoose = require('../services/mongoose');
+const util = require('./util');
+const databaseVerifications = require('./verifications/database');
+
+// Register the shutdown criteria.
+util.onshutdown([
+  () => mongoose.disconnect()
+]);
+
+async function database({fix = false, limit = Infinity, batch = 1000}) {
+  try {
+    for (const verification of databaseVerifications) {
+      await verification({fix, limit, batch});
+    }
+  } catch (err) {
+    console.error(`Failed to process all the ${databaseVerifications.length} verifications`, err);
+    util.shutdown(1);
+    return;
+  }
+
+  util.shutdown();
+}
+
+//==============================================================================
+// Setting up the program command line arguments.
+//==============================================================================
+
+program
+  .command('db')
+  .description('verifies the database integrity')
+  .option('-f, --fix', 'fix the problems found with database inconsistencies')
+  .option('-l, --limit [size]', 'limit the amount of documents to process in a single pass, this will ensure only a maximum number of batch operations are issued [default: inf]', parseInt)
+  .option('-b, --batch [size]', 'batch size to process verifications and repairs of documents [default: 1000]', parseInt)
+  .action(database);
+
+program.parse(process.argv);
+
+// If there is no command listed, output help.
+if (!process.argv.slice(2).length) {
+  program.outputHelp();
+  util.shutdown();
+}

bin/verifications/database/comments.js

@@ -0,0 +1,193 @@
+const CommentModel = require('../../../models/comment');
+const ActionsService = require('../../../services/actions');
+const {arrayJoinBy, singleJoinBy} = require('../../../graph/loaders/util');
+const sc = require('snake-case');
+const debug = require('debug')('talk:cli:verify');
+
+const getBatch = async (limit, offset) => CommentModel
+  .find({})
+  .select({'id': 1, 'action_counts': 1, 'reply_count': 1})
+  .limit(limit)
+  .skip(offset)
+  .sort('created_at');
+
+module.exports = async ({fix, limit, batch}) => {
+  let operations = [];
+
+  // Count how many comments there are to process.
+  const totalCount = await CommentModel.count();
+
+  let offset = 0;
+  let comments = [];
+  let commentIDs = [];
+
+  console.log(`Processing ${totalCount} comments in batches of ${limit}...`);
+
+  // Keep processing documents until there are is none left.
+  while (offset < totalCount) {
+
+    // Get a batch of comments.
+    comments = await getBatch(batch, offset);
+    commentIDs = comments.map(({id}) => id);
+
+    // Get their reply counts.
+    let allReplyCounts = await CommentModel
+      .aggregate([
+        {
+          $match: {
+            parent_id: {
+              $in: commentIDs,
+            },
+            status: {
+              $in: ['NONE', 'ACCEPTED']
+            }
+          }
+        },
+        {
+          $group: {
+            _id: '$parent_id',
+            count: {
+              $sum: 1
+            }
+          }
+        }
+      ])
+      .then(singleJoinBy(commentIDs, '_id'))
+      .then((results) => results.map((result) => result ? result.count : 0));
+
+    // Get their action summaries.
+    let allActionSummaries = await ActionsService
+      .getActionSummaries(commentIDs)
+      .then(arrayJoinBy(commentIDs, 'item_id'));
+
+    // Loop over the comments, with their action summaries.
+    for (let i = 0; i < comments.length; i++) {
+      let comment = comments[i];
+      let actionSummaries = allActionSummaries[i];
+      let replyCount = allReplyCounts[i];
+
+      // And check to see if the action summaries we just computed match what is
+      // currently set for the comments.
+      let commentOperations = [];
+
+      // If the reply count needs to be updated, then update it!
+      if (comment.reply_count !== replyCount) {
+        commentOperations.push({
+          reply_count: replyCount,
+        });
+      }
+
+      // First we process all the group id's.
+      for (let actionSummary of actionSummaries) {
+        if (actionSummary.group_id === null) {
+          continue;
+        }
+
+        // And we generate the group id.
+        const ACTION_TYPE = sc(actionSummary.action_type.toLowerCase());
+        const GROUP_ID = sc(actionSummary.group_id.toLowerCase());
+
+        if (GROUP_ID.length <= 0) {
+          continue;
+        }
+
+        // And we add a new batch operation if the action summary is associated
+        // with a group.
+        const ACTION_COUNT_FIELD = `${ACTION_TYPE}_${GROUP_ID}`;
+
+        // Check that the action summaries match the cached counts.
+        if (!comment.action_counts || !(ACTION_COUNT_FIELD in comment.action_counts) || comment.action_counts[ACTION_COUNT_FIELD] !== actionSummary.count) {
+
+          // Batch updates for those changes.
+          commentOperations.push({
+            [`action_counts.${ACTION_COUNT_FIELD}`]: actionSummary.count,
+          });
+        }
+      }
+
+      // Group all the action summaries together from all the different group
+      // ids.
+      let groupedActionSummaries = actionSummaries.reduce((acc, actionSummary) => {
+        const ACTION_TYPE = sc(actionSummary.action_type.toLowerCase());
+
+        if (!(ACTION_TYPE in acc)) {
+          acc[ACTION_TYPE] = 0;
+        }
+
+        acc[ACTION_TYPE] += actionSummary.count;
+
+        return acc;
+      }, {});
+
+      for (const ACTION_COUNT_FIELD of Object.keys(groupedActionSummaries)) {
+        const count = groupedActionSummaries[ACTION_COUNT_FIELD];
+
+        // Check that the action summaries match the cached counts.
+        if (!comment.action_counts || !(ACTION_COUNT_FIELD in comment.action_counts) || comment.action_counts[ACTION_COUNT_FIELD] !== count) {
+
+          // Batch updates for those changes.
+          commentOperations.push({
+            [`action_counts.${ACTION_COUNT_FIELD}`]: count,
+          });
+        }
+      }
+
+      // If this comment has action summaries that should be updated, then
+      // perform an update!
+      if (commentOperations.length > 0) {
+        operations.push({
+          updateOne: {
+            filter: {
+              id: comment.id
+            },
+            update: {
+              $set: Object.assign({}, ...commentOperations),
+            },
+          },
+        });
+      }
+    }
+
+    debug(`Processed batch of ${comments.length} comments.`);
+
+    if (operations.length >= limit) {
+      debug(`Queued operations are ${operations.length}, reached limit of ${limit}, not processing any more.`);
+
+      if (operations.length > limit) {
+        debug(`${operations.length - limit} operations have been truncated to enforce the limit`);
+      }
+
+      break;
+    }
+
+    offset += batch;
+  }
+
+  const OPERATIONS_LENGTH = operations.length;
+
+  if (limit < Infinity && offset + comments.length < totalCount) {
+    console.log(`Processed ${offset + comments.length}/${totalCount} comments because we reached the update limit of ${limit}.`);
+  } else {
+    console.log(`Processed all ${totalCount} comments.`);
+  }
+
+  console.log(`${OPERATIONS_LENGTH} documents need fixing.`);
+
+  // If fix was enabled, execute the batch writes.
+  if (OPERATIONS_LENGTH > 0) {
+    if (fix) {
+      debug(`Fixing ${OPERATIONS_LENGTH} documents...`);
+
+      while (operations.length) {
+        let batchOperations = operations.splice(0, batch);
+        let result = await CommentModel.collection.bulkWrite(batchOperations);
+
+        debug(`Fixed batch of ${result.modifiedCount} documents.`);
+      }
+
+      console.log(`Applied all ${OPERATIONS_LENGTH} fixes.`);
+    } else {
+      console.warn('Skipping fixing, --fix was not enabled, pass --fix to fix these errors');
+    }
+  }
+};

bin/verifications/database/index.js

@@ -0,0 +1,12 @@
+// This will import all the verifications that should be run by the:
+//
+//   cli verify database
+//
+// command. They exist in the form:
+//
+//   async ({fix = false, batch = 1000}) => {}
+//
+// where their options are derrived.
+module.exports = [
+  require('./comments'),
+];

circle.yml

@@ -40,8 +40,6 @@ test:
   override:
     # Run the tests using the junit reporter.
     - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml MOCHA_REPORTER=mocha-junit-reporter yarn test
-    # Run the e2e test suite.
-    # - E2E_REPORT_PATH=$CIRCLE_TEST_REPORTS/e2e yarn e2e
 
 deployment:
   release:

client/.babelrc

@@ -9,6 +9,7 @@
     "transform-object-assign",
     "transform-object-rest-spread",
     "transform-async-to-generator",
-    "transform-react-jsx"
+    "transform-react-jsx",
+    "syntax-dynamic-import"
   ]
 }

client/.eslintrc.json

@@ -1,23 +1,3 @@
 {
-    "env": {
-        "browser": true,
-        "es6": true,
-        "mocha": true
-    },
-    "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 PropTypes from 'prop-types';
 import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
-import {history} from 'coral-framework/helpers/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>
@@ -47,6 +47,14 @@ const routes = (
   </div>
 );
 
-const AppRouter = () => <Router history={history} routes={routes}/>;
+class AppRouter extends React.Component {
+  static contextTypes = {
+    history: PropTypes.object,
+  };
+
+  render() {
+    return <Router history={this.context.history} routes={routes} />;
+  }
+}
 
 export default AppRouter;

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

@@ -8,7 +8,6 @@ import {
   UPDATE_ASSETS
 } from '../constants/assets';
 
-import coralApi from '../../../coral-framework/helpers/request';
 import t from 'coral-framework/services/i18n';
 
 /**
@@ -17,9 +16,9 @@ import t from 'coral-framework/services/i18n';
 
 // Fetch a page of assets
 // Get comments to fill each of the three lists on the mod queue
-export const fetchAssets = (skip = '', limit = '', search = '', sort = '', filter = '') => (dispatch) => {
+export const fetchAssets = (skip = '', limit = '', search = '', sort = '', filter = '') => (dispatch, _, {rest}) => {
   dispatch({type: FETCH_ASSETS_REQUEST});
-  return coralApi(`/assets?skip=${skip}&limit=${limit}&sort=${sort}&search=${search}&filter=${filter}`)
+  return rest(`/assets?skip=${skip}&limit=${limit}&sort=${sort}&search=${search}&filter=${filter}`)
     .then(({result, count}) =>
       dispatch({type: FETCH_ASSETS_SUCCESS,
         assets: result,
@@ -34,9 +33,9 @@ export const fetchAssets = (skip = '', limit = '', search = '', sort = '', filte
 
 // Update an asset state
 // Get comments to fill each of the three lists on the mod queue
-export const updateAssetState = (id, closedAt) => (dispatch) => {
-  dispatch({type: UPDATE_ASSET_STATE_REQUEST});
-  return coralApi(`/assets/${id}/status`, {method: 'PUT', body: {closedAt}})
+export const updateAssetState = (id, closedAt) => (dispatch, _, {rest}) => {
+  dispatch({type: UPDATE_ASSET_STATE_REQUEST, id, closedAt});
+  return rest(`/assets/${id}/status`, {method: 'PUT', body: {closedAt}})
     .then(() => dispatch({type: UPDATE_ASSET_STATE_SUCCESS}))
     .catch((error) => {
       console.error(error);

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

@@ -1,16 +1,13 @@
 import bowser from 'bowser';
 import * as actions from '../constants/auth';
-import coralApi from 'coral-framework/helpers/request';
-import * as Storage from 'coral-framework/helpers/storage';
-import {handleAuthToken} from 'coral-framework/actions/auth';
-import {resetWebsocket} from 'coral-framework/services/client';
 import t from 'coral-framework/services/i18n';
+import jwtDecode from 'jwt-decode';
 
 //==============================================================================
 // SIGN IN
 //==============================================================================
 
-export const handleLogin = (email, password, recaptchaResponse) => (dispatch) => {
+export const handleLogin = (email, password, recaptchaResponse) => (dispatch, _, {rest, client, storage}) => {
   dispatch({type: actions.LOGIN_REQUEST});
 
   const params = {
@@ -27,18 +24,18 @@ export const handleLogin = (email, password, recaptchaResponse) => (dispatch) =>
     };
   }
 
-  return coralApi('/auth/local', params)
+  return rest('/auth/local', params)
     .then(({user, token}) => {
 
       if (!user) {
-        if (!bowser.safari && !bowser.ios) {
-          Storage.removeItem('token');
+        if (!bowser.safari && !bowser.ios && storage) {
+          storage.removeItem('token');
         }
         return dispatch(checkLoginFailure('not logged in'));
       }
 
       dispatch(handleAuthToken(token));
-      resetWebsocket();
+      client.resetWebsocket();
       dispatch(checkLoginSuccess(user));
     })
     .catch((error) => {
@@ -84,11 +81,11 @@ const forgotPasswordFailure = (error) => ({
   error,
 });
 
-export const requestPasswordReset = (email) => (dispatch) => {
+export const requestPasswordReset = (email) => (dispatch, _, {rest}) => {
   dispatch(forgotPasswordRequest(email));
   const redirectUri = location.href;
 
-  return coralApi('/account/password/reset', {method: 'POST', body: {email,  loc: redirectUri}})
+  return rest('/account/password/reset', {method: 'POST', body: {email,  loc: redirectUri}})
     .then(() => dispatch(forgotPasswordSuccess()))
     .catch((error) => {
       console.error(error);
@@ -116,18 +113,18 @@ const checkLoginFailure = (error) => ({
   error
 });
 
-export const checkLogin = () => (dispatch) => {
+export const checkLogin = () => (dispatch, _, {rest, client, storage}) => {
   dispatch(checkLoginRequest());
-  return coralApi('/auth')
+  return rest('/auth')
     .then(({user}) => {
       if (!user) {
-        if (!bowser.safari && !bowser.ios) {
-          Storage.removeItem('token');
+        if (!bowser.safari && !bowser.ios && storage) {
+          storage.removeItem('token');
         }
         return dispatch(checkLoginFailure('not logged in'));
       }
 
-      resetWebsocket();
+      client.resetWebsocket();
       dispatch(checkLoginSuccess(user));
     })
     .catch((error) => {
@@ -136,3 +133,33 @@ export const checkLogin = () => (dispatch) => {
       dispatch(checkLoginFailure(errorMessage));
     });
 };
+
+//==============================================================================
+// LOGOUT
+//==============================================================================
+
+export const logout = () => (dispatch, _, {rest, client, storage}) => {
+  return rest('/auth', {method: 'DELETE'}).then(() => {
+    if (storage) {
+      storage.removeItem('token');
+    }
+
+    // Reset the websocket.
+    client.resetWebsocket();
+
+    dispatch({type: actions.LOGOUT});
+  });
+};
+
+//==============================================================================
+// AUTH TOKEN
+//==============================================================================
+
+export const handleAuthToken = (token) => (dispatch, _, {storage}) => {
+  if (storage) {
+    storage.setItem('exp', jwtDecode(token).exp);
+    storage.setItem('token', token);
+  }
+  dispatch({type: 'HANDLE_AUTH_TOKEN'});
+};
+

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

@@ -1,4 +1,4 @@
-import qs from 'qs';
+import queryString from 'query-string';
 
 import {
   FETCH_COMMENTERS_REQUEST,
@@ -14,13 +14,11 @@ import {
   HIDE_REJECT_USERNAME_DIALOG
 } from '../constants/community';
 
-import coralApi from '../../../coral-framework/helpers/request';
 import t from 'coral-framework/services/i18n';
 
-export const fetchAccounts = (query = {}) => (dispatch) => {
-
+export const fetchAccounts = (query = {}) => (dispatch, _, {rest}) => {
   dispatch(requestFetchAccounts());
-  coralApi(`/users?${qs.stringify(query)}`)
+  rest(`/users?${queryString.stringify(query)}`)
     .then(({result, page, count, limit, totalPages}) =>{
       dispatch({
         type: FETCH_COMMENTERS_SUCCESS,
@@ -51,18 +49,18 @@ export const newPage = () => ({
   type: COMMENTERS_NEW_PAGE
 });
 
-export const setRole = (id, role) => (dispatch) => {
-  return coralApi(`/users/${id}/role`, {method: 'POST', body: {role}})
-  .then(() => {
-    return dispatch({type: SET_ROLE, id, role});
-  });
+export const setRole = (id, role) => (dispatch, _, {rest}) => {
+  return rest(`/users/${id}/role`, {method: 'POST', body: {role}})
+    .then(() => {
+      return dispatch({type: SET_ROLE, id, role});
+    });
 };
 
-export const setCommenterStatus = (id, status) => (dispatch) => {
-  return coralApi(`/users/${id}/status`, {method: 'POST', body: {status}})
-  .then(() => {
-    return dispatch({type: SET_COMMENTER_STATUS, id, status});
-  });
+export const setCommenterStatus = (id, status) => (dispatch, _, {rest}) => {
+  return rest(`/users/${id}/status`, {method: 'POST', body: {status}})
+    .then(() => {
+      return dispatch({type: SET_COMMENTER_STATUS, id, status});
+    });
 };
 
 // Ban User Dialog

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

@@ -1,4 +1,3 @@
-import coralApi from 'coral-framework/helpers/request';
 import * as actions from '../constants/install';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
@@ -27,19 +26,19 @@ const validation = (formData, dispatch, next) => {
 
   // Required Validation
   const empty = validKeys
-  .filter((name) => {
-    const cond = !formData[name].length;
+    .filter((name) => {
+      const cond = !formData[name].length;
 
-    if (cond) {
+      if (cond) {
 
-    // Adding Error
-      dispatch(addError(name, 'This field is required.'));
-    } else {
-      dispatch(addError(name, ''));
-    }
+        // Adding Error
+        dispatch(addError(name, 'This field is required.'));
+      } else {
+        dispatch(addError(name, ''));
+      }
 
-    return cond;
-  });
+      return cond;
+    });
 
   if (empty.length) {
     dispatch(hasError());
@@ -93,23 +92,23 @@ const validation = (formData, dispatch, next) => {
 };
 
 export const submitSettings = () => (dispatch, getState) => {
-  const settingsFormData = getState().install.toJS().data.settings;
+  const settingsFormData = getState().install.data.settings;
   validation(settingsFormData, dispatch, function() {
     dispatch(nextStep());
   });
 };
 
 export const submitUser = () => (dispatch, getState) => {
-  const userFormData = getState().install.toJS().data.user;
+  const userFormData = getState().install.data.user;
   validation(userFormData, dispatch, function() {
     dispatch(nextStep());
   });
 };
 
-export const finishInstall = () => (dispatch, getState) => {
-  const data = getState().install.toJS().data;
+export const finishInstall = () => (dispatch, getState, {rest}) => {
+  const data = getState().install.data;
   dispatch(installRequest());
-  return coralApi('/setup', {method: 'POST', body: data})
+  return rest('/setup', {method: 'POST', body: data})
     .then(() => {
       dispatch(installSuccess());
       dispatch(nextStep());
@@ -129,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) => {
+export const checkInstall = (next) => async (dispatch, _, {rest}) => {
   dispatch(checkInstallRequest());
-  coralApi('/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/moderation.js

@@ -4,15 +4,17 @@ export const toggleModal = (open) => ({type: actions.TOGGLE_MODAL, open});
 export const singleView = () => ({type: actions.SINGLE_VIEW});
 
 // hide shortcuts note
-export const hideShortcutsNote = () => {
+export const hideShortcutsNote = () => (dispatch, _, {storage}) => {
   try {
-    window.localStorage.setItem('coral:shortcutsNote', 'hide');
+    if (storage) {
+      storage.setItem('coral:shortcutsNote', 'hide');
+    }
   } catch (e) {
 
     // above will fail in Safari private mode
   }
 
-  return {type: actions.HIDE_SHORTCUTS_NOTE};
+  dispatch({type: actions.HIDE_SHORTCUTS_NOTE});
 };
 
 export const setSortOrder = (order) => ({

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

@@ -1,4 +1,3 @@
-import coralApi from '../../../coral-framework/helpers/request';
 import t from 'coral-framework/services/i18n';
 
 export const SETTINGS_LOADING = 'SETTINGS_LOADING';
@@ -14,9 +13,9 @@ export const SAVE_SETTINGS_FAILED = 'SAVE_SETTINGS_FAILED';
 export const WORDLIST_UPDATED = 'WORDLIST_UPDATED';
 export const DOMAINLIST_UPDATED = 'DOMAINLIST_UPDATED';
 
-export const fetchSettings = () => (dispatch) => {
+export const fetchSettings = () => (dispatch, _, {rest}) => {
   dispatch({type: SETTINGS_LOADING});
-  coralApi('/settings')
+  rest('/settings')
     .then((settings) => {
       dispatch({type: SETTINGS_RECEIVED, settings});
     })
@@ -41,13 +40,13 @@ export const updateDomainlist = (listName, list) => {
   return {type: DOMAINLIST_UPDATED, listName, list};
 };
 
-export const saveSettingsToServer = () => (dispatch, getState) => {
-  let settings = getState().settings.toJS();
+export const saveSettingsToServer = () => (dispatch, getState, {rest}) => {
+  let settings = getState().settings;
   if (settings.charCount) {
     settings.charCount = parseInt(settings.charCount);
   }
   dispatch({type: SAVE_SETTINGS_LOADING});
-  coralApi('/settings', {method: 'PUT', body: settings})
+  rest('/settings', {method: 'PUT', body: settings})
     .then(() => {
       dispatch({type: SAVE_SETTINGS_SUCCESS, settings});
     })

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/actions/users.js

@@ -1,4 +1,3 @@
-import coralApi from '../../../coral-framework/helpers/request';
 import * as userTypes from '../constants/users';
 import t from 'coral-framework/services/i18n';
 
@@ -7,9 +6,9 @@ import t from 'coral-framework/services/i18n';
  */
 // change status of a user
 export const userStatusUpdate = (status, userId, commentId) => {
-  return (dispatch) => {
+  return (dispatch, _, {rest}) => {
     dispatch({type: userTypes.UPDATE_STATUS_REQUEST});
-    return coralApi(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
+    return rest(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
       .then((res) => dispatch({type: userTypes.UPDATE_STATUS_SUCCESS, res}))
       .catch((error) => {
         console.error(error);
@@ -21,8 +20,8 @@ export const userStatusUpdate = (status, userId, commentId) => {
 
 // change status of a user
 export const sendNotificationEmail = (userId, subject, body) => {
-  return (dispatch) => {
-    return coralApi(`/users/${userId}/email`, {method: 'POST', body: {subject, body}})
+  return (dispatch, _, {rest}) => {
+    return rest(`/users/${userId}/email`, {method: 'POST', body: {subject, body}})
       .catch((error) => {
         console.error(error);
         const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
@@ -33,8 +32,8 @@ export const sendNotificationEmail = (userId, subject, body) => {
 
 // let a user edit their username
 export const enableUsernameEdit = (userId) => {
-  return (dispatch) => {
-    return coralApi(`/users/${userId}/username-enable`, {method: 'POST'})
+  return (dispatch, _, {rest}) => {
+    return rest(`/users/${userId}/username-enable`, {method: 'POST'})
       .catch((error) => {
         console.error(error);
         const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();

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';
@@ -69,23 +70,23 @@ class AdminLogin extends React.Component {
     );
     const requestPasswordForm = (
       this.props.passwordRequestSuccess
-      ? <p className={styles.passwordRequestSuccess} onClick={() => {
-        location.href = location.href;
-      }}>
+        ? <p className={styles.passwordRequestSuccess} onClick={() => {
+          location.href = location.href;
+        }}>
           {this.props.passwordRequestSuccess} <a className={styles.signInLink} href="#">Sign in</a>
           <Success />
         </p>
-      : <form onSubmit={this.handleRequestPassword}>
-        <TextField
-          label='Email Address'
-          value={this.state.email}
-          onChange={(e) => this.setState({email: e.target.value})} />
-        <Button
-          type='submit'
-          cStyle='black'
-          full
-          onClick={this.handleRequestPassword}>Reset Password</Button>
-      </form>
+        : <form onSubmit={this.handleRequestPassword}>
+          <TextField
+            label='Email Address'
+            value={this.state.email}
+            onChange={(e) => this.setState({email: e.target.value})} />
+          <Button
+            type='submit'
+            cStyle='black'
+            full
+            onClick={this.handleRequestPassword}>Reset Password</Button>
+        </form>
     );
     return (
       <Layout fixedDrawer restricted={true}>
@@ -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,27 +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) => {
 
-  // since words are checked against word boundaries on the backend,
-  // should be the behavior on the front end as well.
-  // currently the highlighter plugin does not support out of the box.
-  const searchWords = [...suspectWords, ...bannedWords]
-    .filter((w) => {
-      return new RegExp(`(^|\\s)${w}(\\s|$)`, 'i').test(body);
-    })
-    .concat(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}
-      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,31 +0,0 @@
-.commentType {
-  display: inline-block;
-  color: white;
-  background: grey;
-  box-sizing: border-box;
-  padding: 0px 5px;
-  border-radius: 2px;
-  font-size: 12px;
-  height: 24px;
-  letter-spacing: 0.4px;
-  margin-bottom: 1px;
-  
-  > 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/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';
@@ -65,7 +66,7 @@ class SuspendUserDialog extends React.Component {
           {t('suspenduser.title_suspend')}
         </h1>
         <p className={styles.description}>
-         {t('suspenduser.description_suspend', username)}
+          {t('suspenduser.description_suspend', username)}
         </p>
         <fieldset>
           <legend className={styles.legend}>{t('suspenduser.select_duration')}</legend>
@@ -103,7 +104,7 @@ class SuspendUserDialog extends React.Component {
           {t('suspenduser.title_notify')}
         </h1>
         <p className={styles.description}>
-         {t('suspenduser.description_notify', username)}
+          {t('suspenduser.description_notify', username)}
         </p>
         <fieldset>
           <legend className={styles.legend}>{t('suspenduser.write_message')}</legend>

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

@@ -1,6 +1,78 @@
 .copyButton {
-  float: right;
-  top: -10px;
+  background-color: white;
+  border: solid 1px;
+  padding: 2px 6px;
+  height: auto;
+  line-height: initial;
+  min-width: auto;
+  letter-spacing: normal;
+  font-size: 0.9em;
+  margin-left: 10px;
+}
+
+.userDetailList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.userDetailItem {
+  margin: 0 5px;
+  font-weight: 500;
+}
+
+.stats {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  margin: 15px 0 5px;
+  color: #595959;
+}
+
+.stat {
+  margin-right: 20px;
+}
+
+.stat:last-child {
+  margin-right: 0px;
+}
+
+.statItem, .statReportResult {
+  padding: 3px 5px;
+  background-color: #D8D8D8;
+  border-radius: 3px;
+  font-weight: 500;
+  display: block;
+  font-size: 0.9em;
+  line-height: normal;
+  letter-spacing: 0.4px;
+  min-width: 60px; 
+}
+
+.statResult {
+  font-size: 1.5em;
+  padding: 5px 0;
+  display: inline-block;
+}
+
+.statReportResult {
+  color: white;
+  margin: 5px 0;
+  font-weight: 400;
+}
+
+.statReportResult.reliable {
+  background-color: #749C48;
+}
+
+.statReportResult.neutral {
+  background-color: #616161;
+}
+
+.statReportResult.unreliable {
+  background-color: #F44336;
 }
 
 .memberSince {
@@ -8,27 +80,9 @@
 }
 
 .small {
-  color: #aaa;
-}
-
-.stats {
-  display: flex;
-
-  .stat {
-    margin: 0 4px 10px 0px;
-  }
-
-  .stat:last-child {
-    margin-right: 0;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .stat p:first-child {
-    font-weight: bold;
-  }
+  color: #888888;
+  font-size: 0.9em;
+  letter-spacing: 0.4px;
 }
 
 .profileEmail {

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

@@ -1,12 +1,15 @@
-import React, {PropTypes} from 'react';
-import Comment from './UserDetailComment';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Comment from '../containers/UserDetailComment';
 import styles from './UserDetail.css';
-import {Button, Drawer, Spinner} from 'coral-ui';
+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';
+import capitalize from 'lodash/capitalize';
+import {getReliability} from 'coral-framework/utils/user';
 
 export default class UserDetail extends React.Component {
 
@@ -24,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 = () => {
@@ -56,6 +69,8 @@ export default class UserDetail extends React.Component {
 
   renderLoaded() {
     const {
+      data,
+      root,
       root: {
         user,
         totalComments,
@@ -74,13 +89,6 @@ export default class UserDetail extends React.Component {
       loadMore,
     } = this.props;
 
-    const localProfile = user.profiles.find((p) => p.provider === 'local');
-
-    let profile;
-    if (localProfile) {
-      profile = localProfile.id;
-    }
-
     let rejectedPercent = (rejectedComments / totalComments) * 100;
     if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
 
@@ -94,72 +102,90 @@ export default class UserDetail extends React.Component {
           <h3>{user.username}</h3>
 
           <div>
-            {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
-            <ButtonCopyToClipboard className={styles.copyButton} copyText={profile} />
+            <ul className={styles.userDetailList}>
+              <li>
+                <Icon name="assignment_ind"/>
+                <span className={styles.userDetailItem}>Member Since:</span>
+                {new Date(user.created_at).toLocaleString()}
+              </li>
+
+              {user.profiles.map(({id}) =>
+                <li key={id}>
+                  <Icon name="email"/>
+                  <span className={styles.userDetailItem}>Email:</span>
+                  {id} <ButtonCopyToClipboard className={styles.copyButton} icon="content_copy" copyText={id} />
+                </li>
+              )}
+            </ul>
+
+            <ul className={styles.stats}>
+              <li className={styles.stat}>
+                <span className={styles.statItem}> Total Comments </span>
+                <spam className={styles.statResult}> {totalComments} </spam>
+              </li>
+              <li className={styles.stat}>
+                <spam className={styles.statItem}> Reject Rate </spam>
+                <spam className={styles.statResult}> {`${(rejectedPercent).toFixed(1)}%`} </spam>
+              </li>
+              <li className={styles.stat}>
+                <spam className={styles.statItem}> Reports </spam>
+                <spam className={cn(styles.statReportResult, styles[getReliability(user.reliable.flagger)])}>
+                  {capitalize(getReliability(user.reliable.flagger))}
+                </spam>
+              </li>
+            </ul>
+
+            <p className={styles.small}>
+              Data represents the last six months of activity
+            </p>
           </div>
 
           <Slot
             fill="userProfile"
             data={this.props.data}
-            root={this.props.root}
-            user={user}
+            queryData={{root, user}}
           />
-          <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
+
           <hr/>
-          <p>
-            <strong>Account summary</strong>
-            <br/><small className={styles.small}>Data represents the last six months of activity</small>
-          </p>
-          <div className={styles.stats}>
-            <div className={styles.stat}>
-              <p>Total Comments</p>
-              <p>{totalComments}</p>
-            </div>
-            <div className={styles.stat}>
-              <p>Reject Rate</p>
-              <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
-            </div>
-          </div>
           {
             selectedCommentIds.length === 0
-            ? (
-              <ul className={styles.commentStatuses}>
-                <li className={activeTab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
-                <li className={activeTab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
-              </ul>
-            )
-            : (
-              <div className={styles.bulkActionGroup}>
-                <Button
-                  onClick={bulkAccept}
-                  className={styles.bulkAction}
-                  cStyle='approve'
-                  icon='done'>
-                </Button>
-                <Button
-                  onClick={bulkReject}
-                  className={styles.bulkAction}
-                  cStyle='reject'
-                  icon='close'>
-                </Button>
-                {`${selectedCommentIds.length} comments selected`}
-              </div>
-            )
+              ? (
+                <ul className={styles.commentStatuses}>
+                  <li className={activeTab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
+                  <li className={activeTab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
+                </ul>
+              )
+              : (
+                <div className={styles.bulkActionGroup}>
+                  <Button
+                    onClick={bulkAccept}
+                    className={styles.bulkAction}
+                    cStyle='approve'
+                    icon='done'>
+                  </Button>
+                  <Button
+                    onClick={bulkReject}
+                    className={styles.bulkAction}
+                    cStyle='reject'
+                    icon='close'>
+                  </Button>
+                  {`${selectedCommentIds.length} comments selected`}
+                </div>
+              )
           }
 
           <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}
@@ -173,7 +199,7 @@ export default class UserDetail extends React.Component {
             className={styles.loadMore}
             loadMore={loadMore}
             showLoadMore={hasNextPage}
-            />
+          />
         </Drawer>
       </ClickOutside>
     );

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;
 }
 
-.commentType {
+.labels {
   position: absolute;
   right: 0px;
 }

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

@@ -1,40 +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 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}
@@ -53,10 +56,13 @@ class UserDetailComment extends React.Component {
             </span>
             {
               (comment.editing && comment.editing.edited)
-              ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-              : null
+                ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                : null
             }
-            <CommentType type={commentType} className={styles.commentType}/>
+
+            <div className={styles.labels}>
+              <CommentLabels comment={comment} />
+            </div>
           </div>
           <div className={styles.story}>
             Story: {comment.asset.title}
@@ -64,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}
@@ -78,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}>
@@ -86,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>
     );
   }
@@ -136,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,68 +1,76 @@
-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,
+  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')}
-                </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
+            <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>
@@ -72,13 +80,13 @@ const CoralHeader = ({
                 <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 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">
-                      Report a bug or give feedback
+                    <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}>
@@ -87,19 +95,21 @@ const CoralHeader = ({
                 </Menu>
               </div>
             </li>
-            <li>        
-             {`v${process.env.VERSION}`}        
+            <li>
+              {`v${process.env.VERSION}`}
             </li>
           </ul>
         </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,25 +1,28 @@
-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';
-import {logout} from 'coral-framework/actions/auth';
 import {FullLoading} from '../components/FullLoading';
 import BanUserDialog from './BanUserDialog';
 import SuspendUserDialog from './SuspendUserDialog';
 import {toggleModal as toggleShortcutModal} from '../actions/moderation';
-import {checkLogin, handleLogin, requestPasswordReset} from '../actions/auth';
+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,
@@ -30,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
@@ -49,17 +55,17 @@ class LayoutContainer extends Component {
         />
       );
     }
+
     if (can(user, 'ACCESS_ADMIN') && loggedIn) {
       return (
         <Layout
-          handleLogout={handleLogout}
+          handleLogout={logout}
           toggleShortcutModal={toggleShortcutModal}
-          {...this.props}
-        >
-        <BanUserDialog />
-        <SuspendUserDialog />
-        <UserDetail />
-        {this.props.children}
+          auth={this.props.auth} >
+          <BanUserDialog />
+          <SuspendUserDialog />
+          <UserDetail />
+          {children}
         </Layout>
       );
     } else if (loggedIn) {
@@ -73,21 +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.toJS(),
-  TALK_RECAPTCHA_PUBLIC: state.config
-    .get('data')
-    .get('TALK_RECAPTCHA_PUBLIC', null)
-});
-
-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())
+  auth: state.auth,
+  TALK_RECAPTCHA_PUBLIC: state.config.data.TALK_RECAPTCHA_PUBLIC,
 });
 
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    checkLogin,
+    fetchConfig,
+    handleLogin,
+    requestPasswordReset,
+    toggleShortcutModal,
+    logout
+  }, dispatch);
+  
 export default connect(mapStateToProps, mapDispatchToProps)(LayoutContainer);

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

@@ -5,35 +5,29 @@ import SuspendUserDialog from '../components/SuspendUserDialog';
 import {hideSuspendUserDialog} from '../actions/suspendUserDialog';
 import {withSetCommentStatus, withSuspendUser} from 'coral-framework/graphql/mutations';
 import {compose, gql} from 'react-apollo';
-import * as notification from 'coral-admin/src/services/notification';
 import t, {timeago} from 'coral-framework/services/i18n';
 import withQuery from 'coral-framework/hocs/withQuery';
+import {getErrorMessages} from 'coral-framework/utils';
 import get from 'lodash/get';
+import {notify} from 'coral-framework/actions/notification';
 
 class SuspendUserDialogContainer extends Component {
 
   suspendUser = async ({message, until}) => {
-    const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser} = this.props;
+    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;
-      }
-      notification.success(
+      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) {
-      notification.showMutationErrors(err);
+      notify('error', getErrorMessages(err));
     }
   };
 
@@ -52,8 +46,9 @@ class SuspendUserDialogContainer extends Component {
 
 const withOrganizationName = withQuery(gql`
   query CoralAdmin_SuspendUserDialog {
+      __typename
      settings {
-      organizationName
+       organizationName
     }
   }
 `);
@@ -69,6 +64,7 @@ const mapStateToProps = ({suspendUserDialog: {open, userId, username, commentId,
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     hideSuspendUserDialog,
+    notify,
   }, dispatch),
 });
 

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 = () => {
@@ -88,13 +93,13 @@ class UserDetailContainer extends React.Component {
         });
       }
     })
-    .then(() => {
-      this.isLoadingMore = false;
-    })
-    .catch((err) => {
-      this.isLoadingMore = false;
-      throw err;
-    });
+      .then(() => {
+        this.isLoadingMore = false;
+      })
+      .catch((err) => {
+        this.isLoadingMore = false;
+        throw err;
+      });
   };
 
   componentWillReceiveProps(next) {
@@ -108,7 +113,7 @@ class UserDetailContainer extends React.Component {
       return null;
     }
 
-    const loading = [1, 2, 4].indexOf(this.props.data.networkStatus) >= 0;
+    const loading = this.props.data.loading;
 
     return <UserDetail
       bulkReject={this.bulkReject}
@@ -124,7 +129,7 @@ class UserDetailContainer extends React.Component {
 }
 
 const LOAD_MORE_QUERY = gql`
-  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Date, $author_id: ID!, $statuses: [COMMENT_STATUS!]) {
+  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $author_id: ID!, $statuses: [COMMENT_STATUS!]) {
     comments(query: {limit: $limit, cursor: $cursor, author_id: $author_id, statuses: $statuses}) {
       ...CoralAdmin_Moderation_CommentConnection
     }
@@ -142,6 +147,9 @@ export const withUserDetailQuery = withQuery(gql`
         id
         provider
       }
+      reliable {
+        flagger
+      }
       ${getSlotFragmentSpreads(slots, 'user')}
     }
     totalComments: commentCount(query: {author_id: $author_id})
@@ -152,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}) => {
@@ -169,8 +179,8 @@ const mapStateToProps = (state) => ({
   selectedCommentIds: state.userDetail.selectedCommentIds,
   statuses: state.userDetail.statuses,
   activeTab: state.userDetail.activeTab,
-  bannedWords: state.settings.toJS().wordlist.banned,
-  suspectWords: state.settings.toJS().wordlist.suspect,
+  bannedWords: state.settings.wordlist.banned,
+  suspectWords: state.settings.wordlist.suspect,
 });
 
 const mapDispatchToProps = (dispatch) => ({

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

@@ -1,39 +1,39 @@
 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
       status
+      hasParent
       asset {
         id
         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

@@ -1,14 +1,34 @@
-import {add} from 'coral-framework/services/graphqlRegistry';
+import update from 'immutability-helper';
 
-const extension = {
+export default {
   mutations: {
-    SetUserStatus: () => ({
-      refetchQueries: ['CoralAdmin_Community'],
+    SetUserStatus: ({variables: {status, userId}}) => ({
+      updateQueries: {
+        TalkAdmin_Community: (prev) => {
+          if (status !== 'APPROVED') {
+            return prev;
+          }
+          const updated = update(prev, {
+            users: {
+              nodes: {$apply: (nodes) => nodes.filter((node) => node.id !== userId)},
+            },
+          });
+          return updated;
+        }
+      }
     }),
-    RejectUsername: () => ({
-      refetchQueries: ['CoralAdmin_Community'],
+    RejectUsername: ({variables: {input: {id: userId}}})  => ({
+      updateQueries: {
+        TalkAdmin_Community: (prev) => {
+          const updated = update(prev, {
+            users: {
+              nodes: {$apply: (nodes) => nodes.filter((node) => node.id !== userId)},
+            },
+          });
+          return updated;
+        }
+      }
     }),
   },
 };
 
-add(extension);

client/coral-admin/src/index.js

@@ -1,32 +1,34 @@
 import React from 'react';
 import {render} from 'react-dom';
-import {ApolloProvider} from 'react-apollo';
 import smoothscroll from 'smoothscroll-polyfill';
-import EventEmitter from 'eventemitter2';
-import EventEmitterProvider from 'coral-framework/components/EventEmitterProvider';
-
-import {getClient} from 'coral-framework/services/client';
-import store from './services/store';
-
+import TalkProvider from 'coral-framework/components/TalkProvider';
+import {createContext} from 'coral-framework/services/bootstrap';
+import reducers from './reducers';
 import App from './components/App';
-
 import 'react-mdl/extra/material.js';
-import './graphql';
-import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
+import graphqlExtension from './graphql';
+import pluginsConfig from 'pluginsConfig';
+import {toast} from 'react-toastify';
+import {createNotificationService} from './services/notification';
+import {hideShortcutsNote} from './actions/moderation';
 
-const eventEmitter = new EventEmitter();
-
-// TODO: pass redux actions through the emitter.
-
-loadPluginsTranslations();
-injectPluginsReducers();
 smoothscroll.polyfill();
 
-render(
-  <EventEmitterProvider eventEmitter={eventEmitter}>
-    <ApolloProvider client={getClient()} store={store}>
+function init({store, storage}) {
+  if (storage && storage.getItem('coral:shortcutsNote') === 'hide') {
+    store.dispatch(hideShortcutsNote());
+  }
+}
+
+async function main() {
+  const notification = createNotificationService(toast);
+  const context = await createContext({reducers, graphqlExtension, pluginsConfig, notification, init});
+  render(
+    <TalkProvider {...context}>
       <App />
-    </ApolloProvider>
-  </EventEmitterProvider>
-  , document.querySelector('#root')
-);
+    </TalkProvider>
+    , document.querySelector('#root')
+  );
+}
+
+main();

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

@@ -1,35 +1,40 @@
-import {Map, List, fromJS} from 'immutable';
 import * as actions from '../constants/assets';
+import update from 'immutability-helper';
 
-const initialState = Map({
-  byId: Map(),
-  ids: List(),
-  assets: List()
-});
+const initialState = {
+  byId: {},
+  ids: [],
+  assets: []
+};
 
 export default function assets (state = initialState, action) {
   switch (action.type) {
-  case actions.FETCH_ASSETS_SUCCESS:
-    return replaceAssets(action, state);
+  case actions.FETCH_ASSETS_SUCCESS: {
+    const assets = action.assets.reduce((prev, curr) => {
+      prev[curr.id] = curr;
+      return prev;
+    }, {});
+
+    return update(state, {
+      byId: {$set: assets},
+      count: {$set: action.count},
+      ids: {$set: Object.keys(assets)},
+    });
+  }
   case actions.UPDATE_ASSET_STATE_REQUEST:
-    return state
-      .setIn(['byId', action.id, 'closedAt'], action.closedAt);
+    return update(state, {
+      byId: {
+        [action.id]: {
+          closedAt: {$set: action.closedAt},
+        },
+      },
+    });
   case actions.UPDATE_ASSETS:
-    return state
-      .set('assets', List(action.assets));
+    return update(state, {
+      assets: {$set: action.assets},
+    });
   default:
     return state;
   }
 }
 
-const replaceAssets = (action, state) => {
-  const assets = fromJS(action.assets.reduce((prev, curr) => {
-    prev[curr.id] = curr;
-    return prev;
-  }, {}));
-
-  return state
-    .set('byId', assets)
-    .set('count', action.count)
-    .set('ids', List(assets.keys()));
-};

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

@@ -1,43 +1,63 @@
-import {Map} from 'immutable';
 import * as actions from '../constants/auth';
 
-const initialState = Map({
+const initialState = {
   loggedIn: false,
   user: null,
   loginError: null,
   loginMaxExceeded: false,
   passwordRequestSuccess: null
-});
+};
 
 export default function auth (state = initialState, action) {
   switch (action.type) {
   case actions.CHECK_LOGIN_REQUEST:
-    return state
-      .set('loadingUser', true);
+    return {
+      ...state,
+      loadingUser: true,
+    };
   case actions.CHECK_LOGIN_FAILURE:
-    return state
-      .set('loggedIn', false)
-      .set('loadingUser', false)
-      .set('user', null);
+    return {
+      ...state,
+      loggedIn: false,
+      loadingUser: false,
+      user: null,
+    };
   case actions.CHECK_LOGIN_SUCCESS:
-    return state
-      .set('loggedIn', true)
-      .set('loadingUser', false)
-      .set('user', action.user);
+    return {
+      ...state,
+      loggedIn: true,
+      loadingUser: false,
+      user: action.user,
+    };
   case actions.LOGOUT:
     return initialState;
   case actions.LOGIN_SUCCESS:
-    return state.set('loginMaxExceeded', false).set('loginError', null);
+    return {
+      ...state,
+      loginMaxExceeded: false,
+      loginError: null,
+    };
   case actions.LOGIN_FAILURE:
-    return state.set('loginError', action.message);
+    return {
+      ...state,
+      loginError: action.message,
+    };
   case actions.FETCH_FORGOT_PASSWORD_REQUEST:
-    return state.set('passwordRequestSuccess', null);
+    return {
+      ...state,
+      passwordRequestSuccess: null,
+    };
   case actions.FETCH_FORGOT_PASSWORD_SUCCESS:
-    return state.set('passwordRequestSuccess', 'If you have a registered account, a password reset link was sent to that email.');
+    return {
+      ...state,
+      passwordRequestSuccess: 'If you have a registered account, a password reset link was sent to that email.',
+    };
   case actions.LOGIN_MAXIMUM_EXCEEDED:
-    return state
-      .set('loginMaxExceeded', true)
-      .set('loginError', action.message);
+    return {
+      ...state,
+      loginMaxExceeded: true,
+      loginError: action.message,
+    };
   default :
     return state;
   }

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

@@ -1,5 +1,3 @@
-import {Map} from 'immutable';
-
 import {
   FETCH_COMMENTERS_REQUEST,
   FETCH_COMMENTERS_FAILURE,
@@ -13,8 +11,8 @@ import {
   HIDE_REJECT_USERNAME_DIALOG
 } from '../constants/community';
 
-const initialState = Map({
-  community: Map(),
+const initialState = {
+  community: {},
   isFetchingPeople: false,
   errorPeople: '',
   accounts: [],
@@ -22,72 +20,87 @@ const initialState = Map({
   ascPeople: false,
   totalPagesPeople: 0,
   pagePeople: 0,
-  user: Map({}),
+  user: {},
   banDialog: false,
   rejectUsernameDialog: false
-});
+};
 
 export default function community (state = initialState, action) {
   switch (action.type) {
   case FETCH_COMMENTERS_REQUEST :
-    return state
-      .set('isFetchingPeople', true);
+    return {
+      ...state,
+      isFetchingPeople: true,
+    };
   case FETCH_COMMENTERS_FAILURE :
-    return state
-      .set('isFetchingPeople', false)
-      .set('errorPeople', action.error);
-
+    return {
+      ...state,
+      isFetchingPeople: false,
+      errorPeople: action.error,
+    };
   case FETCH_COMMENTERS_SUCCESS : {
     const {accounts, type, page, count, limit, totalPages, ...rest} = action; // eslint-disable-line
-    return state
-      .merge({
-        isFetchingPeople: false,
-        errorPeople: '',
-        pagePeople: page,
-        countPeople: count,
-        limitPeople: limit,
-        totalPagesPeople: totalPages,
-        ...rest
-      })
-      .set('accounts', accounts); // Sets to normal array
+    return {
+      ...state,
+      isFetchingPeople: false,
+      errorPeople: '',
+      pagePeople: page,
+      countPeople: count,
+      limitPeople: limit,
+      totalPagesPeople: totalPages,
+      ...rest,
+      accounts, // Sets to normal array
+    };
   }
   case SET_ROLE : {
-    const commenters = state.get('accounts');
+    const commenters = state.accounts;
     const idx = commenters.findIndex((el) => el.id === action.id);
 
     commenters[idx].roles[0] = action.role;
-    return state.set('accounts', commenters.map((id) => id));
+    return {
+      ...state,
+      accounts: commenters.map((id) => id),
+    };
   }
   case SET_COMMENTER_STATUS: {
-    const commenters = state.get('accounts');
+    const commenters = state.accounts;
     const idx = commenters.findIndex((el) => el.id === action.id);
 
     commenters[idx].status = action.status;
-    return state.set('accounts', commenters.map((id) => id));
+    return {
+      ...state,
+      accounts: commenters.map((id) => id),
+    };
 
   }
   case SORT_UPDATE :
-    return state
-      .set('fieldPeople', action.sort.field)
-      .set('ascPeople', !state.get('ascPeople'));
+    return {
+      ...state,
+      fieldPeople: action.sort.field,
+      ascPeople: !state.ascPeople,
+    };
   case HIDE_BANUSER_DIALOG:
-    return state
-      .set('banDialog', false);
+    return {
+      ...state,
+      banDialog: false,
+    };
   case SHOW_BANUSER_DIALOG:
-    return state
-      .merge({
-        user: Map(action.user),
-        banDialog: true
-      });
+    return {
+      ...state,
+      user: action.user,
+      banDialog: true,
+    };
   case HIDE_REJECT_USERNAME_DIALOG:
-    return state
-      .set('rejectUsernameDialog', false);
+    return {
+      ...state,
+      rejectUsernameDialog: false,
+    };
   case SHOW_REJECT_USERNAME_DIALOG:
-    return state
-      .merge({
-        user: Map(action.user),
-        rejectUsernameDialog: true
-      });
+    return {
+      ...state,
+      user: action.user,
+      rejectUsernameDialog: true
+    };
   default :
     return state;
   }

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

@@ -1,15 +1,16 @@
-import {Map} from 'immutable';
-
 import * as actions from '../actions/config';
 
-const initialState = Map({
-  data: Map({})
-});
+const initialState = {
+  data: {}
+};
 
 export default function config (state = initialState, action) {
   switch (action.type) {
   case actions.CONFIG_UPDATED:
-    return state.set('data', Map(action.data));
+    return {
+      ...state,
+      data: action.data,
+    };
   default:
     return state;
   }

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

@@ -1,30 +1,29 @@
-import {Map, List} from 'immutable';
-
 import * as actions from '../constants/install';
+import update from 'immutability-helper';
 
-const initialState = Map({
+const initialState = {
   isLoading: false,
-  data: Map({
-    settings: Map({
+  data: {
+    settings: {
       organizationName: '',
-      domains: Map({
-        whitelist: List()
-      })
-    }),
-    user: Map({
+      domains: {
+        whitelist: [],
+      }
+    },
+    user: {
       username: '',
       email: '',
       password: '',
       confirmPassword: ''
-    })
-  }),
-  errors: Map({
+    }
+  },
+  errors: {
     organizationName: '',
     username: '',
     email: '',
     password: '',
     confirmPassword: ''
-  }),
+  },
   showErrors: false,
   hasError: false,
   error: null,
@@ -44,57 +43,91 @@ const initialState = Map({
   installRequest: null,
   installRequestError: null,
   alreadyInstalled: false
-});
+};
 
 export default function install (state = initialState, action) {
   switch (action.type) {
   case actions.NEXT_STEP:
-    return state
-      .set('step', state.get('step') + 1);
+    return {
+      ...state,
+      step: state.step + 1,
+    };
   case actions.PREVIOUS_STEP:
-    return state
-      .set('step', state.get('step') - 1);
+    return {
+      ...state,
+      step: state.step - 1,
+    };
   case actions.GO_TO_STEP:
-    return state
-      .set('step', action.step);
+    return {
+      ...state,
+      step: action.step,
+    };
   case actions.UPDATE_PERMITTED_DOMAINS_SETTINGS:
-    return state
-      .setIn(['data', 'settings', 'domains', 'whitelist'], action.value);
+    return update(state, {
+      data: {
+        settings: {
+          domains: {
+            whitelist: {$set: action.value},
+          },
+        },
+      },
+    });
   case actions.UPDATE_FORMDATA_SETTINGS:
-    return state
-      .setIn(['data', 'settings', action.name], action.value);
+    return update(state, {
+      data: {
+        settings: {
+          [action.name]: {$set: action.value},
+        },
+      },
+    });
   case actions.UPDATE_FORMDATA_USER:
-    return state
-      .setIn(['data', 'user', action.name], action.value);
+    return update(state, {
+      data: {
+        user: {
+          [action.name]: {$set: action.value},
+        },
+      },
+    });
   case actions.HAS_ERROR:
-    return state
-      .merge({
-        hasError: true,
-        showErrors: true
-      });
+    return {
+      ...state,
+      hasError: true,
+      showErrors: true,
+    };
   case actions.ADD_ERROR:
-    return state
-      .setIn(['errors', action.name], action.error);
+    return update(state, {
+      errors: {
+        [action.name]: {$set: action.error},
+      },
+    });
   case actions.CLEAR_ERRORS:
-    return state
-      .set('errors', Map());
+    return {
+      ...state,
+      errors: {},
+    };
   case actions.INSTALL_REQUEST:
-    return state
-      .set('isLoading', true);
+    return {
+      ...state,
+      isLoading: true,
+    };
   case actions.INSTALL_SUCCESS:
-    return state
-      .set('isLoading', false)
-      .set('installRequest', 'SUCCESS');
+    return {
+      ...state,
+      isLoading: false,
+      installRequest: 'SUCCESS',
+    };
   case actions.INSTALL_FAILURE:
-    return state
-      .merge({
-        isLoading: false,
-        installRequest: 'FAILURE',
-        installRequestError: action.error
-      });
+    return {
+      ...state,
+      isLoading: false,
+      installRequest: 'FAILURE',
+      installRequestError: action.error
+    };
   case actions.CHECK_INSTALL_SUCCESS:
-    return state
-      .set('alreadyInstalled', action.installed);
+    return {
+      ...state,
+      alreadyInstalled: action.installed,
+    };
   default :
     return state;
   }

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

@@ -1,37 +1,57 @@
-import {fromJS} from 'immutable';
 import * as actions from '../constants/moderation';
 
-const initialState = fromJS({
+const initialState = {
   singleView: false,
   modalOpen: false,
   storySearchVisible: false,
   storySearchString: '',
-  shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show',
-  sortOrder: 'REVERSE_CHRONOLOGICAL',
-});
+  shortcutsNoteVisible: 'show',
+  sortOrder: 'DESC',
+};
 
 export default function moderation (state = initialState, action) {
   switch (action.type) {
   case actions.MODERATION_CLEAR_STATE:
-    return initialState;
+    return {
+      ...initialState,
+      shortcutsNoteVisible: state.shortcutsNoteVisible,
+    };
   case actions.TOGGLE_MODAL:
-    return state
-      .set('modalOpen', action.open);
+    return {
+      ...state,
+      modalOpen: action.open,
+    };
   case actions.SINGLE_VIEW:
-    return state
-      .set('singleView', !state.get('singleView'));
+    return {
+      ...state,
+      singleView: !state.singleView,
+    };
   case actions.HIDE_SHORTCUTS_NOTE:
-    return state
-      .set('shortcutsNoteVisible', 'hide');
+    return {
+      ...state,
+      shortcutsNoteVisible: 'hide',
+    };
   case actions.SHOW_STORY_SEARCH:
-    return state.set('storySearchVisible', true);
+    return {
+      ...state,
+      storySearchVisible: true,
+    };
   case actions.HIDE_STORY_SEARCH:
-    return state.set('storySearchVisible', false);
+    return {
+      ...state,
+      storySearchVisible: false,
+    };
   case actions.STORY_SEARCH_CHANGE_VALUE:
-    return state.set('storySearchString', action.value);
+    return {
+      ...state,
+      storySearchString: action.value,
+    };
   case actions.SET_SORT_ORDER:
-    return state.set('sortOrder', action.order);
-  default :
+    return {
+      ...state,
+      sortOrder: action.order,
+    };
+  default:
     return state;
   }
 }

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

@@ -1,5 +1,5 @@
-import {Map, List} from 'immutable';
 import * as actions from '../actions/settings';
+import update from 'immutability-helper';
 
 // this is initialized here because
 // currently you have to reload the dashboard to get new stats
@@ -10,63 +10,82 @@ const DASHBOARD_WINDOW_MINUTES = 5;
 let then = new Date();
 then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
 
-const initialState = Map({
-  wordlist: Map({
-    banned: List(),
-    suspect: List()
-  }),
+const initialState = {
+  wordlist: {
+    banned: [],
+    suspect: []
+  },
   dashboardWindowStart: then.toISOString(),
   dashboardWindowEnd: new Date().toISOString(),
-  domains: Map({
-    whitelist: List()
-  }),
+  domains: {
+    whitelist: []
+  },
   saveSettingsError: null,
   fetchSettingsError: null,
   fetchingSettings: false
-});
+};
 
 export default function settings (state = initialState, action) {
   switch (action.type) {
   case actions.SETTINGS_LOADING:
-    return state
-      .set('fetchingSettings', true)
-      .set('fetchSettingsError', null);
+    return {
+      ...state,
+      fetchingSettings: true,
+      fetchSettingsError: null,
+    };
   case actions.SETTINGS_RECEIVED:
-    return state.merge({
+    return {
+      ...state,
       fetchingSettings: false,
       fetchSettingsError: null,
       ...action.settings
-    });
+    };
   case actions.SETTINGS_FETCH_ERROR:
-    return state
-      .set('fetchingSettings', false)
-      .set('fetchSettingsError', action.error);
+    return {
+      ...state,
+      fetchingSettings: false,
+      fetchSettingsError: action.error,
+    };
   case actions.SETTINGS_UPDATED:
-    return state.merge({
+    return {
+      ...state,
       fetchingSettings: false,
       fetchSettingsError: null,
       ...action.settings
-    });
+    };
   case actions.SAVE_SETTINGS_LOADING:
-    return state
-      .set('fetchingSettings', true)
-      .set('saveSettingsError', null);
+    return {
+      ...state,
+      fetchingSettings: true,
+      saveSettingsError: null,
+    };
   case actions.SAVE_SETTINGS_SUCCESS:
-    return state.merge({
+    return {
+      ...state,
       fetchingSettings: false,
       fetchSettingsError: null,
       ...action.settings
-    });
+    };
   case actions.SAVE_SETTINGS_FAILED:
-    return state
-      .set('fetchingSettings', false)
-      .set('fetchSettingsError', action.error);
+    return {
+      ...state,
+      fetchingSettings: false,
+      fetchSettingsError: action.error,
+    };
   case actions.WORDLIST_UPDATED:
-    return state
-      .setIn(['wordlist', action.listName], action.list);
+    return update(state, {
+      wordlist: {
+        [action.listName]: {
+          $set: action.list
+        }
+      }
+    });
   case actions.DOMAINLIST_UPDATED:
-    return state
-      .setIn(['domains', action.listName], action.list);
+    return update(state, {
+      domains: {
+        [action.listName]: {$set: action.list},
+      }
+    });
   default:
     return state;
   }

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.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import styles from './Community.css';
-import {Button} from 'coral-ui';
-import {menuActionsMap} from '../../../utils/moderationQueueActionsMap';
-
-import t from 'coral-framework/services/i18n';
-
-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.css

@@ -1,299 +0,0 @@
-@custom-media --big-viewport (min-width: 780px);
-
-.container {
-  padding: 10px;
-  display: flex;
-  padding-bottom: 200px;
-}
-
-.leftColumn {
-  padding: 42px 56px;
-  width: 234px;
-}
-
-.mainContent {
-  width: calc(100% - 300px);
-  padding: 34px 14px;
-  box-sizing: border-box;
-}
-
-.mainFlaggedContent {
-  width: 100%;
-  padding: 34px 14px;
-  box-sizing: border-box;
-}
-
-.roleButton {
-  display: block;
-}
-
-.searchBox {
-  width: 100%;
-  padding: 9px;
-  border: 1px solid #ccc;
-  border-radius: 2px;
-  display: flex;
-  background: white;
-  box-sizing: border-box;
-  height: 40px;
-
-  i {
-    color: #A1A1A1
-  }
-
-  input {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border: none;
-    font-size: 16px;
-    padding: 0 2px 0 15px;
-    box-sizing: border-box;
-  }
-}
-
-.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: 18px;
-  width: 100%;
-  max-width: 660px;
-  min-width: 400px;
-  margin: 0 auto;
-  position: relative;
-  transition: all 200ms;
-  padding: 10px 0 0;
-  min-height: 220px;
-
-  .container {
-    display: block;
-    padding: 0 14px;
-    min-height: 180px;
-  }
-
-  &: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;
-  }
-
-  .context {
-    a {
-      color: #f36451;
-      text-decoration: underline;
-      float: right;
-    }
-  }
-
-   .sideActions {
-     position: absolute;
-     right: 0;
-     height: 100%;
-     top: 0;
-     padding: 50px 18px;
-     box-sizing: border-box;
-   }
-
-  .itemHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .author {
-      font-size: 16px;
-      font-weight: bold;
-      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;
-  }
-
-  .actionButton {
-    transform: scale(.8);
-    margin: 0;
-  }
-
-  .body {
-    margin-top: 0px;
-    flex: 1;
-    color: black;
-    max-width: 500px;
-    word-wrap: break-word;
-  }
-
-  .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;
-  }
-}
-
-.actionButton {
-  transform: scale(.8);
-  margin: 0;
-}
-
-.flaggedByCount {
-  display: block;
-  text-align: left;
-  margin-top: 5px;
-}
-
-.flaggedByCount i {
-  font-size: 14px;
-  margin-right: 10px;
-}
-
-.flaggedBy {
-  display: inline;
-  padding: 3px;
-  font-size: 14px;
-  margin-left: 5px;
-}
-
-.flaggedByLabel {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.flaggedReasons {
-  margin-left: 24px;
-  margin-top: 10px;
-}
-
-p.flaggedByReason {
-  font-size: 1tpx;
-  margin: 0px;
-  line-height: 1.4;
-}
-
-.button {
-  composes: buttonReset from 'coral-framework/styles/reset.css';
-  vertical-align: text-bottom;
-  &:hover {
-    background-color: #E0E0E0;
-  }
-}

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

@@ -2,8 +2,9 @@ import React, {Component} from 'react';
 
 import CommunityMenu from './CommunityMenu';
 import People from './People';
-import FlaggedAccounts from './FlaggedAccounts';
+import FlaggedAccounts from '../containers/FlaggedAccounts';
 import RejectUsernameDialog from './RejectUsernameDialog';
+import PropTypes from 'prop-types';
 
 export default class Community extends Component {
 
@@ -54,7 +55,7 @@ export default class Community extends Component {
   }
 
   getTabContent(searchValue, props) {
-    const {community, root: {users}, viewUserDetail} = props;
+    const {community} = props;
     const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
 
     if (activeTab === 'people') {
@@ -77,14 +78,8 @@ export default class Community extends Component {
     return (
       <div>
         <FlaggedAccounts
-          commenters={users}
-          showBanUserDialog={props.showBanUserDialog}
-          showSuspendUserDialog={props.showSuspendUserDialog}
-          showRejectUsernameDialog={props.showRejectUsernameDialog}
-          approveUser={props.approveUser}
-          rejectUsername={props.rejectUsername}
-          currentUser={this.props.currentUser}
-          viewUserDetail={viewUserDetail}
+          data={this.props.data}
+          root={this.props.root}
         />
         <RejectUsernameDialog
           open={community.rejectUsernameDialog}
@@ -99,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.css

@@ -0,0 +1,21 @@
+.tab {
+  flex: 1;
+  color: white;
+  text-transform: capitalize;
+  font-weight: 500;
+  font-size: 15px;
+  letter-spacing: 1px;
+  transition: border-bottom 200ms;
+}
+
+.tabBar {
+  background-color: rgba(44, 44, 44, 0.89);
+  z-index: 5;
+}
+
+.active {
+  color: white;
+  box-sizing: border-box;
+  border-bottom: solid 5px #F36451;
+}
+

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

@@ -1,18 +1,21 @@
 import React from 'react';
-
-import styles from './styles.css';
+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.css

@@ -0,0 +1,34 @@
+.container {
+  padding: 10px;
+  display: flex;
+  padding-bottom: 200px;
+}
+
+.mainFlaggedContent {
+  width: 100%;
+  padding: 34px 14px;
+  box-sizing: border-box;
+}
+
+.list {
+  margin: 0;
+  padding: 0;
+}
+
+.userLeave {
+  opacity: 1.0;
+}
+
+.userLeaveActive {
+  opacity: 0;
+  transition: opacity 800ms;
+}
+
+.userEnter {
+  opacity: 0;
+}
+
+.userEnterActive {
+  opacity: 1.0;
+  transition: opacity 800ms;
+}

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

@@ -1,38 +1,73 @@
 import React from 'react';
 
 import t from 'coral-framework/services/i18n';
-import styles from './Community.css';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
-import User from './User';
+import LoadMore from '../../../components/LoadMore';
+import FlaggedUser from '../containers/FlaggedUser';
+import {CSSTransitionGroup} from 'react-transition-group';
+import styles from './FlaggedAccounts.css';
 
-const FlaggedAccounts = (props) => {
-  const {commenters} = props;
-  const hasResults = commenters && !!commenters.length;
+class FlaggedAccounts extends React.Component {
+  render() {
+    const {
+      users,
+      loadMore,
+      showBanUserDialog,
+      showSuspendUserDialog,
+      showRejectUsernameDialog,
+      approveUser,
+      me,
+      viewUserDetail,
+    } = this.props;
 
-  return (
-    <div className={styles.container}>
-      <div className={styles.mainFlaggedContent}>
-        {
-          hasResults
-          ? commenters.map((commenter, index) => {
-            return <User
-              user={commenter}
-              key={index}
-              index={index}
-              modActionButtons={['APPROVE', 'REJECT']}
-              showBanUserDialog={props.showBanUserDialog}
-              showSuspendUserDialog={props.showSuspendUserDialog}
-              showRejectUsernameDialog={props.showRejectUsernameDialog}
-              approveUser={props.approveUser}
-              currentUser={props.currentUser}
-              viewUserDetail={props.viewUserDetail}
-              />;
-          })
-          : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
-        }
+    const hasResults = users.nodes && !!users.nodes.length;
+
+    return (
+      <div className={styles.container}>
+        <div className={styles.mainFlaggedContent}>
+          {
+            hasResults
+              ? <CSSTransitionGroup
+                component={'ul'}
+                className={styles.list}
+                transitionName={{
+                  enter: styles.userEnter,
+                  enterActive: styles.userEnterActive,
+                  leave: styles.userLeave,
+                  leaveActive: styles.userLeaveActive,
+                }}
+                transitionEnter={true}
+                transitionLeave={true}
+                transitionEnterTimeout={1000}
+                transitionLeaveTimeout={1000}
+              >
+                {
+                  users.nodes.map((user) => {
+                    return (
+                      <FlaggedUser
+                        user={user}
+                        key={user.id}
+                        showBanUserDialog={showBanUserDialog}
+                        showSuspendUserDialog={showSuspendUserDialog}
+                        showRejectUsernameDialog={showRejectUsernameDialog}
+                        approveUser={approveUser}
+                        me={me}
+                        viewUserDetail={viewUserDetail}
+                      />
+                    );
+                  })
+                }
+              </CSSTransitionGroup>
+              : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
+          }
+          <LoadMore
+            loadMore={loadMore}
+            showLoadMore={users.hasNextPage}
+          />
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
 export default FlaggedAccounts;

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

@@ -0,0 +1,104 @@
+@custom-media --big-viewport (min-width: 780px);
+
+.root {
+  composes: mdl-shadow--2dp mdl-card from global;
+  border-bottom: 1px solid #e0e0e0;
+  font-size: 18px;
+  width: 100%;
+  max-width: 660px;
+  min-width: 400px;
+  margin: 0 auto;
+  position: relative;
+  transition: box-shadow 200ms, margin-bottom 200ms;
+  padding: 10px 0 0;
+  min-height: 220px;
+
+  &:hover {
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  }
+}
+
+.rootSelected {
+  composes: mdl-shadow--16dp from global;
+}
+
+.container {
+  display: block;
+  padding: 0 14px;
+  min-height: 180px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.author {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.body {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flaggedByCount {
+  display: block;
+  text-align: left;
+  margin-top: 5px;
+}
+
+.flagIcon {
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+.flaggedBy {
+  display: inline;
+  padding: 3px;
+  font-size: 14px;
+  margin-left: 5px;
+}
+
+.flaggedByLabel {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.flaggedReasons {
+  margin-left: 24px;
+  margin-top: 10px;
+}
+
+.flaggedByReason {
+  font-size: 1tpx;
+  margin: 0px;
+  line-height: 1.4;
+}
+
+
+@media (--big-viewport) {
+  .root {
+    border: 1px solid #e0e0e0;
+    margin-bottom: 30px;
+
+    &:last-child {
+      border-bottom: 1px solid #e0e0e0;
+    }
+  }
+
+  &.rootSelected {
+    border: 2px solid #333;
+  }
+}
+
+.button {
+  composes: buttonReset from 'coral-framework/styles/reset.css';
+  vertical-align: text-bottom;
+  &:hover {
+    background-color: #E0E0E0;
+  }
+}

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

@@ -0,0 +1,144 @@
+import React from 'react';
+import styles from './FlaggedUser.css';
+
+// 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';
+
+// TODO: Should work with custom flags too.
+const shortReasons = {
+  [username.other]: t('community.other'),
+  [username.spam]: t('community.spam_ads'),
+  [username.offensive]: t('community.offensive'),
+  [username.nolike]: t('community.dont_like_username'),
+  [username.impersonating]: t('community.impersonating'),
+};
+
+// Render a single user for the list
+class User extends React.Component {
+
+  showSuspenUserDialog = () => this.props.showSuspendUserDialog({
+    userId: this.props.user.id,
+    username: this.props.user.username,
+  });
+
+  showBanUserDialog = () => this.props.showBanUserDialog({
+    userId: this.props.user.id,
+    username: this.props.user.username,
+  });
+
+  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,
+      viewUserDetail,
+      selected,
+      me,
+      className,
+    } = this.props;
+
+    return (
+      <li
+        tabIndex={0}
+        className={cn(className, styles.root, {[styles.rootSelected]: selected})}
+      >
+        <div className={styles.container}>
+          <div className={styles.header}>
+            <div className={styles.author}>
+              <button
+                onClick={this.viewAuthorDetail}
+                className={styles.button}>
+                {user.username}
+              </button>
+              {me.id !== user.id &&
+                <ActionsMenu icon="not_interested">
+                  <ActionsMenuItem
+                    disabled={user.status === 'BANNED'}
+                    onClick={this.showSuspenUserDialog}>
+                    Suspend User
+                  </ActionsMenuItem>
+                  <ActionsMenuItem
+                    disabled={user.status === 'BANNED'}
+                    onClick={this.showBanUserDialog}>
+                    Ban User
+                  </ActionsMenuItem>
+                </ActionsMenu>
+              }
+            </div>
+          </div>
+
+          <div className={styles.body}>
+            <div className={styles.flagged}>
+              <div className={styles.flaggedByCount}>
+                <i className={cn('material-icons', styles.flagIcon)}>flag</i>
+                <span className={styles.flaggedByLabel}>
+                  {t('community.flags')}({ user.actions.length })
+                </span>:
+                { user.action_summaries.map(
+                  (action, i) => {
+                    return <span className={styles.flaggedBy} key={i}>
+                      {shortReasons[action.reason]} ({action.count})
+                    </span>;
+                  }
+                )}
+              </div>
+              <div className={styles.flaggedReasons}>
+                { user.action_summaries.map(
+                  (action_sum, i) => {
+                    return <div key={i}>
+                      <span className={styles.flaggedByLabel}>
+                        {shortReasons[action_sum.reason]} ({action_sum.count})
+                      </span>
+                      {user.actions.map(
+
+                        // find the action by action_sum.reason
+                        (action, j) => {
+                          if (action.reason === action_sum.reason) {
+                            return <p className={styles.flaggedByReason} key={j}>
+                              {action.user &&
+                                <button onClick={() => {viewUserDetail(action.user.id);}} className={styles.button}>
+                                  {action.user.username}
+                                </button>
+                              }
+                              : {action.message ? action.message : 'n/a'}
+                            </p>;
+                          }
+                          return null;
+                        }
+                      )}
+                    </div>;
+                  }
+                )}
+
+              </div>
+            </div>
+            <div className={styles.sideActions}>
+              <div className={styles.actions}>
+                <ApproveButton
+                  onClick={this.approveUser}
+                />
+                <RejectButton
+                  onClick={this.showRejectUsernameDialog}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    );
+  }
+}
+
+export default User;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './Community.css';
+import styles from './styles.css';
 import Table from '../containers/Table';
 import {Pager, Icon} from 'coral-ui';
 import EmptyCard from '../../../components/EmptyCard';
@@ -45,12 +45,12 @@ const People = ({commenters, searchValue, onSearchChange, ...props}) => {
       <div className={styles.mainContent}>
         {
           hasResults
-          ? <Table
+            ? <Table
               headers={tableHeaders}
               commenters={commenters}
               onHeaderClickHandler={props.onHeaderClickHandler}
             />
-          : <EmptyCard>{t('community.no_results')}</EmptyCard>
+            : <EmptyCard>{t('community.no_results')}</EmptyCard>
         }
         <Pager
           totalPages={props.totalPages}