Update CircleCI node version

.dockerignore

@@ -1,12 +1,11 @@
 # excluded because we'll likely need to rebuild this.
 node_modules
 
-# most scripts are used during development and testing, not
+# scripts are used during development and testing, not
 # production.
 scripts
-!scripts/generateIntrospectionResult.js
 
-# documentation should not be visible in production.
+# documentation should not be visable in production.
 docs
 
 # static assets are rebuild in the docker container.
@@ -14,7 +13,6 @@ dist
 
 # tests are not run in the docker container.
 test
-__tests__
 
 # we won't use the .git folder in production.
 .git

.eslintignore

@@ -1,23 +1,17 @@
 dist
 docs
+client/lib
 **/*.html
 plugins/*
-!plugins/talk-plugin-facebook-auth
-!plugins/talk-plugin-auth
-!plugins/talk-plugin-respect
-!plugins/talk-plugin-offtopic
-!plugins/talk-plugin-like
-!plugins/talk-plugin-mod
-!plugins/talk-plugin-love
-!plugins/talk-plugin-viewing-options
-!plugins/talk-plugin-comment-content
+!plugins/coral-plugin-facebook-auth
+!plugins/coral-plugin-auth
+!plugins/coral-plugin-respect
+!plugins/coral-plugin-offtopic
+!plugins/coral-plugin-like
+!plugins/coral-plugin-mod
+!plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
+!plugins/coral-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-featured
 node_modules

.gitignore

@@ -5,35 +5,27 @@ dist
 npm-debug.log*
 dump.rdb
 
-client/coral-framework/graphql/introspection.json
-
 .env
 *.cfg
 
 .idea/
 *.swp
-*.DS_STORE
 
+test/e2e/reports
 coverage/
 
 plugins.json
 plugins/*
-!plugins/talk-plugin-facebook-auth
-!plugins/talk-plugin-auth
-!plugins/talk-plugin-respect
-!plugins/talk-plugin-offtopic
-!plugins/talk-plugin-like
-!plugins/talk-plugin-mod
-!plugins/talk-plugin-love
-!plugins/talk-plugin-viewing-options
-!plugins/talk-plugin-comment-content
+!plugins/coral-plugin-facebook-auth
+!plugins/coral-plugin-auth
+!plugins/coral-plugin-respect
+!plugins/coral-plugin-offtopic
+!plugins/coral-plugin-like
+!plugins/coral-plugin-mod
+!plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
+!plugins/coral-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-featured
 
 **/node_modules/*

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](https://coralproject.net/code-of-conduct.html).
 
 ## What should I Contribute?
 
@@ -35,7 +32,7 @@ Please file issues if:
 
 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:
 
-> As a [type of person] I'd like to be able to [do something] so that I can [get some result].
+`As a [type of person] I'd like to be able to [do something] so that I can [get some result].`
 
 This exercise does two things:
 
@@ -56,7 +53,7 @@ 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).
+Information about how to update docs can be found in our [FAQ](faq.html#how-do-i-contribute-to-these-docs).
 
 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.
 
@@ -64,7 +61,7 @@ If you'd like to discuss a contribution, please [file an issue](https://github.c
 
 Talk's tranlations 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.html) the translations to us. We can import it into the repo.  
 
 ## I want to contribute but I'm not sure what to do!
 
@@ -76,7 +73,7 @@ Please visit our product roadmap here: https://www.pivotaltracker.com/n/projects
 
 ### Discussion Forum
 
-If you'd like to discuss what we're up to, please visit or [community](https://community.coralproject.net/) or [contact us](https://coralproject.net/contact).
+If you'd like to discuss what we're up to, please visit or [community](https://community.coralproject.net/) or [contact us](https://coralproject.net/contact.html).
 
 ### Integrations
 
@@ -85,3 +82,5 @@ 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.
+
+## Thanks!

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:8-alpine
+FROM node:7.10.1
 
 # Create app directory
 RUN mkdir -p /usr/src/app
@@ -12,14 +12,15 @@ 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 && \
     cli plugins reconcile && \
     yarn build && \
+    yarn install --production && \
     yarn cache clean
 
+# Ensure the runtime of the container is in production mode.
+ENV NODE_ENV production
+
 CMD ["yarn", "start"]

Dockerfile.onbuild

@@ -7,5 +7,8 @@ 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 cli plugins reconcile && \
-            yarn build
+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

INSTALL.md

@@ -0,0 +1,275 @@
+## Contents
+
+- [Installation](#installation) - install the application on a machine
+	- [Via Docker](#installation-from-docker)
+	- [Via Source](#installation-from-source)
+- [Setup](#setup) - setup the application for first use
+- [Usage](#usage) - connect the application to a website
+
+# Installation
+
+## Requirements
+
+- Any flavour of Linux, OSX or Windows
+- 1GB memory (minimum)
+- 5GB storage (minimum)
+- [MongoDB](https://www.mongodb.com/) v3.4 or later
+- [Redis](https://redis.io/) v3.2 or later
+- SSL Certificate
+  - This application assumes that you will be serving this application in a
+    production environment, and therefore requires that you serve it behind a
+    webserver with a valid SSL certificate. This is chosen in order to secure
+    user's sessions.
+
+## Installation From Docker
+
+We currently support packaging the Talk application via Docker, which automates
+the dependency install and asset build process. This is the recommended way to
+deploy the application when used in production.
+
+Available as [coralproject/talk](https://hub.docker.com/r/coralproject/talk/) on Docker Hub.
+
+Images are tagged using the following notation:
+
+- `x` (where `x` is the major version number): any minor or patch updates will be included in this. If you're ok getting
+  new features occasionally and all the bug fixes, this is the tag for you.
+- `x.y` (where `y` is the minor version number): any patch updates will be
+  included with this tag. If you like getting fixes and having features change
+  only when you want, this is the tag for you. **(recommended)**
+- `x.y.z` (where `z` is the patch version): this tag never gets updated, and
+  essentially freezes your version, this should only be used when you are either
+  extending Talk or are sure of a specific version you want to freeze.
+
+We provide tags with `*-onbuild` that can be used for easy plugin integration and
+acts as a customization endpoint. Instructions are provided in the `PLUGINS.md`
+document as to how to use it.
+
+### Requirements
+
+There are some runtime requirements for running Talk for Docker:
+
+- [Docker](https://www.docker.com/) v1.13.0 or later
+- [Docker Compose](https://docs.docker.com/compose/) v1.10.0 or later
+
+_Please be sure to check the versions of these requirements. Incorrect versions
+of these may lead to unexpected errors!_
+
+### Installing
+
+An example docker-compose.yml:
+
+```yaml
+version: '2'
+services:
+  talk:
+    image: coralproject/talk:1.5
+    restart: always
+    ports:
+      - "5000:5000"
+    depends_on:
+      - mongo
+      - redis
+    environment:
+      - TALK_MONGO_URL=mongodb://mongo/talk
+      - TALK_REDIS_URL=redis://redis
+  mongo:
+    image: mongo:3.2
+    restart: always
+    volumes:
+      - mongo:/data/db
+  redis:
+    image: redis:3.2
+    restart: always
+    volumes:
+      - redis:/data
+volumes:
+  mongo:
+    external: false
+  redis:
+    external: false
+```
+
+At this stage, you should refer to the `README.md` for configuration variables
+that are specific to your installation. Some pre-defined fields have been filled
+in the above example which are consistent with Docker Compose naming conventions
+for [Docker Links](https://docs.docker.com/compose/networking/#links).
+
+### Scaling
+
+If you are interested in splitting apart services, you can simply adjust the
+command being executed in the container to optimize for your use case. An
+example would be if you wanted to run the API server and the job processor
+on different machines. You can achieve this easily with docker compose:
+
+```yaml
+version: '2'
+services:
+  talk-api:
+    image: coralproject/talk:1.5
+    command: cli serve
+    restart: always
+    ports:
+      - "5000:5000"
+    depends_on:
+      - mongo
+      - redis
+    environment:
+      - TALK_MONGO_URL=mongodb://mongo/talk
+      - TALK_REDIS_URL=redis://redis
+  talk-jobs:
+    image: coralproject/talk:1.5
+    command: cli jobs process
+    restart: always
+    ports:
+      - "5001:5000"
+    depends_on:
+      - mongo
+      - redis
+    environment:
+      - TALK_MONGO_URL=mongodb://mongo/talk
+      - TALK_REDIS_URL=redis://redis
+  mongo:
+    image: mongo:3.2
+    restart: always
+    volumes:
+      - mongo:/data/db
+  redis:
+    image: redis:3.2
+    restart: always
+    volumes:
+      - redis:/data
+volumes:
+  mongo:
+    external: false
+  redis:
+    external: false
+```
+
+Note that the only difference is in the `command` key. From this, you are able
+to discretely control which modules are running in order to have the maximum
+flexibility when managing your application.
+
+### Running
+
+If you're using docker compose:
+
+```bash
+# Start the services using compose
+docker-compose up -d
+```
+
+If you're using plain docker:
+
+```bash
+docker run -d -P coralproject/talk:latest
+```
+
+## Installation From Source
+
+This provides information on how to setup the application from source. Note that
+this is not recommended for production deploys, but will work for development
+and testing purposes.
+
+### Requirements
+
+There are some runtime requirements for running Talk from source:
+
+- [Node](https://nodejs.org/) ~7.8
+- [Yarn](https://yarnpkg.com/) ^0.22.0
+
+_Please be sure to check the versions of these requirements. Incorrect versions
+of these may lead to unexpected errors!_
+
+### Installing
+
+#### Download
+
+It is highly recommended that you download a released version as the code
+available in `master` may not be stable. You can download the latest release
+from the [releases page](https://github.com/coralproject/talk/releases).
+
+You can also clone the git repository via:
+
+```bash
+git clone https://github.com/coralproject/talk.git
+```
+
+#### Building
+
+We now have to install the dependencies and build the static assets.
+
+```bash
+# Install package dependancies
+yarn
+
+# Build static files
+yarn build
+```
+
+After you create/modify the `plugins.json` (refer to `PLUGINS.md` for plugin
+docs) file, you can re-run the following to install their dependencies:
+
+```bash
+# Reconcile plugins
+./bin/cli plugins reconcile
+
+# Build static files
+yarn build
+```
+
+### Running
+
+Refer to the `README.md` file for required configuration variables to add to the
+environment.
+
+You can start the server after configuring the server using the command:
+
+```bash
+yarn start
+```
+
+This will setup the server to serve everything on a single node.js process and
+is designed to be used in production.
+
+You can see other scripts we've made available by consulting the `package.json`
+file under the `scripts` key including:
+
+- `yarn test` run unit tests
+- `yarn e2e` run end to end tests
+- `yarn build-watch` watch for changes to client files and build static assets
+- `yarn dev-start` watch for changes to server files and reload the server while
+  also sourcing a `.env` file in your local directory for configuration
+
+# Setup
+
+Once you've installed Talk (either via Docker or source), you still need to
+setup the application. If you are unfamiliar with any terminology used in the
+setup process, refer to the `TERMINOLOGY.md` document.
+
+## Via Web
+
+If you want to perform your setup via the web, you can navigate to your
+installation of Talk at the path `/admin/install`. There you will be asked a
+series of questions for your installation.
+
+## Via CLI
+
+If you want to perform your setup through the terminal, you can simply run:
+
+```bash
+cli setup
+```
+
+And follow the instructions to perform initial setup and create your first user
+account.
+
+
+# Usage
+
+After setup is complete, you can then refer to the `/admin/configure` path to
+get the embed code that you can copy/paste onto your blog or website in order to
+start using Talk.
+
+_In order for the embed to work correctly, you will need to whitelist the domain
+that is allowed to embed your site on the `/admin/configure` page, failure to do
+so will result in the comment stream not loading._

PLUGINS.md

@@ -0,0 +1,3 @@
+# Talk Plugins
+
+Our documentation for Talk has moved! Utilize [this hyperlink](https://coralproject.github.io/talk/plugins.html) via click or tap to navigate your browser to the new location!

README.md

@@ -5,21 +5,105 @@ Online comments are broken. Our open-source Talk tool rethinks how moderation, c
 Third party licenses are available via the `/client/3rdpartylicenses.txt`
 endpoint when the server is running with built assets.
 
-## Important Links
+## Contributing to Talk
 
-- Developer Documentation & Setup Guides: https://coralproject.github.io/talk/
+See our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md).
 
-- Pivotal Tracker Backlog & Release Schedule: https://www.pivotaltracker.com/n/projects/1863625
+## Documentation
 
-## Learn More about Coral
+### General
 
-- Community Forums: https://community.coralproject.net/
+See our [Talk Documentation & Guides](https://coralproject.github.io/talk/index.html).
 
-- Website: https://coralproject.net
+### Plugins
 
-- Blog: https://blog.coralproject.net
+See our guide to using and building [Talk Plugins](https://github.com/coralproject/talk/blob/master/PLUGINS.md).
 
-- Community Guides for Journalism: https://guides.coralproject.net/ 
+### Recipes
+
+Recipes are plugin templates provided by the Coral Core team. Developers can use these recipes to build their own plugins. You can find all the Talk recipes here: https://github.com/coralproject/talk-recipes/
+
+## Usage
+
+### Installation
+
+To set up a development environment or build from source, see [INSTALL.md](https://github.com/coralproject/talk/blob/master/INSTALL.md).
+
+To launch a Talk server of your own from your browser without any need to muck about in a terminal or think about engineering concepts, stay tuned. We will launch [our installer](https://github.com/coralproject/talk-install) shortly!
+
+### Configuration
+
+The Talk application looks for the following configuration values either as environment variables:
+
+- `TALK_MONGO_URL` (*required*) - the database connection string for the MongoDB database.
+- `TALK_REDIS_URL` (*required*) - the database connection string for the Redis database.
+- `TALK_ROOT_URL` (*required*) - root url of the installed application externally
+available in the format: `<scheme>://<host>` without the path.
+- `TALK_JWT_SECRET` (*required*) - a long and cryptographical secure random string which will be used to
+sign and verify tokens via a `HS256` algorithm.
+- `TALK_JWT_EXPIRY` (_optional_) - the expiry duration (`exp`) for the tokens issued for logged in sessions (Default `1 day`)
+- `TALK_JWT_ISSUER` (_optional_) - the issuer (`iss`) claim for login JWT tokens (Default `process.env.TALK_ROOT_URL`)
+- `TALK_JWT_AUDIENCE` (_optional_) - the audience (`aud`) claim for login JWT tokens (Default `talk`)
+- `TALK_SMTP_EMAIL` (*required for email*) - the address to send emails from using the
+  SMTP provider.
+- `TALK_SMTP_USERNAME` (*required for email*) - username of the SMTP provider you are using.
+- `TALK_SMTP_PASSWORD` (*required for email*) - password for the SMTP provider you are using.
+- `TALK_SMTP_HOST` (*required for email*) - SMTP host url with format `smtp.domain.com`.
+- `TALK_SMTP_PORT` (*required for email*) - SMTP port.
+- `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - Defaults to `FALSE`. When `TRUE`, disables the dynamic setup endpoint.
+- `TALK_RECAPTCHA_SECRET` (*required for reCAPTCHA support*) - server secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
+- `TALK_RECAPTCHA_PUBLIC` (*required for reCAPTCHA support*) - client secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
+- `TALK_PLUGINS_JSON` (_optional_) - used to specify the plugin config via the environment
+- `TALK_KEEP_ALIVE` (_optional_) - The keepalive timeout that should be used to send keep alive messages through the websocket to keep the socket alive. (Default `30s`)
+
+Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
+alternative methods of loading configuration during development.
+
+### Running Migrations
+
+We have a migration tool that can be run using `bin/cli migration run`. This will detect new migrations available and prompt you to backup your database before proceeding with the migration. Migrations are required with major version releases.
+
+### Using Trust
+
+Talk ships with core components we call "Trust". This allows Talk to automate certain actions based on previous user behavior.
+
+Our first feature is the notion of Karma. Talk will automatically pre-moderate comments of users who have a negative karma score. You can [see more how karma works here](/services/karma.js).
+
+## Supported Browsers
+
+### Web
+
+- Chrome: latest 2 versions
+- Firefox: latest 2 versions, and most recent extended support version, if any
+- Safari: latest 2 versions
+- Internet Explorer: IE Edge, 11
+
+### iOS Devices
+
+- iPad
+- iPad Pro
+- iPhone 7 Plus
+- iPhone 7
+- iPhone 6 Plus
+- iPhone 6
+- iPhone 5
+
+### iOS Browsers
+
+- Chrome for iOS: latest version
+- Firefox for iOS: latest version
+- Safari for iOS: latest version
+
+### Android Devices
+
+- Galaxy S5
+- Nexus 5X
+- Nexus 6P
+
+### Android Browsers
+
+- Chrome for Android: latest version
+- Firefox for Android: latest version
 
 ## License
 

TERMINOLOGY.md

@@ -0,0 +1,73 @@
+# Product's Terminology
+
+This is a guide to have a common language to talk about "Talk".
+
+## Definitions
+
+* Site - a top level site, aka nytimes.com
+* Section - the section of a site, aka, Politics.
+* Subsection - the section of a site, aka, Politics.
+* Asset - An article/video/etc identified by URL.
+
+* Embed - Things we put on a asset: comment box, ToS, Stream, etc…
+* Stream - All the activity on a certain asset. Container for Comments, actions, user
+* Thread - defined by a parent and everything below. All replies to a comment and their replies, etc…
+* Comment - a kind of user-generated content submitted by a comment author
+  * A parent comment has replies to it
+  * A child comments is a reply to another comment
+  * A comment can be both a parent comment and a child of another comment
+  * A top-level comment is a comment that is not a reply to any other comment
+  * A nth-level comment refers to the number of replies away from the top-level comment
+
+* User - an item to represent a person using Talk. It could be a moderator, reader, etc.
+* User Roles:
+  * Active: some who takes action (logged in or not)
+  * Passive: some who just reads, no actions performed
+  * Comment Author: The user who wrote the comment
+  * Staff Member: someone who works for an organization (tagged for leverage in trust)
+  * Moderator: someone with the ability to access the moderation queue and perform moderation actions
+  * Administrator: has the ability to change the setup of their coral space
+* Public Profile: information about users shown in public
+* Private Profile: information about users shown only to user about themselves
+* Protected Profile: information about users that only moderators and admins can see
+
+* Queue - Group of items based on a query, aka - moderation queue
+* Target - The item/s on which an action is performed
+
+##  Actions
+
+Actions are performed by users on items. Actions themselves are items. This requires two relationships: action on item, and user performs action.
+
+### Flag
+* A Flagger(user) performs a Flag
+* A Flag is performed on a Comment or a username or profile content
+
+
+## Moderation Actions and Status
+
+Comments contain a field `status`. As moderation actions are peformed, the status changes.
+
+* Initial status is empty.
+* When a moderator Approves, the status is set to 'approved'.
+* When a moderator Rejects, the status is set to 'reject'.
+
+### Pre and post moderation
+
+Comments can be set to be premoderated or postmoderated. 
+
+Premoderation means that moderation has to occur _before_ a comment is shown on the site:
+
+* New comments are shown in the moderator queues immediately. 
+* The are not shown to users until (aka in streams) until they are approved by a moderator.
+
+Postmoderation means that comments appear on the site _before_ any moderation action is taken.
+
+* New comments appear in comment streams immediately.
+* New comments do not appear in moderation queues unless they are flagged by other users.
+
+### Word lists
+
+* Banned words - words that the site never allows in a comment
+* Suspect words - words whose usage needs to be approved by a moderator before being shown in the stream
+* Approved words - words that are usually Banned or Suspect sitewide, but approved for use in a specific article stream
+

app.js

@@ -3,42 +3,69 @@ const bodyParser = require('body-parser');
 const morgan = require('morgan');
 const path = require('path');
 const helmet = require('helmet');
+const authentication = require('./middleware/authentication');
+const {passport} = require('./services/passport');
+const plugins = require('./services/plugins');
+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 {BASE_URL, BASE_PATH, MOUNT_PATH} = require('./url');
-const routes = require('./routes');
-const debug = require('debug')('talk:app');
 
 const app = express();
 
-//==============================================================================
-// APPLICATION WIDE MIDDLEWARE
-//==============================================================================
+// Middleware declarations.
 
 // Add the logging middleware only if we aren't testing.
-if (process.env.NODE_ENV !== 'test') {
+if (app.get('env') !== 'test') {
   app.use(morgan('dev'));
 }
 
-// Trust the first proxy in front of us, this will enable us to trust the fact
-// that SSL was terminated correctly.
+//==============================================================================
+// APP MIDDLEWARE
+//==============================================================================
+
 app.set('trust proxy', 1);
 
-// Enable a suite of security good practices through helmet. We disable
-// frameguard to allow crossdomain injection of the embed.
+// We disable frameward on helmet to allow crossdomain injection of the embed
 app.use(helmet({
-  frameguard: false,
+  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
 //==============================================================================
@@ -46,19 +73,105 @@ app.use(bodyParser.json());
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
+//==============================================================================
+// 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);
+
+//==============================================================================
+// 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
 //==============================================================================
 
-// Apply the BASE_PATH, BASE_URL, and MOUNT_PATH on the app.locals, which will
-// make them available on the templates and the routers.
-app.locals.BASE_URL = BASE_URL;
-app.locals.BASE_PATH = BASE_PATH;
-app.locals.MOUNT_PATH = MOUNT_PATH;
+app.use('/', require('./routes'));
 
-debug(`mounting routes on the ${MOUNT_PATH} path`);
+//==============================================================================
+// ERROR HANDLING
+//==============================================================================
 
-// Actually apply the routes.
-app.use(MOUNT_PATH, routes);
+// 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 : {}
+    });
+  }
+});
 
 module.exports = app;

bin/cli

@@ -16,7 +16,6 @@ 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'

bin/cli-plugins

@@ -274,7 +274,7 @@ async function reconcilePluginDeps({skipLocal, skipRemote, dryRun, upgradeRemote
 }
 
 async function createSeedPlugin() {
-  const pluginsDir = path.resolve(__dirname, '..', 'plugins');
+  const pluginsDir = path.join(__dirname, 'plugins');
 
   function pluginNameExists(pluginName) {
     const pluginNames = fs.readdirSync(pluginsDir);
@@ -321,7 +321,7 @@ async function createSeedPlugin() {
   // Creating plugin seed
   //==============================================================================
 
-  const seedPlugin = path.join(__dirname, 'templates/plugin');
+  const seedPlugin = path.join(__dirname, 'bin/templates/plugin');
   const newPluginPath = path.join(pluginsDir, answers.pluginName);
 
   if (fs.existsSync(seedPlugin)) {
@@ -355,7 +355,7 @@ async function createSeedPlugin() {
 
     // Let's add this to the plugins.json
     if (answers.addPluginsJson) {
-      const pluginsJson = path.resolve(__dirname, '..', 'plugins.json');
+      const pluginsJson = path.join(dir, 'plugins.json');
 
       fs.readJson(pluginsJson)
         .then((j) => {

bin/cli-serve

@@ -12,7 +12,6 @@ const SetupService = require('../services/setup');
 const kue = require('../services/kue');
 const mongoose = require('../services/mongoose');
 const util = require('./util');
-const cache = require('../services/cache');
 const {createSubscriptionManager} = require('../graph/subscriptions');
 const {
   PORT
@@ -81,16 +80,12 @@ function normalizePort(val) {
  * Event listener for HTTP server "listening" event.
  */
 
