Merge pull request #557 from coralproject/admin-queue-polish

load more comments to moderate if available

.dockerignore

@@ -1,3 +1,18 @@
+# excluded because we'll likely need to rebuild this.
 node_modules
+
+# scripts are used during development and testing, not
+# production.
+scripts
+
+# documentation should not be visable in production.
+docs
+
+# static assets are rebuild in the docker container.
+dist
+
+# tests are not run in the docker container.
 test
+
+# we won't use the .git folder in production.
 .git

.editorconfig

@@ -2,14 +2,11 @@ root = true
 
 [*]
 indent_style = space
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[{package.json,.*rc,*.yml}]
-indent_style = space
-indent_size = 2
-
 [*.md]
 trim_trailing_whitespace = false

.eslintignore

@@ -1,3 +1,7 @@
 dist
 client/lib
 **/*.html
+plugins/*
+!plugins/coral-plugin-facebook-auth
+!plugins/coral-plugin-respect
+node_modules

.gitignore

@@ -1,20 +1,24 @@
 node_modules
-npm-debug.log*
+
 dist
-!dist/coral-admin
-dist/coral-admin/bundle.js
-test/e2e/reports
-.DS_Store
-*.iml
-*.swp
+
+npm-debug.log*
 dump.rdb
+
 .env
 *.cfg
-.idea/
-coverage/
-.tags
-.tags1
 
-# remove plugin folders
-plugins
+.idea/
+*.swp
+
+test/e2e/reports
+coverage/
+
 plugins.json
+plugins/*
+!plugins/coral-plugin-facebook-auth
+!plugins/coral-plugin-respect
+!plugins/coral-plugin-offtopic
+!plugins/coral-plugin-like
+
+**/node_modules/*

.nodemon.json

@@ -1,5 +1,5 @@
 {
   "verbose": true,
-  "ignore": ["test/*", "client/*", "dist/*"],
+  "ignore": ["test/*", "client/*", "dist/*", "plugins/*/client"],
   "ext": "js,json,graphql"
 }

CONTRIBUTING.md

