Merge pull request #916 from coralproject/author-menu

Author menu, member since, and ignored users

.dockerignore

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

.eslintignore

@@ -1,18 +1,26 @@
 dist
 docs
-client/lib
 **/*.html
 plugins/*
-!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-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/talk-plugin-permalink
 !plugins/talk-plugin-featured-comments
+!plugins/talk-plugin-sort-newest
+!plugins/talk-plugin-sort-oldest
+!plugins/talk-plugin-sort-most-replied
+!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-loved
+!plugins/talk-plugin-sort-most-respected
+!plugins/talk-plugin-author-menu
+!plugins/talk-plugin-member-since
+!plugins/talk-plugin-ignore-user
 
 node_modules

.eslintrc.json

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

.gitignore

@@ -5,27 +5,38 @@ 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/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-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/talk-plugin-permalink
 !plugins/talk-plugin-featured-comments
+!plugins/talk-plugin-sort-newest
+!plugins/talk-plugin-sort-oldest
+!plugins/talk-plugin-sort-most-replied
+!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-loved
+!plugins/talk-plugin-sort-most-respected
+!plugins/talk-plugin-author-menu
+!plugins/talk-plugin-member-since
+!plugins/talk-plugin-ignore-user
 
 **/node_modules/*

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:7.10.1
+FROM node:8-alpine
 
 # Create app directory
 RUN mkdir -p /usr/src/app
@@ -12,15 +12,14 @@ 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,8 +7,5 @@ ONBUILD COPY . /usr/src/app
 # we need to have webpack available. We then build the new dependancies and
 # clear out the development dependancies again. After this we of course need to
 # clear out the yarn cache, this saves quite a lot of size.
-ONBUILD RUN NODE_ENV=development yarn install --frozen-lockfile && \
-            NODE_ENV=production  cli plugins reconcile && \
-            NODE_ENV=production  yarn build && \
-            NODE_ENV=production  yarn install --production --force && \
-            yarn cache clean
+ONBUILD RUN cli plugins reconcile && \
+            yarn build

INSTALL.md

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

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

@@ -1,110 +1,26 @@
 # Talk [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fcoralproject%2Ftalk&env[TALK_FACEBOOK_APP_ID]=ignore&env[TALK_FACEBOOK_APP_SECRET]=ignore)
 
 Online comments are broken. Our open-source Talk tool rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here.](https://coralproject.net/products/talk.html)
 
 Third party licenses are available via the `/client/3rdpartylicenses.txt`
 endpoint when the server is running with built assets.
 
-## Contributing to Talk
+## Important Links
 
-See our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md).
+- Developer Documentation & Setup Guides: https://coralproject.github.io/talk/
 
-## Documentation
+- Pivotal Tracker Backlog & Release Schedule: https://www.pivotaltracker.com/n/projects/1863625
 
-### General
+## Learn More about Coral
 
-See our [Talk Documentation & Guides](https://coralproject.github.io/talk/index.html).
+- Community Forums: https://community.coralproject.net/
 
-### Plugins
+- Website: https://coralproject.net
 
-See our guide to using and building [Talk Plugins](https://github.com/coralproject/talk/blob/master/PLUGINS.md).
+- Blog: https://blog.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_) - When `TRUE`, disables the dynamic setup endpoint. (Default `FALSE`)
-- `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`)
-- `TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS` (_optional_)  When `TRUE`, disables flagging of comments that match the suspect word filter. (Default `FALSE`)
-
-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
+- Community Guides for Journalism: https://guides.coralproject.net/
 
 ## License
 

TERMINOLOGY.md

@@ -1,73 +0,0 @@
-# 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,69 +3,42 @@ 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();
 
-// Middleware declarations.
+//==============================================================================
+// APPLICATION WIDE MIDDLEWARE
+//==============================================================================
 
 // Add the logging middleware only if we aren't testing.
-if (app.get('env') !== 'test') {
+if (process.env.NODE_ENV !== 'test') {
   app.use(morgan('dev'));
 }
 
-//==============================================================================
-// APP MIDDLEWARE
-//==============================================================================
-
+// Trust the first proxy in front of us, this will enable us to trust the fact
+// that SSL was terminated correctly.
 app.set('trust proxy', 1);
 
-// We disable frameward on helmet to allow crossdomain injection of the embed
+// Enable a suite of security good practices through helmet. We disable
+// frameguard 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
 //==============================================================================
@@ -73,105 +46,19 @@ app.use('/public', express.static(path.join(__dirname, 'public')));
 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
 //==============================================================================
 
-app.use('/', require('./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;
 
-//==============================================================================
-// ERROR HANDLING
-//==============================================================================
+debug(`mounting routes on the ${MOUNT_PATH} path`);
 
-// Catch 404 and forward to error handler.
-app.use((req, res, next) => {
-  next(errors.ErrNotFound);
-});
-
-// General error handler. Respond with the message and error if we have it while
-// returning a status code that makes sense.
-app.use('/api', (err, req, res, next) => {
-  if (err !== errors.ErrNotFound) {
-    if (app.get('env') !== 'test' || enabled('talk:errors')) {
-      console.error(err);
-    }
-  }
-
-  if (err instanceof errors.APIError) {
-    res.status(err.status).json({
-      message: err.message,
-      error: err
-    });
-  } else {
-    res.status(500).json({});
-  }
-});
-
-app.use('/', (err, req, res, next) => {
-  if (err !== errors.ErrNotFound) {
-    console.error(err);
-  }
-
-  i18n.init(req);
-  
-  if (err instanceof errors.APIError) {
-    res.status(err.status);
-    res.render('error', {
-      message: err.message,
-      error: app.get('env') === 'development' ? err : {}
-    });
-  } else {
-    res.render('error', {
-      message: err.message,
-      error: app.get('env') === 'development' ? err : {}
-    });
-  }
-});
+// Actually apply the routes.
+app.use(MOUNT_PATH, routes);
 
 module.exports = app;

app.json

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

bin/cli

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

bin/cli-jobs

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

bin/cli-plugins

@@ -53,7 +53,7 @@ function versionMatch(name, version) {
   }
 }
 
-const EXTERNAL = /^\w[a-z\-0-9\.]+$/; // Match "react", "path", "fs", "lodash.random", etc.
+const EXTERNAL = /^\w[a-z\-0-9.]+$/; // Match "react", "path", "fs", "lodash.random", etc.
 
 function reconcilePackages({quiet = false, upgradeRemote = false}) {
   const fetchable = [];
@@ -274,7 +274,7 @@ async function reconcilePluginDeps({skipLocal, skipRemote, dryRun, upgradeRemote
 }
 
 async function createSeedPlugin() {
-  const pluginsDir = path.join(__dirname, 'plugins');
+  const pluginsDir = path.resolve(__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, 'bin/templates/plugin');
+  const seedPlugin = path.join(__dirname, '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.join(dir, 'plugins.json');
+      const pluginsJson = path.resolve(__dirname, '..', 'plugins.json');
 
       fs.readJson(pluginsJson)
         .then((j) => {

bin/cli-serve

@@ -12,6 +12,7 @@ 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
@@ -80,12 +81,16 @@ function normalizePort(val) {
  * Event listener for HTTP server "listening" event.
  */
 