-async function onListening() {
-
-  // Start the cache instance.
-  await cache.init();
-
+function onListening() {
   let addr = server.address();
   let bind = typeof addr === 'string'
     ? `pipe ${addr}`
     : `port ${addr.port}`;
-  debug(`API Server Listening on ${bind}`);
+  console.log(`API Server Listening on ${bind}`);
 }
 
 /**
@@ -140,21 +135,18 @@ async function startApp(program) {
   /**
   * Listen on provided port, on all network interfaces.
   */
-  server.on('error', onError);
-  server.on('listening', onListening);
-  server.on('listening', () => {
-
-  });
   server.listen(port, () => {
 
     // Mount the websocket server if requested.
     if (program.websockets) {
-      debug(`Websocket Server Listening on ${port}`);
+      console.log(`Websocket Server Listening on ${port}`);
 
       // Mount the subscriptions server on the application server.
       createSubscriptionManager(server);
     }
   });
+  server.on('error', onError);
+  server.on('listening', onListening);
 }
 
 //==============================================================================

bin/cli-setup

@@ -94,7 +94,7 @@ const performSetup = async () => {
       name: 'requireEmailConfirmation',
       default: settings.requireEmailConfirmation,
       message: 'Should emails always be confirmed'
-    },
+    }
   ]);
 
   // Update the settings that were changed.
@@ -104,32 +104,6 @@ const performSetup = async () => {
     }
   });
 