@@ -10,10 +10,11 @@ By contributing to this project you agree to the [Code of Conduct](https://coral
 
 You can view what the Coral Team is working on next here https://www.pivotaltracker.com/n/projects/1863625.
 
-You can view product ideas and our longer term roadmap here https://trello.com/b/ILND751a/talk.
+If you'd like to see our longer term roadmap, [get in touch.](https://coralproject.net/contact.html)
 
 
 ## Contribute to the documentation
+
 Clear docs are a prerequisite for a successful open source project. We value non-code and code contributions equally.
 
 We are looking for _documentarians_ to:
@@ -55,7 +56,7 @@ Please [contact us](https://github.com/coralproject/talk/wiki/Contact-Us) early
 
 To get an idea of where the Coral Team is going, see:
 
-* our [product/design Trello board](https://trello.com/b/ILND751a/talk),
+* our [Slack channel](https://coralprojectslackin.herokuapp.com/), where you can talk directly with the Team and other community members,
 * our [current stories](https://www.pivotaltracker.com/n/projects/1863625), and
 * our [issues](https://github.com/coralproject/talk/issues).
 

Dockerfile

@@ -1,20 +1,26 @@
-FROM node:7
+FROM node:7.8
 
 # Create app directory
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app
 
 # Setup the environment
-ENV NODE_ENV production
 ENV PATH /usr/src/app/bin:$PATH
 ENV TALK_PORT 5000
 EXPOSE 5000
 
-# Install app dependencies
-COPY package.json yarn.lock /usr/src/app/
-RUN yarn install --production
-
 # Bundle app source
 COPY . /usr/src/app
 
+# 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

@@ -0,0 +1,14 @@
+FROM coralproject/talk:latest
+
+# Bundle app source
+ONBUILD COPY . /usr/src/app
+
+# At this stage, we need to install the development dependancies again because
+# 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

INSTALL.md

@@ -1,37 +1,204 @@
+## 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
 
-### System
-
 - 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/) v7 or later
-- [MongoDB](https://www.mongodb.com/) v3.4 or later
-- [Redis](https://redis.io/) v3.2 or later
-- [Yarn](https://yarnpkg.com/) v0.19.1 or later
+- [Node](https://nodejs.org/) ~7.8
+- [Yarn](https://yarnpkg.com/) ^0.22.0
 
-_Please be sure to check the versions of these requirements. Insufficient versions of these may lead to unexpected errors!_
+_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
-# Download the tarball containing the repository
-curl -L https://github.com/coralproject/talk/tarball/master -o coralproject-talk.tar.gz
+git clone https://github.com/coralproject/talk.git
+```
 
-# Untar that file and change to that directory
-tar xpf coralproject-talk.tar.gz
-mv coralproject-talk-* coralproject-talk
-cd coralproject-talk
+#### Building
 
+We now have to install the dependencies and build the static assets.
+
+```bash
 # Install package dependancies
 yarn
 
@@ -39,6 +206,17 @@ yarn
 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
@@ -50,45 +228,48 @@ You can start the server after configuring the server using the command:
 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
+- `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
 
-## Installation From Docker Hub
+# Setup
 
-### Requirements
+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.
 
-There are some runtime requirements for running Talk for Docker:
+## Via Web
 
-- [MongoDB](https://www.mongodb.com/) v3.2 or later
-- [Redis](https://redis.io/) v3.2 or later
-- [Docker](https://www.docker.com/) v1.13.0 or later
-- [Docker Compose](https://docs.docker.com/compose/) v1.10.0 or later
+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.
 
-_Please be sure to check the versions of these requirements. Insufficient versions of these may lead to unexpected errors!_
+## Via CLI
 
-### Installing
+If you want to perform your setup through the terminal, you can simply run:
 
 ```bash
-# Create a directory for talk
-mkdir coralproject-talk
-cd coralproject-talk
-
-# Download the docker-compose.yml file from the repository
-curl -LO https://raw.githubusercontent.com/coralproject/talk/master/docker-compose.yml
+cli setup
 ```
 
-At this stage, you should refer to the `README.md` file for required
-configuration variables to add to the environment key for the `talk` service
-listed in the `docker-compose.yml` file.
+And follow the instructions to perform initial setup and create your first user
+account.
 
-### Running
 
-```bash
-# Start the services using compose
-docker-compose up -d
-```
+# 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

@@ -3,13 +3,20 @@
 Plugins for Talk can take various forms, currently we are only supporting server
 side plugins.
 
-## Plugin Registration: `plugins.json`
+## Plugin Registration
 
-All plugins must be registered in the root file `plugins.json`.
+The parsing order for the plugin registration is as follows:
 
-The format for this file is thus:
+- `TALK_PLUGINS_JSON` environment variable
+- `plugins.json` file
+- `plugins.default.json` file
 
-```js
+If you need to "disable all plugins", you can simply provide `{}` as the
+contents of `process.env.TALK_PLUGINS_JSON` or the `plugins.json`.
+
+The format for this is thus:
+
+```json
 {
   "server": [
     "people"
@@ -18,12 +25,94 @@ The format for this file is thus:
 ```
 
 Where we have a `server` key with an array of plugins that match the folder
-name in the `plugins/` folder. For example, the above `plugins.json` would
+name in the `plugins/` folder. For example, the above config would
 require a plugin from `plugins/people`, which must provide a `index.js` file
 that returns an object that matches the Plugin Specification.
 
+If the package is external (available on NPM) you can specify the string for
+the version by using an object instead, for example:
+
+```json
+{
+  "server": [
+    {"people": "^1.2.0"}
+  ]
+}
+```
+
+External plugins can be resolved by running:
+
+```bash
+./bin/cli plugins reconcile
+```
+
+This achieves two things:
+
+1. It will traverse into local plugin folders and install their dependencies.
+  _Note that if the plugin is already installed and available in the node_modules folder, it will not be
+  fetched again unless there is a version mismatch._ This will result in the
+  project `package.json` and `yarn.lock` files to be modified, this is normal as
+  this ensures that repeated deployments (with the same config) will have the
+  same config, these changes should not be committed to source control.
+2. It will seek out dependencies that are listed in the object notation and try
+  to install them from npm.
+
+## Plugin Dependencies
+
+You may also include additional external dependencies in your local packages by
+specifying a `package.json` at your plugin root which will result in a
+`node_modules` folder being generated at the plugin root with your specific
+dependencies.
+
+## Deployment Solutions
+
+Plugins can be deployed with a production instance of Talk.
+
+### Source
+
+Source deployments can just modify the `plugins.json` file and include any
+local plugins into the `plugins/` directory. After including the config, you
+need to reconcile the plugins and build the static assets:
+
+```bash
+# get plugin dependancies and remote plugins
+./bin/cli plugins reconcile
+
+# build staic assets (including enabled client side plugins)
+yarn build
+```
+
+Then the application can be started as is.
+
+### Docker
+
+If you deploy using Docker, you can extend from the `*-onbuild` image, an
+example `Dockerfile` for your project could be:
+
+```Dockerfile
+FROM coralproject/talk:latest-onbuild
+```
+
+Where the directory for your instance would contain a `plugins.json` file
+describing the plugin requirements and a `plugins` directory containing any
+other local plugins that should be included.
+
+Onbuild triggers will execute when the image is building with your custom
+configuration and will ensure that the image is ready to use by building all
+assets inside the image as well.
+
 ## Server Plugins
 
+### API
+
+You can access any API available inside the talk directory in a plugin by simply
+importing the file relative to the talk project root. An example would be if you
+wanted to import the `MetadataService`, you would simply write:
+
+```javascript
+const MetadataService = require('services/metadata');
+```
+
 ### Specification
 
 Each plugin should export a single object with all hooks available on it.
@@ -56,6 +145,10 @@ type RootMutation {
 type RootQuery {
   people: [Person!]
 }
+
+type Subscription {
+  leader: Person
+}
 ```
 
 Thanks to [gql-merge](https://www.npmjs.com/package/gql-merge) the contents of
@@ -170,6 +263,105 @@ If your post function accepts four parameters, then it can modify the field
 result. It is *required* that the function resolves a promise (or returns) with
 the modified value or simply the original if you didn't modify it.
 
+#### Field: `setupFunctions`
+
+```js
+setupFunctions: {
+  leader: (options, args) => ({
+    leader: {
+      filter: (person) => person.place === 1
+    },
+  }),
+}
+```
+
+Setup functions allow you to create filters that control which pubsub.publish() events
+send data to the client. If the type in question contains args, clients may subscribe using those arguments to further filter their subscription.
+
+For more information, see the [Apollo Docs](https://github.com/apollographql/graphql-subscriptions).
+
+#### Field: `router`
+
+```js
+(router) => {
+  router.get('/api/v1/people', (req, res) => {
+    res.json({people: [{name: 'Bob'}]});
+  });
+}
+```
+
+The Router hook allows you to create a function that accepts the base express
+router where you can mount any amount of middleware/routes to do any form of
+action needed by external applications. We also provide the authorization
+middleware via:
+
+```js
+const authorization = require('middleware/authorization');
+
+module.exports = {
+  router(router) {
+    router.get('/api/v1/people', authorization.needed('ADMIN'), (req, res) => {
+      res.json({people: [{name: 'SECRET PEOPLE'}]});
+    });
+  }
+}
+```
+
+#### Field: `passport`
+
+```js
+const FacebookStrategy = require('passport-facebook').Strategy;
+const UsersService = require('services/users');
+const {ValidateUserLogin, HandleAuthPopupCallback} = require('services/passport');
+
+module.exports = {
+  passport(passport) {
+    passport.use(new FacebookStrategy({
+      clientID: process.env.TALK_FACEBOOK_APP_ID,
+      clientSecret: process.env.TALK_FACEBOOK_APP_SECRET,
+      callbackURL: `${process.env.TALK_ROOT_URL}/api/v1/auth/facebook/callback`,
+      passReqToCallback: true,
+      profileFields: ['id', 'displayName', 'picture.type(large)']
+    }, async (req, accessToken, refreshToken, profile, done) => {
+
+      let user;
+      try {
+        user = await UsersService.findOrCreateExternalUser(profile);
+      } catch (err) {
+        return done(err);
+      }
+
+      return ValidateUserLogin(profile, user, done);
+    }));
+  },
+  router(router) {
+
+    // Note that we have to import the passport instance here, it is
+    // instantiated after all the strategies have been mounted.
+    const {passport} = require('services/passport');
+
+    /**
+     * Facebook auth endpoint, this will redirect the user immediatly to facebook
+     * for authorization.
+     */
+    router.get('/facebook', passport.authenticate('facebook', {display: 'popup', authType: 'rerequest', scope: ['public_profile']}));
+
+    /**
+     * Facebook callback endpoint, this will send the user a html page designed to
+     * send back the user credentials upon sucesfull login.
+     */
+    router.get('/facebook/callback', (req, res, next) => {
+
+      // Perform the facebook login flow and pass the data back through the opener.
+      passport.authenticate('facebook', HandleAuthPopupCallback(req, res, next))(req, res, next);
+    });
+  }
+};
+```
+
+This is a full example including the routes hook to add the required components
+to the application router to support a different auth strategy.
+
 ### Full Example
 
 Contents of `plugins.json`:
@@ -204,6 +396,10 @@ module.exports = {
   type RootQuery {
     people: [Person!]
   }
+
+  type Subscription {
+    leader: Person
+  }
   `,
   context: {
     Slack: () => ({
@@ -259,6 +455,13 @@ module.exports = {
         }
       }
     }
+  },
+  setupFunctions: {
+    leader: (options, args) => ({
+      leader: {
+        filter: (person) => person.place === 1
+      }
+    }
   }
 };
 

README.md

@@ -28,12 +28,6 @@ The Talk application looks for the following configuration values either as envi
 secure cookies.
 - `TALK_ROOT_URL` (*required*) - root url of the installed application externally
 available in the format: `<scheme>://<host>` without the path.
-
-- `TALK_FACEBOOK_APP_ID` (*required for login via fb*) - the Facebook app id for your Facebook
-Login enabled app.
-- `TALK_FACEBOOK_APP_SECRET` (*required for login via fb*) - the Facebook app secret for your
-Facebook Login enabled app.
-
 - `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.
@@ -43,6 +37,7 @@ Facebook Login enabled app.
 - `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - Defaults to `FALSE`. When `TRUE`, disables the dynamic setup endpoint.
 - `TALK_RECAPTCHA_SECRET` (*required for reCAPTCHA support*) - server secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
 - `TALK_RECAPTCHA_PUBLIC` (*required for reCAPTCHA support*) - client secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
+- `TALK_PLUGINS_JSON` (_optional_) - used to specify the plugin config via the environment
 
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.

app.js

@@ -3,14 +3,13 @@ const bodyParser = require('body-parser');
 const morgan = require('morgan');
 const path = require('path');
 const helmet = require('helmet');
-const passport = require('./services/passport');
-const session = require('express-session');
+const {passport} = require('./services/passport');
+const plugins = require('./services/plugins');
 const enabled = require('debug').enabled;
-const RedisStore = require('connect-redis')(session);
-const redis = require('./services/redis');
 const csrf = require('csurf');
 const errors = require('./errors');
-const graph = require('./graph');
+const session = require('./services/session');
+const {createGraphOptions} = require('./graph');
 const apollo = require('graphql-server-express');
 
 const app = express();
@@ -42,39 +41,23 @@ app.set('view engine', 'ejs');
 // SESSION MIDDLEWARE
 //==============================================================================
 
-const session_opts = {
-  secret: process.env.TALK_SESSION_SECRET,
-  httpOnly: true,
-  rolling: true,
-  saveUninitialized: true,
-  resave: true,
-  unset: 'destroy',
-  name: 'talk.sid',
-  cookie: {
-    secure: false,
-    maxAge: 8.64e+7, // 24 hours for session token expiry
-  },
-  store: new RedisStore({
-    client: redis.createClient(),
-  })
-};
-
-if (app.get('env') === 'production') {
-
-  // Enable the secure cookie when we are in production mode.
-  session_opts.cookie.secure = true;
-} else if (app.get('env') === 'test') {
-
-  // Add in the secret during tests.
-  session_opts.secret = 'keyboard cat';
-}
-
-app.use(session(session_opts));
+app.use(session);
 
 //==============================================================================
 // 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());
 app.use(passport.session());
@@ -84,7 +67,7 @@ app.use(passport.session());
 //==============================================================================
 
 // GraphQL endpoint.
-app.use('/api/v1/graph/ql', apollo.graphqlExpress(graph.createGraphOptions));
+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') {

bin/cli

@@ -13,6 +13,7 @@ program
   .command('setup', 'setup the application')
   .command('jobs', 'work with the job queues')
   .command('users', 'work with the application auth')
+  .command('plugins', 'provides utilities for interacting with the plugin system')
   .parse(process.argv);
 
 /**

bin/cli-plugins

@@ -0,0 +1,298 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+// Interface heavily inspired by the yarn package manager:
+// https://yarnpkg.com/
+
+const program = require('./commander');
+
+// Make things colorful!
+require('colors');
+const emoji = require('node-emoji');
+
+const dir = process.cwd();
+const fs = require('fs');
+const path = require('path');
+const spawn = require('cross-spawn');
+const semver = require('semver');
+const resolve = require('resolve');
+const {plugins, itteratePlugins, isInternal} = require('../plugins');
+
+function existsInNodeModules(name) {
+  try {
+    resolve.sync(name, {basedir: dir});
+
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function versionMatch(name, version) {
+  try {
+    let matched = false;
+
+    resolve.sync(name, {
+      basedir: dir,
+      packageFilter: (pkg) => {
+        if (pkg && pkg.version && semver.satisfies(pkg.version, version)) {
+          matched = true;
+        }
+
+        return pkg;
+      }
+    });
+
+    return matched;
+  } catch (e) {
+    return false;
+  }
+}
+
+const EXTERNAL = /^\w[a-z\-0-9\.]+$/; // Match "react", "path", "fs", "lodash.random", etc.
+
+function reconcilePackages({quiet = false, upgradeRemote = false}) {
+  const fetchable = [];
+  const local = [];
+  const upgradable = [];
+
+  if (!quiet) {
+    console.log();
+    console.log(' +local     (l)  packages in your project');
+    console.log(' +external  (e)  packages are external');
+    console.log(' +outofdate (oe) packages are external but are out of date');
+    console.log(' +missing   (m)  packages are not found');
+    console.log();
+  }
+
+  for (let i in plugins) {
+    let section = itteratePlugins(plugins[i]);
+
+    for (let j in section) {
+      let {name, version} = section[j];
+
+      let namespaced = name.charAt(0) === '@';
+      let dep = name.split('/')
+        .slice(0, namespaced ? 2 : 1)
+        .join('/');
+
+      // Ignore relative modules, which aren't installed by NPM
+      if (!dep.match(EXTERNAL) && !namespaced) {
+        return;
+      }
+
+      if (isInternal(dep)) {
+        if (!quiet) {
+          console.log(` l  ${name}`);
+        }
+
+        local.push({name, version});
+        continue;
+      }
+
+      if (!existsInNodeModules(dep)) {
+        if (!quiet) {
+          console.log(` m  ${name}`);
+        }
+        fetchable.push({name, version});
+      } else if (!versionMatch(dep, version)) {
+
+        // A plugin was found, yet the current version does not match the
+        // current version installed. We should warn if upgradeRemote is
+        // not enabled that it is currently not supported.
+        if (!upgradeRemote) {
+          if (!quiet) {
+            console.warn(` oe ${name} (package upgrade may be required)`.bgRed);
+          }
+
+          continue;
+        }
+
+        console.log(` oe ${name} (package upgrade may be required)`);
+
+        upgradable.push({name, version});
+      } else {
+        if (!quiet) {
+          console.log(` e  ${name}`);
+        }
+
+        if (upgradeRemote) {
+          upgradable.push({name, version});
+        }
+      }
+    }
+  }
+
+  if (!quiet) {
+    console.log();
+  }
+
+  return {local, fetchable, upgradable};
+}
+
+async function reconcileRemotePlugins({skipLocal, dryRun, upgradeRemote}) {
+  console.log(`\n[${skipLocal ? '1/2' : '2/3'}] ${emoji.get('mag')} Reconciling plugins...`.yellow);
+  const {fetchable, upgradable} = reconcilePackages({upgradeRemote});
+
+  console.log(`[${skipLocal ? '2/2' : '3/3'}] ${emoji.get('truck')} Fetching plugins...\n`.yellow);
+
+  if (fetchable.length > 0) {
+
+    console.log(`$ yarn add --ignore-scripts ${fetchable.map(({name, version}) => `${name}@${version}`.cyan)}`);
+
+    if (!dryRun) {
+
+      let args = [
+        'add',
+        '--ignore-scripts',
+        ...fetchable.map(({name, version}) => `${name}@${version}`)
+      ];
+
+      let output = spawn.sync('yarn', args, {
+        stdio: ['ignore', 'pipe', 'inherit']
+      });
+
+      if (output.status) {
+        throw new Error('Could not install external plugins, errors occured during install');
+      }
+
+      console.log(output.stdout.toString());
+    }
+  }
+
+  if (upgradable.length > 0) {
+    console.log(`$ yarn upgrade ${upgradable.map(({name, version}) => `${name}@${version}`.cyan)}`);
+
+    if (!dryRun) {
+
+      let args = [
+        'upgrade',
+        ...upgradable.map(({name, version}) => `${name}@${version}`)
+      ];
+
+      let output = spawn.sync('yarn', args, {
+        stdio: ['ignore', 'pipe', 'inherit']
+      });
+
+      if (output.status) {
+        throw new Error('Could not install external plugins, errors occured during install');
+      }
+
+      console.log(output.stdout.toString());
+    }
+  }
+
+  return {upgradable, fetchable};
+}
+
+async function reconcileLocalPlugins({skipRemote, dryRun}) {
+  console.log(`\n[${skipRemote ? '1/1' : '1/3'}] ${emoji.get('pick')} Installing local plugin dependencies...\n`.yellow);
+  const {local} = reconcilePackages({quiet: true});
+
+  for (let i in local) {
+    let {name} = local[i];
+
+    if (!fs.existsSync(path.join(dir, 'plugins', name, 'package.json'))) {
+      continue;
+    }
+
+    let wd = path.join(dir, 'plugins', name);
+
+    console.log(`$ cd ${wd.cyan} && yarn`);
+
+    if (!dryRun) {
+      let args = [];
+
+      let output = spawn.sync('yarn', args, {
+        stdio: ['ignore', 'pipe', 'inherit'],
+        cwd: wd
+      });
+
+      if (output.status) {
+        throw new Error('Could not install local plugin dependencies, errors occured during install');
+      }
+
+      console.log(output.stdout.toString());
+    }
+  }
+}
+
+// This traverses the local plugins and installs any dependencies listed there,
+// this only is really needed for plugins that are installed via docker because
+// core plugins will have their dependencies already included in core.
+async function reconcilePluginDeps({skipLocal, skipRemote, dryRun, upgradeRemote}) {
+  let startTime = new Date();
+
+  // We don't need to do anything if we skip everything....
+  if (skipLocal && skipRemote) {
+    return;
+  }
+
+  // Traverse local plugins and install dependencies if enabled.
+  if (!skipLocal) {
+    await reconcileLocalPlugins({skipRemote, dryRun});
+  }
+
+  // Locate any external plugins and install them.
+  if (!skipRemote) {
+    let results = [];
+    try {
+      results = await reconcileRemotePlugins({skipLocal, skipRemote, dryRun, upgradeRemote});
+    } catch (e) {
+      throw e;
+    }
+
+    let status;
+    if (dryRun) {
+      status = '[dry-run] success'.green;
+    } else {
+      status = 'success'.green;
+    }
+
+    let message;
+    if (results.upgradable.length === 0 && results.fetchable.length === 0) {
+      message = 'Already up-to-date.';
+    } else if (results.upgradable.length === 0) {
+      message = `Fetched ${results.fetchable.length} new plugins.`;
+    } else if (results.fetchable.length === 0) {
+      message = `Upgraded ${results.upgradable.length} new plugins.`;
+    } else {
+      message = `Fetched ${results.fetchable.length} new plugins, upgraded ${results.upgradable.length} plugins.`;
+    }
+
+    console.log(`\n${status} ${message}`);
+  }
+
+  let endTime = new Date();
+
+  let totalTime = ((endTime.getTime() - startTime.getTime()) / 1000).toFixed(2);
+  console.log(`✨ Done in ${totalTime}s.`);
+}
+
+//==============================================================================
+// Setting up the program command line arguments.
+//==============================================================================
+
+program
+  .command('list')
+  .description('')
+  .action(reconcilePackages);
+
+program
+  .command('reconcile')
+  .description('reconciles local plugin dependencies and downloads external plugins')
+  .option('-u, --upgrade-remote', 'upgrades remote dependencies')
+  .option('-d, --dry-run', 'does not actually change anything on the filesystem acts only as a simulation')
+  .option('--skip-local', 'skips the local dependancy reconciliation')
+  .option('--skip-remote', 'skips the remote plugin reconciliation')
+  .action(reconcilePluginDeps);
+
+program.parse(process.argv);
+
+// If there is no command listed, output help.
+if (!process.argv.slice(2).length) {
+  program.outputHelp();
+}

bin/cli-serve

@@ -1,13 +1,14 @@
 #!/usr/bin/env node
 
-const app = require('../app');
 const program = require('./commander');
-const http = require('http');
+const app = require('../app');
+const {createServer} = require('http');
 const scraper = require('../services/scraper');
 const mailer = require('../services/mailer');
 const kue = require('../services/kue');
 const mongoose = require('../services/mongoose');
 const util = require('./util');
+const {createSubscriptionManager} = require('../graph/subscriptions');
 
 /**
 * Get port from environment and store in Express.
@@ -20,7 +21,7 @@ app.set('port', port);
 /**
 * Create HTTP server.
 */
-const server = http.createServer(app);
+const server = createServer(app);
 
 /**
  * Event listener for HTTP server "error" event.
@@ -76,20 +77,29 @@ function normalizePort(val) {
 function onListening() {
   let addr = server.address();
   let bind = typeof addr === 'string'
-    ? `pipe ${  addr}`
-    : `port ${  addr.port}`;
-  console.log(`Listening on ${  bind}`);
+    ? `pipe ${addr}`
+    : `port ${addr.port}`;
+  console.log(`API Server Listening on ${bind}`);
 }
 
 /**
  * Start the app.
  */
-function startApp() {
+function startApp(program) {
 
   /**
   * Listen on provided port, on all network interfaces.
   */
-  server.listen(port);
+  server.listen(port, () => {
+
+    // Mount the websocket server if requested.
+    if (program.websockets) {
+      console.log(`Websocket Server Listening on ${port}`);
+
+      // Mount the subscriptions server on the application server.
+      createSubscriptionManager(server);
+    }
+  });
   server.on('error', onError);
   server.on('listening', onListening);
 }
@@ -100,10 +110,11 @@ function startApp() {
 
 program
   .option('-j, --jobs', 'enable job processing on this thread')
+  .option('-w, --websockets', 'enable the websocket (subscriptions) handler on this thread')
   .parse(process.argv);
 
 // Start the application serving.
-startApp();
+startApp(program);
 
 // Enable job processing on the thread if enabled.
 if (program.jobs) {

circle.yml

@@ -1,6 +1,6 @@
 machine:
   node:
-    version: 7.6
+    version: 7.9
   services:
     - docker
     - redis
@@ -20,6 +20,7 @@ dependencies:
     # - sudo service mongod restart
 
     # Install node dependencies.
+    - yarn --version
     - yarn
   cache_directories:
     - ~/.cache/yarn
@@ -47,9 +48,9 @@ deployment:
   release:
     tag: /v[0-9]+(\.[0-9]+)*/
     commands:
-      - bash ./scripts/deploy.sh
+      - bash ./scripts/docker.sh deploy
 
   latest:
     branch: master
     commands:
-      - bash ./scripts/deploy.sh
+      - bash ./scripts/docker.sh deploy

client/coral-admin/README.md

@@ -1,23 +0,0 @@
-
-# Coral Admin
-
-This app handles moderation for Talk (and maybe more later on)
-
-## Installation
-
-    $ yarn install
-    $ cp config.sample.json config.json
-
-Then change `config.json` to adjust it to your project
-
-## Building for production
-
-    $ yarn build
-
-The public folder has everything you need for deployment. You can just copy that folder to your favorite static web server
-
-## Development
-
-    $ yarn start
-
-A development server will be running at http://localhost:4132

client/coral-admin/src/AppRouter.js

@@ -39,6 +39,12 @@ const routes = (
       {/* Moderation Routes */}
 
       <Route path='moderate' component={ModerationLayout}>
+        <Route path='all' components={ModerationContainer}>
+          <Route path=':id' components={ModerationContainer} />
+        </Route>
+        <Route path='accepted' components={ModerationContainer}>
+          <Route path=':id' components={ModerationContainer} />
+        </Route>
         <Route path='premod' components={ModerationContainer}>
           <Route path=':id' components={ModerationContainer} />
         </Route>

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

@@ -6,3 +6,15 @@ export const singleView = () => ({type: actions.SINGLE_VIEW});
 // Ban User Dialog
 export const showBanUserDialog = (user, commentId, showRejectedNote) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId, showRejectedNote});
 export const hideBanUserDialog = (showDialog) => ({type: actions.HIDE_BANUSER_DIALOG, showDialog});
+
+// hide shortcuts note
+export const hideShortcutsNote = () => {
+  try {
+    window.localStorage.setItem('coral:shortcutsNote', 'hide');
+  } catch (e) {
+
+    // above will fail in Safari private mode
+  }
+
+  return {type: actions.HIDE_SHORTCUTS_NOTE};
+};

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

@@ -1,17 +1,30 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import styles from './ModerationList.css';
 import {Button} from 'coral-ui';
 import {menuActionsMap} from '../containers/ModerationQueue/helpers/moderationQueueActionsMap';
 
-const ActionButton = ({type = '', ...props}) => {
+const ActionButton = ({type = '', active, ...props}) => {
+  const typeName = type.toLowerCase();
+  let text = menuActionsMap[type].text;
+
+  if (text === 'Approve' && active) {
+    text = 'Approved';
+  } else if (text === 'Reject' && active) {
+    text = 'Rejected';
+  }
+
   return (
     <Button
-      className={`${type.toLowerCase()} ${styles.actionButton}`}
-      cStyle={type.toLowerCase()}
+      className={`${typeName} ${styles.actionButton} ${active ? styles[`${typeName}__active`] : ''}`}
+      cStyle={typeName}
       icon={menuActionsMap[type].icon}
       onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
-    >{menuActionsMap[type].text}</Button>
+    >{text}</Button>
   );
 };
 
+ActionButton.propTypes = {
+  active: PropTypes.bool
+};
+
 export default ActionButton;

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

@@ -18,3 +18,47 @@
   border-radius: 4px;
   border: 1px solid #999;
 }
+
+.callToAction {
+  position: fixed;
+  left: 10px;
+  bottom: 10px;
+  width: 280px;
+  height: 200px;
+  background: white;
+  padding: 15px;
+  box-sizing: border-box;
+  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
+
+  .ctaHeader {
+    font-size: 16px;
+    margin-bottom: 5px;
+  }
+
+  ul {
+    padding-left: 0;
+    list-style: none;
+    margin: 0 0 10px 0;
+  }
+
+  p, li {
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+
+  li span:first-child, p:last-child span:first-child {
+    display: inline-block;
+    width: 120px;
+  }
+}
+
+.closeButton {
+  float: right;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.smallKey {
+  padding: 5px;
+  border: 1px solid #ccc;
+}

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

@@ -1,9 +1,11 @@
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
-import React from 'react';
+import React, {PropTypes} from 'react';
 import Modal from 'components/Modal';
 import styles from './ModerationKeysModal.css';
 
+const lang = new I18n(translations);
+
 const shortcuts = [
   {
     title: 'modqueue.navigation',
@@ -23,29 +25,52 @@ const shortcuts = [
   }
 ];
 
-export default ({open, onClose}) => (
-  <Modal open={open} onClose={onClose}>
-    <h3>{lang.t('modqueue.shortcuts')}</h3>
-    <div className={styles.container}>
-      {shortcuts.map((shortcut, i) => (
-        <table className={styles.table} key={i}>
-          <thead>
-            <tr>
-              <th>{lang.t(shortcut.title)}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {Object.keys(shortcut.shortcuts).map(key => (
-              <tr key={`${key  }tr`}>
-                <td className={styles.shortcut}><span className={styles.key}>{key}</span></td>
-                <td>{lang.t(shortcut.shortcuts[key])}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      ))}
-    </div>
-  </Modal>
-);
+export default class ModerationKeysModal extends React.Component {
 
-const lang = new I18n(translations);
+  static propTypes = {
+    open: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    hideShortcutsNote: PropTypes.func.isRequired,
+    shortcutsNoteVisible: PropTypes.string.isRequired
+  }
+
+  render () {
+    const {open, onClose, hideShortcutsNote, shortcutsNoteVisible} = this.props;
+    return (
+      <div>
+        <div className={styles.callToAction} style={{display: shortcutsNoteVisible === 'show' ? 'block' : 'none'}}>
+          <div onClick={hideShortcutsNote} className={styles.closeButton}>×</div>
+          <p className={styles.ctaHeader}>{lang.t('modqueue.mod-faster')}</p>
+          <p><strong>{lang.t('modqueue.try-these')}:</strong></p>
+          <ul>
+            <li><span>{lang.t('modqueue.approve')}</span> <span className={styles.smallKey}>t</span></li>
+            <li><span>{lang.t('modqueue.reject')}</span> <span className={styles.smallKey}>r</span></li>
+          </ul>
+          <p><span>{lang.t('modqueue.view-more-shortcuts')}</span> <span className={styles.smallKey}>{lang.t('modqueue.shift-key')}</span> + <span className={styles.smallKey}>/</span></p>
+        </div>
+        <Modal open={open} onClose={onClose}>
+          <h3>{lang.t('modqueue.shortcuts')}</h3>
+          <div className={styles.container}>
+            {shortcuts.map((shortcut, i) => (
+              <table className={styles.table} key={i}>
+                <thead>
+                  <tr>
+                    <th>{lang.t(shortcut.title)}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {Object.keys(shortcut.shortcuts).map(key => (
+                    <tr key={`${key  }tr`}>
+                      <td className={styles.shortcut}><span className={styles.key}>{key}</span></td>
+                      <td>{lang.t(shortcut.shortcuts[key])}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            ))}
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+}

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

@@ -188,3 +188,15 @@
   margin: 0;
   width: 140px;
 }
+
+.approve__active {
+  box-shadow: none;
+  color: white;
+  background-color: #519954;
+}
+
+.reject__active, .rejected__active {
+  color: white;
+  background-color: #D03235;
+  box-shadow: none;
+}

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

@@ -6,7 +6,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import {Logo} from './Logo';
 
-const CoralHeader = ({handleLogout, restricted = false}) => (
+const CoralHeader = ({handleLogout, showShortcuts = () => {}, restricted = false}) => (
   <Header className={styles.header}>
     <Logo className={styles.logo} />
     {
@@ -55,7 +55,8 @@ const CoralHeader = ({handleLogout, restricted = false}) => (
               <div>
                 <IconButton name="settings" id="menu-settings"/>
                 <Menu target="menu-settings" align="right">
-                  <MenuItem onClick={handleLogout}>Sign Out</MenuItem>
+                  <MenuItem onClick={() => showShortcuts(true)}>{lang.t('configure.shortcuts')}</MenuItem>
+                  <MenuItem onClick={handleLogout}>{lang.t('configure.sign-out')}</MenuItem>
                 </Menu>
               </div>
             </li>
@@ -72,6 +73,7 @@ const CoralHeader = ({handleLogout, restricted = false}) => (
 );
 
 CoralHeader.propTypes = {
+  showShortcuts: PropTypes.func,
   handleLogout: PropTypes.func.isRequired,
   restricted: PropTypes.bool // hide elemnts from a user that's logged out
 };

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

@@ -4,9 +4,13 @@ import Header from './Header';
 import Drawer from './Drawer';
 import styles from './Layout.css';
 
-const Layout = ({children, handleLogout = () => {}, restricted = false, ...props}) => (
+const Layout = ({children, handleLogout = () => {}, toggleShortcutModal, restricted = false, ...props}) => (
   <LayoutMDL fixedDrawer>
-    <Header handleLogout={handleLogout} restricted={restricted} {...props} />
+    <Header
+      handleLogout={handleLogout}
+      showShortcuts={toggleShortcutModal}
+      restricted={restricted}
+      {...props} />
     <Drawer handleLogout={handleLogout} restricted={restricted} {...props} />
     <div className={styles.layout}>
       {children}
@@ -16,6 +20,7 @@ const Layout = ({children, handleLogout = () => {}, restricted = false, ...props
 
 Layout.propTypes = {
   handleLogout: PropTypes.func,
+  toggleShortcutModal: PropTypes.func,
   restricted: PropTypes.bool // hide elements from a user that's logged out
 };
 

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

@@ -2,3 +2,4 @@ export const TOGGLE_MODAL = 'TOGGLE_MODAL';
 export const SINGLE_VIEW = 'SINGLE_VIEW';
 export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
 export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
+export const HIDE_SHORTCUTS_NOTE = 'HIDE_SHORTCUTS_NOTE';

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

@@ -28,11 +28,12 @@ class CommunityContainer extends Component {
     super(props);
 
     this.state = {
-      searchValue: ''
+      searchValue: '',
+      timer: null
     };
 
     this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
-    this.onChangeHandler = this.onChangeHandler.bind(this);
+    this.onSearchChange = this.onSearchChange.bind(this);
     this.onHeaderClickHandler = this.onHeaderClickHandler.bind(this);
     this.onNewPageHandler = this.onNewPageHandler.bind(this);
   }
@@ -48,9 +49,16 @@ class CommunityContainer extends Component {
     }
   }
 
-  onChangeHandler(e) {
-    this.setState({
-      searchValue: e.target.value
+  onSearchChange(e) {
+    const value = e.target.value;
+    this.setState((prevState) => {
+      prevState.searchValue = value;
+      clearTimeout(prevState.timer);
+      const fetchAccounts = this.props.fetchAccounts;
+      prevState.timer = setTimeout(() => {
+        fetchAccounts({value});
+      }, 350);
+      return prevState;
     });
   }
 
@@ -86,11 +94,11 @@ class CommunityContainer extends Component {
           isFetching={community.isFetchingPeople}
           commenters={community.accounts}
           searchValue={searchValue}
+          onSearchChange={this.onSearchChange}
           error={community.errorPeople}
           totalPages={community.totalPagesPeople}
           page={community.pagePeople}
           onKeyDown={this.onKeyDownHandler}
-          onChange={this.onChangeHandler}
           onHeaderClickHandler={this.onHeaderClickHandler}
           onNewPageHandler={this.onNewPageHandler}
         />

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

@@ -4,8 +4,7 @@ import translations from 'coral-admin/src/translations.json';
 
 import styles from './Community.css';
 import Table from './Table';
-import Loading from './Loading';
-import {Pager} from 'coral-ui';
+import {Pager, Icon} from 'coral-ui';
 import EmptyCard from '../../components/EmptyCard';
 
 const lang = new I18n(translations);
@@ -29,31 +28,24 @@ const tableHeaders = [
   }
 ];
 
-const People = ({isFetching, commenters, ...props}) => {
-  const hasResults = !isFetching && !!commenters.length;
+const People = ({commenters, searchValue, onSearchChange, ...props}) => {
+  const hasResults = !!commenters.length;
   return (
     <div className={styles.container}>
       <div className={styles.leftColumn}>
-        <form action="">
-          <div className={`${styles.searchBox}`}>
-            <label htmlFor="commenters-search">
-              <i className="material-icons">search</i>
-            </label>
-            <div className="">
-              <input
-                id="commenters-search"
-                className={`${styles.searchInput}`}
-                type="text"
-                value={props.searchValue}
-                onKeyDown={props.onKeyDownHandler}
-                onChange={props.onChangeHandler}
-              />
-            </div>
-          </div>
-        </form>
+        <div className={styles.searchBox}>
+          <Icon name='search' className={styles.searchIcon}/>
+          <input
+            id="commenters-search"
+            type="text"
+            className={styles.searchBoxInput}
+            value={searchValue}
+            onChange={onSearchChange}
+            placeholder={lang.t('streams.search')}
+          />
+        </div>
       </div>
       <div className={styles.mainContent}>
-        { isFetching && <Loading /> }
         {
           hasResults
           ? <Table

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

@@ -10,7 +10,7 @@ const FlagWidget = ({assets}) => {
 
   return (
     <div className={styles.widget}>
-      <h2 className={styles.heading}>Articles with the most flags</h2>
+      <h2 className={styles.heading}>{lang.t('dashboard.most_flags')}</h2>
       <div className={styles.widgetHead}>
         <p>{lang.t('streams.article')}</p>
         <p>{lang.t('dashboard.flags')}</p>
@@ -21,7 +21,7 @@ const FlagWidget = ({assets}) => {
           ? assets.map(asset => {
             let flagSummary = null;
             if (asset.action_summaries) {
-              flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary');
+              flagSummary = asset.action_summaries.find(s => s.__typename === 'FlagAssetActionSummary');
             }
 
             return (

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

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import Layout from '../components/ui/Layout';
 import {checkLogin, handleLogin, logout, requestPasswordReset} from '../actions/auth';
+import {toggleModal as toggleShortcutModal} from '../actions/moderation';
 import {fetchConfig} from '../actions/config';
 import {FullLoading} from '../components/FullLoading';
 import AdminLogin from '../components/AdminLogin';
@@ -23,7 +24,7 @@ class LayoutContainer extends Component {
       passwordRequestSuccess
     } = this.props.auth;
 
-    const {handleLogout, TALK_RECAPTCHA_PUBLIC} = this.props;
+    const {handleLogout, toggleShortcutModal, TALK_RECAPTCHA_PUBLIC} = this.props;
     if (loadingUser) { return <FullLoading />; }
     if (!isAdmin) {
       return <AdminLogin
@@ -34,7 +35,9 @@ class LayoutContainer extends Component {
         recaptchaPublic={TALK_RECAPTCHA_PUBLIC}
         errorMessage={loginError} />;
     }
-    if (isAdmin && loggedIn) { return <Layout handleLogout={handleLogout} {...this.props} />; }
+    if (isAdmin && loggedIn) {
+      return <Layout handleLogout={handleLogout} toggleShortcutModal={toggleShortcutModal} {...this.props} />;
+    }
     return <FullLoading />;
   }
 }
@@ -49,6 +52,7 @@ const mapDispatchToProps = dispatch => ({
   fetchConfig: () => dispatch(fetchConfig()),
   handleLogin: (username, password, recaptchaResponse) => dispatch(handleLogin(username, password, recaptchaResponse)),
   requestPasswordReset: email => dispatch(requestPasswordReset(email)),
+  toggleShortcutModal: toggle => dispatch(toggleShortcutModal(toggle)),
   handleLogout: () => dispatch(logout())
 });
 

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

@@ -5,12 +5,12 @@ import key from 'keymaster';
 import isEqual from 'lodash/isEqual';
 import styles from './components/styles.css';
 
-import {modQueueQuery} from '../../graphql/queries';
+import {modQueueQuery, getQueueCounts} from '../../graphql/queries';
 import {banUser, setCommentStatus} from '../../graphql/mutations';
 
 import {fetchSettings} from 'actions/settings';
 import {updateAssets} from 'actions/assets';
-import {toggleModal, singleView, showBanUserDialog, hideBanUserDialog} from 'actions/moderation';
+import {toggleModal, singleView, showBanUserDialog, hideBanUserDialog, hideShortcutsNote} from 'actions/moderation';
 
 import {Spinner} from 'coral-ui';
 import BanUserDialog from '../../components/BanUserDialog';
@@ -116,7 +116,7 @@ class ModerationContainer extends Component {
 
     let asset;
 
-    if (data.loading) {
+    if (!('premodCount' in data)) {
       return <div><Spinner/></div>;
     }
 
@@ -135,6 +135,12 @@ class ModerationContainer extends Component {
     const comments = data[activeTab];
     let activeTabCount;
     switch(activeTab) {
+    case 'all':
+      activeTabCount = data.allCount;
+      break;
+    case 'accepted':
+      activeTabCount = data.acceptedCount;
+      break;
     case 'premod':
       activeTabCount = data.premodCount;
       break;
@@ -151,6 +157,8 @@ class ModerationContainer extends Component {
         <ModerationHeader asset={asset} />
         <ModerationMenu
           asset={asset}
+          allCount={data.allCount}
+          acceptedCount={data.acceptedCount}
           premodCount={data.premodCount}
           rejectedCount={data.rejectedCount}
           flaggedCount={data.flaggedCount}
@@ -183,6 +191,8 @@ class ModerationContainer extends Component {
           rejectComment={props.rejectComment}
         />
       <ModerationKeysModal
+          hideShortcutsNote={props.hideShortcutsNote}
+          shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={onClose}/>
       </div>
@@ -204,11 +214,13 @@ const mapDispatchToProps = dispatch => ({
   fetchSettings: () => dispatch(fetchSettings()),
   showBanUserDialog: (user, commentId, showRejectedNote) => dispatch(showBanUserDialog(user, commentId, showRejectedNote)),
   hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
+  hideShortcutsNote: () => dispatch(hideShortcutsNote()),
 });
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   setCommentStatus,
+  getQueueCounts,
   modQueueQuery,
   banUser
 )(ModerationContainer);

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

@@ -9,52 +9,67 @@ import translations from 'coral-admin/src/translations';
 import LoadMore from './components/LoadMore';
 
 const lang = new I18n(translations);
-const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loadMore, activeTab, sort, ...props}) => {
-  return (
-    <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
-      <ul style={{paddingLeft: 0}}>
-      {
-        comments.length
-        ? comments.map((comment, i) => {
-          const status = comment.action_summaries ? 'FLAGGED' : comment.status;
-          return <Comment
-            key={i}
-            index={i}
-            comment={comment}
-            commentType={activeTab}
-            selected={i === selectedIndex}
-            suspectWords={props.suspectWords}
-            bannedWords={props.bannedWords}
-            actions={actionsMap[status]}
-            showBanUserDialog={props.showBanUserDialog}
-            acceptComment={props.acceptComment}
-            rejectComment={props.rejectComment}
-            currentAsset={props.currentAsset}
-          />;
-        })
-        : <EmptyCard>{lang.t('modqueue.emptyqueue')}</EmptyCard>
-      }
-      </ul>
-      <LoadMore
-        comments={comments}
-        loadMore={loadMore}
-        sort={sort}
-        tab={activeTab}
-        showLoadMore={comments.length < commentCount}
-        assetId={props.assetId}
-        />
-    </div>
-  );
-};
+class ModerationQueue extends React.Component {
 
-ModerationQueue.propTypes = {
-  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  currentAsset: PropTypes.object,
-  showBanUserDialog: PropTypes.func.isRequired,
-  rejectComment: PropTypes.func.isRequired,
-  acceptComment: PropTypes.func.isRequired,
-  comments: PropTypes.array.isRequired
-};
+  static propTypes = {
+    bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+    suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+    currentAsset: PropTypes.object,
+    showBanUserDialog: PropTypes.func.isRequired,
+    rejectComment: PropTypes.func.isRequired,
+    acceptComment: PropTypes.func.isRequired,
+    comments: PropTypes.array.isRequired
+  }
+
+  componentDidUpdate (prev) {
+    const {loadMore, comments, commentCount, sort, activeTab: tab, assetId: asset_id} = this.props;
+
+    // if the user just moderated the last (visible) comment
+    // AND there are more comments available on the server,
+    // go ahead and load more comments
+    if (prev.comments.length > 0 && comments.length === 0 && commentCount > 0) {
+      loadMore({sort, tab, asset_id});
+    }
+  }
+
+  render () {
+    const {comments, selectedIndex, commentCount, singleView, loadMore, activeTab, sort, ...props} = this.props;
+
+    return (
+      <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
+        <ul style={{paddingLeft: 0}}>
+          {
+            comments.length
+            ? comments.map((comment, i) => {
+              const status = comment.action_summaries ? 'FLAGGED' : comment.status;
+              return <Comment
+                key={i}
+                index={i}
+                comment={comment}
+                selected={i === selectedIndex}
+                suspectWords={props.suspectWords}
+                bannedWords={props.bannedWords}
+                actions={actionsMap[status]}
+                showBanUserDialog={props.showBanUserDialog}
+                acceptComment={props.acceptComment}
+                rejectComment={props.rejectComment}
+                currentAsset={props.currentAsset}
+                />;
+            })
+            : <EmptyCard>{lang.t('modqueue.emptyqueue')}</EmptyCard>
+          }
+        </ul>
+        <LoadMore
+          comments={comments}
+          loadMore={loadMore}
+          sort={sort}
+          tab={activeTab}
+          showLoadMore={comments.length < commentCount}
+          assetId={props.assetId}
+          />
+      </div>
+    );
+  }
+}
 
 export default ModerationQueue;

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

@@ -10,6 +10,7 @@ import FlagBox from './FlagBox';
 import CommentType from './CommentType';
 import ActionButton from 'coral-admin/src/components/ActionButton';
 import BanUserButton from 'coral-admin/src/components/BanUserButton';
+import {getActionSummary} from 'coral-framework/utils';
 
 const linkify = new Linkify();
 
@@ -17,25 +18,33 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
 const lang = new I18n(translations);
 
-const Comment = ({actions = [], ...props}) => {
-  const links = linkify.getMatches(props.comment.body);
+const Comment = ({actions = [], comment, ...props}) => {
+  const links = linkify.getMatches(comment.body);
   const linkText = links ? links.map(link => link.raw) : [];
-  const actionSummaries = props.comment.action_summaries;
+  const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
+  const flagActions = comment.actions && comment.actions.filter(a => a.__typename === 'FlagAction');
+  let commentType = '';
+  if (comment.status === 'PREMOD') {
+    commentType = 'premod';
+  } else if (flagActions && flagActions.length) {
+    commentType = 'flagged';
+  }
+
   return (
-    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem}`}>
+    <li tabIndex={props.index} className={`mdl-card ${props.selected ?  'mdl-shadow--16dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
       <div className={styles.container}>
         <div className={styles.itemHeader}>
           <div className={styles.author}>
             <span>
-              {props.comment.user.name}
+              {comment.user.name}
             </span>
             <span className={styles.created}>
-              {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
+              {timeago().format(comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
             </span>
-            <BanUserButton user={props.comment.user} onClick={() => props.showBanUserDialog(props.comment.user, props.comment.id, props.comment.status !== 'REJECTED')} />
-            <CommentType type={props.commentType} />
+            <BanUserButton user={comment.user} onClick={() => props.showBanUserDialog(comment.user, comment.id, comment.status !== 'REJECTED')} />
+            <CommentType type={commentType} />
           </div>
-          {props.comment.user.status === 'banned' ?
+          {comment.user.status === 'banned' ?
             <span className={styles.banned}>
               <Icon name='error_outline'/>
               {lang.t('comment.banned_user')}
@@ -43,33 +52,40 @@ const Comment = ({actions = [], ...props}) => {
             : null}
         </div>
         <div className={styles.moderateArticle}>
-          Story: {props.comment.asset.title}
+          Story: {comment.asset.title}
           {!props.currentAsset && (
-            <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate &rarr;</Link>
+            <Link to={`/admin/moderate/${comment.asset.id}`}>Moderate →</Link>
           )}
         </div>
         <div className={styles.itemBody}>
           <p className={styles.body}>
             <Highlighter
               searchWords={[...props.suspectWords, ...props.bannedWords, ...linkText]}
-              textToHighlight={props.comment.body} />
+              textToHighlight={comment.body} />
           </p>
           <div className={styles.sideActions}>
             {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
             <div className={`actions ${styles.actions}`}>
-              {actions.map((action, i) =>
-                <ActionButton key={i}
-                              type={action}
-                              user={props.comment.user}
-                              acceptComment={() => props.acceptComment({commentId: props.comment.id})}
-                              rejectComment={() => props.rejectComment({commentId: props.comment.id})}
-                />
-              )}
+              {actions.map((action, i) => {
+                const active = (action === 'REJECT' && comment.status === 'REJECTED') ||
+                               (action === 'APPROVE' && comment.status === 'ACCEPTED');
+                return <ActionButton key={i}
+                  type={action}
+                  user={comment.user}
+                  status={comment.status}
+                  active={active}
+                  acceptComment={() => props.acceptComment({commentId: comment.id})}
+                  rejectComment={() => props.rejectComment({commentId: comment.id})} />;
+              })}
             </div>
           </div>
         </div>
       </div>
-      {actionSummaries && <FlagBox actionSummaries={actionSummaries} />}
+      {
+        flagActions && flagActions.length
+        ? <FlagBox actions={flagActions} actionSummaries={flagActionSummaries} />
+        : null
+      }
     </li>
   );
 };
@@ -83,6 +99,7 @@ Comment.propTypes = {
   comment: PropTypes.shape({
     body: PropTypes.string.isRequired,
     action_summaries: PropTypes.array,
+    actions: PropTypes.array,
     created_at: PropTypes.string.isRequired,
     user: PropTypes.shape({
       status: PropTypes.string

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

@@ -1,9 +1,25 @@
 import React, {PropTypes} from 'react';
 import styles from './CommentCount.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations.json';
+const lang = new I18n(translations);
 
-const CommentCount = props => (
-  <span className={styles.count}>{props.count}</span>
-);
+const CommentCount = ({count}) => {
+  let number = count;
+
+  // shorten large counts to abbreviations
+  if (number / 1e9 > 1) {
+    number = `${(number / 1e9).toFixed(1)}${lang.t('modqueue.billion')}`;
+  } else if (number / 1e6 > 1) {
+    number = `${(number / 1e6).toFixed(1)}${lang.t('modqueue.million')}`;
+  } else if (number / 1e3 > 1) {
+    number = `${(number / 1e3).toFixed(1)}${lang.t('modqueue.thousand')}`;
+  }
+
+  return (
+    <span className={styles.count}>{number}</span>
+  );
+};
 
 CommentCount.propTypes = {
   count: PropTypes.number.isRequired

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

@@ -53,3 +53,17 @@
     font-size: 12px;
   }
 }
+
+.lessDetail {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.subDetail {
+  font-weight: normal;
+  color: #888;
+
+  span {
+    color: black;
+  }
+}

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

@@ -1,6 +1,17 @@
 import React, {Component, PropTypes} from 'react';
 import {Icon} from 'coral-ui';
 import styles from './FlagBox.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations.json';
+const lang = new I18n(translations);
+
+const shortReasons = {
+  'This comment is offensive': lang.t('modqueue.offensive'),
+  'This looks like an ad/marketing': lang.t('modqueue.spam/ads'),
+  'This user is impersonating': lang.t('modqueue.impersonating'),
+  'I don\'t like this username': lang.t('modqueue.dont-like-username'),
+  'Other': lang.t('modqueue.other')
+};
 
 class FlagBox extends Component {
   constructor () {
@@ -16,27 +27,50 @@ class FlagBox extends Component {
     }));
   }
 
+  reasonMap = (reason) => {
+    const shortReason = shortReasons[reason];
+
+    // if the short reason isn't found, just return the long one.
+    return shortReason ? shortReason : reason;
+  }
+
   render() {
-    const {props} = this;
+    const {actionSummaries, actions} = this.props;
+    const {showDetail} = this.state;
+
     return (
       <div className={styles.flagBox}>
         <div className={styles.container}>
           <div className={styles.header}>
-            <Icon name='flag'/><h3>Flags ({props.actionSummaries.length}):</h3>
+            <Icon name='flag'/><h3>Flags ({actionSummaries.length}):</h3>
             <ul>
-              {props.actionSummaries.map((action, i) =>
-                <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
+              {actionSummaries.map((action, i) =>
+                <li key={i} className={styles.lessDetail}>{this.reasonMap(action.reason)} (<strong>{action.count}</strong>)</li>
               )}
             </ul>
-            {/* <a onClick={this.toggleDetail} className={styles.moreDetail}>More detail</a>*/}
+            <a onClick={this.toggleDetail} className={styles.moreDetail}>{showDetail ? lang.t('modqueue.less-detail') : lang.t('modqueue.more-detail')}</a>
           </div>
-          {this.state.showDetail && (<div className={styles.detail}>
-            <ul>
-              {props.actionSummaries.map((action, i) =>
-                <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
-              )}
-            </ul>
-          </div>)}
+          {showDetail && (
+            <div className={styles.detail}>
+              <ul>
+                {actionSummaries.map((summary, i) => {
+
+                  const actionList = actions.filter(a => a.reason === summary.reason);
+
+                  return (
+                    <li key={i}>
+                      {this.reasonMap(summary.reason)} (<strong>{summary.count}</strong>)
+                      <ul>
+                        {
+                          actionList.map((action, j) => <li key={`${i}_${j}`} className={styles.subDetail}><span>{action.user.username}</span> {action.message}</li>)
+                        }
+                      </ul>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          )}
         </div>
       </div>
     );
@@ -44,7 +78,14 @@ class FlagBox extends Component {
 }
 
 FlagBox.propTypes = {
-  actionSummaries: PropTypes.array.isRequired
+  actionSummaries: PropTypes.arrayOf(PropTypes.shape({
+    reason: PropTypes.string,
+    count: PropTypes.number
+  })).isRequired,
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    message: PropTypes.string,
+    user: PropTypes.shape({username: PropTypes.string})
+  })).isRequired
 };
 
 export default FlagBox;

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

@@ -7,13 +7,16 @@ const LoadMore = ({comments, loadMore, sort, tab, assetId, showLoadMore}) =>
     {
       showLoadMore && <Button
         className={styles.loadMore}
-        onClick={() =>
-          loadMore({
-            cursor: comments[comments.length - 1].created_at,
+        onClick={() => {
+          const lastComment = comments[comments.length - 1];
+          const cursor = lastComment ? lastComment.created_at : null;
+          return loadMore({
+            cursor,
             sort,
             tab,
             asset_id: assetId
-          })}>
+          });
+        }}>
         Load More
       </Button>
     }
@@ -23,7 +26,7 @@ LoadMore.propTypes = {
   comments: PropTypes.array.isRequired,
   loadMore: PropTypes.func.isRequired,
   sort: PropTypes.oneOf(['CHRONOLOGICAL', 'REVERSE_CHRONOLOGICAL']).isRequired,
-  tab: PropTypes.oneOf(['rejected', 'premod', 'flagged']).isRequired,
+  tab: PropTypes.oneOf(['rejected', 'premod', 'flagged', 'all', 'accepted']).isRequired,
   assetId: PropTypes.string,
   showLoadMore: PropTypes.bool.isRequired
 };

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

@@ -14,13 +14,13 @@ const ModerationHeader = props => (
                 <span>{props.asset.title}</span>
                 <Icon className={styles.settingsButton} name="open_in_new"/>
               </a>
-              <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
+              <Link className="mdl-tabs__tab" to="/admin/stories">Select Stream</Link>
             </div>
             :
             <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
               <a className="mdl-tabs__tab" />
               <a className="mdl-tabs__tab">All Streams</a>
-              <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
+              <Link className="mdl-tabs__tab" to="/admin/stories">Select Stream</Link>
             </div>
         }
       </div>

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

@@ -4,22 +4,18 @@ import styles from './styles.css';
 import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
+import {Icon} from 'coral-ui';
 import {Link} from 'react-router';
 
 const lang = new I18n(translations);
 
 const ModerationMenu = (
-  {asset, premodCount, rejectedCount, flaggedCount, selectSort, sort}
+  {asset, allCount, acceptedCount, premodCount, rejectedCount, flaggedCount, selectSort, sort}
 ) => {
-  const premodPath = asset
-    ? `/admin/moderate/premod/${asset.id}`
-    : '/admin/moderate/premod';
-  const rejectPath = asset
-    ? `/admin/moderate/rejected/${asset.id}`
-    : '/admin/moderate/rejected';
-  const flagPath = asset
-    ? `/admin/moderate/flagged/${asset.id}`
-    : '/admin/moderate/flagged';
+
+  function getPath (type) {
+    return asset ? `/admin/moderate/${type}/${asset.id}` : `/admin/moderate/${type}`;
+  }
 
   return (
     <div className="mdl-tabs">
@@ -27,22 +23,34 @@ const ModerationMenu = (
         <div className={styles.tabBarPadding} />
         <div>
           <Link
-            to={premodPath}
+            to={getPath('all')}
             className={`mdl-tabs__tab ${styles.tab}`}
             activeClassName={styles.active}>
-            {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
+            <Icon name='question_answer' className={styles.tabIcon} /> {lang.t('modqueue.all')} <CommentCount count={allCount} />
           </Link>
           <Link
-            to={flagPath}
+            to={getPath('accepted')}
             className={`mdl-tabs__tab ${styles.tab}`}
             activeClassName={styles.active}>
-            {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
+            <Icon name='check' className={styles.tabIcon} /> {lang.t('modqueue.approved')} <CommentCount count={acceptedCount} />
           </Link>
           <Link
-            to={rejectPath}
+            to={getPath('premod')}
             className={`mdl-tabs__tab ${styles.tab}`}
             activeClassName={styles.active}>
-            {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
+            <Icon name='access_time' className={styles.tabIcon} /> {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
+          </Link>
+          <Link
+            to={getPath('flagged')}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            <Icon name='flag' className={styles.tabIcon} /> {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
+          </Link>
+          <Link
+            to={getPath('rejected')}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            <Icon name='close' className={styles.tabIcon} /> {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
           </Link>
         </div>
         <SelectField
@@ -59,6 +67,7 @@ const ModerationMenu = (
 };
 
 ModerationMenu.propTypes = {
+  allCount: PropTypes.number.isRequired,
   premodCount: PropTypes.number.isRequired,
   rejectedCount: PropTypes.number.isRequired,
   flaggedCount: PropTypes.number.isRequired,

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

@@ -6,7 +6,7 @@ const NotFound = props => (
   <div className={`mdl-card mdl-shadow--2dp ${styles.notFound}`}>
     <p>
       The provided asset id <Link to={`/admin/moderate/${props.assetId}`}>{props.assetId}</Link> does not exist.
-      <Link className={styles.goToStreams} to="/admin/streams">Go to Streams</Link>
+      <Link className={styles.goToStreams} to="/admin/stories">Go to Streams</Link>
     </p>
   </div>
 );

client/coral-admin/src/containers/ModerationQueue/components/styles.css

@@ -418,3 +418,8 @@ span {
 .loadMore:hover {
   background-color: #4399FF;
 }
+
+.tabIcon {
+  position: relative;
+  top: 7px;
+}

client/coral-admin/src/graphql/fragments/assetMetricsView.graphql

@@ -6,7 +6,6 @@ fragment metrics on Asset {
   created_at
   commentCount
   action_summaries {
-    type: __typename
     actionCount
     actionableItemCount
   }

client/coral-admin/src/graphql/fragments/commentView.graphql

@@ -12,4 +12,19 @@ fragment commentView on Comment {
       id
       title
     }
+    action_summaries {
+      count
+      ... on FlagActionSummary {
+        reason
+      }
+    }
+    actions {
+      ... on FlagAction {
+        reason
+        message
+        user {
+          username
+        }
+      }
+    }
 }

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

@@ -44,6 +44,7 @@ export const suspendUser = graphql(SUSPEND_USER, {
   })
 });
 
+const views = ['all', 'premod', 'flagged', 'accepted', 'rejected'];
 export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
   props: ({mutate}) => ({
     acceptComment: ({commentId}) => {
@@ -54,6 +55,21 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
         },
         updateQueries: {
           ModQueue: (oldData) => {
+            const comment = views.reduce((comment, view) => {
+              return comment ? comment : oldData[view].find(c => c.id === commentId);
+            }, null);
+            let accepted;
+            let acceptedCount = oldData.acceptedCount;
+
+            // if the comment was already in the Approved queue, don't re-add it
+            if (comment.status === 'ACCEPTED') {
+              accepted = [...oldData.accepted];
+            } else {
+              comment.status = 'ACCEPTED';
+              acceptedCount++;
+              accepted = [comment, ...oldData.accepted];
+            }
+
             const premod = oldData.premod.filter(c => c.id !== commentId);
             const flagged = oldData.flagged.filter(c => c.id !== commentId);
             const rejected = oldData.rejected.filter(c => c.id !== commentId);
@@ -63,11 +79,13 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
 
             return {
               ...oldData,
-              premodCount,
-              flaggedCount,
-              rejectedCount,
+              premodCount: Math.max(0, premodCount),
+              flaggedCount: Math.max(0, flaggedCount),
+              acceptedCount: Math.max(0, acceptedCount),
+              rejectedCount: Math.max(0, rejectedCount),
               premod,
               flagged,
+              accepted,
               rejected,
             };
           }
@@ -82,21 +100,37 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
         },
         updateQueries: {
           ModQueue: (oldData) => {
-            const comment = oldData.premod.concat(oldData.flagged).filter(c => c.id === commentId)[0];
-            const rejected = [comment].concat(oldData.rejected);
+            const comment = views.reduce((comment, view) => {
+              return comment ? comment : oldData[view].find(c => c.id === commentId);
+            }, null);
+            let rejected;
+            let rejectedCount = oldData.rejectedCount;
+
+            // if the item was already in the Rejected queue, don't put it in again
+            if (comment.status === 'REJECTED') {
+              rejected = oldData.rejected;
+            } else {
+              comment.status = 'REJECTED';
+              rejectedCount++;
+              rejected = [comment, ...oldData.rejected];
+            }
+
             const premod = oldData.premod.filter(c => c.id !== commentId);
             const flagged = oldData.flagged.filter(c => c.id !== commentId);
+            const accepted = oldData.accepted.filter(c => c.id !== commentId);
             const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
             const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
-            const rejectedCount = oldData.rejectedCount + 1;
+            const acceptedCount = accepted.length < oldData.accepted.length ? oldData.acceptedCount - 1 : oldData.acceptedCount;
 
             return {
               ...oldData,
-              premodCount,
-              flaggedCount,
-              rejectedCount,
+              premodCount: Math.max(0, premodCount),
+              flaggedCount: Math.max(0, flaggedCount),
+              acceptedCount: Math.max(0, acceptedCount),
+              rejectedCount: Math.max(0, rejectedCount),
               premod,
               flagged,
+              accepted,
               rejected
             };
           }

client/coral-admin/src/graphql/queries/getQueueCounts.graphql

@@ -0,0 +1,22 @@
+query Counts ($asset_id: ID) {
+  allCount: commentCount(query: {
+    asset_id: $asset_id
+  })
+  acceptedCount: commentCount(query: {
+    statuses: [ACCEPTED],
+    asset_id: $asset_id
+  })
+  premodCount: commentCount(query: {
+    statuses: [PREMOD],
+    asset_id: $asset_id
+  })
+  rejectedCount: commentCount(query: {
+     statuses: [REJECTED],
+     asset_id: $asset_id
+  })
+  flaggedCount: commentCount(query: {
+    action_type: FLAG,
+    asset_id: $asset_id,
+    statuses: [NONE, PREMOD]
+  })
+}

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

@@ -4,6 +4,7 @@ import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
 import MOD_QUEUE_LOAD_MORE from './loadMore.graphql';
 import MOD_USER_FLAGGED_QUERY from './modUserFlaggedQuery.graphql';
 import METRICS from './metricsQuery.graphql';
+import GET_QUEUE_COUNTS from './getQueueCounts.graphql';
 
 export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
   options: ({params: {id = null}}) => {
@@ -33,29 +34,35 @@ export const getMetrics = graphql(METRICS, {
   }
 });
 
-export const loadMore = (fetchMore) => ({limit, cursor, sort, tab, asset_id}) => {
-  let statuses;
+export const loadMore = (fetchMore) => ({limit = 10, cursor, sort, tab, asset_id}) => {
+  let variables = {
+    limit,
+    cursor,
+    sort,
+    asset_id
+  };
   switch(tab) {
+  case 'all':
+    variables.statuses = null;
+    break;
+  case 'accepted':
+    variables.statuses = ['ACCEPTED'];
+    break;
   case 'premod':
-    statuses = ['PREMOD'];
+    variables.statuses = ['PREMOD'];
     break;
   case 'flagged':
-    statuses = ['NONE', 'PREMOD'];
+    variables.statuses = ['NONE', 'PREMOD'];
+    variables.action_type = 'FLAG';
     break;
   case 'rejected':
-    statuses = ['REJECTED'];
+    variables.statuses = ['REJECTED'];
     break;
   }
   return fetchMore({
     query: MOD_QUEUE_LOAD_MORE,
-    variables: {
-      limit,
-      cursor,
-      sort,
-      statuses,
-      asset_id
-    },
-    updateQuery: (oldData, {fetchMoreResult:{data:{comments}}}) => {
+    variables,
+    updateQuery: (oldData, {fetchMoreResult:{comments}}) => {
       return {
         ...oldData,
         [tab]: [
@@ -87,3 +94,14 @@ export const modQueueResort = (id, fetchMore) => (sort) => {
     updateQuery: (oldData, {fetchMoreResult:{data}}) => data
   });
 };
+
+export const getQueueCounts = graphql(GET_QUEUE_COUNTS, {
+  options: ({params: {id = null}}) => {
+    return {
+      pollInterval: 5000,
+      variables: {
+        asset_id: id
+      }
+    };
+  }
+});

client/coral-admin/src/graphql/queries/loadMore.graphql

@@ -1,7 +1,7 @@
 #import "../fragments/commentView.graphql"
 
-query LoadMoreModQueue($limit: Int = 10, $cursor: Date, $sort: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!]) {
-  comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sort: $sort}) {
+query LoadMoreModQueue($limit: Int = 10, $cursor: Date, $sort: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
+  comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sort: $sort, action_type: $action_type}) {
     ...commentView
     action_summaries {
       count

client/coral-admin/src/graphql/queries/modQueueQuery.graphql

@@ -1,6 +1,20 @@
 #import "../fragments/commentView.graphql"
 
 query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
+    all: comments(query: {
+      statuses: [NONE, PREMOD, ACCEPTED, REJECTED],
+      asset_id: $asset_id,
+      sort: $sort
+    }) {
+      ...commentView
+    }
+    accepted: comments(query: {
+      statuses: [ACCEPTED],
+      asset_id: $asset_id,
+      sort: $sort
+    }) {
+      ...commentView
+    }
     premod: comments(query: {
         statuses: [PREMOD],
         asset_id: $asset_id,
@@ -15,12 +29,6 @@ query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
         sort: $sort
     }) {
         ...commentView
-        action_summaries {
-          count
-          ... on FlagActionSummary {
-            reason
-          }
-        }
     }
     rejected: comments(query: {
         statuses: [REJECTED],
@@ -34,6 +42,13 @@ query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
       title
       url
     }
+    allCount: commentCount(query: {
+      asset_id: $asset_id
+    })
+    acceptedCount: commentCount(query: {
+      statuses: [ACCEPTED],
+      asset_id: $asset_id
+    })
     premodCount: commentCount(query: {
       statuses: [PREMOD],
       asset_id: $asset_id

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

@@ -6,7 +6,8 @@ const initialState = Map({
   modalOpen: false,
   user: Map({}),
   commentId: null,
-  banDialog: false
+  banDialog: false,
+  shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show'
 });
 
 export default function moderation (state = initialState, action) {
@@ -31,6 +32,9 @@ export default function moderation (state = initialState, action) {
   case actions.SINGLE_VIEW:
     return state
       .set('singleView', !state.get('singleView'));
+  case actions.HIDE_SHORTCUTS_NOTE:
+    return state
+      .set('shortcutsNoteVisible', 'hide');
   default :
     return state;
   }

client/coral-admin/src/services/client.js

@@ -1,7 +1,9 @@
 import ApolloClient, {addTypename} from 'apollo-client';
 import getNetworkInterface from './transport';
+import fragmentMatcher from './fragmentMatcher';
 
 export const client = new ApolloClient({
+  fragmentMatcher,
   addTypename: true,
   queryTransformer: addTypename,
   dataIdFromObject: (result) => {

client/coral-admin/src/services/fragmentMatcher.js

@@ -0,0 +1,66 @@
+import {IntrospectionFragmentMatcher} from 'apollo-client';
+
+// TODO this is a short-term fix
+// we need to set up something to query the server for the schema before ApolloClient initialization
+// https://github.com/apollographql/apollo-client/issues/1555#issuecomment-295834774
+const fm = new IntrospectionFragmentMatcher({
+  introspectionQueryResultData: {
+    __schema: {
+      types: [
+        {
+          kind: 'INTERFACE',
+          name: 'UserError',
+          possibleTypes: [
+            {name: 'GenericUserError'},
+            {name: 'ValidationUserError'}
+          ]
+        },
+        {
+          kind: 'INTERFACE',
+          name: 'Response',
+          possibleTypes: [
+            {name: 'CreateCommentResponse'},
+            {name: 'CreateFlagResponse'},
+            {name: 'CreateDontAgreeResponse'},
+            {name: 'DeleteActionResponse'},
+            {name: 'SetUserStatusResponse'},
+            {name: 'SuspendUserResponse'},
+            {name: 'SetCommentStatusResponse'},
+            {name: 'AddCommentTagResponse'},
+            {name: 'RemoveCommentTagResponse'},
+            {name: 'IgnoreUserResponse'},
+            {name: 'StopIgnoringUserResponse'}
+          ]
+        },
+        {
+          kind: 'INTERFACE',
+          name: 'Action',
+          possibleTypes: [
+            {name: 'DefaultAction'},
+            {name: 'FlagAction'},
+            {name: 'DontAgreeAction'}
+          ],
+        },
+        {
+          kind: 'INTERFACE',
+          name: 'ActionSummary',
+          possibleTypes: [
+            {name: 'DefaultActionSummary'},
+            {name: 'FlagActionSummary'},
+            {name: 'DontAgreeActionSummary'}
+          ],
+        },
+        {
+          kind: 'INTERFACE',
+          name: 'AssetActionSummary',
+          possibleTypes: [
+            {name: 'DefaultAssetActionSummary'},
+            {name: 'FlagAssetActionSummary'},
+          ]
+        }
+      ],
+    },
+  }
+});
+
+export default fm;

client/coral-admin/src/translations.json

@@ -36,6 +36,7 @@
     "modqueue": {
       "likes": "likes",
       "all": "all",
+      "approved": "approved",
       "premod": "pre-mod",
       "rejected": "rejected",
       "flagged": "flagged",
@@ -44,6 +45,10 @@
       "close": "Close",
       "actions": "Actions",
       "navigation": "Navigation",
+      "mod-faster": "Moderate faster with keyboard shortcuts",
+      "try-these": "Try these",
+      "view-more-shortcuts": "View more shortcuts",
+      "shift-key": "⇧",
       "approve": "Approve comment",
       "reject": "Reject comment",
       "nextcomment": "Go to the next comment",
@@ -51,7 +56,17 @@
       "singleview": "Toggle single comment edit view",
       "thismenu": "Open this menu",
       "emptyqueue": "No more comments to moderate! You're all caught up. Go have some ☕️",
-      "showshortcuts": "Show Shortcuts"
+      "showshortcuts": "Show Shortcuts",
+      "more-detail": "More detail",
+      "less-detail": "Less detail",
+      "dont-like-username": "Don't like username",
+      "impersonating": "Impersonating",
+      "offensive": "Offensive",
+      "spam/ads": "Spam/Ads",
+      "other": "Other",
+      "thousand": "k",
+      "million": "M",
+      "billion": "B"
     },
     "comment": {
       "flagged": "flagged",
@@ -68,7 +83,13 @@
       "copy": "Copy to Clipboard"
     },
     "configure": {
+      "sign-out": "Sign Out",
+      "shortcuts": "Shortcuts",
       "closed-stream-settings": "Closed Stream Message",
+      "open-stream-configuration": "This comment stream is currently open. By closing this comment stream, no new comments may be submitted and all previous comments will still be displayed.",
+      "close-stream-configuration": "This comment stream is currently closed. By opening this comment stream, new comments may be submitted and displayed",
+      "close-stream": "Close Stream",
+      "open-stream": "Open Stream",
       "stream-settings": "Stream Settings",
       "moderation-settings": "Moderation Settings",
       "tech-settings": "Tech Settings",
@@ -139,7 +160,8 @@
       "no_likes": "There have been no likes in the last 5 minutes. All quiet.",
       "flags": "Flags",
       "no_activity": "There haven't been any comments anywhere in the last five minutes.",
-      "comment_count": "comments"
+      "comment_count": "comments",
+      "most_flags": "Articles with the most flags"
     },
     "streams": {
       "empty_result": "No assets match this search. Maybe try widening your search?",
@@ -209,14 +231,30 @@
       "loading": "Cargando resultados"
     },
     "modqueue": {
+      "all": "todos",
+      "approved": "aprobado",
       "likes": "gustos",
       "premod": "pre-mod",
       "rejected": "rechazado",
       "flagged": "marcado",
       "shortcuts": "Atajos de teclado",
+      "mod-faster": "Moderar más rápido con atajos del teclado",
+      "try-these": "Intenta estos",
+      "view-more-shortcuts": "Ver más atajos",
+      "shift-key": "⇧",
       "close": "Cerrar",
       "emptyqueue": "No se encontro ningún usuario. Están escondidos.",
-      "showshortcuts": "Mostrar atajos"
+      "showshortcuts": "Mostrar atajos",
+      "more-detail": "Mas detalle",
+      "less-detail": "Menos detalle",
+      "dont-like-username": "No me gusta ese nombre de usuario",
+      "impersonating": "Suplantación",
+      "offensive": "Ofensivo",
+      "spam/ads": "Spam/Propaganda",
+      "other": "Otros",
+      "thousand": "m",
+      "million": "M",
+      "billion": "B"
     },
     "comment": {
       "flagged": "marcado",
@@ -230,7 +268,13 @@
       "username_flags": "marcas para este nombre de usuario"
     },
     "configure": {
+      "sign-out": "Desconectar",
+      "shortcuts": "Atajos",
       "closed-stream-settings": "Mensaje a enviar cuando los comentarios están cerrados en el artículo",
+      "open-stream-configuration": "Este hilo de comentarios esta abierto. Al cerrarlo, ningún nuevo comentario será publicado y todos los comentarios anteriores serán mostrados.",
+      "close-stream-configuration": "Este hilo de comentario está en este momento cerrado. Al abrirlo, nuevos comentarios serán publicaods y mostrados.",
+      "close-stream": "Cerrar Comentarios",
+      "open-stream": "Abrir Comentarios",
       "stream-settings": "Configuración de Comentarios",
       "moderation-settings": "Configuración de Moderación",
       "tech-settings": "Configuración Técnica",
@@ -283,14 +327,15 @@
       "cancel": "Cancelar",
       "yes_ban_user": "Si, Suspendan el usuario"
     },
-    "dashbord": {
+    "dashboard": {
       "next-update": "{0} minutos hasta la siguiente actualización.",
       "auto-update": "Los datos se actualizan automaticamente cada 5 minutos o cuando recargas.",
       "no_flags": "¡Nadie ha marcado nada en los últimos 5 minutos! ¡Bravo!",
       "no_likes": "A nadie le ha gustado algún comentario en los últimos 5 minutos. Todo tranquilo.",
       "flags": "Marcados",
       "no_activity": "No hubo comentarios en los ultimos 5 minutos",
-      "comment_count": "comentarios"
+      "comment_count": "comentarios",
+      "most_flags": "Articulos con más reportes"
     },
     "streams": {
       "empty_result": "No se encuentro articulo con esta busqueda. ¿Tal vez puedas extender la busqueda?",

client/coral-configure/components/CloseCommentsInfo.js

@@ -1,23 +1,25 @@
 import React from 'react';
 import {Button} from 'coral-ui';
 
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations';
+
+const lang = new I18n(translations);
+
 export default ({status, onClick}) => (
   status === 'open' ? (
     <div className="close-comments-intro-wrapper">
       <p>
-        This comment stream is currently open. By closing this comment stream,
-        no new comments may be submitted and all previous comments will still
-        be displayed.
+        {lang.t('configure.open-stream-configuration')}
       </p>
-      <Button onClick={onClick}>Close Stream</Button>
+      <Button onClick={onClick}>{lang.t('configure.close-stream')}</Button>
     </div>
   ) : (
     <div className="close-comments-intro-wrapper">
       <p>
-        This comment stream is currently closed. By opening this comment stream,
-        new comments may be submitted and displayed
+        {lang.t('configure.close-stream-configuration')}
       </p>
-      <Button onClick={onClick}>Open Stream</Button>
+      <Button onClick={onClick}>{lang.t('configure.open-stream')}</Button>
     </div>
   )
 );

client/coral-configure/components/ConfigureCommentStream.css

@@ -9,12 +9,12 @@
   right: 0;
 }
 
-ul {
+.wrapper ul {
   list-style: none;
   padding: 0;
 }
 
-ul ul {
+.wrapper ul ul {
   padding-left: 20px
 }
 
@@ -23,12 +23,12 @@ ul ul {
   margin: 12px 12px 12px 0;
 }
 
-h4 {
+.wrapper h4 {
   font-size: 14px;
   margin-bottom: 5px;
 }
 
-p {
+.wrapper p {
   max-width: 380px;
 }
 

client/coral-configure/components/ConfigureCommentStream.js

@@ -7,7 +7,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
 const lang = new I18n(translations);
 
-export default ({handleChange, handleApply, changed, updateQuestionBoxContent, ...props}) => (
+export default ({handleChange, handleApply, changed, ...props}) => (
   <form onSubmit={handleApply}>
     <div className={styles.wrapper}>
       <div className={styles.container}>
@@ -38,9 +38,9 @@ export default ({handleChange, handleApply, changed, updateQuestionBoxContent, .
           <Checkbox
             className={styles.checkbox}
             cStyle={changed ? 'green' : 'darkGrey'}
-            name="premodLinks"
+            name="plinksenable"
             onChange={handleChange}
-            defaultChecked={props.premodLinks}
+            defaultChecked={props.premodLinksEnable}
             info={{
               title: lang.t('configureCommentStream.enablePremodLinks'),
               description: lang.t('configureCommentStream.enablePremodLinksDescription')
@@ -57,11 +57,10 @@ export default ({handleChange, handleApply, changed, updateQuestionBoxContent, .
               title: lang.t('configureCommentStream.enableQuestionBox'),
               description: lang.t('configureCommentStream.enableQuestionBoxDescription')
             }} />
-
           <div className={`${props.questionBoxEnable ? null : styles.hidden}`} >
             <TextField
               id="qboxcontent"
-              onChange={updateQuestionBoxContent}
+              onChange={handleChange}
               rows={3}
               value={props.questionBoxContent}
               label={lang.t('configureCommentStream.includeQuestionHere')}

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -15,13 +15,14 @@ class ConfigureStreamContainer extends Component {
     super(props);
 
     this.state = {
-      changed: false
+      changed: false,
+      dirtySettings: props.asset.settings,
+      closedAt: (props.asset.closedAt === null ? 'open' : 'closed')
     };
 
     this.toggleStatus = this.toggleStatus.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleApply = this.handleApply.bind(this);
-    this.updateQuestionBoxContent = this.updateQuestionBoxContent.bind(this);
   }
 
   handleApply (e) {
@@ -31,7 +32,7 @@ class ConfigureStreamContainer extends Component {
     const questionBoxEnable = elements.qboxenable.checked;
     const questionBoxContent = elements.qboxcontent.value;
 
-    const premodLinksEnable = elements.premodLinks.checked;
+    const premodLinksEnable = elements.plinksenable.checked;
     const {changed} = this.state;
 
     const newConfig = {
@@ -48,39 +49,52 @@ class ConfigureStreamContainer extends Component {
           changed: false
         });
       }, 300);
+
+      // this.props.loadAsset(this.props.data.asset);
     }
   }
 
   handleChange (e) {
+
+    // TODO: Don’t directly manipulate state and make state change immutable.
     if (e.target && e.target.id === 'qboxenable') {
-      this.props.asset.settings.questionBoxEnable = e.target.checked;
+      this.state.dirtySettings.questionBoxEnable = e.target.checked;
     }
+    if (e.target && e.target.id === 'qboxcontent') {
+      this.state.dirtySettings.questionBoxContent = e.target.value;
+    }
+    if (e.target && e.target.id === 'plinksenable') {
+      this.state.dirtySettings.premodLinksEnable = e.target.value;
+    }
+
     this.setState({
       changed: true
     });
   }
 
-  updateQuestionBoxContent(e) {
-    this.props.asset.settings.questionBoxContent = e.target.value;
-    this.handleChange(e);
-  }
-
   toggleStatus () {
+
+    // update the closedAt status for the asset
     this.props.updateStatus(
-      this.props.asset.closedAt === null ? 'closed' : 'open'
+      this.state.closedAt === 'open' ? 'closed' : 'open'
     );
+    this.setState({
+      closedAt: (this.state.closedAt === 'open' ? 'closed' : 'open')
+    });
   }
 
   getClosedIn () {
     const {closedTimeout} = this.props.asset.settings;
     const {created_at} = this.props.asset;
+
     return lang.timeago(new Date(created_at).getTime() + (1000 * closedTimeout));
   }
 
   render () {
-    const {settings, closedAt} = this.props.asset;
-    const status = closedAt === null ? 'open' : 'closed';
-    const premod = settings.moderation === 'PRE';
+    const {dirtySettings} = this.state;
+    const premod = dirtySettings.moderation === 'PRE';
+    const {closedAt} = this.state;
+    const closedTimeout = dirtySettings.closedTimeout;
 
     return (
       <div>
@@ -88,18 +102,17 @@ class ConfigureStreamContainer extends Component {
           handleChange={this.handleChange}
           handleApply={this.handleApply}
           changed={this.state.changed}
-          premodLinks={settings.premodLinks}
+          premodLinksEnable={dirtySettings.premodLinksEnable}
           premod={premod}
-          updateQuestionBoxContent={this.updateQuestionBoxContent}
-          questionBoxEnable={settings.questionBoxEnable}
-          questionBoxContent={settings.questionBoxContent}
+          questionBoxEnable={dirtySettings.questionBoxEnable}
+          questionBoxContent={dirtySettings.questionBoxContent}
         />
         <hr />
-        <h3>{status === 'open' ? 'Close' : 'Open'} Comment Stream</h3>
-        {status === 'open' ? <p>The comment stream will close in {this.getClosedIn()}.</p> : ''}
+        <h3>{closedAt === 'open' ? 'Close' : 'Open'} Comment Stream</h3>
+        {(closedAt === 'open' && closedTimeout) ? <p>The comment stream will close in {this.getClosedIn()}.</p> : ''}
         <CloseCommentsInfo
           onClick={this.toggleStatus}
-          status={status}
+          status={closedAt}
         />
       </div>
     );

client/coral-docs/src/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {render} from 'react-dom';
 import {GraphQLDocs} from 'graphql-docs';
 
 import fetcher from './services/fetcher';
 
 // Render the application into the DOM
-ReactDOM.render(<GraphQLDocs fetcher={fetcher} />, document.querySelector('#root'));
+render(<GraphQLDocs fetcher={fetcher} />, document.querySelector('#root'));

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Router, Route, browserHistory} from 'react-router';
+
+import Embed from './containers/Embed';
+import SignInContainer from 'coral-sign-in/containers/SignInContainer';
+
+const routes = (
+  <div>
+    <Route exact path="/embed/stream/login" component={SignInContainer}/>
+    <Route exact path="*" component={Embed}/>
+  </div>
+);
+
+const AppRouter = () => <Router history={browserHistory} routes={routes} />;
+
+export default AppRouter;

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

@@ -1,265 +0,0 @@
-// this component will
-// render its children
-// render a like button
-// render a permalink button
-// render a reply button
-// render a flag button
-// translate things?
-
-import React, {PropTypes} from 'react';
-import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
-
-import AuthorName from 'coral-plugin-author-name/AuthorName';
-
-import TagLabel from 'coral-plugin-tag-label/TagLabel';
-import Content from 'coral-plugin-commentcontent/CommentContent';
-import PubDate from 'coral-plugin-pubdate/PubDate';
-import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
-import FlagComment from 'coral-plugin-flags/FlagComment';
-import LikeButton from 'coral-plugin-likes/LikeButton';
-import {BestButton, IfUserCanModifyBest, BEST_TAG, commentIsBest, BestIndicator} from 'coral-plugin-best/BestButton';
-import LoadMore from 'coral-embed-stream/src/LoadMore';
-
-import styles from './Comment.css';
-
-const getActionSummary = (type, comment) => comment.action_summaries
-  .filter((a) => a.__typename === type)[0];
-const isStaff = (tags) => !tags.every((t) => t.name !== 'STAFF') ;
-
-// hold actions links (e.g. Like, Reply) along the comment footer
-const ActionButton = ({children}) => {
-  return <span className="comment__action-button comment__action-button--nowrap">{ children }</span>;
-};
-
-class Comment extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {replyBoxVisible: false};
-  }
-
-  static propTypes = {
-    reactKey: PropTypes.string.isRequired,
-
-    // id of currently opened ReplyBox. tracked in Stream.js
-    activeReplyBox: PropTypes.string.isRequired,
-    disableReply: PropTypes.bool,
-    setActiveReplyBox: PropTypes.func.isRequired,
-    showSignInDialog: PropTypes.func.isRequired,
-    postFlag: PropTypes.func.isRequired,
-    postLike: PropTypes.func.isRequired,
-    deleteAction: PropTypes.func.isRequired,
-    parentId: PropTypes.string,
-    highlighted: PropTypes.string,
-    addNotification: PropTypes.func.isRequired,
-    postItem: PropTypes.func.isRequired,
-    depth: PropTypes.number.isRequired,
-    asset: PropTypes.shape({
-      id: PropTypes.string,
-      title: PropTypes.string,
-      url: PropTypes.string
-    }).isRequired,
-    currentUser: PropTypes.shape({
-      id: PropTypes.string.isRequired
-    }),
-    comment: PropTypes.shape({
-      depth: PropTypes.number,
-      action_summaries: PropTypes.array.isRequired,
-      body: PropTypes.string.isRequired,
-      id: PropTypes.string.isRequired,
-      tags: PropTypes.arrayOf(
-        PropTypes.shape({
-          name: PropTypes.string
-        })
-      ),
-      replies: PropTypes.arrayOf(
-        PropTypes.shape({
-          body: PropTypes.string.isRequired,
-          id: PropTypes.string.isRequired
-        })),
-      user: PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired
-      }).isRequired
-    }).isRequired,
-
-    // dispatch action to add a tag to a comment
-    addCommentTag: React.PropTypes.func,
-
-    // dispatch action to remove a tag from a comment
-    removeCommentTag: React.PropTypes.func,
-  }
-
-  render () {
-    const {
-      comment,
-      parentId,
-      currentUser,
-      asset,
-      depth,
-      postItem,
-      addNotification,
-      showSignInDialog,
-      postLike,
-      highlighted,
-      postFlag,
-      postDontAgree,
-      loadMore,
-      setActiveReplyBox,
-      activeReplyBox,
-      deleteAction,
-      addCommentTag,
-      removeCommentTag,
-      disableReply,
-    } = this.props;
-
-    const like = getActionSummary('LikeActionSummary', comment);
-    const flag = getActionSummary('FlagActionSummary', comment);
-    const dontagree = getActionSummary('DontAgreeActionSummary', comment);
-    let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`;
-    commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : '';
-
-    // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
-    const notifyOnError = (fn, errorToMessage) => async () => {
-      if (typeof errorToMessage !== 'function') {errorToMessage = (error) => error.message;}
-      try {
-        return await fn();
-      } catch (error) {
-        addNotification('error', errorToMessage(error));
-        throw error;
-      }
-    };
-
-    const addBestTag = notifyOnError(() => addCommentTag({
-      id: comment.id,
-      tag: BEST_TAG,
-    }), () => 'Failed to tag comment as best');
-
-    const removeBestTag = notifyOnError(() => removeCommentTag({
-      id: comment.id,
-      tag: BEST_TAG,
-    }), () => 'Failed to remove best comment tag');
-
-    return (
-      <div
-        className={commentClass}
-        id={`c_${comment.id}`}
-        style={{marginLeft: depth * 30}}>
-        <hr aria-hidden={true} />
-        <div className={highlighted === comment.id ? 'highlighted-comment' : ''}>
-          <AuthorName
-            author={comment.user}/>
-          { isStaff(comment.tags)
-            ? <TagLabel>Staff</TagLabel>
-          : null }
-
-          { commentIsBest(comment)
-            ? <TagLabel><BestIndicator /></TagLabel>
-          : null }
-          <PubDate created_at={comment.created_at} />
-
-          <Content body={comment.body} />
-          <div className="commentActionsLeft comment__action-container">
-            <ActionButton>
-              <LikeButton
-                like={like}
-                id={comment.id}
-                postLike={postLike}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                currentUser={currentUser} />
-            </ActionButton>
-            {
-              !disableReply &&
-              <ActionButton>
-                <ReplyButton
-                  onClick={() => setActiveReplyBox(comment.id)}
-                  parentCommentId={parentId || comment.id}
-                  currentUserId={currentUser && currentUser.id}
-                  banned={false} />
-              </ActionButton>
-            }
-            <ActionButton>
-              <IfUserCanModifyBest user={currentUser}>
-                <BestButton
-                  isBest={commentIsBest(comment)}
-                  addBest={addBestTag}
-                  removeBest={removeBestTag} />
-              </IfUserCanModifyBest>
-            </ActionButton>
-          </div>
-          <div className="commentActionsRight comment__action-container">
-            <ActionButton>
-              <PermalinkButton articleURL={asset.url} commentId={comment.id} />
-            </ActionButton>
-            <ActionButton>
-              <FlagComment
-                flag={flag && flag.current_user ? flag : dontagree}
-                id={comment.id}
-                author_id={comment.user.id}
-                postFlag={postFlag}
-                postDontAgree={postDontAgree}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                currentUser={currentUser} />
-            </ActionButton>
-          </div>
-        </div>
-        {
-          activeReplyBox === comment.id
-          ? <ReplyBox
-              commentPostedHandler={() => {
-                setActiveReplyBox('');
-              }}
-              setActiveReplyBox={setActiveReplyBox}
-              parentId={parentId || comment.id}
-              addNotification={addNotification}
-              authorId={currentUser.id}
-              postItem={postItem}
-              assetId={asset.id} />
-          : null
-        }
-        {
-          comment.replies &&
-          comment.replies.map(reply => {
-            return <Comment
-              setActiveReplyBox={setActiveReplyBox}
-              disableReply={disableReply}
-              activeReplyBox={activeReplyBox}
-              addNotification={addNotification}
-              parentId={comment.id}
-              postItem={postItem}
-              depth={depth + 1}
-              asset={asset}
-              highlighted={highlighted}
-              currentUser={currentUser}
-              postLike={postLike}
-              postFlag={postFlag}
-              deleteAction={deleteAction}
-              addCommentTag={addCommentTag}
-              removeCommentTag={removeCommentTag}
-              showSignInDialog={showSignInDialog}
-              reactKey={reply.id}
-              key={reply.id}
-              comment={reply} />;
-          })
-        }
-        {
-          comment.replies &&
-          <div className='coral-load-more-replies'>
-            <LoadMore
-              assetId={asset.id}
-              comments={comment.replies}
-              parentId={comment.id}
-              topLevel={false}
-              replyCount={comment.replyCount}
-              moreComments={comment.replyCount > comment.replies.length}
-              loadMore={loadMore}/>
-          </div>
-        }
-      </div>
-    );
-  }
-}
-
-export default Comment;

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

@@ -1,316 +0,0 @@
-import React, {Component} from 'react';
-import {compose} from 'react-apollo';
-import {connect} from 'react-redux';
-import isEqual from 'lodash/isEqual';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-framework/translations';
-const lang = new I18n(translations);
-
-import {TabBar, Tab, TabContent, Spinner, Button} from 'coral-ui';
-
-const {logout, showSignInDialog, requestConfirmEmail} = authActions;
-const {addNotification, clearNotification} = notificationActions;
-const {fetchAssetSuccess} = assetActions;
-import {NEW_COMMENT_COUNT_POLL_INTERVAL} from 'coral-framework/constants/comments';
-
-import {queryStream} from 'coral-framework/graphql/queries';
-import {postComment, postFlag, postLike, postDontAgree, deleteAction, addCommentTag, removeCommentTag} from 'coral-framework/graphql/mutations';
-import {editName} from 'coral-framework/actions/user';
-import {updateCountCache, viewAllComments} from 'coral-framework/actions/asset';
-import {notificationActions, authActions, assetActions, pym} from 'coral-framework';
-
-import Stream from './Stream';
-import InfoBox from 'coral-plugin-infobox/InfoBox';
-import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
-import {ModerationLink} from 'coral-plugin-moderation';
-import Count from 'coral-plugin-comment-count/CommentCount';
-import CommentBox from 'coral-plugin-commentbox/CommentBox';
-import UserBox from 'coral-sign-in/components/UserBox';
-import SignInContainer from 'coral-sign-in/containers/SignInContainer';
-import SuspendedAccount from 'coral-framework/components/SuspendedAccount';
-import ChangeUsernameContainer from '../../coral-sign-in/containers/ChangeUsernameContainer';
-import ProfileContainer from 'coral-settings/containers/ProfileContainer';
-import RestrictedContent from 'coral-framework/components/RestrictedContent';
-import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
-import HighlightedComment from './Comment';
-import LoadMore from './LoadMore';
-import NewCount from './NewCount';
-
-class Embed extends Component {
-
-  state = {activeTab: 0, showSignInDialog: false, activeReplyBox: ''};
-
-  changeTab = (tab) => {
-
-    // Everytime the comes from another tab, the Stream needs to be updated.
-    if (tab === 0) {
-      this.props.data.refetch();
-    }
-
-    this.setState({
-      activeTab: tab
-    });
-  }
-
-  static propTypes = {
-    data: React.PropTypes.shape({
-      loading: React.PropTypes.bool,
-      error: React.PropTypes.object
-    }).isRequired,
-
-    // dispatch action to add a tag to a comment
-    addCommentTag: React.PropTypes.func,
-
-    // dispatch action to remove a tag from a comment
-    removeCommentTag: React.PropTypes.func,
-  }
-
-  componentDidMount () {
-    pym.sendMessage('childReady');
-  }
-
-  componentWillUnmount () {
-    clearInterval(this.state.countPoll);
-  }
-
-  componentWillReceiveProps (nextProps) {
-    const {loadAsset} = this.props;
-    if(!isEqual(nextProps.data.asset, this.props.data.asset)) {
-      loadAsset(nextProps.data.asset);
-
-      const {getCounts, updateCountCache} = this.props;
-      const {asset} = nextProps.data;
-
-      updateCountCache(asset.id, asset.commentCount);
-
-      this.setState({
-        countPoll: setInterval(() => {
-          const {asset} = this.props.data;
-          getCounts({
-            asset_id: asset.id,
-            limit: asset.comments.length,
-            sort: 'REVERSE_CHRONOLOGICAL'
-          });
-        }, NEW_COMMENT_COUNT_POLL_INTERVAL)
-      });
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if(!isEqual(prevProps.data.comment, this.props.data.comment)) {
-
-      // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
-      setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0);
-    }
-  }
-
-  setActiveReplyBox = (reactKey) => {
-    if (!this.props.auth.user) {
-      const offset = document.getElementById(`c_${reactKey}`).getBoundingClientRect().top - 75;
-      this.props.showSignInDialog(offset);
-    } else {
-      this.setState({activeReplyBox: reactKey});
-    }
-  }
-
-  render () {
-    const {activeTab} = this.state;
-    const {closedAt, countCache = {}} = this.props.asset;
-    const {loading, asset, refetch, comment} = this.props.data;
-    const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth;
-
-    // even though the permalinked comment is the highlighted one, we're displaying its parent + replies
-    const highlightedComment = comment && comment.parent ? comment.parent : comment;
-
-    const openStream = closedAt === null;
-
-    const banned = user && user.status === 'BANNED';
-
-    const expandForLogin = showSignInDialog ? {
-      minHeight: document.body.scrollHeight + 200
-    } : {};
-
-    if (loading || !asset) {
-      return <Spinner />;
-    }
-
-    // Find the created_at date of the first comment. If no comments exist, set the date to a week ago.
-    const firstCommentDate = asset.comments[0]
-      ? asset.comments[0].created_at
-      : new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
-
-    return (
-      <div style={expandForLogin}>
-        <div className="commentStream">
-          <TabBar onChange={this.changeTab} activeTab={activeTab}>
-            <Tab><Count count={asset.totalCommentCount}/></Tab>
-            <Tab>{lang.t('MY_COMMENTS')}</Tab>
-            <Tab restricted={!isAdmin}>Configure Stream</Tab>
-          </TabBar>
-          {
-            highlightedComment &&
-            <Button
-              cStyle='darkGrey'
-              style={{float: 'right'}}
-              onClick={() => {
-                this.props.viewAllComments();
-                this.props.data.refetch();
-              }}>{lang.t('showAllComments')}</Button>
-          }
-          {loggedIn && <UserBox user={user} logout={() => this.props.logout().then(refetch)}  changeTab={this.changeTab}/>}
-          <TabContent show={activeTab === 0}>
-            {
-              openStream
-               ? <div id="commentBox">
-                   <InfoBox
-                     content={asset.settings.infoBoxContent}
-                     enable={asset.settings.infoBoxEnable}
-                   />
-                   <QuestionBox
-                     content={asset.settings.questionBoxContent}
-                     enable={asset.settings.questionBoxEnable}
-                   />
-                 <RestrictedContent restricted={banned} restrictedComp={
-                     <SuspendedAccount
-                       canEditName={user && user.canEditName}
-                       editName={this.props.editName}
-                       />
-                   }>
-                   {
-                     user
-                     ? <CommentBox
-                        addNotification={this.props.addNotification}
-                        postItem={this.props.postItem}
-                        appendItemArray={this.props.appendItemArray}
-                        updateItem={this.props.updateItem}
-                        updateCountCache={this.props.updateCountCache}
-                        countCache={countCache[asset.id]}
-                        assetId={asset.id}
-                        premod={asset.settings.moderation}
-                        isReply={false}
-                        currentUser={this.props.auth.user}
-                        authorId={user.id}
-                        charCount={asset.settings.charCountEnable && asset.settings.charCount} />
-                     : null
-                   }
-                 </RestrictedContent>
-                 </div>
-               : <p>{asset.settings.closedMessage}</p>
-            }
-            {!loggedIn && <SignInContainer
-              requireEmailConfirmation={asset.settings.requireEmailConfirmation}
-              refetch={refetch}
-              offset={signInOffset}/>}
-            {loggedIn &&  user && <ChangeUsernameContainer loggedIn={loggedIn} offset={signInOffset} user={user} />}
-            {loggedIn && <ModerationLink assetId={asset.id} isAdmin={isAdmin} />}
-
-            {/* the highlightedComment is isolated after the user followed a permalink */}
-            {
-              highlightedComment
-              ? <HighlightedComment
-                refetch={refetch}
-                setActiveReplyBox={this.setActiveReplyBox}
-                activeReplyBox={this.state.activeReplyBox}
-                addNotification={this.props.addNotification}
-                depth={0}
-                postItem={this.props.postItem}
-                asset={asset}
-                currentUser={user}
-                highlighted={comment.id}
-                postLike={this.props.postLike}
-                postFlag={this.props.postFlag}
-                postDontAgree={this.props.postDontAgree}
-                loadMore={this.props.loadMore}
-                deleteAction={this.props.deleteAction}
-                showSignInDialog={this.props.showSignInDialog}
-                key={highlightedComment.id}
-                reactKey={highlightedComment.id}
-                comment={highlightedComment} />
-              : <div>
-                <NewCount
-                  commentCount={asset.commentCount}
-                  countCache={countCache[asset.id]}
-                  loadMore={this.props.loadMore}
-                  firstCommentDate={firstCommentDate}
-                  assetId={asset.id}
-                  updateCountCache={this.props.updateCountCache}
-                  />
-                <div className="embed__stream">
-                  <Stream
-                    open={openStream}
-                    addNotification={this.props.addNotification}
-                    postItem={this.props.postItem}
-                    setActiveReplyBox={this.setActiveReplyBox}
-                    activeReplyBox={this.state.activeReplyBox}
-                    asset={asset}
-                    currentUser={user}
-                    postLike={this.props.postLike}
-                    postFlag={this.props.postFlag}
-                    postDontAgree={this.props.postDontAgree}
-                    addCommentTag={this.props.addCommentTag}
-                    removeCommentTag={this.props.removeCommentTag}
-                    loadMore={this.props.loadMore}
-                    deleteAction={this.props.deleteAction}
-                    showSignInDialog={this.props.showSignInDialog}
-                    comments={asset.comments} />
-                </div>
-                <LoadMore
-                  topLevel={true}
-                  assetId={asset.id}
-                  comments={asset.comments}
-                  moreComments={countCache[asset.id] > asset.comments.length}
-                  loadMore={this.props.loadMore} />
-              </div>
-            }
-        </TabContent>
-         <TabContent show={activeTab === 1}>
-           <ProfileContainer
-             loggedIn={loggedIn}
-             userData={this.props.userData}
-             showSignInDialog={this.props.showSignInDialog}
-           />
-         </TabContent>
-         <TabContent show={activeTab === 2}>
-           <RestrictedContent restricted={!loggedIn}>
-             <ConfigureStreamContainer
-               status={status}
-               onClick={this.toggleStatus}
-             />
-           </RestrictedContent>
-         </TabContent>
-        </div>
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = state => ({
-  auth: state.auth.toJS(),
-  userData: state.user.toJS(),
-  asset: state.asset.toJS()
-});
-
-const mapDispatchToProps = dispatch => ({
-  requestConfirmEmail: () => dispatch(requestConfirmEmail()),
-  loadAsset: (asset) => dispatch(fetchAssetSuccess(asset)),
-  addNotification: (type, text) => addNotification(type, text),
-  clearNotification: () => dispatch(clearNotification()),
-  editName: (username) => dispatch(editName(username)),
-  showSignInDialog: (offset) => dispatch(showSignInDialog(offset)),
-  updateCountCache: (id, count) => dispatch(updateCountCache(id, count)),
-  viewAllComments: () => dispatch(viewAllComments()),
-  logout: () => dispatch(logout()),
-  dispatch: d => dispatch(d)
-});
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  postComment,
-  postFlag,
-  postLike,
-  postDontAgree,
-  addCommentTag,
-  removeCommentTag,
-  deleteAction,
-  queryStream
-)(Embed);

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

@@ -1,78 +0,0 @@
-import React, {PropTypes} from 'react';
-import Comment from './Comment';
-
-class Stream extends React.Component {
-
-  static propTypes = {
-    addNotification: PropTypes.func.isRequired,
-    postItem: PropTypes.func.isRequired,
-    asset: PropTypes.object.isRequired,
-    open: PropTypes.bool.isRequired,
-    comments: PropTypes.array.isRequired,
-    currentUser: PropTypes.shape({
-      username: PropTypes.string,
-      id: PropTypes.string
-    }),
-
-    // dispatch action to add a tag to a comment
-    addCommentTag: PropTypes.func,
-
-    // dispatch action to remove a tag from a comment
-    removeCommentTag: PropTypes.func,
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {activeReplyBox: '', countPoll: null};
-  }
-
-  render () {
-    const {
-      comments,
-      currentUser,
-      asset,
-      postItem,
-      addNotification,
-      postFlag,
-      postLike,
-      open,
-      postDontAgree,
-      loadMore,
-      deleteAction,
-      showSignInDialog,
-      addCommentTag,
-      removeCommentTag
-    } = this.props;
-
-    return (
-      <div id='stream'>
-        {
-          comments.map(comment =>
-            <Comment
-              disableReply={!open}
-              setActiveReplyBox={this.props.setActiveReplyBox}
-              activeReplyBox={this.props.activeReplyBox}
-              addNotification={addNotification}
-              depth={0}
-              postItem={postItem}
-              asset={asset}
-              currentUser={currentUser}
-              postLike={postLike}
-              postFlag={postFlag}
-              postDontAgree={postDontAgree}
-              addCommentTag={addCommentTag}
-              removeCommentTag={removeCommentTag}
-              loadMore={loadMore}
-              deleteAction={deleteAction}
-              showSignInDialog={showSignInDialog}
-              key={comment.id}
-              reactKey={comment.id}
-              comment={comment} />
-          )
-        }
-      </div>
-    );
-  }
-}
-
-export default Stream;

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

@@ -0,0 +1,10 @@
+import * as actions from '../constants/embed';
+import {viewAllComments} from './stream';
+
+export const setActiveTab = (tab) => (dispatch, getState) => {
+  dispatch({type: actions.SET_ACTIVE_TAB, tab});
+  if (getState().stream.commentId) {
+    dispatch(viewAllComments());
+  }
+};
+

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

@@ -0,0 +1,40 @@
+import {pym} from 'coral-framework';
+import * as actions from '../constants/stream';
+
+export const setActiveReplyBox = (id) => ({type: actions.SET_ACTIVE_REPLY_BOX, id});
+export const setCommentCountCache = (amount) => ({type: actions.SET_COMMENT_COUNT_CACHE, amount});
+
+function removeParam(key, sourceURL) {
+  let rtn = sourceURL.split('?')[0];
+  let param;
+  let params_arr = [];
+  let queryString = (sourceURL.indexOf('?') !== -1) ? sourceURL.split('?')[1] : '';
+  if (queryString !== '') {
+    params_arr = queryString.split('&');
+    for (let i = params_arr.length - 1; i >= 0; i -= 1) {
+      param = params_arr[i].split('=')[0];
+      if (param === key) {
+        params_arr.splice(i, 1);
+      }
+    }
+    rtn = `${rtn}?${params_arr.join('&')}`;
+  }
+  return rtn;
+}
+
+export const viewAllComments = () => {
+
+  // remove the comment_id url param
+  const modifiedUrl = removeParam('comment_id', location.href);
+
+  try {
+
+    // "window" here refers to the embedded iframe
+    window.history.replaceState({}, document.title, modifiedUrl);
+
+    // also change the parent url
+    pym.sendMessage('coral-view-all-comments');
+  } catch (e) { /* not sure if we're worried about old browsers */ }
+
+  return {type: actions.VIEW_ALL_COMMENTS};
+};

client/coral-embed-stream/src/components/Comment.css

@@ -12,3 +12,14 @@
   filter: blur(2px);
   pointer-events: none;
 }
+
+.topRightMenu {
+  float: right;
+  text-align: right;
+  cursor: pointer;
+  margin-top: 5px;
+}
+
+.topRightMenu > * {
+  text-align: initial;
+}

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

@@ -0,0 +1,332 @@
+import React, {PropTypes} from 'react';
+import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
+
+import AuthorName from 'coral-plugin-author-name/AuthorName';
+
+import TagLabel from 'coral-plugin-tag-label/TagLabel';
+import Content from 'coral-plugin-commentcontent/CommentContent';
+import PubDate from 'coral-plugin-pubdate/PubDate';
+import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
+import FlagComment from 'coral-plugin-flags/FlagComment';
+import {
+  BestButton,
+  IfUserCanModifyBest,
+  BEST_TAG,
+  commentIsBest,
+  BestIndicator
+} from 'coral-plugin-best/BestButton';
+import Slot from 'coral-framework/components/Slot';
+import LoadMore from './LoadMore';
+import IgnoredCommentTombstone from './IgnoredCommentTombstone';
+import {TopRightMenu} from './TopRightMenu';
+import {getActionSummary, iPerformedThisAction} from 'coral-framework/utils';
+
+import styles from './Comment.css';
+
+const isStaff = tags => !tags.every(t => t.name !== 'STAFF');
+
+// hold actions links (e.g. Reply) along the comment footer
+const ActionButton = ({children}) => {
+  return (
+    <span className="comment__action-button comment__action-button--nowrap">
+      {children}
+    </span>
+  );
+};
+
+class Comment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {replyBoxVisible: false};
+  }
+
+  static propTypes = {
+    reactKey: PropTypes.string.isRequired,
+
+    // id of currently opened ReplyBox. tracked in Stream.js
+    activeReplyBox: PropTypes.string.isRequired,
+    disableReply: PropTypes.bool,
+    setActiveReplyBox: PropTypes.func.isRequired,
+    showSignInDialog: PropTypes.func.isRequired,
+    postFlag: PropTypes.func.isRequired,
+    deleteAction: PropTypes.func.isRequired,
+    parentId: PropTypes.string,
+    highlighted: PropTypes.string,
+    addNotification: PropTypes.func.isRequired,
+    postItem: PropTypes.func.isRequired,
+    depth: PropTypes.number.isRequired,
+    asset: PropTypes.shape({
+      id: PropTypes.string,
+      title: PropTypes.string,
+      url: PropTypes.string
+    }).isRequired,
+    currentUser: PropTypes.shape({
+      id: PropTypes.string.isRequired
+    }),
+    charCountEnable: PropTypes.bool.isRequired,
+    maxCharCount: PropTypes.number,
+    comment: PropTypes.shape({
+      depth: PropTypes.number,
+      action_summaries: PropTypes.array.isRequired,
+      body: PropTypes.string.isRequired,
+      id: PropTypes.string.isRequired,
+      tags: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string
+        })
+      ),
+      replies: PropTypes.arrayOf(
+        PropTypes.shape({
+          body: PropTypes.string.isRequired,
+          id: PropTypes.string.isRequired
+        })
+      ),
+      user: PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired
+      }).isRequired
+    }).isRequired,
+
+    // given a comment, return whether it should be rendered as ignored
+    commentIsIgnored: React.PropTypes.func,
+
+    // dispatch action to add a tag to a comment
+    addCommentTag: React.PropTypes.func,
+
+    // dispatch action to remove a tag from a comment
+    removeCommentTag: React.PropTypes.func,
+
+    // dispatch action to ignore another user
+    ignoreUser: React.PropTypes.func
+  };
+
+  render() {
+    const {
+      comment,
+      parentId,
+      currentUser,
+      asset,
+      depth,
+      postItem,
+      addNotification,
+      showSignInDialog,
+      highlighted,
+      postFlag,
+      postDontAgree,
+      loadMore,
+      setActiveReplyBox,
+      activeReplyBox,
+      deleteAction,
+      addCommentTag,
+      removeCommentTag,
+      ignoreUser,
+      disableReply,
+      commentIsIgnored,
+      maxCharCount,
+      charCountEnable
+    } = this.props;
+
+    const flagSummary = getActionSummary('FlagActionSummary', comment);
+    const dontAgreeSummary = getActionSummary(
+      'DontAgreeActionSummary',
+      comment
+    );
+    let myFlag = null;
+    if (iPerformedThisAction('FlagActionSummary', comment)) {
+      myFlag = flagSummary.find(s => s.current_user);
+    } else if (iPerformedThisAction('DontAgreeActionSummary', comment)) {
+      myFlag = dontAgreeSummary.find(s => s.current_user);
+    }
+
+    let commentClass = parentId
+      ? `reply ${styles.Reply}`
+      : `comment ${styles.Comment}`;
+    commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : '';
+
+    // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
+    const notifyOnError = (fn, errorToMessage) =>
+      async function(...args) {
+        if (typeof errorToMessage !== 'function') {
+          errorToMessage = error => error.message;
+        }
+        try {
+          return await fn(...args);
+        } catch (error) {
+          addNotification('error', errorToMessage(error));
+          throw error;
+        }
+      };
+
+    const addBestTag = notifyOnError(
+      () =>
+        addCommentTag({
+          id: comment.id,
+          tag: BEST_TAG
+        }),
+      () => 'Failed to tag comment as best'
+    );
+
+    const removeBestTag = notifyOnError(
+      () =>
+        removeCommentTag({
+          id: comment.id,
+          tag: BEST_TAG
+        }),
+      () => 'Failed to remove best comment tag'
+    );
+
+    return (
+      <div
+        className={commentClass}
+        id={`c_${comment.id}`}
+        style={{marginLeft: depth * 30}}
+      >
+        <hr aria-hidden={true} />
+        <div
+          className={highlighted === comment.id ? 'highlighted-comment' : ''}
+        >
+          <AuthorName author={comment.user} />
+          {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+
+          {commentIsBest(comment)
+            ? <TagLabel><BestIndicator /></TagLabel>
+            : null}
+          <PubDate created_at={comment.created_at} />
+          <Slot
+            fill="commentInfoBar"
+            data={this.props.data}
+            root={this.props.root}
+            comment={comment}
+            commentId={comment.id}
+            inline
+          />
+          {currentUser && comment.user.id !== currentUser.id
+            ? <span className={styles.topRightMenu}>
+                <TopRightMenu
+                  comment={comment}
+                  ignoreUser={ignoreUser}
+                  addNotification={addNotification}
+                />
+              </span>
+            : null}
+
+          <Content body={comment.body} />
+          <Slot fill="commentContent" />
+          <div className="commentActionsLeft comment__action-container">
+            <Slot
+              fill="commentReactions"
+              data={this.props.data}
+              root={this.props.root}
+              comment={comment}
+              commentId={comment.id}
+              inline
+            />
+            {!disableReply &&
+              <ActionButton>
+                <ReplyButton
+                  onClick={() => setActiveReplyBox(comment.id)}
+                  parentCommentId={parentId || comment.id}
+                  currentUserId={currentUser && currentUser.id}
+                  banned={false}
+                />
+              </ActionButton>}
+            <ActionButton>
+              <IfUserCanModifyBest user={currentUser}>
+                <BestButton
+                  isBest={commentIsBest(comment)}
+                  addBest={addBestTag}
+                  removeBest={removeBestTag}
+                />
+              </IfUserCanModifyBest>
+            </ActionButton>
+            <Slot
+              fill="commentActions"
+              data={this.props.data}
+              root={this.props.root}
+              comment={comment}
+              commentId={comment.id}
+              inline
+            />
+          </div>
+          <div className="commentActionsRight comment__action-container">
+            <ActionButton>
+              <PermalinkButton articleURL={asset.url} commentId={comment.id} />
+            </ActionButton>
+            <ActionButton>
+              <FlagComment
+                flaggedByCurrentUser={!!myFlag}
+                flag={myFlag}
+                id={comment.id}
+                author_id={comment.user.id}
+                postFlag={postFlag}
+                postDontAgree={postDontAgree}
+                deleteAction={deleteAction}
+                showSignInDialog={showSignInDialog}
+                currentUser={currentUser}
+              />
+            </ActionButton>
+          </div>
+        </div>
+        {activeReplyBox === comment.id
+          ? <ReplyBox
+              commentPostedHandler={() => {
+                setActiveReplyBox('');
+              }}
+              charCountEnable={charCountEnable}
+              maxCharCount={maxCharCount}
+              setActiveReplyBox={setActiveReplyBox}
+              parentId={parentId || comment.id}
+              addNotification={addNotification}
+              authorId={currentUser.id}
+              postItem={postItem}
+              assetId={asset.id}
+            />
+          : null}
+        {comment.replies &&
+          comment.replies.map(reply => {
+            return commentIsIgnored(reply)
+              ? <IgnoredCommentTombstone key={reply.id} />
+              : <Comment
+                  data={this.props.data}
+                  root={this.props.root}
+                  setActiveReplyBox={setActiveReplyBox}
+                  disableReply={disableReply}
+                  activeReplyBox={activeReplyBox}
+                  addNotification={addNotification}
+                  parentId={comment.id}
+                  postItem={postItem}
+                  depth={depth + 1}
+                  asset={asset}
+                  highlighted={highlighted}
+                  currentUser={currentUser}
+                  postFlag={postFlag}
+                  deleteAction={deleteAction}
+                  addCommentTag={addCommentTag}
+                  removeCommentTag={removeCommentTag}
+                  ignoreUser={ignoreUser}
+                  charCountEnable={charCountEnable}
+                  maxCharCount={maxCharCount}
+                  showSignInDialog={showSignInDialog}
+                  reactKey={reply.id}
+                  key={reply.id}
+                  comment={reply}
+                />;
+          })}
+        {comment.replies &&
+          <div className="coral-load-more-replies">
+            <LoadMore
+              assetId={asset.id}
+              comments={comment.replies}
+              parentId={comment.id}
+              topLevel={false}
+              replyCount={comment.replyCount}
+              moreComments={comment.replyCount > comment.replies.length}
+              loadMore={loadMore}
+            />
+          </div>}
+      </div>
+    );
+  }
+}
+
+export default Comment;

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-framework/translations';
+const lang = new I18n(translations);
+
+import {TabBar, Tab, TabContent, Button} from 'coral-ui';
+
+import Stream from '../containers/Stream';
+import Count from 'coral-plugin-comment-count/CommentCount';
+import UserBox from 'coral-sign-in/components/UserBox';
+import ProfileContainer from 'coral-settings/containers/ProfileContainer';
+import RestrictedContent from 'coral-framework/components/RestrictedContent';
+import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
+
+export default class Embed extends React.Component {
+  changeTab = (tab) => {
+    switch(tab) {
+    case 0:
+      this.props.setActiveTab('stream');
+      break;
+    case 1:
+      this.props.setActiveTab('profile');
+
+      // TODO: move data fetching to profile container.
+      this.props.data.refetch();
+      break;
+    case 2:
+      this.props.setActiveTab('config');
+
+      // TODO: move data fetching to config container.
+      this.props.data.refetch();
+      break;
+    }
+  }
+
+  handleShowProfile = () => this.props.setActiveTab('profile');
+
+  render () {
+    const {activeTab, logout, viewAllComments, commentId} = this.props;
+    const {asset: {totalCommentCount}} = this.props.root;
+    const {loggedIn, isAdmin, user} = this.props.auth;
+
+    const userBox = <UserBox user={user} onLogout={logout} onShowProfile={this.handleShowProfile}/>;
+
+    return (
+      <div>
+        <div className="commentStream">
+          <TabBar onChange={this.changeTab} activeTab={activeTab}>
+            <Tab><Count count={totalCommentCount}/></Tab>
+            <Tab>{lang.t('myProfile')}</Tab>
+            <Tab restricted={!isAdmin}>Configure Stream</Tab>
+          </TabBar>
+          {
+            commentId &&
+              <Button
+                cStyle='darkGrey'
+                style={{float: 'right'}}
+                onClick={viewAllComments}
+              >
+                {lang.t('showAllComments')}
+              </Button>
+          }
+          <TabContent show={activeTab === 'stream'}>
+            { loggedIn ? userBox : null }
+            <Stream data={this.props.data} root={this.props.root} />
+          </TabContent>
+          <TabContent show={activeTab === 'profile'}>
+            <ProfileContainer />
+          </TabContent>
+          <TabContent show={activeTab === 'config'}>
+            <RestrictedContent restricted={!loggedIn}>
+              { loggedIn ? userBox : null }
+              <ConfigureStreamContainer />
+            </RestrictedContent>
+          </TabContent>
+        </div>
+      </div>
+    );
+  }
+}
+
+Embed.propTypes = {
+  data: React.PropTypes.shape({
+    loading: React.PropTypes.bool,
+    error: React.PropTypes.object
+  }).isRequired,
+};

client/coral-embed-stream/src/components/IgnoreUserWizard.css

@@ -0,0 +1,14 @@
+.IgnoreUserWizard {
+  background-color: #2E343B;
+  color: white;
+  padding: 1em;
+  max-width: 220px;
+}
+
+.IgnoreUserWizard header {
+  font-weight: bold;
+}
+
+.IgnoreUserWizard .textAlignRight {
+  text-align: right;
+}

client/coral-embed-stream/src/components/IgnoreUserWizard.js

@@ -0,0 +1,66 @@
+import React, {PropTypes} from 'react';
+import styles from './IgnoreUserWizard.css';
+import {Button} from 'coral-ui';
+
+// Guides the user through ignoring another user, including confirming their decision
+export class IgnoreUserWizard extends React.Component {
+  static propTypes = {
+
+    // comment on which this menu appears
+    user: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
+    }).isRequired,
+    cancel: PropTypes.func.isRequired,
+
+    // actually submit the ignore. Provide {id: user id to ignore}
+    ignoreUser: PropTypes.func.isRequired,
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
+
+      // what step of the wizard is the user on
+      step: 1
+    };
+    this.onClickCancel = this.onClickCancel.bind(this);
+  }
+  onClickCancel() {
+    this.props.cancel();
+  }
+  render() {
+    const {user, ignoreUser} = this.props;
+    const goToStep = (stepNum) => this.setState({step: stepNum});
+    const step1 = (
+      <div>
+        <header>Ignore User</header>
+        <p>When you ignore a user, all comments they wrote on the site will be hidden from you. You can undo this later from the Profile tab.</p>
+        <div className={styles.textAlignRight}>
+          <Button cStyle='cancel' onClick={this.onClickCancel}>Cancel</Button>
+          <Button onClick={() => goToStep(2)}>Ignore user</Button>
+        </div>
+      </div>
+    );
+    const onClickIgnoreUser = async () => {
+      await ignoreUser({id: user.id});
+    };
+    const step2Confirmation = (
+      <div>
+        <header>Ignore User</header>
+        <p>Are you sure you want to ignore { user.name }?</p>
+        <div className={styles.textAlignRight}>
+          <Button cStyle='cancel' onClick={this.onClickCancel}>Cancel</Button>
+          <Button onClick={onClickIgnoreUser}>Ignore user</Button>
+        </div>
+      </div>
+    );
+    const elsForStep = [step1, step2Confirmation];
+    const {step} = this.state;
+    const elForThisStep = elsForStep[step - 1];
+    return (
+      <div className={styles.IgnoreUserWizard}>
+        { elForThisStep }
+      </div>
+    );
+  }
+}

client/coral-embed-stream/src/components/IgnoredCommentTombstone.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-framework/translations';
+const lang = new I18n(translations);
+
+// Render in place of a Comment when the author of the comment is ignored
+const IgnoredCommentTombstone = () => (
+  <div>
+    <hr aria-hidden={true} />
+    <p style={{
+      backgroundColor: '#F0F0F0',
+      textAlign: 'center',
+      padding: '1em',
+      color: '#3E4F71',
+    }}>
+      {lang.t('commentIsIgnored')}
+    </p>
+  </div>
+);
+
+export default IgnoredCommentTombstone;

client/coral-embed-stream/src/components/LoadMore.js

@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations.json';
-import {ADDTL_COMMENTS_ON_LOAD_MORE} from 'coral-framework/constants/comments';
+import {ADDTL_COMMENTS_ON_LOAD_MORE} from '../constants/stream';
 import {Button} from 'coral-ui';
 const lang = new I18n(translations);
 

client/coral-embed-stream/src/components/NewCount.js

@@ -3,24 +3,24 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations.json';
 const lang = new I18n(translations);
 
-const onLoadMoreClick = ({loadMore, commentCount, firstCommentDate, assetId, updateCountCache}) => (e) => {
+const onLoadMoreClick = ({loadMore, commentCount, firstCommentDate, assetId, setCommentCountCache}) => (e) => {
   e.preventDefault();
-  updateCountCache(assetId, commentCount);
+  setCommentCountCache(commentCount);
   loadMore({
+    asset_id: assetId,
     limit: 500,
     cursor: firstCommentDate,
-    assetId,
     sort: 'CHRONOLOGICAL'
   }, true);
 };
 
 const NewCount = (props) => {
-  const newComments = props.commentCount - props.countCache;
+  const newComments = props.commentCount - props.commentCountCache;
 
-  return <div className='coral-new-comments'>
+  return <div className='coral-new-comments coral-load-more'>
     {
-      props.countCache && newComments > 0 ?
-      <button onClick={onLoadMoreClick(props)} className='coral-load-more'>
+      props.commentCountCache && newComments > 0 ?
+      <button onClick={onLoadMoreClick(props)}>
         {newComments === 1
           ? lang.t('newCount', newComments, lang.t('comment'))
           : lang.t('newCount', newComments, lang.t('comments'))}
@@ -32,7 +32,7 @@ const NewCount = (props) => {
 
 NewCount.propTypes = {
   commentCount: PropTypes.number.isRequired,
-  countCache: PropTypes.number,
+  commentCountCache: PropTypes.number,
   loadMore: PropTypes.func.isRequired,
   assetId: PropTypes.string.isRequired,
   firstCommentDate: PropTypes.string.isRequired

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

@@ -0,0 +1,211 @@
+import React, {PropTypes} from 'react';
+
+import {Button} from 'coral-ui';
+import LoadMore from './LoadMore';
+import NewCount from './NewCount';
+import Comment from '../containers/Comment';
+import InfoBox from 'coral-plugin-infobox/InfoBox';
+import {ModerationLink} from 'coral-plugin-moderation';
+import CommentBox from 'coral-plugin-commentbox/CommentBox';
+import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
+import IgnoredCommentTombstone from './IgnoredCommentTombstone';
+import SuspendedAccount from 'coral-framework/components/SuspendedAccount';
+import RestrictedContent from 'coral-framework/components/RestrictedContent';
+import ChangeUsernameContainer
+  from 'coral-sign-in/containers/ChangeUsernameContainer';
+
+class Stream extends React.Component {
+  setActiveReplyBox = reactKey => {
+    if (!this.props.auth.user) {
+      this.props.showSignInDialog();
+    } else {
+      this.props.setActiveReplyBox(reactKey);
+    }
+  };
+
+  render() {
+    const {
+      root: {asset, asset: {comments}, comment, myIgnoredUsers},
+      postItem,
+      addNotification,
+      postFlag,
+      postDontAgree,
+      loadMore,
+      deleteAction,
+      showSignInDialog,
+      addCommentTag,
+      removeCommentTag,
+      pluginProps,
+      ignoreUser,
+      auth: {loggedIn, isAdmin, user},
+      commentCountCache,
+      editName
+    } = this.props;
+    const open = asset.closedAt === null;
+
+    // even though the permalinked comment is the highlighted one, we're displaying its parent + replies
+    const highlightedComment = comment && comment.parent
+      ? comment.parent
+      : comment;
+
+    const banned = user && user.status === 'BANNED';
+
+    const hasOlderComments = !!(asset &&
+      asset.lastComment &&
+      asset.lastComment.id !== asset.comments[asset.comments.length - 1].id);
+
+    // Find the created_at date of the first comment. If no comments exist, set the date to a week ago.
+    const firstCommentDate = asset.comments[0]
+      ? asset.comments[0].created_at
+      : new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
+    const commentIsIgnored = comment =>
+      myIgnoredUsers && myIgnoredUsers.includes(comment.user.id);
+    return (
+      <div id="stream">
+        {open
+          ? <div id="commentBox">
+              <InfoBox
+                content={asset.settings.infoBoxContent}
+                enable={asset.settings.infoBoxEnable}
+              />
+              <QuestionBox
+                content={asset.settings.questionBoxContent}
+                enable={asset.settings.questionBoxEnable}
+              />
+              <RestrictedContent
+                restricted={banned}
+                restrictedComp={
+                  <SuspendedAccount
+                    canEditName={user && user.canEditName}
+                    editName={editName}
+                  />
+                }
+              >
+                {user
+                  ? <CommentBox
+                      addNotification={this.props.addNotification}
+                      postItem={this.props.postItem}
+                      appendItemArray={this.props.appendItemArray}
+                      updateItem={this.props.updateItem}
+                      setCommentCountCache={this.props.setCommentCountCache}
+                      commentCountCache={commentCountCache}
+                      assetId={asset.id}
+                      premod={asset.settings.moderation}
+                      isReply={false}
+                      authorId={user.id}
+                      charCountEnable={asset.settings.charCountEnable}
+                      maxCharCount={asset.settings.charCount}
+                    />
+                  : null}
+              </RestrictedContent>
+            </div>
+          : <p>{asset.settings.closedMessage}</p>}
+        {!loggedIn &&
+          <Button
+            id="coralSignInButton"
+            onClick={this.props.showSignInDialog}
+            full
+          >
+            Sign in to comment
+          </Button>}
+        {loggedIn &&
+          user &&
+          <ChangeUsernameContainer loggedIn={loggedIn} user={user} />}
+        {loggedIn && <ModerationLink assetId={asset.id} isAdmin={isAdmin} />}
+
+        {/* the highlightedComment is isolated after the user followed a permalink */}
+        {highlightedComment
+          ? <Comment
+              data={this.props.data}
+              root={this.props.root}
+              setActiveReplyBox={this.setActiveReplyBox}
+              activeReplyBox={this.props.activeReplyBox}
+              addNotification={addNotification}
+              depth={0}
+              postItem={this.props.postItem}
+              asset={asset}
+              currentUser={user}
+              highlighted={comment.id}
+              postFlag={this.props.postFlag}
+              postDontAgree={this.props.postDontAgree}
+              loadMore={this.props.loadMore}
+              deleteAction={this.props.deleteAction}
+              showSignInDialog={this.props.showSignInDialog}
+              key={highlightedComment.id}
+              commentIsIgnored={commentIsIgnored}
+              reactKey={highlightedComment.id}
+              comment={highlightedComment}
+              charCountEnable={asset.settings.charCountEnable}
+              maxCharCount={asset.settings.charCount}
+            />
+          : <div>
+              <NewCount
+                commentCount={asset.commentCount}
+                commentCountCache={commentCountCache}
+                loadMore={this.props.loadMore}
+                firstCommentDate={firstCommentDate}
+                assetId={asset.id}
+                setCommentCountCache={this.props.setCommentCountCache}
+              />
+              <div className="embed__stream">
+                {comments.map(
+                  comment =>
+                    (commentIsIgnored(comment)
+                      ? <IgnoredCommentTombstone key={comment.id} />
+                      : <Comment
+                          data={this.props.data}
+                          root={this.props.root}
+                          disableReply={!open}
+                          setActiveReplyBox={this.setActiveReplyBox}
+                          activeReplyBox={this.props.activeReplyBox}
+                          addNotification={addNotification}
+                          depth={0}
+                          postItem={postItem}
+                          asset={asset}
+                          currentUser={user}
+                          postFlag={postFlag}
+                          postDontAgree={postDontAgree}
+                          addCommentTag={addCommentTag}
+                          removeCommentTag={removeCommentTag}
+                          ignoreUser={ignoreUser}
+                          commentIsIgnored={commentIsIgnored}
+                          loadMore={loadMore}
+                          deleteAction={deleteAction}
+                          showSignInDialog={showSignInDialog}
+                          key={comment.id}
+                          reactKey={comment.id}
+                          comment={comment}
+                          pluginProps={pluginProps}
+                          charCountEnable={asset.settings.charCountEnable}
+                          maxCharCount={asset.settings.charCount}
+                        />)
+                )}
+              </div>
+              <LoadMore
+                topLevel={true}
+                assetId={asset.id}
+                comments={asset.comments}
+                moreComments={hasOlderComments}
+                loadMore={this.props.loadMore}
+              />
+            </div>}
+      </div>
+    );
+  }
+}
+
+Stream.propTypes = {
+  addNotification: PropTypes.func.isRequired,
+  postItem: PropTypes.func.isRequired,
+
+  // dispatch action to add a tag to a comment
+  addCommentTag: PropTypes.func,
+
+  // dispatch action to remove a tag from a comment
+  removeCommentTag: PropTypes.func,
+
+  // dispatch action to ignore another user
+  ignoreUser: React.PropTypes.func
+};
+
+export default Stream;

client/coral-embed-stream/src/components/TopRightMenu.css

@@ -0,0 +1,24 @@
+.Toggleable:focus {
+  outline: none;
+}
+
+/** 
+ * Up/Down Chevrons for the top right menu
+ */
+.chevron {
+}
+.chevron:before {
+  content: '⌃';
+  display: inline-block; 
+  position: relative;
+  top: 0.25em;   
+}
+
+/* Down Arrow */   
+.chevron.down:before {
+  display: inline-block; 
+  position: relative;
+  transform: rotate(180deg);
+  top: 0;
+  /*top: -0.25em;*/
+}

client/coral-embed-stream/src/components/TopRightMenu.js

@@ -0,0 +1,94 @@
+import React, {PropTypes} from 'react';
+import classnames from 'classnames';
+
+import {IgnoreUserWizard} from './IgnoreUserWizard';
+import styles from './TopRightMenu.css';
+
+// TopRightMenu appears as a dropdown in the top right of the comment.
+// when you click the down cehvron, it expands and shows IgnoreUserWizard
+// when you click 'cancel' in the wizard, it closes the menu
+export class TopRightMenu extends React.Component {
+  static propTypes = {
+
+    // comment on which this menu appears
+    comment: PropTypes.shape({
+      user: PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired
+      }).isRequired
+    }).isRequired,
+    ignoreUser: PropTypes.func,
+
+    // show notification to the user (e.g. for errors)
+    addNotification: PropTypes.func.isRequired,
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
+      timesReset: 0
+    };
+  }
+  render() {
+    const {comment, ignoreUser, addNotification} = this.props;
+
+    // timesReset is used as Toggleable key so it re-renders on reset (closing the toggleable)
+    const reset = () => this.setState({timesReset: this.state.timesReset + 1});
+    const ignoreUserAndCloseMenuAndNotifyOnError = async ({id}) => {
+
+      // close menu
+      reset();
+
+      // ignore user
+      try {
+        await ignoreUser({id});
+      } catch (error) {
+        addNotification('error', 'Failed to ignore user');
+        throw error;
+      }
+    };
+    return (
+      <Toggleable key={this.state.timesReset}>
+        <div style={{position: 'absolute', right: 0, zIndex: 1}}>
+          <IgnoreUserWizard
+            user={comment.user}
+            cancel={reset}
+            ignoreUser={ignoreUserAndCloseMenuAndNotifyOnError}
+            />
+        </div>
+      </Toggleable>
+    );        
+  }
+}
+
+const upArrow = <span className={classnames(styles.chevron, styles.up)}></span>;
+const downArrow = <span className={classnames(styles.chevron, styles.down)}></span>;
+class Toggleable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.toggle = this.toggle.bind(this);
+    this.close = this.close.bind(this);
+    this.state = {
+      isOpen: false
+    };
+  }
+  toggle() {
+    this.setState({isOpen: ! this.state.isOpen});
+  }
+  close() {
+    this.setState({isOpen: false});
+  }
+  render() {
+    const {children} = this.props;
+    const {isOpen} = this.state;
+    return (
+
+      // /*onBlur={ this.close } */
+      <span className={styles.Toggleable} tabIndex="0" >
+        <span className={styles.toggler}
+              onClick={this.toggle}>{isOpen ? upArrow : downArrow}</span>
+        {isOpen ? children : null}
+      </span>
+    );
+  }
+}
+

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

@@ -0,0 +1 @@
+export const SET_ACTIVE_TAB = 'SET_ACTIVE_TAB';

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

@@ -0,0 +1,5 @@
+export const SET_ACTIVE_REPLY_BOX = 'SET_ACTIVE_REPLY_BOX';
+export const SET_COMMENT_COUNT_CACHE = 'SET_COMMENT_COUNT_CACHE';
+export const ADDTL_COMMENTS_ON_LOAD_MORE = 10;
+export const NEW_COMMENT_COUNT_POLL_INTERVAL = 20000;
+export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS';

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

@@ -0,0 +1,48 @@
+import {gql} from 'react-apollo';
+import Comment from '../components/Comment';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotsFragments} from 'coral-framework/helpers/plugins';
+
+const pluginFragments = getSlotsFragments([
+  'streamQuestionArea',
+  'commentInputArea',
+  'commentInputDetailArea',
+  'commentInfoBar',
+  'commentActions',
+  'commentContent',
+  'commentReactions'
+]);
+
+export default withFragments({
+  root: gql`
+    fragment Comment_root on RootQuery {
+      __typename
+      ${pluginFragments.spreads('root')}
+    }
+    ${pluginFragments.definitions('root')}
+    `,
+  comment: gql`
+    fragment Comment_comment on Comment {
+      id
+      body
+      created_at
+      status
+      tags {
+        name
+      }
+      user {
+        id
+        name: username
+      }
+      action_summaries {
+        __typename
+        count
+        current_user {
+          id
+        }
+      }
+      ${pluginFragments.spreads('comment')}
+    }
+    ${pluginFragments.definitions('comment')}
+  `
+})(Comment);

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import {compose, gql, graphql} from 'react-apollo';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import isEqual from 'lodash/isEqual';
+import branch from 'recompose/branch';
+import renderComponent from 'recompose/renderComponent';
+
+import {Spinner} from 'coral-ui';
+import {authActions, assetActions, pym} from 'coral-framework';
+import {getDefinitionName, separateDataAndRoot} from 'coral-framework/utils';
+import Embed from '../components/Embed';
+import {setCommentCountCache, viewAllComments} from '../actions/stream';
+import {setActiveTab} from '../actions/embed';
+import Stream from './Stream';
+
+const {logout, checkLogin} = authActions;
+const {fetchAssetSuccess} = assetActions;
+
+class EmbedContainer extends React.Component {
+
+  componentDidMount() {
+    pym.sendMessage('childReady');
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if(this.props.root.me && !nextProps.root.me) {
+
+      // Refetch because on logout `excludeIgnored` becomes `false`.
+      // TODO: logout via mutation and obsolete this?
+      this.props.data.refetch();
+    }
+
+    const {fetchAssetSuccess} = this.props;
+    if(!isEqual(nextProps.root.asset, this.props.root.asset)) {
+
+      // TODO: remove asset data from redux store.
+      fetchAssetSuccess(nextProps.root.asset);
+
+      const {setCommentCountCache, commentCountCache} = this.props;
+      const {asset} = nextProps.root;
+
+      if (commentCountCache === -1) {
+        setCommentCountCache(asset.commentCount);
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if(!isEqual(prevProps.root.comment, this.props.root.comment)) {
+
+      // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
+      setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0);
+    }
+  }
+
+  render() {
+    if (!this.props.root.asset) {
+      return <Spinner />;
+    }
+    return <Embed {...this.props} />;
+  }
+}
+
+const EMBED_QUERY = gql`
+  query EmbedQuery($assetId: ID, $assetUrl: String, $commentId: ID!, $hasComment: Boolean!, $excludeIgnored: Boolean) {
+    asset(id: $assetId, url: $assetUrl) {
+      totalCommentCount(excludeIgnored: $excludeIgnored)
+    }
+    me {
+      status
+    }
+    ...${getDefinitionName(Stream.fragments.root)}
+  }
+  ${Stream.fragments.root}
+`;
+
+export const withQuery = graphql(EMBED_QUERY, {
+  options: ({auth, commentId, assetId, assetUrl}) => ({
+    variables: {
+      assetId,
+      assetUrl,
+      commentId,
+      hasComment: commentId !== '',
+      excludeIgnored: Boolean(auth && auth.user && auth.user.id),
+    },
+  }),
+  props: ({data}) => separateDataAndRoot(data),
+});
+
+const mapStateToProps = state => ({
+  auth: state.auth.toJS(),
+  commentCountCache: state.stream.commentCountCache,
+  commentId: state.stream.commentId,
+  assetId: state.stream.assetId,
+  assetUrl: state.stream.assetUrl,
+  activeTab: state.embed.activeTab,
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({
+    fetchAssetSuccess,
+    checkLogin,
+    setCommentCountCache,
+    viewAllComments,
+    logout,
+    setActiveTab,
+  }, dispatch);
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  branch(
+    props => !props.auth.checkedInitialLogin,
+    renderComponent(Spinner),
+  ),
+  withQuery,
+)(EmbedContainer);
+

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

@@ -0,0 +1,247 @@
+import React from 'react';
+import {gql, compose} from 'react-apollo';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import uniqBy from 'lodash/uniqBy';
+import sortBy from 'lodash/sortBy';
+import isNil from 'lodash/isNil';
+import {NEW_COMMENT_COUNT_POLL_INTERVAL} from '../constants/stream';
+import {postComment, postFlag, postDontAgree, deleteAction, addCommentTag, removeCommentTag, ignoreUser} from 'coral-framework/graphql/mutations';
+import {notificationActions, authActions} from 'coral-framework';
+import {editName} from 'coral-framework/actions/user';
+import {setCommentCountCache, setActiveReplyBox} from '../actions/stream';
+import Stream from '../components/Stream';
+import Comment from './Comment';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {getDefinitionName} from 'coral-framework/utils';
+
+const {showSignInDialog} = authActions;
+const {addNotification} = notificationActions;
+
+class StreamContainer extends React.Component {
+  getCounts = (variables) => {
+    return this.props.data.fetchMore({
+      query: LOAD_COMMENT_COUNTS_QUERY,
+      variables,
+
+      // Apollo requires this, even though we don't use it...
+      updateQuery: data => data,
+    });
+  };
+
+  // handle paginated requests for more Comments pertaining to the Asset
+  loadMore = ({limit, cursor, parent_id = null, asset_id, sort}, newComments) => {
+    return this.props.data.fetchMore({
+      query: LOAD_MORE_QUERY,
+      variables: {
+        limit, // how many comments are we returning
+        cursor, // the date of the first/last comment depending on the sort order
+        parent_id, // if null, we're loading more top-level comments, if not, we're loading more replies to a comment
+        asset_id, // the id of the asset we're currently on
+        sort, // CHRONOLOGICAL or REVERSE_CHRONOLOGICAL
+        excludeIgnored: this.props.data.variables.excludeIgnored,
+      },
+      updateQuery: (oldData, {fetchMoreResult:{new_top_level_comments}}) => {
+        let updatedAsset;
+
+        if (!isNil(oldData.comment)) { // loaded replies on a highlighted (permalinked) comment
+
+          let comment = {};
+          if (oldData.comment && oldData.comment.parent) {
+
+            // put comments (replies) onto the oldData.comment.parent object
+            // the initial comment permalinked was a reply
+            const uniqReplies = uniqBy([...new_top_level_comments, ...oldData.comment.parent.replies], 'id');
+            comment.parent = {...oldData.comment.parent, replies: sortBy(uniqReplies, 'created_at')};
+          } else if (oldData.comment) {
+
+            // put the comments (replies) directly onto oldData.comment
+            // the initial comment permalinked was a top-level comment
+            const uniqReplies = uniqBy([...new_top_level_comments, ...oldData.comment.replies], 'id');
+            comment.replies = sortBy(uniqReplies, 'created_at');
+          }
+
+          updatedAsset = {
+            ...oldData,
+            comment: {
+              ...oldData.comment,
+              ...comment
+            }
+          };
+
+        } else if (parent_id) { // If loading more replies
+
+          updatedAsset = {
+            ...oldData,
+            asset: {
+              ...oldData.asset,
+              comments: oldData.asset.comments.map(comment => {
+
+                // since the dipslayed replies and the returned replies can overlap,
+                // pull out the unique ones.
+                const uniqueReplies = uniqBy([...new_top_level_comments, ...comment.replies], 'id');
+
+                // since we just gave the returned replies precedence, they're now out of order.
+                // resort according to date.
+                return comment.id === parent_id
+                  ? {...comment, replies: sortBy(uniqueReplies, 'created_at')}
+                  : comment;
+              })
+            }
+          };
+        } else { // If loading more top-level comments
+
+          updatedAsset = {
+            ...oldData,
+            asset: {
+              ...oldData.asset,
+              comments: newComments ? [...new_top_level_comments.reverse(), ...oldData.asset.comments]
+                : [...oldData.asset.comments, ...new_top_level_comments]
+            }
+          };
+        }
+
+        return updatedAsset;
+      }
+    });
+  };
+
+  componentDidMount() {
+    if (this.props.previousTab) {
+      this.props.data.refetch();
+    }
+    this.countPoll = setInterval(() => {
+      this.getCounts(this.props.data.variables);
+    }, NEW_COMMENT_COUNT_POLL_INTERVAL);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.countPoll);
+  }
+
+  render() {
+    return <Stream {...this.props} loadMore={this.loadMore}/>;
+  }
+}
+
+const LOAD_COMMENT_COUNTS_QUERY = gql`
+  query LoadCommentCounts($assetUrl: String, $assetId: ID, $excludeIgnored: Boolean) {
+    asset(id: $assetId, url: $assetUrl) {
+      id
+      commentCount(excludeIgnored: $excludeIgnored)
+      comments(limit: 10) {
+        id
+        replyCount(excludeIgnored: $excludeIgnored)
+      }
+    }
+  }
+`;
+
+const LOAD_MORE_QUERY = gql`
+  query LoadMoreComments($limit: Int = 5, $cursor: Date, $parent_id: ID, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) {
+    new_top_level_comments: comments(query: {limit: $limit, cursor: $cursor, parent_id: $parent_id, asset_id: $asset_id, sort: $sort, excludeIgnored: $excludeIgnored}) {
+      ...${getDefinitionName(Comment.fragments.comment)}
+      replyCount(excludeIgnored: $excludeIgnored)
+      replies(limit: 3) {
+        ...${getDefinitionName(Comment.fragments.comment)}
+      }
+    }
+  }
+  ${Comment.fragments.comment}
+`;
+
+const fragments = {
+  root: gql`
+    fragment Stream_root on RootQuery {
+      comment(id: $commentId) @include(if: $hasComment) {
+        ...${getDefinitionName(Comment.fragments.comment)}
+        replyCount(excludeIgnored: $excludeIgnored)
+        replies {
+          ...${getDefinitionName(Comment.fragments.comment)}
+        }
+        parent {
+          ...${getDefinitionName(Comment.fragments.comment)}
+          replyCount(excludeIgnored: $excludeIgnored)
+          replies {
+            ...${getDefinitionName(Comment.fragments.comment)}
+          }
+        }
+      }
+      asset(id: $assetId, url: $assetUrl) {
+        id
+        title
+        url
+        closedAt
+        created_at
+        settings {
+          moderation
+          infoBoxEnable
+          infoBoxContent
+          premodLinksEnable
+          questionBoxEnable
+          questionBoxContent
+          closeTimeout
+          closedMessage
+          charCountEnable
+          charCount
+          requireEmailConfirmation
+        }
+        lastComment {
+          id
+        }
+        commentCount(excludeIgnored: $excludeIgnored)
+        totalCommentCount(excludeIgnored: $excludeIgnored)
+        comments(limit: 10, excludeIgnored: $excludeIgnored) {
+          ...${getDefinitionName(Comment.fragments.comment)}
+          replyCount(excludeIgnored: $excludeIgnored)
+          replies(limit: 3, excludeIgnored: $excludeIgnored) {
+            ...${getDefinitionName(Comment.fragments.comment)}
+          }
+        }
+      }
+      myIgnoredUsers {
+        id,
+        username,
+      }
+      me {
+        status
+      }
+      ...${getDefinitionName(Comment.fragments.root)}
+    }
+    ${Comment.fragments.root}
+    ${Comment.fragments.comment}
+  `,
+};
+
+const mapStateToProps = state => ({
+  auth: state.auth.toJS(),
+  commentCountCache: state.stream.commentCountCache,
+  activeReplyBox: state.stream.activeReplyBox,
+  commentId: state.stream.commentId,
+  assetId: state.stream.assetId,
+  assetUrl: state.stream.assetUrl,
+  activeTab: state.embed.activeTab,
+  previousTab: state.embed.previousTab,
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({
+    showSignInDialog,
+    addNotification,
+    setActiveReplyBox,
+    editName,
+    setCommentCountCache,
+  }, dispatch);
+
+export default compose(
+  withFragments(fragments),
+  connect(mapStateToProps, mapDispatchToProps),
+  postComment,
+  postFlag,
+  postDontAgree,
+  addCommentTag,
+  removeCommentTag,
+  ignoreUser,
+  deleteAction,
+)(StreamContainer);
+

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

@@ -3,13 +3,24 @@ import {render} from 'react-dom';
 import {ApolloProvider} from 'react-apollo';
 
 import {client} from 'coral-framework/services/client';
-import store from 'coral-framework/services/store';
+import {checkLogin} from 'coral-framework/actions/auth';
 
-import Embed from './Embed';
+import reducers from './reducers';
+import localStore, {injectReducers} from 'coral-framework/services/store';
+import AppRouter from './AppRouter';
+
+injectReducers(reducers);
+
+const store = (window.opener && window.opener.coralStore) ? window.opener.coralStore : localStore;
+
+// Don't run this in the popup.
+if (store === localStore) {
+  store.dispatch(checkLogin());
+}
 
 render(
   <ApolloProvider client={client} store={store}>
-    <Embed />
+    <AppRouter />
   </ApolloProvider>
   , document.querySelector('#coralStream')
 );

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

@@ -0,0 +1,19 @@
+import * as actions from '../constants/embed';
+
+const initialState = {
+  activeTab: 'stream',
+  previousTab: '',
+};
+
+export default function stream(state = initialState, action) {
+  switch (action.type) {
+  case actions.SET_ACTIVE_TAB:
+    return {
+      ...state,
+      activeTab: action.tab,
+      previousTab: state.activeTab,
+    };
+  default:
+    return state;
+  }
+}

client/coral-embed-stream/src/reducers/index.js

@@ -0,0 +1,7 @@
+import stream from './stream';
+import embed from './embed';
+
+export default {
+  stream,
+  embed,
+};

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

@@ -0,0 +1,45 @@
+import * as actions from '../constants/stream';
+
+function getQueryVariable(variable) {
+  let query = window.location.search.substring(1);
+  let vars = query.split('&');
+  for (let i = 0; i < vars.length; i++) {
+    let pair = vars[i].split('=');
+    if (decodeURIComponent(pair[0]) === variable) {
+      return decodeURIComponent(pair[1]);
+    }
+  }
+
+  // If not found, return null.
+  return null;
+}
+
+const initialState = {
+  activeReplyBox: '',
+  commentCountCache: -1,
+  assetId: getQueryVariable('asset_id'),
+  assetUrl: getQueryVariable('asset_url'),
+  commentId: getQueryVariable('comment_id'),
+};
+
+export default function stream(state = initialState, action) {
+  switch (action.type) {
+  case actions.SET_ACTIVE_REPLY_BOX:
+    return {
+      ...state,
+      activeReplyBox: action.id,
+    };
+  case actions.SET_COMMENT_COUNT_CACHE:
+    return {
+      ...state,
+      commentCountCache: action.amount,
+    };
+  case actions.VIEW_ALL_COMMENTS:
+    return {
+      ...state,
+      commentId: '',
+    };
+  default:
+    return state;
+  }
+}

client/coral-embed-stream/style/default.css

@@ -1,8 +1,6 @@
 * {
-  font-weight: inherit;
   font-family: inherit;
   font-style: inherit;
-  font-size: 100%;
 }
 
 html, body {
@@ -11,7 +9,7 @@ html, body {
 }
 
 body {
-  font-family: 'Lato', sans-serif;
+  font-family: Helvetica, 'Helvetica Neue', Verdana, sans-serif;
   width: 100%;
   font-size: 14px;
   margin: 0px;
@@ -80,8 +78,8 @@ hr {
 .coral-plugin-infobox-info {
   top: 0;
   border: 0;
-  background: rgb(35,118,216);
-  color: white;
+  background: #DEEDFF;
+  color: #2a2a2a;
   width: 100%;
   text-align: left;
   padding: 10px;
@@ -92,6 +90,24 @@ hr {
 }
 
 
+.coral-plugin-infobox-info em{
+  font-style: italic;
+}
+
+.coral-plugin-infobox-info strong{
+  font-weight: bold;
+}
+
+.coral-plugin-infobox-info blockquote{
+  border-left: solid 2px #2a2a2a;
+  padding-left: 10px;
+}
+
+
+.coral-plugin-infobox-info a{
+  color: #2a2a2a;
+}
+
 .commentStream .material-icons {
   vertical-align: middle;
   width: 1em;
@@ -111,15 +127,15 @@ hr {
   margin-bottom: 0px;
   font-weight: bold;
   font-size: 14px;
-  display: block;
   overflow: hidden;
-  height: 50px;
+  min-height: 50px;
+  display: flex;
 }
 
 .coral-plugin-questionbox-icon.bubble{
   position: absolute;
   top: 11px;
-  left: 15px;
+  left: 10px;
   color: #949393;
   font-size: 20px;
   z-index: 0;
@@ -128,7 +144,7 @@ hr {
 .coral-plugin-questionbox-icon.person{
   z-index: 2;
   top: 20px;
-  left: 20px;
+  left: 15px;
   position: absolute;
   font-size: 24px;
   color: white;
@@ -143,12 +159,19 @@ hr {
   margin-left: 0px !important;
   margin-right: 10px;
   display: inline-block;
-  width: 15px;
-  height: 100%;
-  padding: 3px 20px;
+  width: 10px;
+  min-height: 100%;
+  padding: 5px 20px;
   vertical-align: middle;
 }
 
+.coral-plugin-questionbox-content {
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .hidden  {
   visibility: hidden;
   display: none;
@@ -164,6 +187,7 @@ hr {
 /* Comment Box Styles */
 .coral-plugin-commentbox-container {
   display: flex;
+  width: 100%;
 }
 
 .coral-plugin-commentbox-textarea {
@@ -171,7 +195,8 @@ hr {
   padding: 5px;
   min-height: 100px;
   margin-top: 10px;
-  font-size: 14px;
+  font-size: 16px;
+  border: 1px solid #ccc;
 }
 
 .coral-plugin-commentbox-button-container {
@@ -255,13 +280,13 @@ hr {
 .commentActionsRight, .replyActionsRight {
   display: flex;
   justify-content: flex-end;
-  width: 50%;
+  width: 30%;
 }
 .commentActionsLeft, .replyActionsLeft {
   display: flex;
   justify-content: flex-start;
   float: left;
-  width: 50%;
+  width: 70%;
 }
 
 .comment__action-container .material-icons {
@@ -327,17 +352,6 @@ button.comment__action-button[disabled],
 
 /* Flag Styles */
 
-.coral-plugin-flags-container {
-  position: relative;
-}
-
-.coral-plugin-flags-popup span {
-  min-width: 280px;
-  bottom: 36px;
-  position: absolute;
-  right: 10px;
-}
-
 .coral-plugin-flags-popup-form {
   margin-bottom: 10px;
 }
@@ -373,6 +387,8 @@ button.comment__action-button[disabled],
   margin-left: 20px;
   margin-top: 5px;
   width: 75%;
+  font-size: 16px;
+  border: 1px solid #ccc;
 }
 
 /* Close comments */
@@ -452,3 +468,19 @@ button.comment__action-button[disabled],
 .coral-load-more-replies button.coral-load-more, .coral-new-comments  button.coral-load-more{
   width: initial;
 }
+
+@media (min-device-width : 300px) and (max-device-width : 420px) {
+  .commentActionsLeft.comment__action-container .coral-plugin-likes-button-text,
+  .commentActionsLeft.comment__action-container > div span {
+    display: none;
+  }
+
+  .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button {
+    visibility: collapse;
+    margin-left: -30px;
+  }
+
+  .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button .coral-plugin-replies-icon {
+    visibility: visible;
+  }
+}

client/coral-embed/src/index.js

@@ -1,5 +1,8 @@
 import pym from 'pym.js';
 
+import {stringify} from 'querystring';
+
+// TODO: Styles should live in a separate file
 const snackbarStyles = {
   position: 'fixed',
   cursor: 'default',
@@ -18,7 +21,8 @@ const snackbarStyles = {
   opacity: 0,
   transform: 'translate(-50%, 20px)',
   bottom: 0,
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  fontFamily: 'Helvetica, \'Helvetica Neue\', Verdana, sans-serif'
 };
 
 // This function should return value of window.Coral
@@ -26,30 +30,21 @@ const Coral = {};
 const Talk = Coral.Talk = {};
 
 // build the URL to load in the pym iframe
-function buildStreamIframeUrl(talkBaseUrl, asset_url, comment, asset_id) {
-  let iframeArray = [
+function buildStreamIframeUrl(talkBaseUrl, query) {
+  let url = [
     talkBaseUrl,
     (talkBaseUrl.match(/\/$/) ? '' : '/'), // make sure no double-'/' if opts.talk already ends with '/'
-    'embed/stream?asset_url=',
-    encodeURIComponent(asset_url)
-  ];
+    'embed/stream?'
+  ].join('');
 
-  if (comment) {
-    iframeArray.push('&comment_id=');
-    iframeArray.push(encodeURIComponent(comment));
-  }
+  url += stringify(query);
 
-  if (asset_id) {
-    iframeArray.push('&asset_id=');
-    iframeArray.push(encodeURIComponent(asset_id));
-  }
-
-  return iframeArray.join('');
+  return url;
 }
 
 // Set up postMessage listeners/handlers on the pymParent
 // e.g. to resize the iframe, and navigate the host page
-function configurePymParent(pymParent, asset_url) {
+function configurePymParent(pymParent) {
   let notificationOffset = 200;
   let ready = false;
   let cachedHeight;
@@ -62,6 +57,10 @@ function configurePymParent(pymParent, asset_url) {
 
   window.document.body.appendChild(snackbar);
 
+  // Workaround: IOS Safari ignores `width` but respects `min-width` value.
+  pymParent.el.firstChild.style.width = '1px';
+  pymParent.el.firstChild.style.minWidth = '100%';
+
   // Resize parent iframe height when child height changes
   pymParent.onMessage('height', function(height) {
     if (height !== cachedHeight) {
@@ -117,8 +116,8 @@ function configurePymParent(pymParent, asset_url) {
       if (ready) {
         window.clearInterval(interval);
 
-        // @todo - It's weird to me that this is sent here in addition to the iframe URL. Could it just be in one place?
-        pymParent.sendMessage('DOMContentLoaded', asset_url);
+        // TODO: It's weird to me that this is sent here
+        pymParent.sendMessage('DOMContentLoaded');
       }
     }, 100);
   });
@@ -166,42 +165,37 @@ Talk.render = function (el, opts) {
   }
   opts = opts || {};
 
-  // @todo infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
+  // TODO: infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
   if (!opts.talk) {
     throw new Error('Coral.Talk.render() expects opts.talk as the Talk Base URL');
   }
 
-  // ensure el has an id, as pym can't directly accept the HTMLElement
+  // Ensure el has an id, as pym can't directly accept the HTMLElement.
   if (!el.id) {
     el.id = `_${Math.random()}`;
   }
 
-  let asset_url = opts.asset_url;
-  if (!asset_url) {
+  // Compose the query to send down to the Talk API so it knows what to load.
+  let query = {};
+
+  query.comment_id = window.location.hash.slice(1);
+  query.asset_id = opts.asset_id;
+
+  query.asset_url = opts.asset_url;
+  if (!query.asset_url) {
     try {
-      asset_url = document.querySelector('link[rel="canonical"]').href;
+      query.asset_url = document.querySelector('link[rel="canonical"]').href;
     } catch (e) {
       console.warn('This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.');
-      asset_url = window.location.origin + window.location.pathname;
+      query.asset_url = window.location.origin + window.location.pathname;
     }
   }
 
-  let comment = window.location.hash.slice(1);
-
-  let query = {
+  configurePymParent(new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, query), {
     title: opts.title,
-    asset_url: asset_url,
     id: `${el.id}_iframe`,
     name: `${el.id}_iframe`
-  };
-
-  if (opts.asset_id && opts.asset_id.length > 0) {
-    query.asset_id = opts.asset_id;
-  }
-
-  let pymParent = new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, asset_url, comment), query);
-
-  configurePymParent(pymParent, asset_url);
+  }));
 };
 
 export default Coral;

client/coral-framework/actions/asset.js

@@ -1,9 +1,8 @@
 import * as actions from '../constants/asset';
 import coralApi from '../helpers/response';
 import {addNotification} from '../actions/notification';
-import {pym} from 'coral-framework';
 
-import I18n from '../../coral-framework/modules/i18n/i18n';
+import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from './../translations';
 const lang = new I18n(translations);
 
@@ -39,7 +38,6 @@ export const updateOpenStream = closedBody => (dispatch, getState) => {
 
 const openStream = () => ({type: actions.OPEN_COMMENTS});
 const closeStream = () => ({type: actions.CLOSE_COMMENTS});
-export const updateCountCache = (id, count) => ({type: actions.UPDATE_COUNT_CACHE, id, count});
 
 export const updateOpenStatus = status => dispatch => {
   if (status === 'open') {
@@ -51,36 +49,3 @@ export const updateOpenStatus = status => dispatch => {
   }
 };
 
-function removeParam(key, sourceURL) {
-  let rtn = sourceURL.split('?')[0];
-  let param;
-  let params_arr = [];
-  let queryString = (sourceURL.indexOf('?') !== -1) ? sourceURL.split('?')[1] : '';
-  if (queryString !== '') {
-    params_arr = queryString.split('&');
-    for (let i = params_arr.length - 1; i >= 0; i -= 1) {
-      param = params_arr[i].split('=')[0];
-      if (param === key) {
-        params_arr.splice(i, 1);
-      }
-    }
-    rtn = `${rtn}?${params_arr.join('&')}`;
-  }
-  return rtn;
-}
-
-export const viewAllComments = () => {
-
-  // remove the comment_id url param
-  const modifiedUrl = removeParam('comment_id', location.href);
-  try {
-
-    // "window" here refers to the embedded iframe
-    window.history.replaceState({}, document.title, modifiedUrl);
-
-    // also change the parent url
-    pym.sendMessage('coral-view-all-comments');
-  } catch (e) { /* not sure if we're worried about old browsers */ }
-
-  return {type: actions.VIEW_ALL_COMMENTS};
-};

client/coral-framework/actions/auth.js

@@ -1,3 +1,5 @@
+import {gql} from 'react-apollo';
+import client from 'coral-framework/services/client';
 import I18n from '../../coral-framework/modules/i18n/i18n';
 import translations from './../translations';
 const lang = new I18n(translations);
@@ -5,9 +7,59 @@ import * as actions from '../constants/auth';
 import coralApi, {base} from '../helpers/response';
 import {pym} from 'coral-framework';
 
+const ME_QUERY = gql`
+  query Me {
+    me {
+      status
+      comments {
+          id
+          body
+          asset {
+            id
+            title
+            url
+          }
+          created_at
+      }
+    }
+  }
+`;
+
+function fetchMe() {
+  return client.query({
+    fetchPolicy: 'network-only',
+    query: ME_QUERY});
+}
+
 // Dialog Actions
-export const showSignInDialog = (offset = 0) => ({type: actions.SHOW_SIGNIN_DIALOG, offset});
-export const hideSignInDialog = () => ({type: actions.HIDE_SIGNIN_DIALOG});
+export const showSignInDialog = () => dispatch => {
+  const signInPopUp = window.open(
+    '/embed/stream/login',
+    'Login',
+    'menubar=0,resizable=0,width=500,height=550,top=200,left=500'
+  );
+
+  // Workaround odd behavior in older WebKit versions, where
+  // onunload is called twice. (Encountered in IOS 8.3)
+  let loaded = false;
+  signInPopUp.onload = () => {
+    loaded = true;
+  };
+
+  // Use `onunload` instead of `onbeforeunload` which is not supported in IOS Safari.
+  signInPopUp.onunload = () => {
+    if (loaded) {
+      dispatch(checkLogin());
+      fetchMe();
+    }
+  };
+
+  dispatch({type: actions.SHOW_SIGNIN_DIALOG});
+};
+export const hideSignInDialog = () => dispatch => {
+  dispatch({type: actions.HIDE_SIGNIN_DIALOG});
+  window.close();
+};
 
 export const createUsernameRequest = () => ({type: actions.CREATE_USERNAME_REQUEST});
 export const showCreateUsernameDialog = () => ({type: actions.SHOW_CREATEUSERNAME_DIALOG});
@@ -31,28 +83,39 @@ export const createUsername = (userId, formData) => dispatch => {
     });
 };
 
-export const changeView = view => dispatch =>
+export const changeView = view => dispatch => {
   dispatch({
     type: actions.CHANGE_VIEW,
     view
   });
 
+  switch(view) {
+  case 'SIGNUP':
+    window.resizeTo(500, 800);
+    break;
+  case 'FORGOT':
+    window.resizeTo(500, 400);
+    break;
+  default:
+    window.resizeTo(500, 550);
+  }
+};
+
 export const cleanState = () => ({type: actions.CLEAN_STATE});
 
 // Sign In Actions
 
 const signInRequest = () => ({type: actions.FETCH_SIGNIN_REQUEST});
-const signInSuccess = (user, isAdmin) => ({type: actions.FETCH_SIGNIN_SUCCESS, user, isAdmin});
+
+// TODO: revisit login redux flow.
+// const signInSuccess = (user, isAdmin) => ({type: actions.FETCH_SIGNIN_SUCCESS, user, isAdmin});
+//
 const signInFailure = error => ({type: actions.FETCH_SIGNIN_FAILURE, error});
 
 export const fetchSignIn = (formData) => (dispatch) => {
   dispatch(signInRequest());
   return coralApi('/auth/local', {method: 'POST', body: formData})
-    .then(({user}) => {
-      const isAdmin = !!user && !!user.roles.filter(i => i === 'ADMIN').length;
-      dispatch(signInSuccess(user, isAdmin));
-      dispatch(hideSignInDialog());
-    })
+    .then(() => dispatch(hideSignInDialog()))
     .catch(error => {
       if (error.metadata) {
 
@@ -104,6 +167,7 @@ export const facebookCallback = (err, data) => dispatch => {
     dispatch(signInFacebookSuccess(user));
     dispatch(hideSignInDialog());
     dispatch(showCreateUsernameDialog());
+    dispatch(hideSignInDialog());
   } catch (err) {
     dispatch(signInFacebookFailure(err));
     return;
@@ -124,7 +188,13 @@ export const fetchSignUp = (formData, redirectUri) => (dispatch) => {
       dispatch(signUpSuccess(user));
     })
     .catch(error => {
-      dispatch(signUpFailure(lang.t(`error.${error.message}`)));
+      let errorMessage = lang.t(`error.${error.message}`);
+
+      // if there is no translation defined, just show the error string
+      if (errorMessage === `error.${error.message}`) {
+        errorMessage = error.message;
+      }
+      dispatch(signUpFailure(errorMessage));
     });
 };
 
@@ -151,7 +221,10 @@ const logOutFailure = () => ({type: actions.LOGOUT_FAILURE});
 export const logout = () => dispatch => {
   dispatch(logOutRequest());
   return coralApi('/auth', {method: 'DELETE'})
-    .then(() => dispatch(logOutSuccess()))
+    .then(() => {
+      dispatch(logOutSuccess());
+      fetchMe();
+    })
     .catch(error => dispatch(logOutFailure(error)));
 };
 

client/coral-framework/actions/index.js

@@ -0,0 +1,9 @@
+import * as authActions from './auth';
+import * as assetActions from './asset';
+import * as notificationActions from './notification';
+
+export default {
+  authActions,
+  assetActions,
+  notificationActions,
+};

client/coral-framework/actions/notification.js

@@ -1,9 +1,12 @@
-import {pym} from '../../coral-framework';
+import pym from '../services/PymConnection';
+import * as actions from '../constants/notification';
 
 export const addNotification = (notifType, text) => {
   pym.sendMessage('coral-alert', `${notifType}|${text}`);
+  return {type: actions.ADD_NOTIFICATION, notifType, text};
 };
 
 export const clearNotification = () => {
   pym.sendMessage('coral-clear-notification');
+  return {type: actions.CLEAR_NOTIFICATION};
 };

client/coral-framework/components/Slot.css

@@ -0,0 +1,3 @@
+.inline {
+  display: inline-block;
+}

client/coral-framework/components/Slot.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Slot.css';
+import {getSlotElements} from 'coral-framework/helpers/plugins';
+
+export default function Slot ({fill, inline = false, ...rest}) {
+  return (
+    <div className={cn({[styles.inline]: inline})}>
+      {getSlotElements(fill, rest)}
+    </div>
+  );
+}
+
+Slot.propTypes = {
+  fill: React.PropTypes.string
+};

client/coral-framework/constants/asset.js

@@ -8,6 +8,4 @@ export const UPDATE_ASSET_SETTINGS_FAILURE = 'UPDATE_ASSET_SETTINGS_FAILURE';
 
 export const OPEN_COMMENTS = 'OPEN_COMMENTS';
 export const CLOSE_COMMENTS = 'CLOSE_COMMENTS';
-export const UPDATE_COUNT_CACHE = 'UPDATE_COUNT_CACHE';
 
-export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS';

client/coral-framework/constants/comments.js

@@ -1,2 +0,0 @@
-export const ADDTL_COMMENTS_ON_LOAD_MORE = 10;
-export const NEW_COMMENT_COUNT_POLL_INTERVAL = 20000;

client/coral-framework/constants/notification.js

@@ -0,0 +1,2 @@
+export const ADD_NOTIFICATION = 'ADD_NOTIFICATION';
+export const CLEAR_NOTIFICATION = 'CLEAR_NOTIFICATION';

client/coral-framework/constants/user.js

@@ -6,3 +6,5 @@ export const COMMENTS_BY_USER_SUCCESS = 'COMMENTS_BY_USER_SUCCESS';
 export const COMMENTS_BY_USER_FAILURE = 'COMMENTS_BY_USER_FAILURE';
 export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
 export const UPDATE_USERNAME = 'UPDATE_USERNAME';
+export const IGNORE_USER_SUCCESS = 'IGNORE_USER_SUCCESS';
+export const STOP_IGNORING_USER_SUCCESS = 'STOP_IGNORING_USER_SUCCESS';

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

@@ -0,0 +1,7 @@
+mutation ignoreUser ($id: ID!) {
+  ignoreUser(id:$id) {
+    errors {
+      translation_key
+    }
+  }
+}

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

@@ -1,11 +1,12 @@
 import {graphql} from 'react-apollo';
 import POST_COMMENT from './postComment.graphql';
 import POST_FLAG from './postFlag.graphql';
-import POST_LIKE from './postLike.graphql';
 import POST_DONT_AGREE from './postDontAgree.graphql';
 import DELETE_ACTION from './deleteAction.graphql';
 import ADD_COMMENT_TAG from './addCommentTag.graphql';
 import REMOVE_COMMENT_TAG from './removeCommentTag.graphql';
+import IGNORE_USER from './ignoreUser.graphql';
+import STOP_IGNORING_USER from './stopIgnoringUser.graphql';
 
 import commentView from '../fragments/commentView.graphql';
 
@@ -14,12 +15,11 @@ export const postComment = graphql(POST_COMMENT, {
     fragments: commentView
   }),
   props: ({ownProps, mutate}) => ({
-    postItem: ({asset_id, body, parent_id}) =>
-      mutate({
+    postItem: comment => {
+      const {asset_id, body, parent_id, tags = []} = comment;
+      return mutate({
         variables: {
-          asset_id,
-          body,
-          parent_id
+          comment
         },
         optimisticResponse: {
           createComment: {
@@ -33,14 +33,14 @@ export const postComment = graphql(POST_COMMENT, {
               parent_id,
               asset_id,
               action_summaries: [],
-              tags: [],
+              tags,
               status: null,
               id: 'pending'
             }
           }
         },
         updateQueries: {
-          AssetQuery: (oldData, {mutationResult:{data:{createComment:{comment}}}}) => {
+          EmbedQuery: (oldData, {mutationResult: {data: {createComment: {comment}}}}) => {
 
             if (oldData.asset.settings.moderation === 'PRE' || comment.status === 'PREMOD' || comment.status === 'REJECTED') {
               return oldData;
@@ -56,8 +56,8 @@ export const postComment = graphql(POST_COMMENT, {
                   ...oldData.asset,
                   comments: oldData.asset.comments.map((oldComment) => {
                     return oldComment.id === parent_id
-                    ? {...oldComment, replies: [...oldComment.replies, comment]}
-                    : oldComment;
+                      ? {...oldComment, replies: [...oldComment.replies, comment], replyCount: oldComment.replyCount + 1}
+                      : oldComment;
                   })
                 }
               };
@@ -77,19 +77,9 @@ export const postComment = graphql(POST_COMMENT, {
             return updatedAsset;
           }
         }
-      })
-  }),
-});
-
-export const postLike = graphql(POST_LIKE, {
-  props: ({mutate}) => ({
-    postLike: (like) => {
-      return mutate({
-        variables: {
-          like
-        }
       });
-    }}),
+    }
+  }),
 });
 
 export const postFlag = graphql(POST_FLAG, {
@@ -148,3 +138,36 @@ export const removeCommentTag = graphql(REMOVE_COMMENT_TAG, {
       });
     }}),
 });
+
+// TODO: don't rely on refetching.
+export const ignoreUser = graphql(IGNORE_USER, {
+  props: ({mutate}) => ({
+    ignoreUser: ({id}) => {
+      return mutate({
+        variables: {
+          id,
+        },
+        refetchQueries: [
+          'EmbedQuery', 'myIgnoredUsers',
+        ]
+      });
+    }}),
+});
+
+// TODO: don't rely on refetching.
+export const stopIgnoringUser = graphql(STOP_IGNORING_USER, {
+  props: ({mutate}) => {
+    return {
+      stopIgnoringUser: ({id}) => {
+        return mutate({
+          variables: {
+            id,
+          },
+          refetchQueries: [
+            'EmbedQuery', 'myIgnoredUsers',
+          ]
+        });
+      }
+    };
+  }
+});

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

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

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

@@ -1,10 +0,0 @@
-mutation CreateLike ($like: CreateLikeInput!) {
-  createLike(like:$like) {
-    like {
-      id
-    }
-    errors {
-      translation_key
-    }
-  }
-}

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

@@ -0,0 +1,7 @@
+mutation stopIgnoringUser ($id: ID!) {
+  stopIgnoringUser(id:$id) {
+    errors {
+      translation_key
+    }
+  }
+}