-function onListening() {
+async function onListening() {
+
+  // Start the cache instance.
+  await cache.init();
+
   let addr = server.address();
   let bind = typeof addr === 'string'
     ? `pipe ${addr}`
     : `port ${addr.port}`;
-  console.log(`API Server Listening on ${bind}`);
+  debug(`API Server Listening on ${bind}`);
 }
 
 /**
@@ -135,18 +140,21 @@ 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) {
-      console.log(`Websocket Server Listening on ${port}`);
+      debug(`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,6 +104,32 @@ 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([
@@ -147,7 +173,11 @@ const performSetup = async () => {
       name: 'confirmPassword',
       message: 'Confirm Password',
       type: 'password',
-      filter: (confirmPassword) => {
+      filter: (confirmPassword, {password}) => {
+        if (password !== confirmPassword) {
+          return Promise.reject(new Error('Passwords do not match'));
+        }
+
         return UsersService
           .isValidPassword(confirmPassword)
           .catch((err) => {
@@ -157,10 +187,6 @@ 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-users

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

bin/cli-verify

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

bin/templates/plugin/client/translations.yml

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

bin/verifications/database/comments.js

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

bin/verifications/database/index.js

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

circle.yml

@@ -1,6 +1,6 @@
 machine:
   node:
-    version: 7.10.1
+    version: 8
   services:
     - docker
     - redis
@@ -21,9 +21,8 @@ dependencies:
 
     # Install node dependencies.
     - yarn --version
+    - yarn global add node-gyp --force
     - yarn
-  cache_directories:
-    - ~/.cache/yarn
   post:
     # Build the static assets.
     - yarn build
@@ -41,8 +40,6 @@ test:
   override:
     # Run the tests using the junit reporter.
     - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml MOCHA_REPORTER=mocha-junit-reporter yarn test
-    # Run the e2e test suite.
-    # - E2E_REPORT_PATH=$CIRCLE_TEST_REPORTS/e2e yarn e2e
 
 deployment:
   release:

client/.babelrc

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

client/.eslintrc.json

@@ -4,6 +4,7 @@
         "es6": true,
         "mocha": true
     },
+    "extends": "../.eslintrc.json",
     "parserOptions": {
         "sourceType": "module",
         "ecmaFeatures": {

client/coral-admin/src/AppRouter.js

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

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

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

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

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

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

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

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

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

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

@@ -4,44 +4,24 @@ export const toggleModal = (open) => ({type: actions.TOGGLE_MODAL, open});
 export const singleView = () => ({type: actions.SINGLE_VIEW});
 
 // hide shortcuts note
-export const hideShortcutsNote = () => {
+export const hideShortcutsNote = () => (dispatch, _, {storage}) => {
   try {
-    window.localStorage.setItem('coral:shortcutsNote', 'hide');
+    if (storage) {
+      storage.setItem('coral:shortcutsNote', 'hide');
+    }
   } catch (e) {
 
     // above will fail in Safari private mode
   }
 
-  return {type: actions.HIDE_SHORTCUTS_NOTE};
+  dispatch({type: actions.HIDE_SHORTCUTS_NOTE});
 };
 
-export const 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,4 +1,3 @@
-import coralApi from '../../../coral-framework/helpers/request';
 import t from 'coral-framework/services/i18n';
 
 export const SETTINGS_LOADING = 'SETTINGS_LOADING';
@@ -14,9 +13,9 @@ export const SAVE_SETTINGS_FAILED = 'SAVE_SETTINGS_FAILED';
 export const WORDLIST_UPDATED = 'WORDLIST_UPDATED';
 export const DOMAINLIST_UPDATED = 'DOMAINLIST_UPDATED';
 
-export const fetchSettings = () => (dispatch) => {
+export const fetchSettings = () => (dispatch, _, {rest}) => {
   dispatch({type: SETTINGS_LOADING});
-  coralApi('/settings')
+  rest('/settings')
     .then((settings) => {
       dispatch({type: SETTINGS_RECEIVED, settings});
     })
@@ -41,13 +40,13 @@ export const updateDomainlist = (listName, list) => {
   return {type: DOMAINLIST_UPDATED, listName, list};
 };
 
-export const saveSettingsToServer = () => (dispatch, getState) => {
-  let settings = getState().settings.toJS();
+export const saveSettingsToServer = () => (dispatch, getState, {rest}) => {
+  let settings = getState().settings;
   if (settings.charCount) {
     settings.charCount = parseInt(settings.charCount);
   }
   dispatch({type: SAVE_SETTINGS_LOADING});
-  coralApi('/settings', {method: 'PUT', body: settings})
+  rest('/settings', {method: 'PUT', body: settings})
     .then(() => {
       dispatch({type: SAVE_SETTINGS_SUCCESS, settings});
     })

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

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

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

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

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

@@ -69,23 +69,23 @@ class AdminLogin extends React.Component {
     );
     const requestPasswordForm = (
       this.props.passwordRequestSuccess
-      ? <p className={styles.passwordRequestSuccess} onClick={() => {
-        location.href = location.href;
-      }}>
+        ? <p className={styles.passwordRequestSuccess} onClick={() => {
+          location.href = location.href;
+        }}>
           {this.props.passwordRequestSuccess} <a className={styles.signInLink} href="#">Sign in</a>
           <Success />
         </p>
-      : <form onSubmit={this.handleRequestPassword}>
-        <TextField
-          label='Email Address'
-          value={this.state.email}
-          onChange={(e) => this.setState({email: e.target.value})} />
-        <Button
-          type='submit'
-          cStyle='black'
-          full
-          onClick={this.handleRequestPassword}>Reset Password</Button>
-      </form>
+        : <form onSubmit={this.handleRequestPassword}>
+          <TextField
+            label='Email Address'
+            value={this.state.email}
+            onChange={(e) => this.setState({email: e.target.value})} />
+          <Button
+            type='submit'
+            cStyle='black'
+            full
+            onClick={this.handleRequestPassword}>Reset Password</Button>
+        </form>
     );
     return (
       <Layout fixedDrawer restricted={true}>

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

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

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

@@ -0,0 +1,25 @@
+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/CommentType.css

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

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

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

client/coral-admin/src/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/components/FlagBox.js

@@ -61,9 +61,11 @@ class FlagBox extends Component {
                       <ul>
                         {actionList.map((action, j) =>
                           <li key={`${i}_${j}`} className={styles.subDetail}>
-                            <a className={styles.username} onClick={viewUserDetail}>
-                              {action.user.username}
-                            </a>
+                            {action.user &&
+                              <a className={styles.username} onClick={() => viewUserDetail(action.user.id)}>
+                                {action.user.username}
+                              </a>
+                            }
                             {action.message}
                           </li>
                         )}

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

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

@@ -0,0 +1,21 @@
+.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/LoadMore.js

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

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

@@ -186,13 +186,11 @@
 .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

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

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

@@ -65,7 +65,7 @@ class SuspendUserDialog extends React.Component {
           {t('suspenduser.title_suspend')}
         </h1>
         <p className={styles.description}>
-         {t('suspenduser.description_suspend', username)}
+          {t('suspenduser.description_suspend', username)}
         </p>
         <fieldset>
           <legend className={styles.legend}>{t('suspenduser.select_duration')}</legend>
@@ -103,7 +103,7 @@ class SuspendUserDialog extends React.Component {
           {t('suspenduser.title_notify')}
         </h1>
         <p className={styles.description}>
-         {t('suspenduser.description_notify', username)}
+          {t('suspenduser.description_notify', username)}
         </p>
         <fieldset>
           <legend className={styles.legend}>{t('suspenduser.write_message')}</legend>

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

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

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

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

@@ -0,0 +1,156 @@
+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/Header.js

@@ -13,9 +13,9 @@ const CoralHeader = ({
 }) => (
   <Header className={styles.header}>
     <Logo className={styles.logo} />
-      <div>
-        {
-          auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
+    <div>
+      {
+        auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
           <Navigation className={styles.nav}>
             <IndexLink
               id='dashboardNav'
@@ -63,36 +63,36 @@ const CoralHeader = ({
           </Navigation>
           :
           null
-        }
-        <div className={styles.rightPanel}>
-          <ul>
-            <li className={styles.settings}>
-              <div>
-                <IconButton name="settings" id="menu-settings"/>
-                <Menu target="menu-settings" align="right">
-                  <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
-                  <MenuItem>
-                    <a href="https://github.com/coralproject/talk/releases" target="_blank">
+      }
+      <div className={styles.rightPanel}>
+        <ul>
+          <li className={styles.settings}>
+            <div>
+              <IconButton name="settings" id="menu-settings"/>
+              <Menu target="menu-settings" align="right">
+                <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                <MenuItem>
+                  <a href="https://github.com/coralproject/talk/releases" target="_blank">
                       View latest version
-                    </a>
-                  </MenuItem>
-                  <MenuItem>
-                    <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank">
+                  </a>
+                </MenuItem>
+                <MenuItem>
+                  <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank">
                       Report a bug or give feedback
-                    </a>
-                  </MenuItem>
-                  <MenuItem onClick={handleLogout}>
-                    {t('configure.sign_out')}
-                  </MenuItem>
-                </Menu>
-              </div>
-            </li>
-            <li>        
-             {`v${process.env.VERSION}`}        
-            </li>
-          </ul>
-        </div>
+                  </a>
+                </MenuItem>
+                <MenuItem onClick={handleLogout}>
+                  {t('configure.sign_out')}
+                </MenuItem>
+              </Menu>
+            </div>
+          </li>
+          <li>        
+            {`v${process.env.VERSION}`}        
+          </li>
+        </ul>
       </div>
+    </div>
   </Header>
 );
 

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

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

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

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

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

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

@@ -5,22 +5,24 @@ import SuspendUserDialog from '../components/SuspendUserDialog';
 import {hideSuspendUserDialog} from '../actions/suspendUserDialog';
 import {withSetCommentStatus, withSuspendUser} from 'coral-framework/graphql/mutations';
 import {compose, gql} from 'react-apollo';
-import * as notification from 'coral-admin/src/services/notification';
 import t, {timeago} from 'coral-framework/services/i18n';
 import withQuery from 'coral-framework/hocs/withQuery';
+import {getErrorMessages} from 'coral-framework/utils';
 import get from 'lodash/get';
+import {notify} from 'coral-framework/actions/notification';
 
 class SuspendUserDialogContainer extends Component {
 
   suspendUser = async ({message, until}) => {
-    const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser} = this.props;
+    const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser, notify} = this.props;
     hideSuspendUserDialog();
     try {
       const result = await suspendUser({id: userId, message, until});
       if (result.data.suspendUser.errors) {
         throw result.data.suspendUser.errors;
       }
-      notification.success(
+      notify(
+        'success',
         t('suspenduser.notify_suspend_until', username, timeago(until)),
       );
       if (commentId && commentStatus && commentStatus !== 'REJECTED') {
@@ -33,7 +35,7 @@ class SuspendUserDialogContainer extends Component {
       }
     }
     catch(err) {
-      notification.showMutationErrors(err);
+      notify('error', getErrorMessages(err));
     }
   };
 
@@ -52,8 +54,9 @@ class SuspendUserDialogContainer extends Component {
 
 const withOrganizationName = withQuery(gql`
   query CoralAdmin_SuspendUserDialog {
+      __typename
      settings {
-      organizationName
+       organizationName
     }
   }
 `);
@@ -69,6 +72,7 @@ const mapStateToProps = ({suspendUserDialog: {open, userId, username, commentId,
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     hideSuspendUserDialog,
+    notify,
   }, dispatch),
 });
 

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

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

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

client/coral-admin/src/index.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,60 +1,57 @@
-import {fromJS, Set} from 'immutable';
 import * as actions from '../constants/moderation';
 
-const initialState = fromJS({
+const initialState = {
   singleView: false,
   modalOpen: false,
-  userDetailId: null,
-  userDetailActiveTab: 'all',
-  userDetailStatuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
-  userDetailSelectedIds: new Set(),
   storySearchVisible: false,
   storySearchString: '',
-  shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show',
-  sortOrder: 'REVERSE_CHRONOLOGICAL',
-});
+  shortcutsNoteVisible: 'show',
+  sortOrder: 'DESC',
+};
 
 export default function moderation (state = initialState, action) {
   switch (action.type) {
   case actions.MODERATION_CLEAR_STATE:
-    return initialState;
-  case actions.SET_ACTIVE_TAB:
-    return state
-      .set('activeTab', action.activeTab);
+    return {
+      ...initialState,
+      shortcutsNoteVisible: state.shortcutsNoteVisible,
+    };
   case actions.TOGGLE_MODAL:
-    return state
-      .set('modalOpen', action.open);
+    return {
+      ...state,
+      modalOpen: action.open,
+    };
   case actions.SINGLE_VIEW:
-    return state
-      .set('singleView', !state.get('singleView'));
+    return {
+      ...state,
+      singleView: !state.singleView,
+    };
   case actions.HIDE_SHORTCUTS_NOTE:
-    return state
-      .set('shortcutsNoteVisible', 'hide');
-  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));
+    return {
+      ...state,
+      shortcutsNoteVisible: 'hide',
+    };
   case actions.SHOW_STORY_SEARCH:
-    return state.set('storySearchVisible', true);
+    return {
+      ...state,
+      storySearchVisible: true,
+    };
   case actions.HIDE_STORY_SEARCH:
-    return state.set('storySearchVisible', false);
+    return {
+      ...state,
+      storySearchVisible: false,
+    };
   case actions.STORY_SEARCH_CHANGE_VALUE:
-    return state.set('storySearchString', action.value);
+    return {
+      ...state,
+      storySearchString: action.value,
+    };
   case actions.SET_SORT_ORDER:
-    return state.set('sortOrder', action.order);
-  default :
+    return {
+      ...state,
+      sortOrder: action.order,
+    };
+  default:
     return state;
   }
 }

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

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

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

@@ -0,0 +1,47 @@
+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.css

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

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import styles from './Community.css';
+import styles from './ActionButton.css';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../../Moderation/helpers/moderationQueueActionsMap';
+import {menuActionsMap} from '../../../utils/moderationQueueActionsMap';
 
 import t from 'coral-framework/services/i18n';
 
+// TODO: Needs refactoring.
 const ActionButton = ({type = '', user, ...props}) => {
   return (
     <Button

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

@@ -1,342 +0,0 @@
-@custom-media --big-viewport (min-width: 780px);
-
-.container {
-  padding: 10px;
-  display: flex;
-  padding-bottom: 200px;
-}
-
-.leftColumn {
-  padding: 42px 56px;
-  width: 234px;
-}
-
-.mainContent {
-  width: calc(100% - 300px);
-  padding: 34px 14px;
-  box-sizing: border-box;
-}
-
-.mainFlaggedContent {
-  width: 100%;
-  padding: 34px 14px;
-  box-sizing: border-box;
-}
-
-.roleButton {
-  display: block;
-}
-
-.searchBox {
-  width: 100%;
-  padding: 9px;
-  border: 1px solid #ccc;
-  border-radius: 2px;
-  display: flex;
-  background: white;
-  box-sizing: border-box;
-  height: 40px;
-
-  i {
-    color: #A1A1A1
-  }
-
-  input {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border: none;
-    font-size: 16px;
-    padding: 0 2px 0 15px;
-    box-sizing: border-box;
-  }
-}
-
-.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;
-  display: block;
-
-  &.singleView .listItem {
-    display: none;
-  }
-
-  &.singleView .listItem.activeItem {
-    display: block;
-    height: 100%;
-    font-size: 1.5em;
-    line-height: 1.5em;
-    border: none;
-
-    .actions {
-      position: fixed;
-      bottom: 60px;
-      left: 25%;
-      margin: 0 auto;
-      display: flex;
-      justify-content: space-around;
-      width: 50%;
-      margin: 0;
-    }
-
-    .actionButton {
-      transform: scale(1.4);
-    }
-  }
-}
-
-.listItem {
-  border-bottom: 1px solid #e0e0e0;
-  font-size: 18px;
-  width: 100%;
-  max-width: 660px;
-  min-width: 400px;
-  margin: 0 auto;
-  position: relative;
-  transition: all 200ms;
-  padding: 10px 0 0;
-  min-height: 220px;
-
-  .container {
-    display: block;
-    padding: 0 14px;
-    min-height: 180px;
-  }
-
-  &:hover {
-     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  .context {
-    a {
-      color: #f36451;
-      text-decoration: underline;
-      float: right;
-    }
-  }
-
-   .sideActions {
-     position: absolute;
-     right: 0;
-     height: 100%;
-     top: 0;
-     padding: 50px 18px;
-     box-sizing: border-box;
-   }
-
-  .itemHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .author {
-      font-size: 16px;
-      font-weight: bold;
-      min-width: 230px;
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .itemBody {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .avatar {
-    margin-right: 16px;
-    height: 40px;
-    width: 40px;
-    border-radius: 50%;
-    background-color: #757575;
-    font-size: 40px;
-    color: #fff;
-  }
-
-  .created {
-    color: #666;
-    font-size: 13px;
-    margin-left: 40px;
-  }
-
-  .actionButton {
-    transform: scale(.8);
-    margin: 0;
-  }
-
-  .body {
-    margin-top: 0px;
-    flex: 1;
-    color: black;
-    max-width: 500px;
-    word-wrap: break-word;
-  }
-
-  .flagged {
-    color: rgba(255, 0, 0, .5);
-    padding-top: 15px;
-    padding-left: 10px;
-  }
-
-  .flagCount{
-    font-size: 12px;
-    color: #d32f2f;
-  }
-
-}
-
-.empty {
-  color: #444;
-  margin-top: 50px;
-  text-align: center;
-}
-
-
-@media (--big-viewport) {
-  .listItem {
-    border: 1px solid #e0e0e0;
-    margin-bottom: 30px;
-
-    &:last-child {
-      border-bottom: 1px solid #e0e0e0;
-    }
-
-    &.activeItem {
-      border: 2px solid #333;
-    }
-  }
-
-}
-
-.hasLinks {
-  color: #f00;
-  text-align: right;
-  display: flex;
-  align-items: center;
-
-  i {
-    margin-right: 5px;
-  }
-}
-
-.banned {
-  color: #f00;
-  text-align: left;
-  display: flex;
-  align-items: center;
-
-  i {
-    margin-right: 5px;
-  }
-}
-
-.ban {
-  display: block;
-  text-align: center;
-  margin-top: 5px;
-}
-
-.banButton {
-  width: 114px;
-  letter-spacing: 1px;
-
-  i {
-    vertical-align: middle;
-    margin-right: 10px;
-    font-size: 14px;
-  }
-}
-
-.actionButton {
-  transform: scale(.8);
-  margin: 0;
-}
-
-.flaggedByCount {
-  display: block;
-  text-align: left;
-  margin-top: 5px;
-}
-
-.flaggedByCount i {
-  font-size: 14px;
-  margin-right: 10px;
-}
-
-.flaggedBy {
-  display: inline;
-  padding: 3px;
-  font-size: 14px;
-  margin-left: 5px;
-}
-
-.flaggedByLabel {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.flaggedReasons {
-  margin-left: 24px;
-  margin-top: 10px;
-}
-
-p.flaggedByReason {
-  font-size: 1tpx;
-  margin: 0px;
-  line-height: 1.4;
-}

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

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 
 import CommunityMenu from './CommunityMenu';
 import People from './People';
-import FlaggedAccounts from './FlaggedAccounts';
+import FlaggedAccounts from '../containers/FlaggedAccounts';
 import RejectUsernameDialog from './RejectUsernameDialog';
 
 export default class Community extends Component {
@@ -54,7 +54,7 @@ export default class Community extends Component {
   }
 
   getTabContent(searchValue, props) {
-    const {community, root: {users}} = props;
+    const {community} = props;
     const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
 
     if (activeTab === 'people') {
@@ -76,15 +76,7 @@ export default class Community extends Component {
 
     return (
       <div>
-        <FlaggedAccounts
-          commenters={users}
-          showBanUserDialog={props.showBanUserDialog}
-          showSuspendUserDialog={props.showSuspendUserDialog}
-          showRejectUsernameDialog={props.showRejectUsernameDialog}
-          approveUser={props.approveUser}
-          rejectUsername={props.rejectUsername}
-          currentUser={this.props.currentUser}
-        />
+        <FlaggedAccounts />
         <RejectUsernameDialog
           open={community.rejectUsernameDialog}
           handleClose={props.hideRejectUsernameDialog}

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.css';
+import styles from './CommunityMenu.css';
 import t from 'coral-framework/services/i18n';
 import {Link} from 'react-router';
 

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

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

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

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

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

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

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

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

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

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

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

@@ -50,9 +50,9 @@ class RejectUsernameDialog extends Component  {
     const next = () => this.setState({stage: stage + 1});
     const suspend = () => {
       rejectUsername({id: user.user.id, message: this.state.email})
-      .then(() => {
-        this.props.handleClose();
-      });
+        .then(() => {
+          this.props.handleClose();
+        });
     };
 
     const suspendModalActions = [
@@ -71,21 +71,21 @@ class RejectUsernameDialog extends Component  {
     const {stage} = this.state;
 
     return <Dialog
-            className={styles.suspendDialog}
-            id="rejectUsernameDialog"
-            open={open}
-            onClose={handleClose}
-            onCancel={handleClose}
-            title={t('reject_username.suspend_user')}>
-            <div className={styles.title}>
-              {t(stages[stage].title, t('reject_username.username'))}
-            </div>
-            <div className={styles.container}>
-              <div className={styles.description}>
-                {t(stages[stage].description, t('reject_username.username'))}
-              </div>
-              {
-                stage === 1 &&
+      className={styles.suspendDialog}
+      id="rejectUsernameDialog"
+      open={open}
+      onClose={handleClose}
+      onCancel={handleClose}
+      title={t('reject_username.suspend_user')}>
+      <div className={styles.title}>
+        {t(stages[stage].title, t('reject_username.username'))}
+      </div>
+      <div className={styles.container}>
+        <div className={styles.description}>
+          {t(stages[stage].description, t('reject_username.username'))}
+        </div>
+        {
+          stage === 1 &&
                 <div className={styles.writeContainer}>
                   <div className={styles.emailMessage}>{t('reject_username.write_message')}</div>
                   <div className={styles.emailContainer}>
@@ -96,16 +96,16 @@ class RejectUsernameDialog extends Component  {
                       onChange={this.onEmailChange}/>
                   </div>
                 </div>
-              }
-              <div className={styles.modalButtons}>
-                {Object.keys(stages[stage].options).map((key, i) => (
-                  <Button key={i} onClick={this.onActionClick(stage, i)}>
-                    {t(stages[stage].options[key], t('reject_username.username'))}
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </Dialog>;
+        }
+        <div className={styles.modalButtons}>
+          {Object.keys(stages[stage].options).map((key, i) => (
+            <Button key={i} onClick={this.onActionClick(stage, i)}>
+              {t(stages[stage].options[key], t('reject_username.username'))}
+            </Button>
+          ))}
+        </div>
+      </div>
+    </Dialog>;
   }
 }
 

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

@@ -0,0 +1,58 @@
+.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,17 +1,17 @@
 import React from 'react';
 import {SelectField, Option} from 'react-mdl-selectfield';
-import styles from '../components/Community.css';
+import styles from '../components/Table.css';
 import t from 'coral-framework/services/i18n';
 
-export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange}) => (
+export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
   <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
         {headers.map((header, i) =>(
           <th
-          key={i}
-          className="mdl-data-table__cell--non-numeric"
-          onClick={() => onHeaderClickHandler({field: header.field})}>
+            key={i}
+            className="mdl-data-table__cell--non-numeric"
+            onClick={() => onHeaderClickHandler({field: header.field})}>
             {header.title}
           </th>
         ))}
@@ -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">
-            {row.username}
+            <button onClick={() => {viewUserDetail(row.id);}} className={styles.button}>{row.username}</button>
             <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

@@ -1,114 +0,0 @@
-import React from 'react';
-import styles from './Community.css';
-
-import ActionButton from './ActionButton';
-import {username} from 'coral-plugin-flags/helpers/flagReasons';
-import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
-import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
-
-import t from 'coral-framework/services/i18n';
-
-const shortReasons = {
-  [username.other]: t('community.other'),
-  [username.spam]: t('community.spam_ads'),
-  [username.offensive]: t('community.offensive'),
-  [username.nolike]: t('community.dont_like_username'),
-  [username.impersonating]: t('community.impersonating'),
-};
-
-// Render a single user for the list
-const User = (props) => {
-  const {user, modActionButtons} = props;
-  let userStatus = user.status;
-
-  const showSuspenUserDialog = () => props.showSuspendUserDialog({
-    userId: user.id,
-    username: user.username,
-  });
-
-  const showBanUserDialog = () => props.showBanUserDialog({
-    userId: user.id,
-    username: user.username,
-  });
-
-  // Do not display unless the user status is 'pending' or 'banned'.
-  // This means that they have already been reviewed and approved.
-  return (userStatus === 'PENDING' ||  userStatus === 'BANNED') &&
-    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
-      <div className={styles.container}>
-        <div className={styles.itemHeader}>
-          <div className={styles.author}>
-            <span>
-              {user.username}
-            </span>
-            {props.currentUser.id !== user.id &&
-              <ActionsMenu icon="not_interested">
-                <ActionsMenuItem
-                  disabled={user.status === 'BANNED'}
-                  onClick={showSuspenUserDialog}>
-                  Suspend User</ActionsMenuItem>
-                <ActionsMenuItem
-                  disabled={user.status === 'BANNED'}
-                  onClick={showBanUserDialog}>
-                  Ban User
-                </ActionsMenuItem>
-              </ActionsMenu>
-            }
-          </div>
-        </div>
-
-        <div className={styles.itemBody}>
-          <div className={styles.body}>
-            <div className={styles.flaggedByCount}>
-              <i className="material-icons">flag</i><span className={styles.flaggedByLabel}>{t('community.flags')}({ user.actions.length })</span>:
-                { user.action_summaries.map(
-                (action, i) => {
-                  return <span className={styles.flaggedBy} key={i}>
-                    {shortReasons[action.reason]} ({action.count})
-                  </span>;
-                }
-              )}
-            </div>
-            <div className={styles.flaggedReasons}>
-              { user.action_summaries.map(
-                (action_sum, i) => {
-                  return <div key={i}>
-                    <span className={styles.flaggedByLabel}>
-                      {shortReasons[action_sum.reason]} ({action_sum.count})
-                    </span>
-                    {user.actions.map(
-
-                      // find the action by action_sum.reason
-                      (action, j) => {
-                        if (action.reason === action_sum.reason) {
-                          return <p className={styles.flaggedByReason} key={j}>
-                            {action.user && action.user.username}: {action.message ? action.message : 'n/a'}
-                          </p>;
-                        }
-                        return null;
-                      }
-                    )}
-                  </div>;
-                }
-              )}
-
-            </div>
-          </div>
-          <div className={styles.sideActions}>
-            <div className={`actions ${styles.actions}`}>
-              {modActionButtons.map((action, i) =>
-                <ActionButton key={i}
-                  type={action.toUpperCase()}
-                  user={user}
-                  approveUser={props.approveUser}
-                  showRejectUsernameDialog={props.showRejectUsernameDialog}
-                />
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </li>;
-};
-
-export default User;

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

@@ -1,119 +1,56 @@
+/**
+ * deprecated as this file contains styles from multiple components. Please remove this file
+ * when styles have been refactored.
+ */
+
 @custom-media --big-viewport (min-width: 780px);
 
-.listContainer {
-  max-width: 860px;
-  margin: 0 auto;
-}
-
-.tabBar {
-  background-color: rgba(44, 44, 44, 0.89);
-  z-index: 5;
-}
-
-.tab {
-  flex: 1;
-  color: white;
-  text-transform: capitalize;
-  font-weight: 500;
-  font-size: 15px;
-  letter-spacing: 1px;
-  transition: border-bottom 200ms;
-}
-
-.active {
-  color: white;
-  box-sizing: border-box;
-  border-bottom: solid 5px #F36451;
-}
-
-.active > span {
-  color: white;
-}
-
-.active:after {
-  background: transparent !important;
-}
-
-.showShortcuts {
-  position: absolute;
-  right: 130px;
+.container {
+  padding: 10px;
   display: flex;
-  align-items: center;
-  font-size: 13px;
-
-span {
-  margin-left: 7px;
-}
+  padding-bottom: 200px;
 }
 
-@media (--big-viewport) {
-  .tab {
-    flex: none;
-  }
+.leftColumn {
+  padding: 42px 56px;
+  width: 234px;
 }
 
-.approve {
-  margin-top: 10px;
+.mainContent {
+  width: calc(100% - 300px);
+  padding: 34px 14px;
+  box-sizing: border-box;
 }
 
-.notFound {
-  position: relative;
-  margin: 20px auto;
-  text-align: center;
-  padding: 68px 45px;
-  vertical-align: middle;
-  min-width: 500px;
-
-  a {
-    color: rgb(244, 126, 107);
-    font-weight: 500;
-
-    &.goToStreams {
-      position: absolute;
-      right: 10px;
-      bottom: 10px;
-    }
-  }
+.roleButton {
+  display: block;
 }
 
-.header {
-  background-color: #2c2c2c;
-  color: white;
-  margin-bottom: -1px;
+.searchBox {
+  width: 100%;
+  padding: 9px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  display: flex;
+  background: white;
+  box-sizing: border-box;
+  height: 40px;
 
-  .settingsButton {
-    i {
-      vertical-align: middle;
-      margin-left: 10px;
-      margin-top: -4px;
-    }
+  i {
+    color: #A1A1A1
   }
 
-  .moderateAsset {
-    a {
-      text-align: center;
-      -webkit-box-flex: 1;
-      -ms-flex: 1;
-      flex: 1;
-      color: white;
-      text-transform: capitalize;
-      font-weight: 500;
-      font-size: 15px;
-      letter-spacing: 1px;
-      transition: opacity 200ms;
-      opacity: 1;
-
-      &:hover {
-         opacity: .8;
-         cursor: pointer;
-      }
-    }
+  input {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+    font-size: 16px;
+    padding: 0 2px 0 15px;
+    box-sizing: border-box;
   }
 }
 
-
-@custom-media --big-viewport (min-width: 780px);
-
 .list {
   padding: 8px 0;
   list-style: none;
@@ -134,15 +71,12 @@ span {
       position: fixed;
       bottom: 60px;
       left: 25%;
+      margin: 0 auto;
       display: flex;
       justify-content: space-around;
       width: 50%;
       margin: 0;
     }
-
-    .actionButton {
-      transform: scale(1.4);
-    }
   }
 }
 
@@ -159,6 +93,7 @@ span {
   min-height: 220px;
 
   .container {
+    display: block;
     padding: 0 14px;
     min-height: 180px;
   }
@@ -184,9 +119,9 @@ span {
      right: 0;
      height: 100%;
      top: 0;
-     padding: 40px 18px;
+     padding: 50px 18px;
      box-sizing: border-box;
-  }
+   }
 
   .itemHeader {
     display: flex;
@@ -194,6 +129,8 @@ span {
     justify-content: space-between;
 
     .author {
+      font-size: 16px;
+      font-weight: bold;
       min-width: 230px;
       display: flex;
       align-items: center;
@@ -221,18 +158,12 @@ span {
     margin-left: 40px;
   }
 
-  .actionButton {
-    transform: scale(.8);
-    margin: 0;
-  }
-
   .body {
     margin-top: 0px;
     flex: 1;
     color: black;
     max-width: 500px;
     word-wrap: break-word;
-    font-weight: 300;
   }
 
   .flagged {
@@ -245,11 +176,8 @@ span {
     font-size: 12px;
     color: #d32f2f;
   }
-
 }
 
-
-
 .empty {
   color: #444;
   margin-top: 50px;
@@ -301,34 +229,14 @@ span {
   margin-top: 5px;
 }
 
-.Comment {
-  .moderateArticle {
-    font-size: 12px;
-    a {
-      display: inline-block;
-      color: #679af3;
-      text-decoration: none;
-      font-size: 1em;
-      font-weight: 400;
-      letter-spacing: .5px;
-      font-size: 12px;
-      margin-left: 10px;
+.banButton {
+  width: 114px;
+  letter-spacing: 1px;
 
-      &:hover {
-        text-decoration: underline;
-        opacity: .9;
-        cursor: pointer;
-       }
-    }
-  }
-}
-
-.flagBox {
-  max-width: 480px;
-  border-top: 1px solid rgba(66, 66, 66, 0.12);
-  h3 {
+  i {
+    vertical-align: middle;
+    margin-right: 10px;
     font-size: 14px;
-    margin: 0;
-    font-weight: 500;
   }
 }
+

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

@@ -1,20 +1,13 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {compose, gql} from 'react-apollo';
-import withQuery from 'coral-framework/hocs/withQuery';
-import {Spinner} from 'coral-ui';
+import {compose} from 'react-apollo';
 
 import {withSetUserStatus, withRejectUsername} from 'coral-framework/graphql/mutations';
-
-import {showBanUserDialog} from 'actions/banUserDialog';
-import {showSuspendUserDialog} from 'actions/suspendUserDialog';
-
 import {
   fetchAccounts,
   updateSorting,
   newPage,
-  showRejectUsernameDialog,
   hideRejectUsernameDialog
 } from '../../../actions/community';
 
@@ -26,76 +19,19 @@ class CommunityContainer extends Component {
     this.props.fetchAccounts({});
   }
 
-  approveUser = ({userId}) => {
-    return this.props.setUserStatus({userId, status: 'APPROVED'});
-  }
-
-  banUser = ({userId}) => {
-    return this.props.setUserStatus({userId, status: 'BANNED'});
-  }
-
   render() {
-    if (this.props.data.error) {
-      return <div>{this.props.data.error.message}</div>;
-    }
-
-    if (!('users' in this.props.root)) {
-      return <div><Spinner/></div>;
-    }
     return (
-      <Community {...this.props} approveUser={this.approveUser} banUser={this.banUser}/>
+      <Community {...this.props} />
     );
   }
 }
-
-export const withCommunityQuery = withQuery(gql`
-  query CoralAdmin_Community($action_type: ACTION_TYPE) {
-    users(query:{action_type: $action_type}){
-      id
-      username
-      status
-      roles
-      actions{
-        id
-        created_at
-        ... on FlagAction {
-          reason
-          message
-          user {
-            id
-            username
-          }
-        }
-      }
-      action_summaries {
-        count
-        ... on FlagActionSummary {
-          reason
-        }
-      }
-    }
-  }
-`, {
-  options: ({params: {action_type = 'FLAG'}}) => {
-    return {
-      variables: {
-        action_type: action_type
-      }
-    };
-  }
-});
-
 const mapStateToProps = (state) => ({
-  community: state.community.toJS(),
-  currentUser: state.auth.toJS().user,
+  community: state.community,
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     fetchAccounts,
-    showBanUserDialog,
-    showSuspendUserDialog,
-    showRejectUsernameDialog,
     hideRejectUsernameDialog,
     updateSorting,
     newPage,
@@ -103,7 +39,6 @@ const mapDispatchToProps = (dispatch) =>
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  withCommunityQuery,
   withSetUserStatus,
   withRejectUsername,
 )(CommunityContainer);

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

@@ -0,0 +1,128 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import withQuery from 'coral-framework/hocs/withQuery';
+import {Spinner} from 'coral-ui';
+
+import {withSetUserStatus} from 'coral-framework/graphql/mutations';
+import {showBanUserDialog} from 'actions/banUserDialog';
+import {showSuspendUserDialog} from 'actions/suspendUserDialog';
+import {showRejectUsernameDialog} from '../../../actions/community';
+import {viewUserDetail} from '../../../actions/userDetail';
+import {getDefinitionName} from 'coral-framework/utils';
+import {appendNewNodes} from 'plugin-api/beta/client/utils';
+import update from 'immutability-helper';
+
+import FlaggedAccounts from '../components/FlaggedAccounts';
+import FlaggedUser from '../containers/FlaggedUser';
+
+class FlaggedAccountsContainer extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  approveUser = ({userId}) => {
+    return this.props.setUserStatus({userId, status: 'APPROVED'});
+  }
+
+  loadMore = () => {
+    return this.props.data.fetchMore({
+      query: LOAD_MORE_QUERY,
+      variables: {
+        limit: 5,
+        cursor: this.props.root.users.endCursor,
+      },
+      updateQuery: (previous, {fetchMoreResult:{users}}) => {
+        const updated = update(previous, {
+          users: {
+            nodes: {
+              $apply: (nodes) => appendNewNodes(nodes, users.nodes),
+            },
+            hasNextPage: {$set: users.hasNextPage},
+            endCursor: {$set: users.endCursor},
+          },
+        });
+        return updated;
+      },
+    });
+  };
+
+  render() {
+    if (this.props.data.error) {
+      return <div>{this.props.data.error.message}</div>;
+    }
+
+    if (this.props.data.loading) {
+      return <div><Spinner/></div>;
+    }
+    return (
+      <FlaggedAccounts
+        showBanUserDialog={this.props.showBanUserDialog}
+        showSuspendUserDialog={this.props.showSuspendUserDialog}
+        showRejectUsernameDialog={this.props.showRejectUsernameDialog}
+        viewUserDetail={this.props.viewUserDetail}
+        approveUser={this.approveUser}
+        loadMore={this.loadMore}
+        data={this.props.data}
+        root={this.props.root}
+        users={this.props.root.users}
+        me={this.props.root.me}
+      />
+    );
+  }
+}
+
+const LOAD_MORE_QUERY = gql`
+  query TalkAdmin_LoadMoreFlaggedAccounts($limit: Int, $cursor: Cursor) {
+    users(query:{action_type: FLAG, statuses: [PENDING], limit: $limit, cursor: $cursor}){
+      hasNextPage
+      endCursor
+      nodes {
+        __typename
+        ...${getDefinitionName(FlaggedUser.fragments.user)}
+      }
+    }
+  }
+  ${FlaggedUser.fragments.user}
+`;
+
+export const withFlaggedAccountsyQuery = withQuery(gql`
+  query TalkAdmin_FlaggedAccounts {
+    ...${getDefinitionName(FlaggedUser.fragments.root)}
+    users(query:{action_type: FLAG, statuses: [PENDING], limit: 10}){
+      hasNextPage
+      endCursor
+      nodes {
+        __typename
+        ...${getDefinitionName(FlaggedUser.fragments.user)}
+      }
+    }
+    me {
+      __typename
+      ...${getDefinitionName(FlaggedUser.fragments.me)}
+    }
+  }
+  ${FlaggedUser.fragments.root}
+  ${FlaggedUser.fragments.user}
+  ${FlaggedUser.fragments.me}
+`, {
+  options: {
+    fetchPolicy: 'network-only',
+  },
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    showBanUserDialog,
+    showSuspendUserDialog,
+    showRejectUsernameDialog,
+    viewUserDetail,
+  }, dispatch);
+
+export default compose(
+  connect(null, mapDispatchToProps),
+  withFlaggedAccountsyQuery,
+  withSetUserStatus,
+)(FlaggedAccountsContainer);

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

@@ -0,0 +1,42 @@
+import {gql} from 'react-apollo';
+import FlaggedUser from '../components/FlaggedUser';
+import {withFragments} from 'plugin-api/beta/client/hocs';
+
+export default withFragments({
+  root: gql`
+    fragment TalkAdminCommunity_FlaggedUser_root on RootQuery {
+      __typename
+    }
+    `,
+  me: gql`
+    fragment TalkAdminCommunity_FlaggedUser_me on User {
+      id
+    }
+    `,
+  user: gql`
+    fragment TalkAdminCommunity_FlaggedUser_user on User {
+      id
+      username
+      status
+      roles
+      actions{
+        id
+        created_at
+        ... on FlagAction {
+          reason
+          message
+          user {
+            id
+            username
+          }
+        }
+      }
+      action_summaries {
+        count
+        ... on FlagActionSummary {
+          reason
+        }
+      }
+    }
+  `
+})(FlaggedUser);

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

@@ -4,6 +4,7 @@ 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 {
 
@@ -22,13 +23,14 @@ class TableContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  commenters: state.community.get('accounts'),
+  commenters: state.community.accounts,
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     setCommenterStatus,
     setRole,
+    viewUserDetail,
   }, dispatch);
 
 export default compose(

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

@@ -1,3 +1,7 @@
+/**
+ * @TODO: deprecated as this file contains styles from multiple components. Please refactor.
+ */
+
 .container {
   display: flex;
 

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

@@ -111,20 +111,20 @@ export default class Configure extends Component {
       (bool, error) => this.state.errors[error] ? false : bool, this.state.changed);
 
     return (
-        <div className={styles.container}>
-          <div className={styles.leftColumn}>
-            <List onChange={this.changeSection} activeItem={activeSection}>
-              <Item itemId='stream' icon='speaker_notes'>
-                {t('configure.stream_settings')}
-              </Item>
-              <Item itemId='moderation' icon='thumbs_up_down'>
-                {t('configure.moderation_settings')}
-              </Item>
-              <Item itemId='tech' icon='code'>
-                {t('configure.tech_settings')}
-              </Item>
-            </List>
-            <div className={styles.saveBox}>
+      <div className={styles.container}>
+        <div className={styles.leftColumn}>
+          <List onChange={this.changeSection} activeItem={activeSection}>
+            <Item itemId='stream' icon='speaker_notes'>
+              {t('configure.stream_settings')}
+            </Item>
+            <Item itemId='moderation' icon='thumbs_up_down'>
+              {t('configure.moderation_settings')}
+            </Item>
+            <Item itemId='tech' icon='code'>
+              {t('configure.tech_settings')}
+            </Item>
+          </List>
+          <div className={styles.saveBox}>
             {
               showSave ?
                 <Button
@@ -136,25 +136,25 @@ export default class Configure extends Component {
                 >
                   {t('configure.save_changes')}
                 </Button>
-              :
+                :
                 <Button
                   raised
                   disabled
                   icon='check'
                   full
                 >
-                {t('configure.save_changes')}
-               </Button>
+                  {t('configure.save_changes')}
+                </Button>
             }
-            </div>
+          </div>
 
-          </div>
-          <div className={styles.mainContent}>
-            { this.props.saveFetchingError }
-            { this.props.fetchSettingsError }
-            { section }
-          </div>
         </div>
+        <div className={styles.mainContent}>
+          { this.props.saveFetchingError }
+          { this.props.fetchSettingsError }
+          { section }
+        </div>
+      </div>
     );
   }
 }

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

@@ -1,7 +1,9 @@
 import React, {Component} from 'react';
 import t from 'coral-framework/services/i18n';
+import {join} from 'path';
 import styles from './Configure.css';
 import {Button, Card} from 'coral-ui';
+import {BASE_URL} from 'coral-framework/constants/url';
 
 class EmbedLink extends Component {
 
@@ -24,21 +26,14 @@ class EmbedLink extends Component {
   }
 
   render () {
-    const location = window.location;
-    const talkBaseUrl = [
-      location.protocol,
-      '//',
-      location.hostname,
-      location.port ? (`:${window.location.port}`) : ''
-    ].join('');
-    const coralJsUrl = [talkBaseUrl, '/embed.js'].join('');
+    const coralJsUrl = join(BASE_URL, '/embed.js');
     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: '${talkBaseUrl}'
+    talk: '${BASE_URL}'
   });
 "></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-admin/src/components/MarkdownEditor';
+import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -93,15 +93,15 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
               value={settings.charCount}
               disabled={settings.charCountEnable ? '' : 'disabled'}
             />
-          <span>{t('configure.comment_count_text_post')}</span>
-              {
-                errors.charCount &&
+            <span>{t('configure.comment_count_text_post')}</span>
+            {
+              errors.charCount &&
                 <span className={styles.settingsError}>
                   <br/>
                   <Icon name="error_outline"/>
                   {t('configure.comment_count_error')}
                 </span>
-              }
+            }
           </p>
         </div>
       </Card>

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

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

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

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

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

@@ -5,17 +5,24 @@ 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) {
-    super(props);
+  constructor (props, context) {
+    super(props, context);
+    const {storage} = context;
     try {
-      if (window.localStorage.getItem('coral:dashboardNote') === null) {
-        window.localStorage.setItem('coral:dashboardNote', 'show');
+      if (storage && storage.getItem('coral:dashboardNote') === null) {
+        storage.setItem('coral:dashboardNote', 'show');
       }
     } catch (e) {
 
@@ -24,7 +31,7 @@ class CountdownTimer extends React.Component {
 
     this.state = {
       secondsUntilRefresh: refreshIntervalSeconds,
-      dashboardNote: window.localStorage.getItem('coral:dashboardNote') || 'show'
+      dashboardNote: (storage && storage.getItem('coral:dashboardNote')) || 'show'
     };
   }
 
@@ -54,8 +61,11 @@ class CountdownTimer extends React.Component {
   }
 
   dismissNote = () => {
+    const {storage} = this.context;
     try {
-      window.localStorage.setItem('coral:dashboardNote', 'hide');
+      if (storage) {
+        storage.setItem('coral:dashboardNote', 'hide');
+      }
     } catch (e) {
 
       // when setItem fails in Safari Private mode
@@ -64,7 +74,8 @@ class CountdownTimer extends React.Component {
   }
 
   render () {
-    const hideReloadNote = window.localStorage.getItem('coral:dashboardNote') === 'hide' ||
+    const {storage} = this.context;
+    const hideReloadNote = (storage && storage.getItem('coral:dashboardNote') === 'hide') ||
       this.state.dashboardNote === 'hide'; // for Safari Incognito
     return (
       <p