-  answers = await inquirer.prompt([
-    {
-      type: 'confirm',
-      name: 'inputWhitelistedDomains',
-      default: true,
-      message: 'Would you like to specify a whitelisted domain'
-    },
-    {
-      type: 'input',
-      name: 'whitelistedDomain',
-      message: 'Whitelisted Domain',
-      when: ({inputWhitelistedDomains}) => inputWhitelistedDomains,
-      validate: (input) => {
-        if (input && input.length > 0) {
-          return true;
-        }
-
-        return 'Whitelisted Domain cannot be empty.';
-      }
-    }
-  ]);
-
-  if (answers.inputWhitelistedDomains) {
-    settings.domains.whitelist = [answers.whitelistedDomain];
-  }
-
   console.log('\nWe\'ll ask you some questions about your first admin user.\n');
 
   let user = await inquirer.prompt([
@@ -173,11 +147,7 @@ const performSetup = async () => {
       name: 'confirmPassword',
       message: 'Confirm Password',
       type: 'password',
-      filter: (confirmPassword, {password}) => {
-        if (password !== confirmPassword) {
-          return Promise.reject(new Error('Passwords do not match'));
-        }
-
+      filter: (confirmPassword) => {
         return UsersService
           .isValidPassword(confirmPassword)
           .catch((err) => {
@@ -187,6 +157,10 @@ const performSetup = async () => {
     },
   ]);
 
+  if (user.password !== user.confirmPassword) {
+    return Promise.reject(new Error('Passwords do not match'));
+  }
+
   let {user: newUser} = await SetupService.setup({
     settings: settings.toObject(),
     user: {

bin/cli-verify

@@ -1,49 +0,0 @@
-#!/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/templates/plugin/client/translations.yml

@@ -4,11 +4,11 @@
 #
 #  ```
 #   en:
-#    talk-plugin-respect:
+#    coral-plugin-respect:
 #     respect: Respect
 #     respected: Respected
 #   es:
-#    talk-plugin-respect:
+#    coral-plugin-respect:
 #     respect: Respetar
 #     respected: Respetado
 #  ```

bin/verifications/database/comments.js

@@ -1,193 +0,0 @@
-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

@@ -1,12 +0,0 @@
-// 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

@@ -1,6 +1,6 @@
 machine:
   node:
-    version: 8
+    version: 7.10.1
   services:
     - docker
     - redis
@@ -21,8 +21,9 @@ dependencies:
 
     # Install node dependencies.
     - yarn --version
-    - yarn global add node-gyp --force
     - yarn
+  cache_directories:
+    - ~/.cache/yarn
   post:
     # Build the static assets.
     - yarn build
@@ -40,6 +41,8 @@ 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,7 +9,6 @@
     "transform-object-assign",
     "transform-object-rest-spread",
     "transform-async-to-generator",
-    "transform-react-jsx",
-    "syntax-dynamic-import"
+    "transform-react-jsx"
   ]
-}
+}

client/coral-admin/src/AppRouter.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
-import PropTypes from 'prop-types';
+import {Router, Route, IndexRedirect, browserHistory, Redirect} from 'react-router';
 
 import Configure from 'routes/Configure';
 import Dashboard from 'routes/Dashboard';
@@ -15,7 +14,7 @@ const routes = (
   <div>
     <Route exact path="/admin/install" component={Install}/>
     <Route path='/admin' component={Layout}>
-      <IndexRedirect to='/admin/moderate' />
+      <IndexRedirect to='/admin/moderate/all' />
       <Route path='configure' component={Configure} />
       <Route path='stories' component={Stories} />
       <Route path='dashboard' component={Dashboard} />
@@ -35,26 +34,28 @@ const routes = (
       {/* Moderation Routes */}
 
       <Route path='moderate' component={ModerationLayout}>
-        <IndexRoute components={Moderation} />
-
-        <Route path=':tabOrId' components={Moderation} />
-
-        <Route path=':tab' components={Moderation}>
+        <Route path='all' components={Moderation}>
           <Route path=':id' components={Moderation} />
         </Route>
+        <Route path='accepted' components={Moderation}>
+          <Route path=':id' components={Moderation} />
+        </Route>
+        <Route path='premod' components={Moderation}>
+          <Route path=':id' components={Moderation} />
+        </Route>
+        <Route path='rejected' components={Moderation}>
+          <Route path=':id' components={Moderation} />
+        </Route>
+        <Route path='flagged' components={Moderation}>
+          <Route path=':id' components={Moderation} />
+        </Route>
+        <Redirect from=':id' to='all/:id' />
+        <IndexRedirect to='all' />
       </Route>
     </Route>
   </div>
 );
 
-class AppRouter extends React.Component {
-  static contextTypes = {
-    history: PropTypes.object,
-  };
-
-  render() {
-    return <Router history={this.context.history} routes={routes} />;
-  }
-}
+const AppRouter = () => <Router history={browserHistory} routes={routes} />;
 
 export default AppRouter;

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

@@ -8,6 +8,7 @@ import {
   UPDATE_ASSETS
 } from '../constants/assets';
 
+import coralApi from '../../../coral-framework/helpers/request';
 import t from 'coral-framework/services/i18n';
 
 /**
@@ -16,9 +17,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, _, {rest}) => {
+export const fetchAssets = (skip = '', limit = '', search = '', sort = '', filter = '') => (dispatch) => {
   dispatch({type: FETCH_ASSETS_REQUEST});
-  return rest(`/assets?skip=${skip}&limit=${limit}&sort=${sort}&search=${search}&filter=${filter}`)
+  return coralApi(`/assets?skip=${skip}&limit=${limit}&sort=${sort}&search=${search}&filter=${filter}`)
     .then(({result, count}) =>
       dispatch({type: FETCH_ASSETS_SUCCESS,
         assets: result,
@@ -33,9 +34,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, _, {rest}) => {
-  dispatch({type: UPDATE_ASSET_STATE_REQUEST, id, closedAt});
-  return rest(`/assets/${id}/status`, {method: 'PUT', body: {closedAt}})
+export const updateAssetState = (id, closedAt) => (dispatch) => {
+  dispatch({type: UPDATE_ASSET_STATE_REQUEST});
+  return coralApi(`/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,13 +1,16 @@
 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, _, {rest, client, storage}) => {
+export const handleLogin = (email, password, recaptchaResponse) => (dispatch) => {
   dispatch({type: actions.LOGIN_REQUEST});
 
   const params = {
@@ -24,18 +27,18 @@ export const handleLogin = (email, password, recaptchaResponse) => (dispatch, _,
     };
   }
 
-  return rest('/auth/local', params)
+  return coralApi('/auth/local', params)
     .then(({user, token}) => {
 
       if (!user) {
-        if (!bowser.safari && !bowser.ios && storage) {
-          storage.removeItem('token');
+        if (!bowser.safari && !bowser.ios) {
+          Storage.removeItem('token');
         }
         return dispatch(checkLoginFailure('not logged in'));
       }
 
       dispatch(handleAuthToken(token));
-      client.resetWebsocket();
+      resetWebsocket();
       dispatch(checkLoginSuccess(user));
     })
     .catch((error) => {
@@ -81,11 +84,11 @@ const forgotPasswordFailure = (error) => ({
   error,
 });
 
-export const requestPasswordReset = (email) => (dispatch, _, {rest}) => {
+export const requestPasswordReset = (email) => (dispatch) => {
   dispatch(forgotPasswordRequest(email));
   const redirectUri = location.href;
 
-  return rest('/account/password/reset', {method: 'POST', body: {email,  loc: redirectUri}})
+  return coralApi('/account/password/reset', {method: 'POST', body: {email,  loc: redirectUri}})
     .then(() => dispatch(forgotPasswordSuccess()))
     .catch((error) => {
       console.error(error);
@@ -113,18 +116,18 @@ const checkLoginFailure = (error) => ({
   error
 });
 
-export const checkLogin = () => (dispatch, _, {rest, client, storage}) => {
+export const checkLogin = () => (dispatch) => {
   dispatch(checkLoginRequest());
-  return rest('/auth')
+  return coralApi('/auth')
     .then(({user}) => {
       if (!user) {
-        if (!bowser.safari && !bowser.ios && storage) {
-          storage.removeItem('token');
+        if (!bowser.safari && !bowser.ios) {
+          Storage.removeItem('token');
         }
         return dispatch(checkLoginFailure('not logged in'));
       }
 
-      client.resetWebsocket();
+      resetWebsocket();
       dispatch(checkLoginSuccess(user));
     })
     .catch((error) => {
@@ -133,33 +136,3 @@ export const checkLogin = () => (dispatch, _, {rest, client, storage}) => {
       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

@@ -14,12 +14,13 @@ 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, _, {rest}) => {
+export const fetchAccounts = (query = {}) => (dispatch) => {
 
   dispatch(requestFetchAccounts());
-  rest(`/users?${qs.stringify(query)}`)
+  coralApi(`/users?${qs.stringify(query)}`)
     .then(({result, page, count, limit, totalPages}) =>{
       dispatch({
         type: FETCH_COMMENTERS_SUCCESS,
@@ -50,15 +51,15 @@ export const newPage = () => ({
   type: COMMENTERS_NEW_PAGE
 });
 
-export const setRole = (id, role) => (dispatch, _, {rest}) => {
-  return rest(`/users/${id}/role`, {method: 'POST', body: {role}})
+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 setCommenterStatus = (id, status) => (dispatch, _, {rest}) => {
-  return rest(`/users/${id}/status`, {method: 'POST', body: {status}})
+export const setCommenterStatus = (id, status) => (dispatch) => {
+  return coralApi(`/users/${id}/status`, {method: 'POST', body: {status}})
   .then(() => {
     return dispatch({type: SET_COMMENTER_STATUS, id, status});
   });

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

@@ -1,3 +1,4 @@
+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';
@@ -92,23 +93,23 @@ const validation = (formData, dispatch, next) => {
 };
 
 export const submitSettings = () => (dispatch, getState) => {
-  const settingsFormData = getState().install.data.settings;
+  const settingsFormData = getState().install.toJS().data.settings;
   validation(settingsFormData, dispatch, function() {
     dispatch(nextStep());
   });
 };
 
 export const submitUser = () => (dispatch, getState) => {
-  const userFormData = getState().install.data.user;
+  const userFormData = getState().install.toJS().data.user;
   validation(userFormData, dispatch, function() {
     dispatch(nextStep());
   });
 };
 
-export const finishInstall = () => (dispatch, getState, {rest}) => {
-  const data = getState().install.data;
+export const finishInstall = () => (dispatch, getState) => {
+  const data = getState().install.toJS().data;
   dispatch(installRequest());
-  return rest('/setup', {method: 'POST', body: data})
+  return coralApi('/setup', {method: 'POST', body: data})
     .then(() => {
       dispatch(installSuccess());
       dispatch(nextStep());
@@ -128,9 +129,9 @@ const checkInstallRequest = () => ({type: actions.CHECK_INSTALL_REQUEST});
 const checkInstallSuccess = (installed) => ({type: actions.CHECK_INSTALL_SUCCESS, installed});
 const checkInstallFailure = (error) => ({type: actions.CHECK_INSTALL_FAILURE, error});
 
-export const checkInstall = (next) => (dispatch, _, {rest}) => {
+export const checkInstall = (next) => (dispatch) => {
   dispatch(checkInstallRequest());
-  rest('/setup')
+  coralApi('/setup')
     .then(({installed}) => {
       dispatch(checkInstallSuccess(installed));
       if (installed) {

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

@@ -4,24 +4,44 @@ export const toggleModal = (open) => ({type: actions.TOGGLE_MODAL, open});
 export const singleView = () => ({type: actions.SINGLE_VIEW});
 
 // hide shortcuts note
-export const hideShortcutsNote = () => (dispatch, _, {storage}) => {
+export const hideShortcutsNote = () => {
   try {
-    if (storage) {
-      storage.setItem('coral:shortcutsNote', 'hide');
-    }
+    window.localStorage.setItem('coral:shortcutsNote', 'hide');
   } catch (e) {
 
     // above will fail in Safari private mode
   }
 
-  dispatch({type: actions.HIDE_SHORTCUTS_NOTE});
+  return {type: actions.HIDE_SHORTCUTS_NOTE};
 };
 
+export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
+export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
+
 export const setSortOrder = (order) => ({
   type: actions.SET_SORT_ORDER,
   order
 });
 
+export const changeUserDetailStatuses = (tab) => {
+  let statuses;
+  if (tab === 'all') {
+    statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'];
+  } else if (tab === 'rejected') {
+    statuses = ['REJECTED'];
+  }
+  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
+};
+
+export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
+
+export const toggleSelectCommentInUserDetail = (id, active) => {
+  return {
+    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
+    id
+  };
+};
+
 export const toggleStorySearch = (active) => ({
   type: active ? actions.SHOW_STORY_SEARCH : actions.HIDE_STORY_SEARCH
 });

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

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

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

@@ -1,24 +0,0 @@
-import * as actions from 'constants/userDetail';
-
-export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
-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') {
-    statuses = ['REJECTED'];
-  }
-  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
-};
-
-export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
-
-export const toggleSelectCommentInUserDetail = (id, active) => {
-  return {
-    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
-    id
-  };
-};
-

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

@@ -1,3 +1,4 @@
+import coralApi from '../../../coral-framework/helpers/request';
 import * as userTypes from '../constants/users';
 import t from 'coral-framework/services/i18n';
 
@@ -6,9 +7,9 @@ import t from 'coral-framework/services/i18n';
  */
 // change status of a user
 export const userStatusUpdate = (status, userId, commentId) => {
-  return (dispatch, _, {rest}) => {
+  return (dispatch) => {
     dispatch({type: userTypes.UPDATE_STATUS_REQUEST});
-    return rest(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
+    return coralApi(`/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);
@@ -20,8 +21,8 @@ export const userStatusUpdate = (status, userId, commentId) => {
 
 // change status of a user
 export const sendNotificationEmail = (userId, subject, body) => {
-  return (dispatch, _, {rest}) => {
-    return rest(`/users/${userId}/email`, {method: 'POST', body: {subject, body}})
+  return (dispatch) => {
+    return coralApi(`/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();
@@ -32,8 +33,8 @@ export const sendNotificationEmail = (userId, subject, body) => {
 
 // let a user edit their username
 export const enableUsernameEdit = (userId) => {
-  return (dispatch, _, {rest}) => {
-    return rest(`/users/${userId}/username-enable`, {method: 'POST'})
+  return (dispatch) => {
+    return coralApi(`/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,7 +1,7 @@
 import React, {PropTypes} from 'react';
 import styles from './ModerationList.css';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../utils/moderationQueueActionsMap';
+import {menuActionsMap} from '../routes/Moderation/helpers/moderationQueueActionsMap';
 
 import t from 'coral-framework/services/i18n';
 

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

@@ -1,24 +0,0 @@
-.bodyLeave {
-  position: absolute;
-  width: 100%;
-  top: 0;
-  background-color: white;
-  opacity: 1.0;
-  transition: background 400ms, opacity 800ms 1600ms;
-  pointer-events: none;
-}
-
-.bodyLeaveActive {
-  opacity: 0;
-  background-color: rgba(255,255,0, 0.2);
-}
-
-.bodyEnter {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.bodyEnterActive {
-  opacity: 1.0;
-  transition: opacity 800ms 2400ms;
-}

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import {murmur3} from 'murmurhash-js';
-import {CSSTransitionGroup} from 'react-transition-group';
-import styles from './CommentAnimatedEdit.css';
-
-export default ({children, body}) => {
-  return (
-    <CSSTransitionGroup
-      component={'div'}
-      transitionName={{
-        enter: styles.bodyEnter,
-        enterActive: styles.bodyEnterActive,
-        leave: styles.bodyLeave,
-        leaveActive: styles.bodyLeaveActive,
-      }}
-      transitionEnter={true}
-      transitionLeave={true}
-      transitionEnterTimeout={3600}
-      transitionLeaveTimeout={2800}
-    >
-      {React.cloneElement(React.Children.only(children), {key: murmur3(body)})}
-    </CSSTransitionGroup>
-  );
-};

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import Highlighter from 'react-highlight-words';
-import Linkify from 'react-linkify';
-const linkify = new Linkify();
-
-export default ({suspectWords, bannedWords, body, ...rest}) => {
-
-  const links = linkify.getMatches(body);
-  const linkText = links ? links.map((link) => link.raw) : [];
-
-  const searchWords = [
-    ...suspectWords,
-    ...bannedWords,
-    ...linkText
-  ];
-
-  return (
-    <Highlighter
-      {...rest}
-      autoEscape={true}
-      searchWords={searchWords}
-      textToHighlight={body}
-    />
-  );
-};

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import Linkify from 'react-linkify';
-const linkify = new Linkify();
-
-export default ({text, children}) => {
-  const hasLinks = !!linkify.getMatches(text);
-
-  if (!hasLinks) {
-    return null;
-  }
-
-  return React.Children.only(children);
-};

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

@@ -1,21 +0,0 @@
-.loadMoreContainer {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
-.loadMore {
-  width: 100%;
-  text-align: center;
-  color: #FFF;
-  max-width: 660px;
-  margin-bottom: 30px;
-  background-color: #2376D8;
-  cursor: pointer;
-}
-
-.loadMore:hover {
-  background-color: #4399FF;
-}
-
-

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

@@ -467,6 +467,7 @@ $fullscreenZIndex: 10;
       text-align: center;
       text-decoration: none!important;
       color: #2c3e50!important;
+      width: 30px;
       height: 30px;
       margin: 0;
       border: 1px solid transparent;
@@ -474,8 +475,6 @@ $fullscreenZIndex: 10;
       cursor: pointer;
       outline: 0;
       margin-right: 2px;
-      font-size: 1.5em;
-      width: 25px;
       &.active {
         background: #fcfcfc;
         border-color: #95a5a6;

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

@@ -186,11 +186,13 @@
 .actionButton {
   transform: scale(.8);
   margin: 0;
+  width: 140px;
 }
 
 .minimal {
   width: 45px;
   min-width: 0;
+  float: left;
 }
 
 .approve__active {

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

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

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

@@ -1,144 +0,0 @@
-.copyButton {
-  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 {
-  clear: both;
-}
-
-.small {
-  color: #888888;
-  font-size: 0.9em;
-  letter-spacing: 0.4px;
-}
-
-.profileEmail {
-  border: none;
-  background-color: transparent;
-  font-size: 16px;
-  outline: none;
-  width: calc(100% - 90px);
-}
-
-.commentStatuses {
-  padding: 10px 0 0 0;
-  margin: 0;
-  height: 52px;
-  list-style: none;
-  box-sizing: border-box;
-
-  li {
-    display: inline-block;
-    margin-right: 10px;
-    cursor: pointer;
-    padding: 0 10px;
-  }
-}
-
-.active {
-  font-weight: bold;
-  border-bottom: 3px solid #F36451;
-}
-
-.bulkActionGroup {
-  height: 52px;
-  background-color: #efefef;
-
-  i {
-    margin-right: 0;
-  }
-
-  .bulkAction {
-    display: inline-block;
-    width: 48px;
-    height: 48px;
-    transform: scale(.7);
-    min-width: 0;
-  }
-
-  .bulkAction:last-child {
-    margin-left: -10px;
-  }
-}
-
-.loadMore > button {
-  background-color: #696969;
-
-  &:hover {
-    background-color: #404040;
-    color: white;
-  }
-}

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

@@ -1,205 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Comment from '../containers/UserDetailComment';
-import styles from './UserDetail.css';
-import {Icon, Button, Drawer, Spinner} from 'coral-ui';
-import {Slot} from 'coral-framework/components';
-import ButtonCopyToClipboard from './ButtonCopyToClipboard';
-import {actionsMap} from '../utils/moderationQueueActionsMap';
-import ClickOutside from 'coral-framework/components/ClickOutside';
-import LoadMore from '../components/LoadMore';
-import cn from 'classnames';
-import capitalize from 'lodash/capitalize';
-import {getReliability} from 'coral-framework/utils/user';
-
-export default class UserDetail extends React.Component {
-
-  static propTypes = {
-    userId: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired,
-    root: PropTypes.object.isRequired,
-    bannedWords: PropTypes.array.isRequired,
-    suspectWords: PropTypes.array.isRequired,
-    acceptComment: PropTypes.func.isRequired,
-    rejectComment: PropTypes.func.isRequired,
-    changeStatus: PropTypes.func.isRequired,
-    toggleSelect: PropTypes.func.isRequired,
-    bulkAccept: PropTypes.func.isRequired,
-    bulkReject: PropTypes.func.isRequired,
-  }
-
-  rejectThenReload = (info) => {
-    this.props.rejectComment(info).then(() => {
-      this.props.data.refetch();
-    });
-  }
-
-  acceptThenReload = (info) => {
-    this.props.acceptComment(info).then(() => {
-      this.props.data.refetch();
-    });
-  }
-
-  showAll = () => {
-    this.props.changeStatus('all');
-  }
-
-  showRejected = () => {
-    this.props.changeStatus('rejected');
-  }
-
-  renderLoading() {
-    return (
-      <ClickOutside onClickOutside={this.props.hideUserDetail}>
-        <Drawer onClose={this.props.hideUserDetail}>
-          <Spinner />
-        </Drawer>
-      </ClickOutside>
-    );
-  }
-
-  renderLoaded() {
-    const {
-      root,
-      root: {
-        user,
-        totalComments,
-        rejectedComments,
-        comments: {nodes, hasNextPage}
-      },
-      activeTab,
-      selectedCommentIds,
-      bannedWords,
-      suspectWords,
-      toggleSelect,
-      bulkAccept,
-      bulkReject,
-      hideUserDetail,
-      viewUserDetail,
-      loadMore,
-    } = this.props;
-
-    let rejectedPercent = (rejectedComments / totalComments) * 100;
-    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
-
-      // if totalComments is 0, you're dividing by zero, which is naughty
-      rejectedPercent = 0;
-    }
-
-    return (
-      <ClickOutside onClickOutside={hideUserDetail}>
-        <Drawer onClose={hideUserDetail}>
-          <h3>{user.username}</h3>
-
-          <div>
-            <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}
-            queryData={root, user}
-          />
-
-          <hr/>
-          {
-            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>
-            )
-          }
-
-          <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}
-                  comment={comment}
-                  selected={false}
-                  suspectWords={suspectWords}
-                  bannedWords={bannedWords}
-                  actions={actionsMap[status]}
-                  acceptComment={this.acceptThenReload}
-                  rejectComment={this.rejectThenReload}
-                  selected={selected}
-                  toggleSelect={toggleSelect}
-                  viewUserDetail={viewUserDetail}
-                />;
-              })
-            }
-          </div>
-          <LoadMore
-            className={styles.loadMore}
-            loadMore={loadMore}
-            showLoadMore={hasNextPage}
-            />
-        </Drawer>
-      </ClickOutside>
-    );
-  }
-
-  render () {
-    if (this.props.loading) {
-      return this.renderLoading();
-    }
-    return this.renderLoaded();
-  }
-}

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

@@ -1,132 +0,0 @@
-.root {
-  display: block;
-  margin: 0;
-  border-bottom: 1px solid #e0e0e0;
-  width: 100%;
-  transition: all 200ms;
-  padding: 10px 0px;
-  min-height: 0;
-}
-
-.root:last-child {
-  border: 0;
-}
-
-.rootSelected {
-  background-color: #ecf4ff;
-}
-
-.container {
-  padding: 0px 14px;
-}
-
-.story {
-  font-size: 14px;
-  margin: 10px 0;
-  font-weight: 500;
-  line-height: 1.2;
-  max-width: 500px;
-}
-
-.story > a {
-  display: inline-block;
-  color: #063b9a;
-  text-decoration: none;
-  font-weight: 500;
-  letter-spacing: .5px;
-  margin-left: 10px;
-  font-size: 13px;
-  margin-left: 5px;
-  padding-bottom: 0px;
-  border-bottom: solid 1px;
-  line-height: 16px;
-}
-
-.bodyContainer {
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 300;
-  margin-bottom: 8px;
-}
-
-.header {
-  position: relative;
-}
-
-.badgeBar {
-  position: absolute;
-  right: 0px;
-}
-
-.created {
-  padding: 5px;
-  color: #262626;
-  font-size: 14px;
-  line-height: 1px;
-  font-weight: 300;
-}
-
-.body {
-  margin-top: 0px;
-  flex: 1;
-  color: black;
-  max-width: 500px;
-  word-wrap: break-word;
-  font-weight: 300;
-  font-size: 16px;
-  max-width: 360px;
-}
-
-.sideActions {
-}
-
-.editedMarker {
-  font-style: italic;
-  color: #666;
-  font-size: 12px;
-  line-height: 1px;
-  font-weight: 300;
-}
-
-.actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.bulkSelectInput {
-  cursor: pointer;
-}
-
-.external {
-  font-size: .7em;
-  text-decoration: none;
-  color: #063b9a;
-  cursor: pointer;
-  font-weight: normal;
-  margin-left: 10px;
-  white-space: nowrap;
-
-  &:hover {
-    text-decoration: underline;
-    opacity: .9;
-  }
-
-  > i {
-    font-size: 12px;
-    top: 2px;
-    position: relative;
-  }
-}
-
-.hasLinks {
-  color: #f00;
-  text-align: right;
-  display: flex;
-  align-items: center;
-
-  > i {
-    margin-right: 5px;
-  }
-}

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

@@ -1,156 +0,0 @@
-import React, {PropTypes} from 'react';
-import {Link} from 'react-router';
-
-import {Icon} from 'coral-ui';
-import FlagBox from './FlagBox';
-import ReplyBadge from './ReplyBadge';
-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 t, {timeago} from 'coral-framework/services/i18n';
-
-class UserDetailComment extends React.Component {
-
-  render() {
-    const {
-      actions = [],
-      comment,
-      viewUserDetail,
-      suspectWords,
-      bannedWords,
-      selected,
-      toggleSelect,
-      className,
-      user,
-      ...props
-    } = 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}
-        className={cn(className, styles.root, {[styles.rootSelected]: selected})}
-      >
-        <div className={styles.container}>
-          <div className={styles.header}>
-            <input
-              className={styles.bulkSelectInput}
-              type='checkbox'
-              value={comment.id}
-              checked={selected}
-              onChange={(e) => toggleSelect(e.target.value, e.target.checked)} />
-            <span className={styles.created}>
-              {timeago(comment.created_at)}
-            </span>
-            {
-              (comment.editing && comment.editing.edited)
-              ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-              : null
-            }
-
-            <div className={styles.badgeBar}>
-              {comment.hasParent && <ReplyBadge/>}
-              <CommentType type={commentType}/>
-            </div>
-          </div>
-          <div className={styles.story}>
-            Story: {comment.asset.title}
-            {<Link to={`/admin/moderate/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
-          </div>
-          <CommentAnimatedEdit body={comment.body}>
-            <div className={styles.bodyContainer}>
-              <p className={styles.body}>
-                <CommentBodyHighlighter
-                  suspectWords={suspectWords}
-                  bannedWords={bannedWords}
-                  body={comment.body}
-                />
-                {' '}
-                <a
-                  className={styles.external}
-                  href={`${comment.asset.url}?commentId=${comment.id}`}
-                  target="_blank"
-                >
-                  <Icon name="open_in_new" /> {t('comment.view_context')}
-                </a>
-              </p>
-              <div className={styles.sideActions}>
-                <IfHasLink text={comment.body}>
-                  <span className={styles.hasLinks}>
-                    <Icon name="error_outline" /> Contains Link
-                  </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}))}
-                      />
-                    );
-                  })}
-                </div>
-              </div>
-            </div>
-          </CommentAnimatedEdit>
-        </div>
-        {flagActions && flagActions.length
-          ? <FlagBox
-              actions={flagActions}
-              actionSummaries={flagActionSummaries}
-              viewUserDetail={viewUserDetail}
-            />
-          : null}
-      </li>
-    );
-  }
-}
-
-UserDetailComment.propTypes = {
-  user: PropTypes.object.isRequired,
-  viewUserDetail: PropTypes.func.isRequired,
-  acceptComment: PropTypes.func.isRequired,
-  rejectComment: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  toggleSelect: PropTypes.func,
-  comment: PropTypes.shape({
-    body: PropTypes.string.isRequired,
-    action_summaries: PropTypes.array,
-    actions: PropTypes.array,
-    created_at: PropTypes.string.isRequired,
-    asset: PropTypes.shape({
-      title: PropTypes.string,
-      url: PropTypes.string,
-      id: PropTypes.string
-    })
-  })
-};
-
-export default UserDetailComment;

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

@@ -10,18 +10,16 @@
 .logo span {
   display: inline-block;
   margin-left: 10px;
-  font-size: 26px;
+  font-size: 18px;
   vertical-align: middle;
   font-weight: 500;
-  color: white;
 }
 
 .logo {
-  background: #696969;
+  background: #E5E5E5;
   height: 100%;
   width: 128px;
   z-index: 10;
-  border-right: 1px #757575 solid;
 }
 
 .base {

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

@@ -1,7 +1,13 @@
 export const TOGGLE_MODAL = 'TOGGLE_MODAL';
 export const SINGLE_VIEW = 'SINGLE_VIEW';
 export const HIDE_SHORTCUTS_NOTE = 'HIDE_SHORTCUTS_NOTE';
+export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
+export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
 export const SET_SORT_ORDER = 'MODERATION_SET_SORT_ORDER';
+export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
+export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
+export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
+export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
 export const SHOW_STORY_SEARCH = 'SHOW_STORY_SEARCH';
 export const HIDE_STORY_SEARCH = 'HIDE_STORY_SEARCH';
 export const STORY_SEARCH_CHANGE_VALUE = 'STORY_SEARCH_CHANGE_VALUE';

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

@@ -1,7 +0,0 @@
-export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
-export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
-export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
-export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
-export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
-export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
-

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

@@ -3,13 +3,13 @@ import {connect} from 'react-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, logout} from '../actions/auth';
+import {checkLogin, handleLogin, requestPasswordReset} from '../actions/auth';
 import {can} from 'coral-framework/services/perms';
-import UserDetail from 'coral-admin/src/containers/UserDetail';
 
 class LayoutContainer extends Component {
   componentWillMount() {
@@ -57,7 +57,6 @@ class LayoutContainer extends Component {
         >
         <BanUserDialog />
         <SuspendUserDialog />
-        <UserDetail />
         {this.props.children}
         </Layout>
       );
@@ -73,8 +72,10 @@ class LayoutContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  auth: state.auth,
-  TALK_RECAPTCHA_PUBLIC: state.config.data.TALK_RECAPTCHA_PUBLIC,
+  auth: state.auth.toJS(),
+  TALK_RECAPTCHA_PUBLIC: state.config
+    .get('data')
+    .get('TALK_RECAPTCHA_PUBLIC', null)
 });
 
 const mapDispatchToProps = (dispatch) => ({

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

@@ -5,24 +5,22 @@ 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, notify} = this.props;
+    const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser} = this.props;
     hideSuspendUserDialog();
     try {
       const result = await suspendUser({id: userId, message, until});
       if (result.data.suspendUser.errors) {
         throw result.data.suspendUser.errors;
       }
-      notify(
-        'success',
+      notification.success(
         t('suspenduser.notify_suspend_until', username, timeago(until)),
       );
       if (commentId && commentStatus && commentStatus !== 'REJECTED') {
@@ -35,7 +33,7 @@ class SuspendUserDialogContainer extends Component {
       }
     }
     catch(err) {
-      notify('error', getErrorMessages(err));
+      notification.showMutationErrors(err);
     }
   };
 
@@ -71,7 +69,6 @@ const mapStateToProps = ({suspendUserDialog: {open, userId, username, commentId,
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     hideSuspendUserDialog,
-    notify,
   }, dispatch),
 });
 

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

@@ -1,193 +0,0 @@
-import React from 'react';
-import {compose, gql} from 'react-apollo';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import UserDetail from '../components/UserDetail';
-import withQuery from 'coral-framework/hocs/withQuery';
-import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
-import {
-  viewUserDetail,
-  hideUserDetail,
-  changeUserDetailStatuses,
-  clearUserDetailSelections,
-  toggleSelectCommentInUserDetail,
-} from 'coral-admin/src/actions/userDetail';
-import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import UserDetailComment from './UserDetailComment';
-import update from 'immutability-helper';
-
-const commentConnectionFragment = gql`
-  fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
-    nodes {
-      ...${getDefinitionName(UserDetailComment.fragments.comment)}
-    }
-    hasNextPage
-    startCursor
-    endCursor
-  }
-  ${UserDetailComment.fragments.comment}
-`;
-
-const slots = [
-  'userProfile',
-];
-
-class UserDetailContainer extends React.Component {
-  isLoadingMore = false;
-
-  // status can be 'ACCEPTED' or 'REJECTED'
-  bulkSetCommentStatus = (status) => {
-    const changes = this.props.selectedCommentIds.map((commentId) => {
-      return this.props.setCommentStatus({commentId, status});
-    });
-
-    Promise.all(changes).then(() => {
-      this.props.clearUserDetailSelections(); // un-select everything
-    });
-  }
-
-  bulkReject = () => {
-    this.bulkSetCommentStatus('REJECTED');
-  }
-
-  bulkAccept = () => {
-    this.bulkSetCommentStatus('ACCEPTED');
-  }
-
-  acceptComment = ({commentId}) => {
-    return this.props.setCommentStatus({commentId, status: 'ACCEPTED'});
-  }
-
-  rejectComment = ({commentId}) => {
-    return this.props.setCommentStatus({commentId, status: 'REJECTED'});
-  }
-
-  loadMore = () => {
-    if (this.isLoadingMore) {
-      return;
-    }
-
-    this.isLoadingMore = true;
-    const variables = {
-      limit: 10,
-      cursor: this.props.root.comments.endCursor,
-      author_id: this.props.data.variables.author_id,
-      statuses: this.props.data.variables.statuses,
-    };
-    this.props.data.fetchMore({
-      query: LOAD_MORE_QUERY,
-      variables,
-      updateQuery: (prev, {fetchMoreResult:{comments}}) => {
-        return update(prev, {
-          comments: {
-            nodes: {$push: comments.nodes},
-            hasNextPage: {$set: comments.hasNextPage},
-            startCursor: {$set: comments.startCursor},
-            endCursor: {$set: comments.endCursor},
-          },
-        });
-      }
-    })
-    .then(() => {
-      this.isLoadingMore = false;
-    })
-    .catch((err) => {
-      this.isLoadingMore = false;
-      throw err;
-    });
-  };
-
-  componentWillReceiveProps(next) {
-    if (this.props.userId === null && next.userId) {
-      next.data.refetch();
-    }
-  }
-
-  render () {
-    if (!this.props.userId) {
-      return null;
-    }
-
-    const loading = this.props.data.loading;
-
-    return <UserDetail
-      bulkReject={this.bulkReject}
-      bulkAccept={this.bulkAccept}
-      changeStatus={this.props.changeUserDetailStatuses}
-      toggleSelect={this.props.toggleSelectCommentInUserDetail}
-      acceptComment={this.acceptComment}
-      rejectComment={this.rejectComment}
-      loading={loading}
-      loadMore={this.loadMore}
-      {...this.props} />;
-  }
-}
-
-const LOAD_MORE_QUERY = gql`
-  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
-    }
-  }
-  ${commentConnectionFragment}
-`;
-
-export const withUserDetailQuery = withQuery(gql`
-  query CoralAdmin_UserDetail($author_id: ID!, $statuses: [COMMENT_STATUS!]) {
-    user(id: $author_id) {
-      id
-      username
-      created_at
-      profiles {
-        id
-        provider
-      }
-      reliable {
-        flagger
-      }
-      ${getSlotFragmentSpreads(slots, 'user')}
-    }
-    totalComments: commentCount(query: {author_id: $author_id})
-    rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
-    comments: comments(query: {
-      author_id: $author_id,
-      statuses: $statuses
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
-    ${getSlotFragmentSpreads(slots, 'root')}
-  }
-  ${commentConnectionFragment}
-`, {
-  options: ({userId, statuses}) => {
-    return {
-      variables: {author_id: userId, statuses}
-    };
-  },
-  skip: (ownProps) => !ownProps.userId,
-});
-
-const mapStateToProps = (state) => ({
-  userId: state.userDetail.userId,
-  selectedCommentIds: state.userDetail.selectedCommentIds,
-  statuses: state.userDetail.statuses,
-  activeTab: state.userDetail.activeTab,
-  bannedWords: state.settings.wordlist.banned,
-  suspectWords: state.settings.wordlist.suspect,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  ...bindActionCreators({
-    changeUserDetailStatuses,
-    clearUserDetailSelections,
-    toggleSelectCommentInUserDetail,
-    viewUserDetail,
-    hideUserDetail,
-  }, dispatch)
-});
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  withUserDetailQuery,
-  withSetCommentStatus,
-)(UserDetailContainer);

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

@@ -1,40 +0,0 @@
-import {gql} from 'react-apollo';
-import UserDetailComment from '../components/UserDetailComment';
-import withFragments from 'coral-framework/hocs/withFragments';
-
-export default withFragments({
-  comment: gql`
-    fragment CoralAdmin_UserDetail_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
-      }
-    }
-  `
-})(UserDetailComment);

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

@@ -1,4 +1,6 @@
-export default {
+import {add} from 'coral-framework/services/graphqlRegistry';
+
+const extension = {
   mutations: {
     SetUserStatus: () => ({
       refetchQueries: ['CoralAdmin_Community'],
@@ -9,3 +11,4 @@ export default {
   },
 };
 
+add(extension);

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

@@ -1,5 +1,7 @@
 import update from 'immutability-helper';
+import * as notification from 'coral-admin/src/services/notification';
 
+const queues = ['all', 'premod', 'flagged', 'accepted', 'rejected'];
 const limit = 10;
 
 const ascending = (a, b) => {
@@ -28,29 +30,29 @@ function removeCommentFromQueue(root, queue, id) {
   });
 }
 
-function shouldCommentBeAdded(root, queue, comment, sortOrder) {
+function shouldCommentBeAdded(root, queue, comment, sort) {
   if (root[`${queue}Count`] < limit) {
 
     // Adding all comments until first limit has reached.
     return true;
   }
   const cursor = new Date(root[queue].endCursor);
-  return sortOrder === 'ASC'
+  return sort === 'CHRONOLOGICAL'
     ? new Date(comment.created_at) <= cursor
     : new Date(comment.created_at) >= cursor;
 }
 
-function addCommentToQueue(root, queue, comment, sortOrder) {
+function addCommentToQueue(root, queue, comment, sort) {
   if (queueHasComment(root, queue, comment.id)) {
     return root;
   }
 
-  const sortAlgo = sortOrder === 'ASC' ? ascending : descending;
+  const sortAlgo = sort === 'CHRONOLOGICAL' ? ascending : descending;
   const changes = {
     [`${queue}Count`]: {$set: root[`${queue}Count`] + 1},
   };
 
-  if (shouldCommentBeAdded(root, queue, comment, sortOrder)) {
+  if (shouldCommentBeAdded(root, queue, comment, sort)) {
     const nodes = root[queue].nodes.concat(comment).sort(sortAlgo);
     changes[queue] = {
       nodes: {$set: nodes},
@@ -62,27 +64,23 @@ function addCommentToQueue(root, queue, comment, sortOrder) {
   return update(root, changes);
 }
 
-/**
- * getCommentQueues determines in which queues a comment should be placed.
- */
-function getCommentQueues(comment, queueConfig) {
-  const queues = [];
-  Object.keys(queueConfig).forEach((key) => {
-    const {action_type, statuses, tags} = queueConfig[key];
-    let addToQueues = false;
-    if (statuses && statuses.indexOf(comment.status) >= 0) {
-      addToQueues = true;
-    }
-    if (tags && comment.tags && comment.tags.some((tagLink) => tags.indexOf(tagLink.tag.name) >= 0)) {
-      addToQueues = true;
-    }
-    if (action_type && comment.actions && comment.actions.some((a) => a.__typename.toLowerCase() === `${action_type}action`)) {
-      addToQueues = true;
-    }
-    if (addToQueues) {
-      queues.push(key);
-    }
-  });
+function getCommentQueues(comment) {
+  const queues = ['all'];
+  if (comment.status === 'ACCEPTED') {
+    queues.push('accepted');
+  }
+  else if (comment.status === 'REJECTED') {
+    queues.push('rejected');
+  }
+  else if (comment.status === 'PREMOD') {
+    queues.push('premod');
+  }
+  if (
+    ['NONE', 'PREMOD'].indexOf(comment.status) >= 0
+    && comment.actions && comment.actions.some((a) => a.__typename === 'FlagAction')
+  ) {
+    queues.push('flagged');
+  }
   return queues;
 }
 
@@ -90,47 +88,49 @@ function getCommentQueues(comment, queueConfig) {
  * Assimilate comment changes into current store.
  * @param  {Object} root               current state of the store
  * @param  {Object} comment            comment that was changed
- * @param  {string} sortOrder          current sort order of the queues
- * @param  {string} notify             callback to show notification
+ * @param  {string} sort               current sort order of the queues
+ * @param  {Object} [notify]           show know notifications if set
+ * @param  {string} notify.activeQueue current active queue
+ * @param  {string} notify.text        notification text to show
+ * @param  {bool}   notify.anyQueue    if true show the notification when the comment is shown
  *                                     in the current active queue besides the 'all' queue.
- * @param  {Object} queueConfig        queue configuration
  * @return {Object}                    next state of the store
  */
-export function handleCommentChange(root, comment, sortOrder, notify, queueConfig, activeQueue) {
+export function handleCommentChange(root, comment, sort, notify) {
   let next = root;
-
-  const nextQueues = getCommentQueues(comment, queueConfig);
+  const nextQueues = getCommentQueues(comment);
 
   let notificationShown = false;
   const showNotificationOnce = () => {
     if (notificationShown) {
       return;
     }
-    notify();
+    notification.info(notify.text);
     notificationShown = true;
   };
 
-  Object.keys(queueConfig).forEach((queue) => {
+  queues.forEach((queue) => {
     if (nextQueues.indexOf(queue) >= 0) {
       if (!queueHasComment(next, queue, comment.id)) {
-        next = addCommentToQueue(next, queue, comment, sortOrder);
-        if (notify && activeQueue === queue && shouldCommentBeAdded(next, queue, comment, sortOrder)) {
-          showNotificationOnce();
+        next = addCommentToQueue(next, queue, comment, sort);
+        if (notify && notify.activeQueue === queue && shouldCommentBeAdded(next, queue, comment, sort)) {
+          showNotificationOnce(comment);
         }
       }
     } else if(queueHasComment(next, queue, comment.id)){
       next = removeCommentFromQueue(next, queue, comment.id);
-      if (notify && activeQueue === queue) {
-        showNotificationOnce();
+      if (notify && notify.activeQueue === queue) {
+        showNotificationOnce(comment);
       }
     }
 
     if (
       notify
+      && (queue === 'all' || notify.anyQueue)
       && queueHasComment(next, queue, comment.id)
-      && activeQueue === queue
+      && notify.activeQueue === queue
     ) {
-      showNotificationOnce();
+      showNotificationOnce(comment);
     }
   });
   return next;

client/coral-admin/src/index.js

@@ -1,34 +1,24 @@
 import React from 'react';
 import {render} from 'react-dom';
+import {ApolloProvider} from 'react-apollo';
 import smoothscroll from 'smoothscroll-polyfill';
-import TalkProvider from 'coral-framework/components/TalkProvider';
-import {createContext} from 'coral-framework/services/bootstrap';
-import reducers from './reducers';
+
+import {getClient} from './services/client';
+import store from './services/store';
+
 import App from './components/App';
+
 import 'react-mdl/extra/material.js';
-import graphqlExtension from './graphql';
-import pluginsConfig from 'pluginsConfig';
-import {toast} from 'react-toastify';
-import {createNotificationService} from './services/notification';
-import {hideShortcutsNote} from './actions/moderation';
-
-function hidrateStore({store, storage}) {
-  if (storage && storage.getItem('coral:shortcutsNote') === 'hide') {
-    store.dispatch(hideShortcutsNote());
-  }
-}
+import './graphql';
+import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
 
+loadPluginsTranslations();
+injectPluginsReducers();
 smoothscroll.polyfill();
 
-const notification = createNotificationService(toast);
-const context = createContext({reducers, graphqlExtension, pluginsConfig, notification});
-
-// hidrate Store with external data.
-hidrateStore(context);
-
 render(
-  <TalkProvider {...context}>
+  <ApolloProvider client={getClient()} store={store}>
     <App />
-  </TalkProvider>
+  </ApolloProvider>
   , document.querySelector('#root')
 );

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

@@ -1,40 +1,35 @@
+import {Map, List, fromJS} from 'immutable';
 import * as actions from '../constants/assets';
-import update from 'immutability-helper';
 
-const initialState = {
-  byId: {},
-  ids: [],
-  assets: []
-};
+const initialState = Map({
+  byId: Map(),
+  ids: List(),
+  assets: List()
+});
 
 export default function assets (state = initialState, action) {
   switch (action.type) {
-  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.FETCH_ASSETS_SUCCESS:
+    return replaceAssets(action, state);
   case actions.UPDATE_ASSET_STATE_REQUEST:
-    return update(state, {
-      byId: {
-        [action.id]: {
-          closedAt: {$set: action.closedAt},
-        },
-      },
-    });
+    return state
+      .setIn(['byId', action.id, 'closedAt'], action.closedAt);
   case actions.UPDATE_ASSETS:
-    return update(state, {
-      assets: {$set: action.assets},
-    });
+    return state
+      .set('assets', List(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,63 +1,43 @@
+import {Map} from 'immutable';
 import * as actions from '../constants/auth';
 
-const initialState = {
+const initialState = Map({
   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,
-      loadingUser: true,
-    };
+    return state
+      .set('loadingUser', true);
   case actions.CHECK_LOGIN_FAILURE:
-    return {
-      ...state,
-      loggedIn: false,
-      loadingUser: false,
-      user: null,
-    };
+    return state
+      .set('loggedIn', false)
+      .set('loadingUser', false)
+      .set('user', null);
   case actions.CHECK_LOGIN_SUCCESS:
-    return {
-      ...state,
-      loggedIn: true,
-      loadingUser: false,
-      user: action.user,
-    };
+    return state
+      .set('loggedIn', true)
+      .set('loadingUser', false)
+      .set('user', action.user);
   case actions.LOGOUT:
     return initialState;
   case actions.LOGIN_SUCCESS:
-    return {
-      ...state,
-      loginMaxExceeded: false,
-      loginError: null,
-    };
+    return state.set('loginMaxExceeded', false).set('loginError', null);
   case actions.LOGIN_FAILURE:
-    return {
-      ...state,
-      loginError: action.message,
-    };
+    return state.set('loginError', action.message);
   case actions.FETCH_FORGOT_PASSWORD_REQUEST:
-    return {
-      ...state,
-      passwordRequestSuccess: null,
-    };
+    return state.set('passwordRequestSuccess', null);
   case actions.FETCH_FORGOT_PASSWORD_SUCCESS:
-    return {
-      ...state,
-      passwordRequestSuccess: 'If you have a registered account, a password reset link was sent to that email.',
-    };
+    return state.set('passwordRequestSuccess', 'If you have a registered account, a password reset link was sent to that email.');
   case actions.LOGIN_MAXIMUM_EXCEEDED:
-    return {
-      ...state,
-      loginMaxExceeded: true,
-      loginError: action.message,
-    };
+    return state
+      .set('loginMaxExceeded', true)
+      .set('loginError', action.message);
   default :
     return state;
   }

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

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

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

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

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

@@ -7,13 +7,11 @@ import install from './install';
 import config from './config';
 import banUserDialog from './banUserDialog';
 import suspendUserDialog from './suspendUserDialog';
-import userDetail from './userDetail';
 
 export default {
   auth,
   banUserDialog,
   suspendUserDialog,
-  userDetail,
   assets,
   settings,
   community,

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

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

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

@@ -1,57 +1,60 @@
+import {fromJS, Set} from 'immutable';
 import * as actions from '../constants/moderation';
 
-const initialState = {
+const initialState = fromJS({
   singleView: false,
   modalOpen: false,
+  userDetailId: null,
+  userDetailActiveTab: 'all',
+  userDetailStatuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
+  userDetailSelectedIds: new Set(),
   storySearchVisible: false,
   storySearchString: '',
-  shortcutsNoteVisible: 'show',
-  sortOrder: 'DESC',
-};
+  shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show',
+  sortOrder: 'REVERSE_CHRONOLOGICAL',
+});
 
 export default function moderation (state = initialState, action) {
   switch (action.type) {
   case actions.MODERATION_CLEAR_STATE:
-    return {
-      ...initialState,
-      shortcutsNoteVisible: state.shortcutsNoteVisible,
-    };
+    return initialState;
+  case actions.SET_ACTIVE_TAB:
+    return state
+      .set('activeTab', action.activeTab);
   case actions.TOGGLE_MODAL:
-    return {
-      ...state,
-      modalOpen: action.open,
-    };
+    return state
+      .set('modalOpen', action.open);
   case actions.SINGLE_VIEW:
-    return {
-      ...state,
-      singleView: !state.singleView,
-    };
+    return state
+      .set('singleView', !state.get('singleView'));
   case actions.HIDE_SHORTCUTS_NOTE:
-    return {
-      ...state,
-      shortcutsNoteVisible: 'hide',
-    };
+    return state
+      .set('shortcutsNoteVisible', 'hide');
+  case actions.VIEW_USER_DETAIL:
+    return state.set('userDetailId', action.userId);
+  case actions.HIDE_USER_DETAIL:
+    return state
+      .set('userDetailId', null)
+      .update('userDetailSelectedIds', (set) => set.clear());
+  case actions.CLEAR_USER_DETAIL_SELECTIONS:
+    return state.update('userDetailSelectedIds', (set) => set.clear());
+  case actions.CHANGE_USER_DETAIL_STATUSES:
+    return state
+      .set('userDetailActiveTab', action.tab)
+      .set('userDetailStatuses', action.statuses);
+  case actions.SELECT_USER_DETAIL_COMMENT:
+    return state.update('userDetailSelectedIds', (set) => set.add(action.id));
+  case actions.UNSELECT_USER_DETAIL_COMMENT:
+    return state.update('userDetailSelectedIds', (set) => set.delete(action.id));
   case actions.SHOW_STORY_SEARCH:
-    return {
-      ...state,
-      storySearchVisible: true,
-    };
+    return state.set('storySearchVisible', true);
   case actions.HIDE_STORY_SEARCH:
-    return {
-      ...state,
-      storySearchVisible: false,
-    };
+    return state.set('storySearchVisible', false);
   case actions.STORY_SEARCH_CHANGE_VALUE:
-    return {
-      ...state,
-      storySearchString: action.value,
-    };
+    return state.set('storySearchString', action.value);
   case actions.SET_SORT_ORDER:
-    return {
-      ...state,
-      sortOrder: action.order,
-    };
-  default:
+    return state.set('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,82 +10,63 @@ const DASHBOARD_WINDOW_MINUTES = 5;
 let then = new Date();
 then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
 
-const initialState = {
-  wordlist: {
-    banned: [],
-    suspect: []
-  },
+const initialState = Map({
+  wordlist: Map({
+    banned: List(),
+    suspect: List()
+  }),
   dashboardWindowStart: then.toISOString(),
   dashboardWindowEnd: new Date().toISOString(),
-  domains: {
-    whitelist: []
-  },
+  domains: Map({
+    whitelist: List()
+  }),
   saveSettingsError: null,
   fetchSettingsError: null,
   fetchingSettings: false
-};
+});
 
 export default function settings (state = initialState, action) {
   switch (action.type) {
   case actions.SETTINGS_LOADING:
-    return {
-      ...state,
-      fetchingSettings: true,
-      fetchSettingsError: null,
-    };
+    return state
+      .set('fetchingSettings', true)
+      .set('fetchSettingsError', null);
   case actions.SETTINGS_RECEIVED:
-    return {
-      ...state,
+    return state.merge({
       fetchingSettings: false,
       fetchSettingsError: null,
       ...action.settings
-    };
+    });
   case actions.SETTINGS_FETCH_ERROR:
-    return {
-      ...state,
-      fetchingSettings: false,
-      fetchSettingsError: action.error,
-    };
+    return state
+      .set('fetchingSettings', false)
+      .set('fetchSettingsError', action.error);
   case actions.SETTINGS_UPDATED:
-    return {
-      ...state,
+    return state.merge({
       fetchingSettings: false,
       fetchSettingsError: null,
       ...action.settings
-    };
+    });
   case actions.SAVE_SETTINGS_LOADING:
-    return {
-      ...state,
-      fetchingSettings: true,
-      saveSettingsError: null,
-    };
+    return state
+      .set('fetchingSettings', true)
+      .set('saveSettingsError', null);
   case actions.SAVE_SETTINGS_SUCCESS:
-    return {
-      ...state,
+    return state.merge({
       fetchingSettings: false,
       fetchSettingsError: null,
       ...action.settings
-    };
+    });
   case actions.SAVE_SETTINGS_FAILED:
-    return {
-      ...state,
-      fetchingSettings: false,
-      fetchSettingsError: action.error,
-    };
+    return state
+      .set('fetchingSettings', false)
+      .set('fetchSettingsError', action.error);
   case actions.WORDLIST_UPDATED:
-    return update(state, {
-      wordlist: {
-        [action.listName]: {
-          $set: action.list
-        }
-      }
-    });
+    return state
+      .setIn(['wordlist', action.listName], action.list);
   case actions.DOMAINLIST_UPDATED:
-    return update(state, {
-      domains: {
-        [action.listName]: {$set: action.list},
-      }
-    });
+    return state
+      .setIn(['domains', action.listName], action.list);
   default:
     return state;
   }

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

@@ -1,47 +0,0 @@
-import * as actions from '../constants/userDetail';
-
-const initialState = {
-  userId: null,
-  activeTab: 'all',
-  statuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
-  selectedCommentIds: [],
-};
-
-export default function banUserDialog(state = initialState, action) {
-  switch (action.type) {
-  case actions.VIEW_USER_DETAIL:
-    return {
-      ...state,
-      userId: action.userId,
-    };
-  case actions.HIDE_USER_DETAIL:
-    return {
-      ...state,
-      userId: null,
-      selectedCommentIds: [],
-    };
-  case actions.CLEAR_USER_DETAIL_SELECTIONS:
-    return {
-      ...state,
-      selectedCommentIds: [],
-    };
-  case actions.CHANGE_USER_DETAIL_STATUSES:
-    return {
-      ...state,
-      activeTab: action.tab,
-      statuses: action.statuses,
-    };
-  case actions.SELECT_USER_DETAIL_COMMENT:
-    return {
-      ...state,
-      selectedCommentIds: [...state.selectedCommentIds, action.id],
-    };
-  case actions.UNSELECT_USER_DETAIL_COMMENT:
-    return {
-      ...state,
-      selectedCommentIds: state.selectedCommentIds.filter((id) => id !== action.id),
-    };
-  default:
-    return state;
-  }
-}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './Community.css';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../../../utils/moderationQueueActionsMap';
+import {menuActionsMap} from '../../Moderation/helpers/moderationQueueActionsMap';
 
 import t from 'coral-framework/services/i18n';
 

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

@@ -52,6 +52,57 @@
   }
 }
 
+.email {
+  display: block;
+}
+
+.dataTable {
+  width: 100%;
+  border-left: none;
+  border-right: none;
+
+  th {
+    font-size: 1.1em;
+  }
+
+  th:nth-child(2), th:nth-child(3) {
+    width: 100px;
+  }
+}
+
+.selectField {
+  position: relative;
+  width: 150px;
+  height: 36px;
+  background: #2c2c2c;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  color: white;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  > div {
+    padding: 0;
+  }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    padding: 0;
+    font-size: 13px;
+    letter-spacing: 0.7px;
+    font-weight: 400;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
+}
+
 .list {
   padding: 8px 0;
   list-style: none;
@@ -289,11 +340,3 @@ p.flaggedByReason {
   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

@@ -54,7 +54,7 @@ export default class Community extends Component {
   }
 
   getTabContent(searchValue, props) {
-    const {community, root: {users}, viewUserDetail} = props;
+    const {community, root: {users}} = props;
     const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
 
     if (activeTab === 'people') {
@@ -84,7 +84,6 @@ export default class Community extends Component {
           approveUser={props.approveUser}
           rejectUsername={props.rejectUsername}
           currentUser={this.props.currentUser}
-          viewUserDetail={viewUserDetail}
         />
         <RejectUsernameDialog
           open={community.rejectUsernameDialog}

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

@@ -5,7 +5,7 @@ import styles from './Community.css';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 import User from './User';
 
-const FlaggedAccounts = (props) => {
+const FlaggedAccounts = ({...props}) => {
   const {commenters} = props;
   const hasResults = commenters && !!commenters.length;
 
@@ -25,7 +25,6 @@ const FlaggedAccounts = (props) => {
               showRejectUsernameDialog={props.showRejectUsernameDialog}
               approveUser={props.approveUser}
               currentUser={props.currentUser}
-              viewUserDetail={props.viewUserDetail}
               />;
           })
           : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>

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

@@ -1,58 +0,0 @@
-.dataTable {
-  width: 100%;
-  border-left: none;
-  border-right: none;
-
-  th {
-    font-size: 1.1em;
-  }
-
-  th:nth-child(2), th:nth-child(3) {
-    width: 100px;
-  }
-}
-
-.button {
-  composes: buttonReset from 'coral-framework/styles/reset.css';
-  &:hover {
-    background-color: #D0D0D0;
-  }
-}
-
-.email {
-  display: block;
-}
-
-.selectField {
-  position: relative;
-  width: 150px;
-  height: 36px;
-  background: #2c2c2c;
-  padding: 10px 15px;
-  box-sizing: border-box;
-  color: white;
-  border-radius: 2px;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-
-  > div {
-    padding: 0;
-  }
-
-  i {
-    position: absolute;
-    top: 7px;
-    right: 7px;
-  }
-
-  input {
-    padding: 0;
-    font-size: 13px;
-    letter-spacing: 0.7px;
-    font-weight: 400;
-  }
-
-  &:hover {
-    cursor: pointer;
-   }
-}
-

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import {SelectField, Option} from 'react-mdl-selectfield';
-import styles from '../components/Table.css';
+import styles from '../components/Community.css';
 import t from 'coral-framework/services/i18n';
 
-export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
+export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange}) => (
   <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
@@ -21,7 +21,7 @@ export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onComm
       {commenters.map((row, i)=> (
         <tr key={i}>
           <td className="mdl-data-table__cell--non-numeric">
-            <button onClick={() => {viewUserDetail(row.id);}} className={styles.button}>{row.username}</button>
+            {row.username}
             <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
           </td>
           <td className="mdl-data-table__cell--non-numeric">

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

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './Community.css';
 
 import ActionButton from './ActionButton';
-import {username} from 'talk-plugin-flags/helpers/flagReasons';
+import {username} from 'coral-plugin-flags/helpers/flagReasons';
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 
@@ -38,7 +38,9 @@ const User = (props) => {
       <div className={styles.container}>
         <div className={styles.itemHeader}>
           <div className={styles.author}>
-            <button onClick={() => {props.viewUserDetail(user.id);}} className={styles.button}>{user.username}</button>
+            <span>
+              {user.username}
+            </span>
             {props.currentUser.id !== user.id &&
               <ActionsMenu icon="not_interested">
                 <ActionsMenuItem
@@ -80,12 +82,7 @@ const User = (props) => {
                       (action, j) => {
                         if (action.reason === action_sum.reason) {
                           return <p className={styles.flaggedByReason} key={j}>
-                            {action.user &&
-                              <button onClick={() => {props.viewUserDetail(action.user.id);}} className={styles.button}>
-                                {action.user.username}
-                              </button>
-                            }
-                            : {action.message ? action.message : 'n/a'}
+                            {action.user && action.user.username}: {action.message ? action.message : 'n/a'}
                           </p>;
                         }
                         return null;

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

@@ -17,7 +17,6 @@ import {
   showRejectUsernameDialog,
   hideRejectUsernameDialog
 } from '../../../actions/community';
-import {viewUserDetail} from '../../../actions/userDetail';
 
 import Community from '../components/Community';
 
@@ -87,8 +86,8 @@ export const withCommunityQuery = withQuery(gql`
 });
 
 const mapStateToProps = (state) => ({
-  community: state.community,
-  currentUser: state.auth.user,
+  community: state.community.toJS(),
+  currentUser: state.auth.toJS().user,
 });
 
 const mapDispatchToProps = (dispatch) =>
@@ -100,7 +99,6 @@ const mapDispatchToProps = (dispatch) =>
     hideRejectUsernameDialog,
     updateSorting,
     newPage,
-    viewUserDetail,
   }, dispatch);
 
 export default compose(

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

@@ -4,7 +4,6 @@ import {bindActionCreators} from 'redux';
 import {compose} from 'react-apollo';
 import {setRole, setCommenterStatus} from '../../../actions/community';
 import Table from '../components/Table';
-import {viewUserDetail} from '../../../actions/userDetail';
 
 class TableContainer extends Component {
 
@@ -23,14 +22,13 @@ class TableContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  commenters: state.community.accounts,
+  commenters: state.community.get('accounts'),
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     setCommenterStatus,
     setRole,
-    viewUserDetail,
   }, dispatch);
 
 export default compose(

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

@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 import t from 'coral-framework/services/i18n';
 import styles from './Configure.css';
 import {Button, Card} from 'coral-ui';
-import {BASE_URL} from 'coral-framework/constants/url';
 
 class EmbedLink extends Component {
 
@@ -25,14 +24,21 @@ class EmbedLink extends Component {
   }
 
   render () {
-    const coralJsUrl = [BASE_URL, '/embed.js'].join('');
+    const location = window.location;
+    const talkBaseUrl = [
+      location.protocol,
+      '//',
+      location.hostname,
+      location.port ? (`:${window.location.port}`) : ''
+    ].join('');
+    const coralJsUrl = [talkBaseUrl, '/embed.js'].join('');
     const nonce = String(Math.random()).slice(2);
     const streamElementId = `coral_talk_${nonce}`;
     const embedText = `
 <div id="${streamElementId}"></div>
 <script src="${coralJsUrl}" async onload="
   Coral.Talk.render(document.getElementById('${streamElementId}'), {
-    talk: '${BASE_URL}'
+    talk: '${talkBaseUrl}'
   });
 "></script>
     `.trim();

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

@@ -4,7 +4,7 @@ import t from 'coral-framework/services/i18n';
 import styles from './Configure.css';
 import {Checkbox, Textfield} from 'react-mdl';
 import {Card, Icon, TextArea} from 'coral-ui';
-import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
+import MarkdownEditor from 'coral-admin/src/components/MarkdownEditor';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,

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

@@ -23,8 +23,8 @@ class ConfigureContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  auth: state.auth,
-  settings: state.settings
+  auth: state.auth.toJS(),
+  settings: state.settings.toJS()
 });
 
 const mapDispatchToProps = (dispatch) =>

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

@@ -17,11 +17,11 @@ const ActivityWidget = ({assets}) => {
           ? assets.map((asset) => {
             return (
               <div className={styles.rowLinkify} key={asset.id}>
-                <Link className={styles.linkToModerate} to={`/admin/moderate/${asset.id}`}>Moderate</Link>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
                 <p className={styles.widgetCount}>{asset.commentCount}</p>
-                <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
+                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
                   <p className={styles.assetTitle}>{asset.title}</p>
-                </a>
+                </Link>
                 <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
               </div>
             );

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

@@ -5,24 +5,17 @@ import {Icon} from 'coral-ui';
 import t from 'coral-framework/services/i18n';
 const refreshIntervalSeconds = 60 * 5;
 
-// TODO: refactor out storage code into redux.
-
 class CountdownTimer extends React.Component {
 
-  static contextTypes = {
-    storage: PropTypes.object,
-  };
-
   static propTypes = {
     handleTimeout: PropTypes.func.isRequired
   }
 
-  constructor (props, context) {
-    super(props, context);
-    const {storage} = context;
+  constructor (props) {
+    super(props);
     try {
-      if (storage && storage.getItem('coral:dashboardNote') === null) {
-        storage.setItem('coral:dashboardNote', 'show');
+      if (window.localStorage.getItem('coral:dashboardNote') === null) {
+        window.localStorage.setItem('coral:dashboardNote', 'show');
       }
     } catch (e) {
 
@@ -31,7 +24,7 @@ class CountdownTimer extends React.Component {
 
     this.state = {
       secondsUntilRefresh: refreshIntervalSeconds,
-      dashboardNote: (storage && storage.getItem('coral:dashboardNote')) || 'show'
+      dashboardNote: window.localStorage.getItem('coral:dashboardNote') || 'show'
     };
   }
 
@@ -61,11 +54,8 @@ class CountdownTimer extends React.Component {
   }
 
   dismissNote = () => {
-    const {storage} = this.context;
     try {
-      if (storage) {
-        storage.setItem('coral:dashboardNote', 'hide');
-      }
+      window.localStorage.setItem('coral:dashboardNote', 'hide');
     } catch (e) {
 
       // when setItem fails in Safari Private mode
@@ -74,8 +64,7 @@ class CountdownTimer extends React.Component {
   }
 
   render () {
-    const {storage} = this.context;
-    const hideReloadNote = (storage && storage.getItem('coral:dashboardNote') === 'hide') ||
+    const hideReloadNote = window.localStorage.getItem('coral:dashboardNote') === 'hide' ||
       this.state.dashboardNote === 'hide'; // for Safari Incognito
     return (
       <p

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

@@ -24,11 +24,11 @@ const FlagWidget = ({assets}) => {
 
             return (
               <div className={styles.rowLinkify} key={asset.id}>
-                <Link className={styles.linkToModerate} to={`/admin/moderate/reported/${asset.id}`}>Moderate</Link>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
                 <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
-                <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
+                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
                   <p className={styles.assetTitle}>{asset.title}</p>
-                </a>
+                </Link>
                 <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
               </div>
             );

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

@@ -19,11 +19,11 @@ const LikeWidget = ({assets}) => {
             const likeSummary = asset.action_summaries.find((s) => s.type === 'LikeAssetActionSummary');
             return (
               <div className={styles.rowLinkify} key={asset.id}>
-                <Link className={styles.linkToModerate} to={`/admin/moderate/${asset.id}`}>Moderate</Link>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
                 <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
-                <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
+                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
                   <p className={styles.assetTitle}>{asset.title}</p>
-                </a>
+                </Link>
                 <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
               </div>
             );

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

@@ -22,10 +22,10 @@ class DashboardContainer extends React.Component {
 
 export const witDashboardQuery = withQuery(gql`
   query CoralAdmin_Dashboard($from: Date!, $to: Date!) {
-    assetsByFlag: assetMetrics(from: $from, to: $to, sortBy: FLAG) {
+    assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) {
       ...CoralAdmin_Metrics
     }
-    assetsByActivity: assetMetrics(from: $from, to: $to, sortBy: ACTIVITY) {
+    assetsByActivity: assetMetrics(from: $from, to: $to, sort: ACTIVITY) {
       ...CoralAdmin_Metrics
     }
   }
@@ -54,8 +54,8 @@ export const witDashboardQuery = withQuery(gql`
 
 const mapStateToProps = (state) => {
   return {
-    settings: state.settings,
-    moderation: state.moderation
+    settings: state.settings.toJS(),
+    moderation: state.moderation.toJS()
   };
 };
 

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

@@ -35,7 +35,7 @@ InstallContainer.contextTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  install: state.install
+  install: state.install.toJS()
 });
 
 const mapDispatchToProps = (dispatch) =>

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

@@ -1,51 +1,27 @@
 import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
+import Linkify from 'react-linkify';
 
 import {Icon} from 'coral-ui';
-import ReplyBadge from 'coral-admin/src/components/ReplyBadge';
-import FlagBox from 'coral-admin/src/components/FlagBox';
+import FlagBox from './FlagBox';
 import styles from './styles.css';
-import CommentType from 'coral-admin/src/components/CommentType';
-import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
+import CommentType from './CommentType';
+import Highlighter from 'react-highlight-words';
 import Slot from 'coral-framework/components/Slot';
 import {getActionSummary} from 'coral-framework/utils';
 import ActionButton from 'coral-admin/src/components/ActionButton';
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
-import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
-import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
-import {getCommentType} from 'coral-admin/src/utils/comment';
+import {murmur3} from 'murmurhash-js';
+import {CSSTransitionGroup} from 'react-transition-group';
+
+const linkify = new Linkify();
 
 import t, {timeago} from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
 
-  showSuspendUserDialog = () => {
-    const {comment, showSuspendUserDialog} = this.props;
-    return showSuspendUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
-  };
-
-  showBanUserDialog = () => {
-    const {comment, showBanUserDialog} = this.props;
-    return showBanUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
-  };
-
-  viewUserDetail = () => {
-    const {viewUserDetail, comment} = this.props;
-    return viewUserDetail(comment.user.id);
-  };
-
   render() {
     const {
       actions = [],
@@ -53,84 +29,141 @@ class Comment extends React.Component {
       viewUserDetail,
       suspectWords,
       bannedWords,
+      minimal,
       selected,
+      toggleSelect,
       className,
-      data,
-      root,
-      currentUserId,
-      currentAsset,
-      acceptComment,
-      rejectComment,
+      ...props
     } = this.props;
 
+    const links = linkify.getMatches(comment.body);
+    const linkText = links ? links.map((link) => link.raw) : [];
     const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
-    const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
-    const commentType = getCommentType(comment);
+    const flagActions =
+      comment.actions &&
+      comment.actions.filter((a) => a.__typename === 'FlagAction');
+    let commentType = '';
+    if (comment.status === 'PREMOD') {
+      commentType = 'premod';
+    } else if (flagActions && flagActions.length) {
+      commentType = 'flagged';
+    }
 
-    let selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
+    // 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(comment.body);
+      })
+      .concat(linkText);
 
-    const queryData = {root, comment, asset: comment.asset};
+    let selectionStateCSS;
+    if (minimal) {
+      selectionStateCSS = selected ? styles.minimalSelection : '';
+    } else {
+      selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
+    }
+
+    const showSuspenUserDialog = () => props.showSuspendUserDialog({
+      userId: comment.user.id,
+      username: comment.user.username,
+      commentId: comment.id,
+      commentStatus: comment.status,
+    });
+
+    const showBanUserDialog = () => props.showBanUserDialog({
+      userId: comment.user.id,
+      username: comment.user.username,
+      commentId: comment.id,
+      commentStatus: comment.status,
+    });
 
     return (
       <li
-        tabIndex={0}
-        className={cn(className, 'mdl-card', selectionStateCSS, styles.Comment, styles.listItem, {[styles.selected]: selected})}
+        tabIndex={props.index}
+        className={cn(className, 'mdl-card', selectionStateCSS, styles.Comment, styles.listItem, {[styles.minimal]: minimal, [styles.selected]: selected})}
       >
         <div className={styles.container}>
           <div className={styles.itemHeader}>
             <div className={styles.author}>
               {
-                (
-                  <span className={styles.username} onClick={this.viewUserDetail}>
+                !minimal && (
+                  <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
                     {comment.user.username}
                   </span>
                 )
               }
+              {
+                minimal && typeof selected === 'boolean' && typeof toggleSelect === 'function' && (
+                  <input
+                    className={styles.bulkSelectInput}
+                    type='checkbox'
+                    value={comment.id}
+                    checked={selected}
+                    onChange={(e) => toggleSelect(e.target.value, e.target.checked)} />
+                )
+              }
               <span className={styles.created}>
-                {timeago(comment.created_at)}
+                {timeago(comment.created_at || Date.now() - props.index * 60 * 1000)}
               </span>
               {
                 (comment.editing && comment.editing.edited)
                 ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
                 : null
               }
-              {currentUserId !== comment.user.id &&
+              {props.currentUserId !== comment.user.id &&
                 <ActionsMenu icon="not_interested">
                   <ActionsMenuItem
                     disabled={comment.user.status === 'BANNED'}
-                    onClick={this.showSuspendUserDialog}>
+                    onClick={showSuspenUserDialog}>
                     Suspend User</ActionsMenuItem>
                   <ActionsMenuItem
                     disabled={comment.user.status === 'BANNED'}
-                    onClick={this.showBanUserDialog}>
+                    onClick={showBanUserDialog}>
                     Ban User
                   </ActionsMenuItem>
                 </ActionsMenu>
               }
-              <div className={styles.adminCommentInfoBar}>
-                {comment.hasParent && <ReplyBadge/>}
-                <CommentType type={commentType} className={styles.commentType}/>
-                <Slot
-                  fill="adminCommentInfoBar"
-                  data={data}
-                  queryData={queryData}
-                />
-              </div>
+              <CommentType type={commentType} />
             </div>
+            {comment.user.status === 'banned'
+              ? <span className={styles.banned}>
+                  <Icon name="error_outline" />
+                  {t('comment.banned_user')}
+                </span>
+              : null}
+              <Slot
+                data={props.data}
+                root={props.root}
+                fill="adminCommentInfoBar"
+                comment={comment}
+              />
           </div>
-
           <div className={styles.moderateArticle}>
             Story: {comment.asset.title}
-            {!currentAsset &&
-              <Link to={`/admin/moderate/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
+            {!props.currentAsset &&
+              <Link to={`/admin/moderate/all/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
           </div>
-          <CommentAnimatedEdit body={comment.body}>
-            <div className={styles.itemBody}>
+          <CSSTransitionGroup
+            component={'div'}
+            style={{position: 'relative'}}
+            transitionName={{
+              enter: styles.bodyEnter,
+              enterActive: styles.bodyEnterActive,
+              leave: styles.bodyLeave,
+              leaveActive: styles.bodyLeaveActive,
+            }}
+            transitionEnter={true}
+            transitionLeave={true}
+            transitionEnterTimeout={3600}
+            transitionLeaveTimeout={2800}
+          >
+            <div className={styles.itemBody} key={murmur3(comment.body)}>
               <p className={styles.body}>
-                <CommentBodyHighlighter
-                  suspectWords={suspectWords}
-                  bannedWords={bannedWords}
-                  body={comment.body}
+                <Highlighter
+                  searchWords={searchWords}
+                  textToHighlight={comment.body}
                 />
                 {' '}
                 <a
@@ -142,16 +175,17 @@ class Comment extends React.Component {
                 </a>
               </p>
               <Slot
+                data={props.data}
+                root={props.root}
                 fill="adminCommentContent"
-                data={data}
-                queryData={queryData}
+                comment={comment}
               />
               <div className={styles.sideActions}>
-                <IfHasLink text={comment.body}>
-                  <span className={styles.hasLinks}>
-                    <Icon name="error_outline" /> Contains Link
-                  </span>
-                </IfHasLink>
+                {links
+                  ? <span className={styles.hasLinks}>
+                      <Icon name="error_outline" /> Contains Link
+                    </span>
+                  : null}
                 <div className={`actions ${styles.actions}`}>
                   {actions.map((action, i) => {
                     const active =
@@ -159,6 +193,7 @@ class Comment extends React.Component {
                       (action === 'APPROVE' && comment.status === 'ACCEPTED');
                     return (
                       <ActionButton
+                        minimal={minimal}
                         key={i}
                         type={action}
                         user={comment.user}
@@ -167,34 +202,36 @@ class Comment extends React.Component {
                         acceptComment={() =>
                           (comment.status === 'ACCEPTED'
                             ? null
-                            : acceptComment({commentId: comment.id}))}
+                            : props.acceptComment({commentId: comment.id}))}
                         rejectComment={() =>
                           (comment.status === 'REJECTED'
                             ? null
-                            : rejectComment({commentId: comment.id}))}
+                            : props.rejectComment({commentId: comment.id}))}
                       />
                     );
                   })}
                 </div>
                 <Slot
+                  data={props.data}
+                  root={props.root}
                   fill="adminSideActions"
-                  data={data}
-                  queryData={queryData}
+                  comment={comment}
                 />
               </div>
             </div>
-          </CommentAnimatedEdit>
+          </CSSTransitionGroup>
         </div>
         <Slot
+          data={props.data}
+          root={props.root}
           fill="adminCommentDetailArea"
-          data={data}
-          queryData={queryData}
+          comment={comment}
         />
         {flagActions && flagActions.length
           ? <FlagBox
               actions={flagActions}
               actionSummaries={flagActionSummaries}
-              viewUserDetail={viewUserDetail}
+              viewUserDetail={() => viewUserDetail(comment.user.id)}
             />
           : null}
       </li>
@@ -203,6 +240,7 @@ class Comment extends React.Component {
 }
 
 Comment.propTypes = {
+  minimal: PropTypes.bool,
   viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
@@ -213,6 +251,7 @@ Comment.propTypes = {
   showBanUserDialog: PropTypes.func.isRequired,
   showSuspendUserDialog: PropTypes.func.isRequired,
   currentUserId: PropTypes.string.isRequired,
+  toggleSelect: PropTypes.func,
   comment: PropTypes.shape({
     body: PropTypes.string.isRequired,
     action_summaries: PropTypes.array,

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

@@ -1,16 +1,16 @@
 .count {
   display: inline-block;
-  background: #616161;
+  background: #989797;
   margin: 2px;
   vertical-align: middle;
-  padding: 1px 5px;
+  padding: 1px 7px;
   border-radius: 2px;
   margin-left: 2px;
-  line-height: 18px;
+  line-height: 20px;
   box-sizing: border-box;
-  height: 18px;
+  height: 21px;
   right: 0;
-  margin-top: 0px;
+  margin-top: -2px;
   font-size: 12px;
   color: white;
 }

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

@@ -1,19 +1,22 @@
 .commentType {
-  display: inline-block;
+  position: absolute;
+  right: 15px;
+  top: 11px;
   color: white;
   background: grey;
+  height: 32px;
   box-sizing: border-box;
-  padding: 2px 5px;
+  line-height: 29px;
+  padding: 2px 8px 2px 26px;
+  border-radius: 2px;
   font-size: 12px;
-  height: 24px;
-  letter-spacing: 0.4px;
-  line-height: 22px;
-  
-  > i {
+
+  i {
     font-size: 14px;
-    vertical-align: text-top;
+    position: absolute;
+    left: 6px;
+    top: 8px;
     margin: 0;
-    margin-right: 4px;
   }
 
   &.premod {

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

@@ -1,13 +1,12 @@
 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)}>
+    <span className={`${styles.commentType} ${styles[typeData.className]}`}>
       <Icon name={typeData.icon}/>{typeData.text}
     </span>
   );

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

@@ -1,6 +1,6 @@
 .flagBox {
   border-top: 1px solid rgba(66, 66, 66, 0.12);
-  margin-top: 10px;
+
   .container {
     padding: 0 14px;
   }

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

@@ -61,11 +61,9 @@ class FlagBox extends Component {
                       <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>
-                            }
+                            <a className={styles.username} onClick={viewUserDetail}>
+                              {action.user.username}
+                            </a>
                             {action.message}
                           </li>
                         )}

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

@@ -1,10 +1,9 @@
 import React, {PropTypes} from 'react';
 import {Button} from 'coral-ui';
-import styles from './LoadMore.css';
-import cn from 'classnames';
+import styles from './styles.css';
 
-const LoadMore = ({loadMore, showLoadMore, className, ...rest}) =>
-  <div {...rest} className={cn(className, styles.loadMoreContainer)}>
+const LoadMore = ({loadMore, showLoadMore}) =>
+  <div className={styles.loadMoreContainer}>
     {
       showLoadMore && <Button
         className={styles.loadMore}

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

@@ -6,8 +6,8 @@ import ModerationQueue from './ModerationQueue';
 import ModerationMenu from './ModerationMenu';
 import ModerationHeader from './ModerationHeader';
 import ModerationKeysModal from '../../../components/ModerationKeysModal';
+import UserDetail from '../containers/UserDetail';
 import StorySearch from '../containers/StorySearch';
-import Slot from 'coral-framework/components/Slot';
 
 export default class Moderation extends Component {
   constructor() {
@@ -59,7 +59,8 @@ export default class Moderation extends Component {
   }
 
   getComments = () => {
-    const {root, activeTab} = this.props;
+    const {root, route} = this.props;
+    const activeTab = route.path === ':id' ? 'premod' : route.path;
     return root[activeTab].nodes;
   }
 
@@ -101,19 +102,30 @@ export default class Moderation extends Component {
   }
 
   render () {
-    const {root, data, moderation, settings, viewUserDetail, hideUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
+
+    const {root, moderation, settings, viewUserDetail, hideUserDetail, activeTab, ...props} = this.props;
+    const assetId = this.props.params.id;
     const {asset} = root;
-    const assetId = asset && asset.id;
 
     const comments = root[activeTab];
-
-    const activeTabCount = root[`${activeTab}Count`];
-    const menuItems = Object.keys(queueConfig).map((queue) => ({
-      key: queue,
-      name: queueConfig[queue].name,
-      icon: queueConfig[queue].icon,
-      count: root[`${queue}Count`]
-    }));
+    let activeTabCount;
+    switch(activeTab) {
+    case 'all':
+      activeTabCount = root.allCount;
+      break;
+    case 'accepted':
+      activeTabCount = root.acceptedCount;
+      break;
+    case 'premod':
+      activeTabCount = root.premodCount;
+      break;
+    case 'flagged':
+      activeTabCount = root.flaggedCount;
+      break;
+    case 'rejected':
+      activeTabCount = root.rejectedCount;
+      break;
+    }
 
     return (
       <div>
@@ -125,11 +137,13 @@ export default class Moderation extends Component {
         />
         <ModerationMenu
           asset={asset}
-          getModPath={getModPath}
-          items={menuItems}
+          allCount={root.allCount}
+          acceptedCount={root.acceptedCount}
+          premodCount={root.premodCount}
+          rejectedCount={root.rejectedCount}
+          flaggedCount={root.flaggedCount}
           selectSort={this.props.setSortOrder}
           sort={this.props.moderation.sortOrder}
-          activeTab={activeTab}
         />
         <ModerationQueue
           data={this.props.data}
@@ -159,20 +173,24 @@ export default class Moderation extends Component {
           open={moderation.modalOpen}
           onClose={this.onClose}/>
 
+        {moderation.userDetailId && (
+          <UserDetail
+            id={moderation.userDetailId}
+            hideUserDetail={hideUserDetail}
+            bannedWords={settings.wordlist.banned}
+            suspectWords={settings.wordlist.suspect}
+            showBanUserDialog={props.showBanUserDialog}
+            showSuspendUserDialog={props.showSuspendUserDialog}
+            acceptComment={props.acceptComment}
+            rejectComment={props.rejectComment} />
+        )}
+
         <StorySearch
           assetId={assetId}
           moderation={this.props.moderation}
           closeSearch={this.closeSearch}
           storySearchChange={this.props.storySearchChange}
         />
-
-        <Slot
-          data={data}
-          queryData={{root, asset}}
-          activeTab={activeTab}
-          handleCommentChange={handleCommentChange}
-          fill='adminModeration'
-        />
       </div>
     );
   }

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

@@ -4,40 +4,60 @@ import styles from './styles.css';
 import {SelectField, Option} from 'react-mdl-selectfield';
 import {Icon} from 'coral-ui';
 import {Link} from 'react-router';
-import cn from 'classnames';
 
 import t from 'coral-framework/services/i18n';
 
-const ModerationMenu = ({
-  asset = {},
-  items,
-  selectSort,
-  sort,
-  getModPath,
-  activeTab
-}) => {
+const ModerationMenu = (
+  {asset, allCount, acceptedCount, premodCount, rejectedCount, flaggedCount, selectSort, sort}
+) => {
+
+  function getPath (type) {
+    return asset ? `/admin/moderate/${type}/${asset.id}` : `/admin/moderate/${type}`;
+  }
+
   return (
     <div className="mdl-tabs">
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
         <div className={styles.tabBarPadding} />
         <div>
-          {items.map((queue) =>
-            <Link
-              key={queue.key}
-              to={getModPath(queue.key, asset.id)}
-              className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === queue.key})}
-              activeClassName={styles.active}>
-              <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name} <CommentCount count={queue.count} />
-            </Link>
-          )}
+          <Link
+            to={getPath('all')}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            <Icon name='question_answer' className={styles.tabIcon} /> {t('modqueue.all')} <CommentCount count={allCount} />
+          </Link>
+          <Link
+            to={getPath('premod')}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            <Icon name='access_time' className={styles.tabIcon} /> {t('modqueue.premod')} <CommentCount count={premodCount} />
+          </Link>
+          <Link
+            to={getPath('flagged')}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            <Icon name='flag' className={styles.tabIcon} /> {t('modqueue.flagged')} <CommentCount count={flaggedCount} />
+          </Link>
+          <Link
+            to={getPath('accepted')}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            <Icon name='check' className={styles.tabIcon} /> {t('modqueue.approved')} <CommentCount count={acceptedCount} />
+          </Link>
+          <Link
+            to={getPath('rejected')}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            <Icon name='close' className={styles.tabIcon} /> {t('modqueue.rejected')} <CommentCount count={rejectedCount} />
+          </Link>
         </div>
         <SelectField
           className={styles.selectField}
           label="Sort"
           value={sort}
           onChange={(sort) => selectSort(sort)}>
-          <Option value={'DESC'}>{t('modqueue.newest_first')}</Option>
-          <Option value={'ASC'}>{t('modqueue.oldest_first')}</Option>
+          <Option value={'REVERSE_CHRONOLOGICAL'}>{t('modqueue.newest_first')}</Option>
+          <Option value={'CHRONOLOGICAL'}>{t('modqueue.oldest_first')}</Option>
         </SelectField>
       </div>
     </div>
@@ -45,7 +65,10 @@ const ModerationMenu = ({
 };
 
 ModerationMenu.propTypes = {
-  items: PropTypes.array.isRequired,
+  allCount: PropTypes.number.isRequired,
+  premodCount: PropTypes.number.isRequired,
+  rejectedCount: PropTypes.number.isRequired,
+  flaggedCount: PropTypes.number.isRequired,
   asset: PropTypes.shape({
     id: PropTypes.string
   })

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

@@ -3,8 +3,8 @@ import React, {PropTypes} from 'react';
 import Comment from '../containers/Comment';
 import styles from './styles.css';
 import EmptyCard from '../../../components/EmptyCard';
-import {actionsMap} from '../../../utils/moderationQueueActionsMap';
-import LoadMore from '../../../components/LoadMore';
+import {actionsMap} from '../helpers/moderationQueueActionsMap';
+import LoadMore from './LoadMore';
 import t from 'coral-framework/services/i18n';
 import {CSSTransitionGroup} from 'react-transition-group';
 
@@ -85,6 +85,7 @@ class ModerationQueue extends React.Component {
                 data={this.props.data}
                 root={this.props.root}
                 key={comment.id}
+                index={i}
                 comment={comment}
                 selected={i === selectedIndex}
                 suspectWords={props.suspectWords}

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

@@ -74,7 +74,7 @@
   cursor: pointer;
   display: block;
   text-decoration: none;
-  min-height: 50px;
+  height: 50px;
   box-sizing: border-box;
   transition: background-color 400ms;
 

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

@@ -64,7 +64,6 @@ const StorySearch = (props) => {
                 ? <Spinner />
                 : assets.map((story, i) => {
                   const storyOpen = story.closedAt === null || new Date(story.closedAt) > new Date();
-
                   return <Story
                     key={i}
                     id={story.id}

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

@@ -0,0 +1,81 @@
+.copyButton {
+  float: right;
+  top: -10px;
+}
+
+.memberSince {
+  clear: both;
+}
+
+.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;
+  }
+}
+
+.profileEmail {
+  border: none;
+  background-color: transparent;
+  font-size: 16px;
+  outline: none;
+  width: calc(100% - 90px);
+}
+
+.commentStatuses {
+  padding: 10px 0 0 0;
+  margin: 0;
+  height: 52px;
+  list-style: none;
+  box-sizing: border-box;
+
+  li {
+    display: inline-block;
+    margin-right: 10px;
+    cursor: pointer;
+    padding: 0 10px;
+  }
+}
+
+.active {
+  font-weight: bold;
+  border-bottom: 3px solid #F36451;
+}
+
+.bulkActionGroup {
+  height: 52px;
+  background-color: #efefef;
+
+  i {
+    margin-right: 0;
+  }
+
+  .bulkAction {
+    display: inline-block;
+    width: 48px;
+    height: 48px;
+    transform: scale(.7);
+    min-width: 0;
+  }
+
+  .bulkAction:last-child {
+    margin-left: -10px;
+  }
+}

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

@@ -0,0 +1,172 @@
+import React, {PropTypes} from 'react';
+import Comment from './Comment';
+import styles from './UserDetail.css';
+import {Button, Drawer} from 'coral-ui';
+import {Slot} from 'coral-framework/components';
+import ButtonCopyToClipboard from './ButtonCopyToClipboard';
+import {actionsMap} from '../helpers/moderationQueueActionsMap';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+
+export default class UserDetail extends React.Component {
+
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    hideUserDetail: PropTypes.func.isRequired,
+    root: PropTypes.object.isRequired,
+    bannedWords: PropTypes.array.isRequired,
+    suspectWords: PropTypes.array.isRequired,
+    showBanUserDialog: PropTypes.func.isRequired,
+    showSuspendUserDialog: PropTypes.func.isRequired,
+    acceptComment: PropTypes.func.isRequired,
+    rejectComment: PropTypes.func.isRequired,
+    changeStatus: PropTypes.func.isRequired,
+    toggleSelect: PropTypes.func.isRequired,
+    bulkAccept: PropTypes.func.isRequired,
+    bulkReject: PropTypes.func.isRequired,
+  }
+
+  rejectThenReload = (info) => {
+    this.props.rejectComment(info).then(() => {
+      this.props.data.refetch();
+    });
+  }
+
+  acceptThenReload = (info) => {
+    this.props.acceptComment(info).then(() => {
+      this.props.data.refetch();
+    });
+  }
+
+  showAll = () => {
+    this.props.changeStatus('all');
+  }
+
+  showRejected = () => {
+    this.props.changeStatus('rejected');
+  }
+
+  render () {
+    const {
+      root: {
+        user,
+        totalComments,
+        rejectedComments,
+        comments: {nodes}
+      },
+      moderation: {
+        userDetailActiveTab: tab,
+        userDetailSelectedIds: selectedIds
+      },
+      bannedWords,
+      suspectWords,
+      toggleSelect,
+      bulkAccept,
+      bulkReject,
+      showBanUserDialog,
+      showSuspendUserDialog,
+      hideUserDetail
+    } = 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)) {
+
+      // if totalComments is 0, you're dividing by zero, which is naughty
+      rejectedPercent = 0;
+    }
+
+    return (
+      <ClickOutside onClickOutside={hideUserDetail}>
+        <Drawer onClose={hideUserDetail}>
+          <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} />
+          </div>
+
+          <Slot
+            fill="userProfile"
+            data={this.props.data}
+            root={this.props.root}
+            user={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>
+          {
+            selectedIds.length === 0
+            ? (
+              <ul className={styles.commentStatuses}>
+                <li className={tab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
+                <li className={tab === '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>
+                {`${selectedIds.length} comments selected`}
+              </div>
+            )
+          }
+
+          <div>
+            {
+              nodes.map((comment, i) => {
+                const status = comment.action_summaries ? 'FLAGGED' : comment.status;
+                const selected = selectedIds.indexOf(comment.id) !== -1;
+                return <Comment
+                  key={comment.id}
+                  index={i}
+                  comment={comment}
+                  selected={false}
+                  suspectWords={suspectWords}
+                  bannedWords={bannedWords}
+                  viewUserDetail={() => {}}
+                  actions={actionsMap[status]}
+                  showBanUserDialog={showBanUserDialog}
+                  showSuspendUserDialog={showSuspendUserDialog}
+                  acceptComment={this.acceptThenReload}
+                  rejectComment={this.rejectThenReload}
+                  selected={selected}
+                  toggleSelect={toggleSelect}
+                  currentAsset={null}
+                  currentUserId={this.props.id}
+                  minimal={true} />;
+              })
+            }
+          </div>
+        </Drawer>
+      </ClickOutside>
+    );
+  }
+}

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

@@ -18,7 +18,7 @@
 
 .tab {
   flex: 1;
-  color: #BDBDBD;
+  color: #C0C0C0;
   text-transform: capitalize;
   font-weight: 100;
   font-size: 14px;
@@ -29,7 +29,7 @@
   margin-right: 20px;
   &:hover {
     color: white;
-    /*border-bottom: solid 2px #F36451;*/
+    border-bottom: solid 2px #F36451;
     box-sizing: border-box;
   }
 }
@@ -111,7 +111,7 @@ span {
       color: white;
       text-transform: capitalize;
       font-weight: 400;
-      font-size: 20px;
+      font-size: 15px;
       letter-spacing: 1px;
       transition: background-color 200ms;
       opacity: 1;
@@ -173,7 +173,7 @@ span {
   border-bottom: 1px solid #e0e0e0;
   font-size: 18px;
   width: 100%;
-  max-width: 650px;
+  max-width: 700px;
   min-width: 400px;
   margin: 0 auto;
   position: relative;
@@ -213,12 +213,11 @@ span {
 
     .author {
       font-weight: 300;
-      width: 100%;
+      min-width: 230px;
       display: flex;
       align-items: center;
       color: #262626;
       font-size: 16px;
-      position: relative;
     }
   }
 
@@ -397,6 +396,26 @@ span {
    }
 }
 
+.loadMoreContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+};
+
+.loadMore {
+  width: 100%;
+  text-align: center;
+  color: #FFF;
+  max-width: 660px;
+  margin-bottom: 30px;
+  background-color: #2376D8;
+  cursor: pointer;
+}
+
+.loadMore:hover {
+  background-color: #4399FF;
+}
+
 .tabIcon {
   position: relative;
   top: 3px;
@@ -438,6 +457,18 @@ span {
   }
 }
 
+.minimal {
+  margin: 0;
+}
+
+.minimalSelection {
+  background-color: #ecf4ff;
+}
+
+.bulkSelectInput {
+  cursor: pointer;
+}
+
 .emptyCardContainer {
   margin-top: 16px;
 }
@@ -460,6 +491,31 @@ span {
   opacity: 1.0;
 }
 
+.bodyLeave {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  background-color: white;
+  opacity: 1.0;
+  transition: background 400ms, opacity 800ms 1600ms;
+  pointer-events: none;
+}
+
+.bodyLeaveActive {
+  opacity: 0;
+  background-color: rgba(255,255,0, 0.2);
+}
+
+.bodyEnter {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.bodyEnterActive {
+  opacity: 1.0;
+  transition: opacity 800ms 2400ms;
+}
+
 .editedMarker {
   font-style: italic;
   color: #666;
@@ -470,13 +526,5 @@ span {
 
 .searchTrigger {
   position: relative;
-  top: .2em;
-}
-
-.adminCommentInfoBar {
-  min-width: 100px;
-  position: absolute;
-  right: 0px;
-  top: 0px;
-  text-align: right;
+  top: .3em;
 }

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

@@ -1,21 +1,22 @@
 import {gql} from 'react-apollo';
 import Comment from '../components/Comment';
+import {getSlotsFragments} from 'coral-framework/helpers/plugins';
 import withFragments from 'coral-framework/hocs/withFragments';
-import {getSlotFragmentSpreads} from 'coral-framework/utils';
 
-const slots = [
+const pluginFragments = getSlotsFragments([
   'adminCommentInfoBar',
   'adminCommentContent',
   'adminSideActions',
   'adminCommentDetailArea',
-];
+]);
 
 export default withFragments({
   root: gql`
     fragment CoralAdmin_ModerationComment_root on RootQuery {
       __typename
-      ${getSlotFragmentSpreads(slots, 'root')}
+      ${pluginFragments.spreads('root')}
     }
+    ${pluginFragments.definitions('root')}
     `,
   comment: gql`
     fragment CoralAdmin_ModerationComment_comment on Comment {
@@ -37,27 +38,22 @@ export default withFragments({
         count
         ... on FlagActionSummary {
           reason
-          __typename
         }
       }
       actions {
         ... on FlagAction {
-          id
           reason
           message
           user {
-            id
             username
           }
-          __typename
         }
-        __typename
       }
       editing {
         edited
       }
-      hasParent
-      ${getSlotFragmentSpreads(slots, 'comment')}
+      ${pluginFragments.spreads('comment')}
     }
+    ${pluginFragments.definitions('comment')}
   `
 })(Comment);

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

@@ -8,78 +8,37 @@ import t from 'coral-framework/services/i18n';
 import update from 'immutability-helper';
 import truncate from 'lodash/truncate';
 import NotFoundAsset from '../components/NotFoundAsset';
-import {isPremod, getModPath} from '../../../utils';
 
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import {handleCommentChange} from '../graphql';
+import {handleCommentChange} from '../../../graphql/utils';
 
 import {fetchSettings} from 'actions/settings';
 import {showBanUserDialog} from 'actions/banUserDialog';
 import {showSuspendUserDialog} from 'actions/suspendUserDialog';
-import {viewUserDetail} from '../../../actions/userDetail';
 import {
   toggleModal,
   singleView,
   hideShortcutsNote,
   toggleStorySearch,
+  viewUserDetail,
+  hideUserDetail,
   setSortOrder,
   storySearchChange,
   clearState
 } from 'actions/moderation';
-import withQueueConfig from '../hoc/withQueueConfig';
-import {notify} from 'coral-framework/actions/notification';
 
 import {Spinner} from 'coral-ui';
 import Moderation from '../components/Moderation';
 import Comment from './Comment';
-import baseQueueConfig from '../queueConfig';
 
 function prepareNotificationText(text) {
   return truncate(text, {length: 50}).replace('\n', ' ');
 }
 
-function getAssetId(props) {
-  if (props.params.tabOrId && !(props.params.tabOrId in props.queueConfig)) {
-    return props.params.tabOrId;
-  }
-  return props.params.id || null;
-}
-
-function getTab(props) {
-  if (props.params.tabOrId && props.params.tabOrId in props.queueConfig) {
-    return props.params.tabOrId;
-  }
-  return props.params.tab || null;
-}
-
 class ModerationContainer extends Component {
   subscriptions = [];
 
-  handleCommentChange = (root, comment, notifyText) => {
-    return handleCommentChange(
-      root,
-      comment,
-      this.props.data.variables.sortOrder,
-      () => notifyText && this.props.notify('info', notifyText),
-      this.props.queueConfig,
-      this.activeTab
-    );
-  };
-
-  get activeTab() {
-
-    const {root: {asset, settings}} = this.props;
-    const id = getAssetId(this.props);
-    const tab = getTab(this.props);
-
-    // Grab premod from asset or from settings
-    const premod = !id ? settings.moderation : asset.settings.moderation;
-
-    const queue = isPremod(premod) ? 'premod' : 'new';
-    const activeTab = tab ? tab : queue;
-
-    return activeTab;
-  }
+  get activeTab() { return this.props.route.path; }
 
   subscribeToUpdates(variables = this.props.data.variables) {
     const sub1 = this.props.data.subscribeToMore({
@@ -87,10 +46,15 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentAccepted: comment}}}) => {
         const user = comment.status_history[comment.status_history.length - 1].assigned_by;
-        const notifyText = this.props.auth.user.id === user.id
-          ? ''
-          : t('modqueue.notify_accepted', user.username, prepareNotificationText(comment.body));
-        return this.handleCommentChange(prev, comment, notifyText);
+        const sort = this.props.moderation.sortOrder;
+        const notify = this.props.auth.user.id === user.id
+          ? {}
+          : {
+            activeQueue: this.activeTab,
+            text: t('modqueue.notify_accepted', user.username, prepareNotificationText(comment.body)),
+            anyQueue: false,
+          };
+        return handleCommentChange(prev, comment, sort, notify);
       },
     });
 
@@ -99,10 +63,15 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentRejected: comment}}}) => {
         const user = comment.status_history[comment.status_history.length - 1].assigned_by;
-        const notifyText = this.props.auth.user.id === user.id
-          ? ''
-          : t('modqueue.notify_rejected', user.username, prepareNotificationText(comment.body));
-        return this.handleCommentChange(prev, comment, notifyText);
+        const sort = this.props.moderation.sortOrder;
+        const notify = this.props.auth.user.id === user.id
+          ? {}
+          : {
+            activeQueue: this.activeTab,
+            text: t('modqueue.notify_rejected', user.username, prepareNotificationText(comment.body)),
+            anyQueue: false,
+          };
+        return handleCommentChange(prev, comment, sort, notify);
       },
     });
 
@@ -110,8 +79,13 @@ class ModerationContainer extends Component {
       document: COMMENT_EDITED_SUBSCRIPTION,
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentEdited: comment}}}) => {
-        const notifyText = t('modqueue.notify_edited', comment.user.username, prepareNotificationText(comment.body));
-        return this.handleCommentChange(prev, comment, notifyText);
+        const sort = this.props.moderation.sortOrder;
+        const notify = {
+          activeQueue: this.activeTab,
+          text: t('modqueue.notify_edited', comment.user.username, prepareNotificationText(comment.body)),
+          anyQueue: false,
+        };
+        return handleCommentChange(prev, comment, sort, notify);
       },
     });
 
@@ -120,8 +94,13 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentFlagged: comment}}}) => {
         const user = comment.actions[comment.actions.length - 1].user;
-        const notifyText = t('modqueue.notify_flagged', user.username, prepareNotificationText(comment.body));
-        return this.handleCommentChange(prev, comment, notifyText);
+        const sort = this.props.moderation.sortOrder;
+        const notify = {
+          activeQueue: this.activeTab,
+          text: t('modqueue.notify_flagged', user.username, prepareNotificationText(comment.body)),
+          anyQueue: true,
+        };
+        return handleCommentChange(prev, comment, sort, notify);
       },
     });
 
@@ -168,11 +147,27 @@ class ModerationContainer extends Component {
     const variables = {
       limit: 10,
       cursor: this.props.root[tab].endCursor,
-      sortOrder: this.props.data.variables.sortOrder,
+      sort: this.props.data.variables.sort,
       asset_id: this.props.data.variables.asset_id,
-      statuses: this.props.queueConfig[tab].statuses,
-      action_type: this.props.queueConfig[tab].action_type,
     };
+    switch(tab) {
+    case 'all':
+      variables.statuses = null;
+      break;
+    case 'accepted':
+      variables.statuses = ['ACCEPTED'];
+      break;
+    case 'premod':
+      variables.statuses = ['PREMOD'];
+      break;
+    case 'flagged':
+      variables.statuses = ['NONE', 'PREMOD'];
+      variables.action_type = 'FLAG';
+      break;
+    case 'rejected':
+      variables.statuses = ['REJECTED'];
+      break;
+    }
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
       variables,
@@ -190,8 +185,7 @@ class ModerationContainer extends Component {
   };
 
   render () {
-    const {root, root: {asset, settings}, data} = this.props;
-    const assetId = getAssetId(this.props);
+    const {root, root: {asset}, data, params: {id: assetId}} = this.props;
 
     if (data.error) {
       return <div>Error</div>;
@@ -214,23 +208,12 @@ class ModerationContainer extends Component {
       return <Spinner />;
     }
 
-    const premodEnabled = assetId ? isPremod(asset.settings.moderation) : isPremod(settings.moderation);
-    const currentQueueConfig = Object.assign({}, this.props.queueConfig);
-    if (premodEnabled) {
-      delete currentQueueConfig.new;
-    } else {
-      delete currentQueueConfig.premod;
-    }
-
     return <Moderation
       {...this.props}
-      getModPath={getModPath}
       loadMore={this.loadMore}
       acceptComment={this.acceptComment}
       rejectComment={this.rejectComment}
       activeTab={this.activeTab}
-      queueConfig={currentQueueConfig}
-      handleCommentChange={this.handleCommentChange}
     />;
   }
 }
@@ -288,8 +271,8 @@ const COMMENT_REJECTED_SUBSCRIPTION = gql`
 `;
 
 const LOAD_MORE_QUERY = gql`
-  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $sortOrder: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
-    comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sortOrder: $sortOrder, action_type: $action_type}) {
+  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Date, $sort: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
+    comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sort: $sort, action_type: $action_type}) {
       nodes {
         ...${getDefinitionName(Comment.fragments.comment)}
       }
@@ -313,68 +296,111 @@ const commentConnectionFragment = gql`
   ${Comment.fragments.comment}
 `;
 
-const withModQueueQuery = withQuery(({queueConfig}) => gql`
-  query CoralAdmin_Moderation($asset_id: ID, $sortOrder: SORT_ORDER, $allAssets: Boolean!) {
-    ${Object.keys(queueConfig).map((queue) => `
-      ${queue}: comments(query: {
-        ${queueConfig[queue].statuses ? `statuses: [${queueConfig[queue].statuses.join(', ')}],` : ''}
-        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
-        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
+const withModQueueQuery = withQuery(gql`
+  query CoralAdmin_Moderation($asset_id: ID, $sort: SORT_ORDER, $allAssets: Boolean!) {
+    all: comments(query: {
+      statuses: [NONE, PREMOD, ACCEPTED, REJECTED],
+      asset_id: $asset_id,
+      sort: $sort
+    }) {
+      ...CoralAdmin_Moderation_CommentConnection
+    }
+    accepted: comments(query: {
+      statuses: [ACCEPTED],
+      asset_id: $asset_id,
+      sort: $sort
+    }) {
+      ...CoralAdmin_Moderation_CommentConnection
+    }
+    premod: comments(query: {
+        statuses: [PREMOD],
         asset_id: $asset_id,
-        sortOrder: $sortOrder
-      }) {
-        ...CoralAdmin_Moderation_CommentConnection
-      }
-    `)}
-    ${Object.keys(queueConfig).map((queue) => `
-      ${queue}Count: commentCount(query: {
-        ${queueConfig[queue].statuses ? `statuses: [${queueConfig[queue].statuses.join(', ')}],` : ''}
-        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
-        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
+        sort: $sort
+    }) {
+      ...CoralAdmin_Moderation_CommentConnection
+    }
+    flagged: comments(query: {
+        action_type: FLAG,
         asset_id: $asset_id,
-      })
-    `)}
+        statuses: [NONE, PREMOD],
+        sort: $sort
+    }) {
+      ...CoralAdmin_Moderation_CommentConnection
+    }
+    rejected: comments(query: {
+        statuses: [REJECTED],
+        asset_id: $asset_id,
+        sort: $sort
+    }) {
+      ...CoralAdmin_Moderation_CommentConnection
+    }
     asset(id: $asset_id) @skip(if: $allAssets) {
       id
       title
       url
-      settings {
-        moderation
-      }
     }
+    allCount: commentCount(query: {
+      asset_id: $asset_id
+    })
+    acceptedCount: commentCount(query: {
+      statuses: [ACCEPTED],
+      asset_id: $asset_id
+    })
+    premodCount: commentCount(query: {
+      statuses: [PREMOD],
+      asset_id: $asset_id
+    })
+    rejectedCount: commentCount(query: {
+       statuses: [REJECTED],
+       asset_id: $asset_id
+    })
+    flaggedCount: commentCount(query: {
+      action_type: FLAG,
+      asset_id: $asset_id,
+      statuses: [NONE, PREMOD]
+    })
     settings {
       organizationName
-      moderation
     }
   }
   ${commentConnectionFragment}
 `, {
-  options: (props) => {
-    const id = getAssetId(props);
+  options: ({params: {id = null}, moderation: {sortOrder}}) => {
     return {
       variables: {
         asset_id: id,
-        sortOrder: props.moderation.sortOrder,
+        sort: sortOrder,
         allAssets: id === null
       }
     };
   },
 });
 
-const withQueueCountPolling = withQuery(({queueConfig}) => gql`
+const withQueueCountPolling = withQuery(gql`
   query CoralAdmin_ModerationCountPoll($asset_id: ID) {
-    ${Object.keys(queueConfig).map((queue) => `
-      ${queue}Count: commentCount(query: {
-        ${queueConfig[queue].statuses ? `statuses: [${queueConfig[queue].statuses.join(', ')}],` : ''}
-        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
-        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
-        asset_id: $asset_id,
-      })
-    `)}
+    allCount: commentCount(query: {
+      asset_id: $asset_id
+    })
+    acceptedCount: commentCount(query: {
+      statuses: [ACCEPTED],
+      asset_id: $asset_id
+    })
+    premodCount: commentCount(query: {
+      statuses: [PREMOD],
+      asset_id: $asset_id
+    })
+    rejectedCount: commentCount(query: {
+       statuses: [REJECTED],
+       asset_id: $asset_id
+    })
+    flaggedCount: commentCount(query: {
+      action_type: FLAG,
+      asset_id: $asset_id,
+      statuses: [NONE, PREMOD]
+    })
   }
 `, {
-  options: (props) => {
-    const id = getAssetId(props);
+  options: ({params: {id = null}}) => {
     return {
       pollInterval: 5000,
       variables: {
@@ -385,9 +411,9 @@ const withQueueCountPolling = withQuery(({queueConfig}) => gql`
 });
 
 const mapStateToProps = (state) => ({
-  moderation: state.moderation,
-  settings: state.settings,
-  auth: state.auth,
+  moderation: state.moderation.toJS(),
+  settings: state.settings.toJS(),
+  auth: state.auth.toJS(),
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -400,15 +426,14 @@ const mapDispatchToProps = (dispatch) => ({
     toggleStorySearch,
     showSuspendUserDialog,
     viewUserDetail,
+    hideUserDetail,
     setSortOrder,
     storySearchChange,
-    clearState,
-    notify,
+    clearState
   }, dispatch),
 });
 
 export default compose(
-  withQueueConfig(baseQueueConfig),
   connect(mapStateToProps, mapDispatchToProps),
   withSetCommentStatus,
   withQueueCountPolling,