Merge pull request #888 from coralproject/debugging-optim

Increased debugging and optimized a query path

.dockerignore

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

.eslintignore

@@ -1,6 +1,5 @@
 dist
 docs
-client/lib
 **/*.html
 plugins/*
 !plugins/talk-plugin-facebook-auth
@@ -14,5 +13,11 @@ plugins/*
 !plugins/talk-plugin-comment-content
 !plugins/talk-plugin-permalink
 !plugins/talk-plugin-featured-comments
+!plugins/talk-plugin-sort-newest
+!plugins/talk-plugin-sort-oldest
+!plugins/talk-plugin-sort-most-replied
+!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-loved
+!plugins/talk-plugin-sort-most-respected
 
 node_modules

.gitignore

@@ -14,7 +14,6 @@ client/coral-framework/graphql/introspection.json
 *.swp
 *.DS_STORE
 
-test/e2e/reports
 coverage/
 
 plugins.json
@@ -30,5 +29,11 @@ plugins/*
 !plugins/talk-plugin-comment-content
 !plugins/talk-plugin-permalink
 !plugins/talk-plugin-featured-comments
+!plugins/talk-plugin-sort-newest
+!plugins/talk-plugin-sort-oldest
+!plugins/talk-plugin-sort-most-replied
+!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-loved
+!plugins/talk-plugin-sort-most-respected
 
 **/node_modules/*

Dockerfile

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

Dockerfile.onbuild

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

README.md

@@ -5,9 +5,21 @@ Online comments are broken. Our open-source Talk tool rethinks how moderation, c
 Third party licenses are available via the `/client/3rdpartylicenses.txt`
 endpoint when the server is running with built assets.
 
-## Documentation
+## Important Links
 
-See our [Talk Documentation & Guides](https://coralproject.github.io/talk/).
+- Developer Documentation & Setup Guides: https://coralproject.github.io/talk/
+
+- Pivotal Tracker Backlog & Release Schedule: https://www.pivotaltracker.com/n/projects/1863625
+
+## Learn More about Coral
+
+- Community Forums: https://community.coralproject.net/
+
+- Website: https://coralproject.net
+
+- Blog: https://blog.coralproject.net
+
+- Community Guides for Journalism: https://guides.coralproject.net/ 
 
 ## License
 

app.js

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

bin/cli

@@ -16,6 +16,7 @@ program
   .command('token', 'work with the access tokens')
   .command('users', 'work with the application auth')
   .command('migration', 'provides utilities for migrating the database')
+  .command('verify', 'provides utilities for performing data verification')
   .command(
     'plugins',
     'provides utilities for interacting with the plugin system'

bin/cli-setup

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

bin/cli-verify

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

bin/verifications/database/comments.js

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

bin/verifications/database/index.js

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

circle.yml

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

client/.babelrc

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

client/coral-admin/src/AppRouter.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
-import {history} from 'coral-framework/helpers/router';
+import PropTypes from 'prop-types';
 
 import Configure from 'routes/Configure';
 import Dashboard from 'routes/Dashboard';
@@ -37,32 +37,24 @@ const routes = (
       <Route path='moderate' component={ModerationLayout}>
         <IndexRoute components={Moderation} />
 
-        <Route path='all' components={Moderation}>
-          <Route path=':id' components={Moderation} />
-        </Route>
-        <Route path='new' components={Moderation}>
-          <Route path=':id' components={Moderation} />
-        </Route>
-        <Route path='approved' components={Moderation}>
-          <Route path=':id' components={Moderation} />
-        </Route>
-        <Route path='premod' components={Moderation}>
-          <Route path=':id' components={Moderation} />
-        </Route>
-        <Route path='rejected' components={Moderation}>
-          <Route path=':id' components={Moderation} />
-        </Route>
-        <Route path='reported' components={Moderation}>
-          <Route path=':id' components={Moderation} />
-        </Route>
-
-        <Route path=':id' components={Moderation} />
+        <Route path=':tabOrId' components={Moderation} />
 
+        <Route path=':tab' components={Moderation}>
+          <Route path=':id' components={Moderation} />
+        </Route>
       </Route>
     </Route>
   </div>
 );
 
-const AppRouter = () => <Router history={history} routes={routes}/>;
+class AppRouter extends React.Component {
+  static contextTypes = {
+    history: PropTypes.object,
+  };
+
+  render() {
+    return <Router history={this.context.history} routes={routes} />;
+  }
+}
 
 export default AppRouter;

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

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

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

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

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

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

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

@@ -1,4 +1,3 @@
-import coralApi from 'coral-framework/helpers/request';
 import * as actions from '../constants/install';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
@@ -93,23 +92,23 @@ const validation = (formData, dispatch, next) => {
 };
 
 export const submitSettings = () => (dispatch, getState) => {
-  const settingsFormData = getState().install.toJS().data.settings;
+  const settingsFormData = getState().install.data.settings;
   validation(settingsFormData, dispatch, function() {
     dispatch(nextStep());
   });
 };
 
 export const submitUser = () => (dispatch, getState) => {
-  const userFormData = getState().install.toJS().data.user;
+  const userFormData = getState().install.data.user;
   validation(userFormData, dispatch, function() {
     dispatch(nextStep());
   });
 };
 
-export const finishInstall = () => (dispatch, getState) => {
-  const data = getState().install.toJS().data;
+export const finishInstall = () => (dispatch, getState, {rest}) => {
+  const data = getState().install.data;
   dispatch(installRequest());
-  return coralApi('/setup', {method: 'POST', body: data})
+  return rest('/setup', {method: 'POST', body: data})
     .then(() => {
       dispatch(installSuccess());
       dispatch(nextStep());
@@ -129,9 +128,9 @@ const checkInstallRequest = () => ({type: actions.CHECK_INSTALL_REQUEST});
 const checkInstallSuccess = (installed) => ({type: actions.CHECK_INSTALL_SUCCESS, installed});
 const checkInstallFailure = (error) => ({type: actions.CHECK_INSTALL_FAILURE, error});
 
-export const checkInstall = (next) => (dispatch) => {
+export const checkInstall = (next) => (dispatch, _, {rest}) => {
   dispatch(checkInstallRequest());
-  coralApi('/setup')
+  rest('/setup')
     .then(({installed}) => {
       dispatch(checkInstallSuccess(installed));
       if (installed) {

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

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

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

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

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

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

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

@@ -8,18 +8,16 @@ export default ({suspectWords, bannedWords, body, ...rest}) => {
   const links = linkify.getMatches(body);
   const linkText = links ? links.map((link) => link.raw) : [];
 
-  // since words are checked against word boundaries on the backend,
-  // should be the behavior on the front end as well.
-  // currently the highlighter plugin does not support out of the box.
-  const searchWords = [...suspectWords, ...bannedWords]
-    .filter((w) => {
-      return new RegExp(`(^|\\s)${w}(\\s|$)`, 'i').test(body);
-    })
-    .concat(linkText);
+  const searchWords = [
+    ...suspectWords,
+    ...bannedWords,
+    ...linkText
+  ];
 
   return (
     <Highlighter
       {...rest}
+      autoEscape={true}
       searchWords={searchWords}
       textToHighlight={body}
     />

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

@@ -3,11 +3,12 @@
   color: white;
   background: grey;
   box-sizing: border-box;
-  padding: 2px 8px;
-  border-radius: 2px;
+  padding: 2px 5px;
   font-size: 12px;
-  height: 28px;
-
+  height: 24px;
+  letter-spacing: 0.4px;
+  line-height: 22px;
+  
   > i {
     font-size: 14px;
     vertical-align: text-top;

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

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

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

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

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

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

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

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

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

@@ -186,7 +186,6 @@
 .actionButton {
   transform: scale(.8);
   margin: 0;
-  width: 140px;
 }
 
 .minimal {

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

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

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

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

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

@@ -1,11 +1,16 @@
-import React, {PropTypes} from 'react';
-import Comment from './UserDetailComment';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Comment from '../containers/UserDetailComment';
 import styles from './UserDetail.css';
-import {Button, Drawer, Spinner} from 'coral-ui';
+import {Icon, Button, Drawer, Spinner} from 'coral-ui';
 import {Slot} from 'coral-framework/components';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import {actionsMap} from '../utils/moderationQueueActionsMap';
 import ClickOutside from 'coral-framework/components/ClickOutside';
+import LoadMore from '../components/LoadMore';
+import cn from 'classnames';
+import capitalize from 'lodash/capitalize';
+import {getReliability} from 'coral-framework/utils/user';
 
 export default class UserDetail extends React.Component {
 
@@ -55,11 +60,12 @@ export default class UserDetail extends React.Component {
 
   renderLoaded() {
     const {
+      root,
       root: {
         user,
         totalComments,
         rejectedComments,
-        comments: {nodes}
+        comments: {nodes, hasNextPage}
       },
       activeTab,
       selectedCommentIds,
@@ -70,15 +76,9 @@ export default class UserDetail extends React.Component {
       bulkReject,
       hideUserDetail,
       viewUserDetail,
+      loadMore,
     } = this.props;
 
-    const localProfile = user.profiles.find((p) => p.provider === 'local');
-
-    let profile;
-    if (localProfile) {
-      profile = localProfile.id;
-    }
-
     let rejectedPercent = (rejectedComments / totalComments) * 100;
     if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
 
@@ -92,32 +92,51 @@ export default class UserDetail extends React.Component {
           <h3>{user.username}</h3>
 
           <div>
-            {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
-            <ButtonCopyToClipboard className={styles.copyButton} copyText={profile} />
+            <ul className={styles.userDetailList}>
+              <li>
+                <Icon name="assignment_ind"/>
+                <span className={styles.userDetailItem}>Member Since:</span>
+                {new Date(user.created_at).toLocaleString()}
+              </li>
+
+              {user.profiles.map(({id}) =>
+                <li key={id}>
+                  <Icon name="email"/>
+                  <span className={styles.userDetailItem}>Email:</span>
+                  {id} <ButtonCopyToClipboard className={styles.copyButton} icon="content_copy" copyText={id} />
+                </li>
+              )}
+            </ul>
+
+            <ul className={styles.stats}>
+              <li className={styles.stat}>
+                <span className={styles.statItem}> Total Comments </span>
+                <spam className={styles.statResult}> {totalComments} </spam>
+              </li>
+              <li className={styles.stat}>
+                <spam className={styles.statItem}> Reject Rate </spam>
+                <spam className={styles.statResult}> {`${(rejectedPercent).toFixed(1)}%`} </spam>
+              </li>
+              <li className={styles.stat}>
+                <spam className={styles.statItem}> Reports </spam>
+                <spam className={cn(styles.statReportResult, styles[getReliability(user.reliable.flagger)])}>
+                  {capitalize(getReliability(user.reliable.flagger))}
+                </spam>
+              </li>
+            </ul>
+
+            <p className={styles.small}>
+              Data represents the last six months of activity
+            </p>
           </div>
 
           <Slot
             fill="userProfile"
             data={this.props.data}
-            root={this.props.root}
-            user={user}
+            queryData={root, user}
           />
-          <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
+
           <hr/>
-          <p>
-            <strong>Account summary</strong>
-            <br/><small className={styles.small}>Data represents the last six months of activity</small>
-          </p>
-          <div className={styles.stats}>
-            <div className={styles.stat}>
-              <p>Total Comments</p>
-              <p>{totalComments}</p>
-            </div>
-            <div className={styles.stat}>
-              <p>Reject Rate</p>
-              <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
-            </div>
-          </div>
           {
             selectedCommentIds.length === 0
             ? (
@@ -167,6 +186,11 @@ export default class UserDetail extends React.Component {
               })
             }
           </div>
+          <LoadMore
+            className={styles.loadMore}
+            loadMore={loadMore}
+            showLoadMore={hasNextPage}
+            />
         </Drawer>
       </ClickOutside>
     );

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

@@ -8,6 +8,10 @@
   min-height: 0;
 }
 
+.root:last-child {
+  border: 0;
+}
+
 .rootSelected {
   background-color: #ecf4ff;
 }
@@ -51,7 +55,7 @@
   position: relative;
 }
 
-.commentType {
+.badgeBar {
   position: absolute;
   right: 0px;
 }

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

@@ -3,6 +3,7 @@ import {Link} from 'react-router';
 
 import {Icon} from 'coral-ui';
 import FlagBox from './FlagBox';
+import ReplyBadge from './ReplyBadge';
 import styles from './UserDetailComment.css';
 import CommentType from './CommentType';
 import {getActionSummary} from 'coral-framework/utils';
@@ -56,7 +57,11 @@ class UserDetailComment extends React.Component {
               ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
               : null
             }
-            <CommentType type={commentType} className={styles.commentType}/>
+
+            <div className={styles.badgeBar}>
+              {comment.hasParent && <ReplyBadge/>}
+              <CommentType type={commentType}/>
+            </div>
           </div>
           <div className={styles.story}>
             Story: {comment.asset.title}

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

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

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

@@ -3,12 +3,11 @@ import {connect} from 'react-redux';
 import Layout from '../components/ui/Layout';
 import {fetchConfig} from '../actions/config';
 import AdminLogin from '../components/AdminLogin';
-import {logout} from 'coral-framework/actions/auth';
 import {FullLoading} from '../components/FullLoading';
 import BanUserDialog from './BanUserDialog';
 import SuspendUserDialog from './SuspendUserDialog';
 import {toggleModal as toggleShortcutModal} from '../actions/moderation';
-import {checkLogin, handleLogin, requestPasswordReset} from '../actions/auth';
+import {checkLogin, handleLogin, requestPasswordReset, logout} from '../actions/auth';
 import {can} from 'coral-framework/services/perms';
 import UserDetail from 'coral-admin/src/containers/UserDetail';
 
@@ -74,10 +73,8 @@ class LayoutContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  auth: state.auth.toJS(),
-  TALK_RECAPTCHA_PUBLIC: state.config
-    .get('data')
-    .get('TALK_RECAPTCHA_PUBLIC', null)
+  auth: state.auth,
+  TALK_RECAPTCHA_PUBLIC: state.config.data.TALK_RECAPTCHA_PUBLIC,
 });
 
 const mapDispatchToProps = (dispatch) => ({

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

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

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

@@ -14,6 +14,7 @@ import {
 } from 'coral-admin/src/actions/userDetail';
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import UserDetailComment from './UserDetailComment';
+import update from 'immutability-helper';
 
 const commentConnectionFragment = gql`
   fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
@@ -32,6 +33,7 @@ const slots = [
 ];
 
 class UserDetailContainer extends React.Component {
+  isLoadingMore = false;
 
   // status can be 'ACCEPTED' or 'REJECTED'
   bulkSetCommentStatus = (status) => {
@@ -40,7 +42,6 @@ class UserDetailContainer extends React.Component {
     });
 
     Promise.all(changes).then(() => {
-      this.props.data.refetch(); // some comments may have moved out of this tab
       this.props.clearUserDetailSelections(); // un-select everything
     });
   }
@@ -61,12 +62,53 @@ class UserDetailContainer extends React.Component {
     return this.props.setCommentStatus({commentId, status: 'REJECTED'});
   }
 
+  loadMore = () => {
+    if (this.isLoadingMore) {
+      return;
+    }
+
+    this.isLoadingMore = true;
+    const variables = {
+      limit: 10,
+      cursor: this.props.root.comments.endCursor,
+      author_id: this.props.data.variables.author_id,
+      statuses: this.props.data.variables.statuses,
+    };
+    this.props.data.fetchMore({
+      query: LOAD_MORE_QUERY,
+      variables,
+      updateQuery: (prev, {fetchMoreResult:{comments}}) => {
+        return update(prev, {
+          comments: {
+            nodes: {$push: comments.nodes},
+            hasNextPage: {$set: comments.hasNextPage},
+            startCursor: {$set: comments.startCursor},
+            endCursor: {$set: comments.endCursor},
+          },
+        });
+      }
+    })
+    .then(() => {
+      this.isLoadingMore = false;
+    })
+    .catch((err) => {
+      this.isLoadingMore = false;
+      throw err;
+    });
+  };
+
+  componentWillReceiveProps(next) {
+    if (this.props.userId === null && next.userId) {
+      next.data.refetch();
+    }
+  }
+
   render () {
     if (!this.props.userId) {
       return null;
     }
 
-    const loading = !('user' in this.props.root) || this.props.root.user.id !== this.props.userId;
+    const loading = this.props.data.loading;
 
     return <UserDetail
       bulkReject={this.bulkReject}
@@ -76,10 +118,20 @@ class UserDetailContainer extends React.Component {
       acceptComment={this.acceptComment}
       rejectComment={this.rejectComment}
       loading={loading}
+      loadMore={this.loadMore}
       {...this.props} />;
   }
 }
 
+const LOAD_MORE_QUERY = gql`
+  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $author_id: ID!, $statuses: [COMMENT_STATUS!]) {
+    comments(query: {limit: $limit, cursor: $cursor, author_id: $author_id, statuses: $statuses}) {
+      ...CoralAdmin_Moderation_CommentConnection
+    }
+  }
+  ${commentConnectionFragment}
+`;
+
 export const withUserDetailQuery = withQuery(gql`
   query CoralAdmin_UserDetail($author_id: ID!, $statuses: [COMMENT_STATUS!]) {
     user(id: $author_id) {
@@ -90,6 +142,9 @@ export const withUserDetailQuery = withQuery(gql`
         id
         provider
       }
+      reliable {
+        flagger
+      }
       ${getSlotFragmentSpreads(slots, 'user')}
     }
     totalComments: commentCount(query: {author_id: $author_id})
@@ -117,8 +172,8 @@ const mapStateToProps = (state) => ({
   selectedCommentIds: state.userDetail.selectedCommentIds,
   statuses: state.userDetail.statuses,
   activeTab: state.userDetail.activeTab,
-  bannedWords: state.settings.toJS().wordlist.banned,
-  suspectWords: state.settings.toJS().wordlist.suspect,
+  bannedWords: state.settings.wordlist.banned,
+  suspectWords: state.settings.wordlist.suspect,
 });
 
 const mapDispatchToProps = (dispatch) => ({

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

@@ -9,6 +9,7 @@ export default withFragments({
       body
       created_at
       status
+      hasParent
       asset {
         id
         title

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

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

client/coral-admin/src/index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -87,8 +87,8 @@ export const withCommunityQuery = withQuery(gql`
 });
 
 const mapStateToProps = (state) => ({
-  community: state.community.toJS(),
-  currentUser: state.auth.toJS().user,
+  community: state.community,
+  currentUser: state.auth.user,
 });
 
 const mapDispatchToProps = (dispatch) =>

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

@@ -23,7 +23,7 @@ class TableContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  commenters: state.community.get('accounts'),
+  commenters: state.community.accounts,
 });
 
 const mapDispatchToProps = (dispatch) =>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
 
 import {Icon} from 'coral-ui';
+import ReplyBadge from 'coral-admin/src/components/ReplyBadge';
 import FlagBox from 'coral-admin/src/components/FlagBox';
 import styles from './styles.css';
 import CommentType from 'coral-admin/src/components/CommentType';
@@ -20,6 +21,31 @@ import t, {timeago} from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
 
+  showSuspendUserDialog = () => {
+    const {comment, showSuspendUserDialog} = this.props;
+    return showSuspendUserDialog({
+      userId: comment.user.id,
+      username: comment.user.username,
+      commentId: comment.id,
+      commentStatus: comment.status,
+    });
+  };
+
+  showBanUserDialog = () => {
+    const {comment, showBanUserDialog} = this.props;
+    return showBanUserDialog({
+      userId: comment.user.id,
+      username: comment.user.username,
+      commentId: comment.id,
+      commentStatus: comment.status,
+    });
+  };
+
+  viewUserDetail = () => {
+    const {viewUserDetail, comment} = this.props;
+    return viewUserDetail(comment.user.id);
+  };
+
   render() {
     const {
       actions = [],
@@ -29,7 +55,12 @@ class Comment extends React.Component {
       bannedWords,
       selected,
       className,
-      ...props
+      data,
+      root,
+      currentUserId,
+      currentAsset,
+      acceptComment,
+      rejectComment,
     } = this.props;
 
     const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
@@ -38,19 +69,7 @@ class Comment extends React.Component {
 
     let selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
 
-    const showSuspenUserDialog = () => props.showSuspendUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
-
-    const showBanUserDialog = () => props.showBanUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
+    const queryData = {root, comment, asset: comment.asset};
 
     return (
       <li
@@ -62,7 +81,7 @@ class Comment extends React.Component {
             <div className={styles.author}>
               {
                 (
-                  <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
+                  <span className={styles.username} onClick={this.viewUserDetail}>
                     {comment.user.username}
                   </span>
                 )
@@ -75,27 +94,26 @@ class Comment extends React.Component {
                 ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
                 : null
               }
-              {props.currentUserId !== comment.user.id &&
+              {currentUserId !== comment.user.id &&
                 <ActionsMenu icon="not_interested">
                   <ActionsMenuItem
                     disabled={comment.user.status === 'BANNED'}
-                    onClick={showSuspenUserDialog}>
+                    onClick={this.showSuspendUserDialog}>
                     Suspend User</ActionsMenuItem>
                   <ActionsMenuItem
                     disabled={comment.user.status === 'BANNED'}
-                    onClick={showBanUserDialog}>
+                    onClick={this.showBanUserDialog}>
                     Ban User
                   </ActionsMenuItem>
                 </ActionsMenu>
               }
               <div className={styles.adminCommentInfoBar}>
+                {comment.hasParent && <ReplyBadge/>}
                 <CommentType type={commentType} className={styles.commentType}/>
                 <Slot
-                  data={props.data}
-                  root={props.root}
-                  comment={comment}
-                  asset={comment.asset}
                   fill="adminCommentInfoBar"
+                  data={data}
+                  queryData={queryData}
                 />
               </div>
             </div>
@@ -103,7 +121,7 @@ class Comment extends React.Component {
 
           <div className={styles.moderateArticle}>
             Story: {comment.asset.title}
-            {!props.currentAsset &&
+            {!currentAsset &&
               <Link to={`/admin/moderate/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
           </div>
           <CommentAnimatedEdit body={comment.body}>
@@ -124,10 +142,9 @@ class Comment extends React.Component {
                 </a>
               </p>
               <Slot
-                data={props.data}
-                root={props.root}
                 fill="adminCommentContent"
-                comment={comment}
+                data={data}
+                queryData={queryData}
               />
               <div className={styles.sideActions}>
                 <IfHasLink text={comment.body}>
@@ -150,30 +167,28 @@ class Comment extends React.Component {
                         acceptComment={() =>
                           (comment.status === 'ACCEPTED'
                             ? null
-                            : props.acceptComment({commentId: comment.id}))}
+                            : acceptComment({commentId: comment.id}))}
                         rejectComment={() =>
                           (comment.status === 'REJECTED'
                             ? null
-                            : props.rejectComment({commentId: comment.id}))}
+                            : rejectComment({commentId: comment.id}))}
                       />
                     );
                   })}
                 </div>
                 <Slot
-                  data={props.data}
-                  root={props.root}
                   fill="adminSideActions"
-                  comment={comment}
+                  data={data}
+                  queryData={queryData}
                 />
               </div>
             </div>
           </CommentAnimatedEdit>
         </div>
         <Slot
-          data={props.data}
-          root={props.root}
           fill="adminCommentDetailArea"
-          comment={comment}
+          data={data}
+          queryData={queryData}
         />
         {flagActions && flagActions.length
           ? <FlagBox

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

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

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

@@ -101,33 +101,19 @@ export default class Moderation extends Component {
   }
 
   render () {
-    const {root, data, moderation, settings, viewUserDetail, hideUserDetail, activeTab, getModPath, premodEnabled, ...props} = this.props;
-    const assetId = this.props.params.id;
+    const {root, data, moderation, settings, viewUserDetail, hideUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
     const {asset} = root;
+    const assetId = asset && asset.id;
 
     const comments = root[activeTab];
 
-    let activeTabCount;
-    switch(activeTab) {
-    case 'all':
-      activeTabCount = root.allCount;
-      break;
-    case 'new':
-      activeTabCount = root.newCount;
-      break;
-    case 'approved':
-      activeTabCount = root.approvedCount;
-      break;
-    case 'premod':
-      activeTabCount = root.premodCount;
-      break;
-    case 'reported':
-      activeTabCount = root.reportedCount;
-      break;
-    case 'rejected':
-      activeTabCount = root.rejectedCount;
-      break;
-    }
+    const activeTabCount = root[`${activeTab}Count`];
+    const menuItems = Object.keys(queueConfig).map((queue) => ({
+      key: queue,
+      name: queueConfig[queue].name,
+      icon: queueConfig[queue].icon,
+      count: root[`${queue}Count`]
+    }));
 
     return (
       <div>
@@ -139,16 +125,10 @@ export default class Moderation extends Component {
         />
         <ModerationMenu
           asset={asset}
-          allCount={root.allCount}
-          newCount={root.newCount}
           getModPath={getModPath}
-          approvedCount={root.approvedCount}
-          premodCount={root.premodCount}
-          rejectedCount={root.rejectedCount}
-          reportedCount={root.reportedCount}
+          items={menuItems}
           selectSort={this.props.setSortOrder}
           sort={this.props.moderation.sortOrder}
-          premodEnabled={premodEnabled}
           activeTab={activeTab}
         />
         <ModerationQueue
@@ -188,9 +168,9 @@ export default class Moderation extends Component {
 
         <Slot
           data={data}
-          root={root}
-          assset={asset}
+          queryData={{root, asset}}
           activeTab={activeTab}
+          handleCommentChange={handleCommentChange}
           fill='adminModeration'
         />
       </div>

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

@@ -9,16 +9,10 @@ import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 
 const ModerationMenu = ({
-  asset = {}, 
-  allCount,
-  approvedCount,
-  premodCount,
-  newCount,
-  rejectedCount,
-  reportedCount,
+  asset = {},
+  items,
   selectSort,
   sort,
-  premodEnabled,
   getModPath,
   activeTab
 }) => {
@@ -27,57 +21,23 @@ const ModerationMenu = ({
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
         <div className={styles.tabBarPadding} />
         <div>
-
-          {
-            premodEnabled ? (
-              <Link
-                to={getModPath('premod', asset.id)}
-                className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === 'premod'})}
-                activeClassName={styles.active}>
-                <Icon name='access_time' className={styles.tabIcon} /> {t('modqueue.premod')} <CommentCount count={premodCount} />
-              </Link>
-            ) : (
-              <Link
-                to={getModPath('new', asset.id)}
-                className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === 'new'})}
-                activeClassName={styles.active}>
-                <Icon name='question_answer' className={styles.tabIcon} /> {t('modqueue.new')} <CommentCount count={newCount} />
-              </Link>
-            )
-          }
-
-          <Link
-            to={getModPath('reported', asset.id)}
-            className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === 'reported'})}
-            activeClassName={styles.active}>
-            <Icon name='flag' className={styles.tabIcon} /> {t('modqueue.reported')} <CommentCount count={reportedCount} />
-          </Link>
-          <Link
-            to={getModPath('approved', asset.id)}
-            className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === 'approved'})}
-            activeClassName={styles.active}>
-            <Icon name='check' className={styles.tabIcon} /> {t('modqueue.approved')} <CommentCount count={approvedCount} />
-          </Link>
-          <Link
-            to={getModPath('rejected', asset.id)}
-            className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === 'rejected'})}
-            activeClassName={styles.active}>
-            <Icon name='close' className={styles.tabIcon} /> {t('modqueue.rejected')} <CommentCount count={rejectedCount} />
-          </Link>
-          <Link
-            to={getModPath('all', asset.id)}
-            className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === 'all'})}
-            activeClassName={styles.active}>
-            <Icon name='question_answer' className={styles.tabIcon} /> {t('modqueue.all')} <CommentCount count={allCount} />
-          </Link>
+          {items.map((queue) =>
+            <Link
+              key={queue.key}
+              to={getModPath(queue.key, asset.id)}
+              className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === queue.key})}
+              activeClassName={styles.active}>
+              <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name} <CommentCount count={queue.count} />
+            </Link>
+          )}
         </div>
         <SelectField
           className={styles.selectField}
           label="Sort"
           value={sort}
           onChange={(sort) => selectSort(sort)}>
-          <Option value={'REVERSE_CHRONOLOGICAL'}>{t('modqueue.newest_first')}</Option>
-          <Option value={'CHRONOLOGICAL'}>{t('modqueue.oldest_first')}</Option>
+          <Option value={'DESC'}>{t('modqueue.newest_first')}</Option>
+          <Option value={'ASC'}>{t('modqueue.oldest_first')}</Option>
         </SelectField>
       </div>
     </div>
@@ -85,10 +45,7 @@ const ModerationMenu = ({
 };
 
 ModerationMenu.propTypes = {
-  allCount: PropTypes.number.isRequired,
-  premodCount: PropTypes.number.isRequired,
-  rejectedCount: PropTypes.number.isRequired,
-  reportedCount: PropTypes.number.isRequired,
+  items: PropTypes.array.isRequired,
   asset: PropTypes.shape({
     id: PropTypes.string
   })

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

@@ -4,7 +4,7 @@ import Comment from '../containers/Comment';
 import styles from './styles.css';
 import EmptyCard from '../../../components/EmptyCard';
 import {actionsMap} from '../../../utils/moderationQueueActionsMap';
-import LoadMore from './LoadMore';
+import LoadMore from '../../../components/LoadMore';
 import t from 'coral-framework/services/i18n';
 import {CSSTransitionGroup} from 'react-transition-group';
 

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

@@ -18,7 +18,7 @@
 
 .tab {
   flex: 1;
-  color: #C0C0C0;
+  color: #BDBDBD;
   text-transform: capitalize;
   font-weight: 100;
   font-size: 14px;
@@ -29,7 +29,7 @@
   margin-right: 20px;
   &:hover {
     color: white;
-    border-bottom: solid 2px #F36451;
+    /*border-bottom: solid 2px #F36451;*/
     box-sizing: border-box;
   }
 }
@@ -111,7 +111,7 @@ span {
       color: white;
       text-transform: capitalize;
       font-weight: 400;
-      font-size: 15px;
+      font-size: 20px;
       letter-spacing: 1px;
       transition: background-color 200ms;
       opacity: 1;
@@ -173,7 +173,7 @@ span {
   border-bottom: 1px solid #e0e0e0;
   font-size: 18px;
   width: 100%;
-  max-width: 700px;
+  max-width: 650px;
   min-width: 400px;
   margin: 0 auto;
   position: relative;
@@ -397,26 +397,6 @@ span {
    }
 }
 
-.loadMoreContainer {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-};
-
-.loadMore {
-  width: 100%;
-  text-align: center;
-  color: #FFF;
-  max-width: 660px;
-  margin-bottom: 30px;
-  background-color: #2376D8;
-  cursor: pointer;
-}
-
-.loadMore:hover {
-  background-color: #4399FF;
-}
-
 .tabIcon {
   position: relative;
   top: 3px;
@@ -490,7 +470,7 @@ span {
 
 .searchTrigger {
   position: relative;
-  top: .3em;
+  top: .2em;
 }
 
 .adminCommentInfoBar {
@@ -499,4 +479,4 @@ span {
   right: 0px;
   top: 0px;
   text-align: right;
-}
+}

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

@@ -37,6 +37,7 @@ export default withFragments({
         count
         ... on FlagActionSummary {
           reason
+          __typename
         }
       }
       actions {
@@ -48,11 +49,14 @@ export default withFragments({
             id
             username
           }
+          __typename
         }
+        __typename
       }
       editing {
         edited
       }
+      hasParent
       ${getSlotFragmentSpreads(slots, 'comment')}
     }
   `

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

@@ -11,7 +11,7 @@ import NotFoundAsset from '../components/NotFoundAsset';
 import {isPremod, getModPath} from '../../../utils';
 
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import {handleCommentChange} from '../../../graphql/utils';
+import {handleCommentChange} from '../graphql';
 
 import {fetchSettings} from 'actions/settings';
 import {showBanUserDialog} from 'actions/banUserDialog';
@@ -26,27 +26,57 @@ import {
   storySearchChange,
   clearState
 } from 'actions/moderation';
+import withQueueConfig from '../hoc/withQueueConfig';
+import {notify} from 'coral-framework/actions/notification';
 
 import {Spinner} from 'coral-ui';
 import Moderation from '../components/Moderation';
 import Comment from './Comment';
+import baseQueueConfig from '../queueConfig';
 
 function prepareNotificationText(text) {
   return truncate(text, {length: 50}).replace('\n', ' ');
 }
 
+function getAssetId(props) {
+  if (props.params.tabOrId && !(props.params.tabOrId in props.queueConfig)) {
+    return props.params.tabOrId;
+  }
+  return props.params.id || null;
+}
+
+function getTab(props) {
+  if (props.params.tabOrId && props.params.tabOrId in props.queueConfig) {
+    return props.params.tabOrId;
+  }
+  return props.params.tab || null;
+}
+
 class ModerationContainer extends Component {
   subscriptions = [];
 
+  handleCommentChange = (root, comment, notifyText) => {
+    return handleCommentChange(
+      root,
+      comment,
+      this.props.data.variables.sortOrder,
+      () => notifyText && this.props.notify('info', notifyText),
+      this.props.queueConfig,
+      this.activeTab
+    );
+  };
+
   get activeTab() {
 
-    const {root: {asset, settings}, router, route} = this.props;
+    const {root: {asset, settings}} = this.props;
+    const id = getAssetId(this.props);
+    const tab = getTab(this.props);
 
     // Grab premod from asset or from settings
-    const premod = !router.params.id ? settings.moderation : asset.settings.moderation;
+    const premod = !id ? settings.moderation : asset.settings.moderation;
 
     const queue = isPremod(premod) ? 'premod' : 'new';
-    const activeTab = route.path && route.path !== ':id' ? route.path : queue;
+    const activeTab = tab ? tab : queue;
 
     return activeTab;
   }
@@ -57,15 +87,10 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentAccepted: comment}}}) => {
         const user = comment.status_history[comment.status_history.length - 1].assigned_by;
-        const sort = this.props.moderation.sortOrder;
-        const notify = this.props.auth.user.id === user.id
-          ? {}
-          : {
-            activeQueue: this.activeTab,
-            text: t('modqueue.notify_accepted', user.username, prepareNotificationText(comment.body)),
-            anyQueue: false,
-          };
-        return handleCommentChange(prev, comment, sort, notify);
+        const notifyText = this.props.auth.user.id === user.id
+          ? ''
+          : t('modqueue.notify_accepted', user.username, prepareNotificationText(comment.body));
+        return this.handleCommentChange(prev, comment, notifyText);
       },
     });
 
@@ -74,15 +99,10 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentRejected: comment}}}) => {
         const user = comment.status_history[comment.status_history.length - 1].assigned_by;
-        const sort = this.props.moderation.sortOrder;
-        const notify = this.props.auth.user.id === user.id
-          ? {}
-          : {
-            activeQueue: this.activeTab,
-            text: t('modqueue.notify_rejected', user.username, prepareNotificationText(comment.body)),
-            anyQueue: false,
-          };
-        return handleCommentChange(prev, comment, sort, notify);
+        const notifyText = this.props.auth.user.id === user.id
+          ? ''
+          : t('modqueue.notify_rejected', user.username, prepareNotificationText(comment.body));
+        return this.handleCommentChange(prev, comment, notifyText);
       },
     });
 
@@ -90,13 +110,8 @@ class ModerationContainer extends Component {
       document: COMMENT_EDITED_SUBSCRIPTION,
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentEdited: comment}}}) => {
-        const sort = this.props.moderation.sortOrder;
-        const notify = {
-          activeQueue: this.activeTab,
-          text: t('modqueue.notify_edited', comment.user.username, prepareNotificationText(comment.body)),
-          anyQueue: false,
-        };
-        return handleCommentChange(prev, comment, sort, notify);
+        const notifyText = t('modqueue.notify_edited', comment.user.username, prepareNotificationText(comment.body));
+        return this.handleCommentChange(prev, comment, notifyText);
       },
     });
 
@@ -105,13 +120,8 @@ class ModerationContainer extends Component {
       variables,
       updateQuery: (prev, {subscriptionData: {data: {commentFlagged: comment}}}) => {
         const user = comment.actions[comment.actions.length - 1].user;
-        const sort = this.props.moderation.sortOrder;
-        const notify = {
-          activeQueue: this.activeTab,
-          text: t('modqueue.notify_flagged', user.username, prepareNotificationText(comment.body)),
-          anyQueue: true,
-        };
-        return handleCommentChange(prev, comment, sort, notify);
+        const notifyText = t('modqueue.notify_flagged', user.username, prepareNotificationText(comment.body));
+        return this.handleCommentChange(prev, comment, notifyText);
       },
     });
 
@@ -158,30 +168,11 @@ class ModerationContainer extends Component {
     const variables = {
       limit: 10,
       cursor: this.props.root[tab].endCursor,
-      sort: this.props.data.variables.sort,
+      sortOrder: this.props.data.variables.sortOrder,
       asset_id: this.props.data.variables.asset_id,
+      statuses: this.props.queueConfig[tab].statuses,
+      action_type: this.props.queueConfig[tab].action_type,
     };
-    switch(tab) {
-    case 'all':
-      variables.statuses = null;
-      break;
-    case 'new':
-      variables.statuses = ['NONE', 'PREMOD'];
-      break;
-    case 'approved':
-      variables.statuses = ['ACCEPTED'];
-      break;
-    case 'premod':
-      variables.statuses = ['PREMOD'];
-      break;
-    case 'reported':
-      variables.statuses = ['NONE', 'PREMOD'];
-      variables.action_type = 'FLAG';
-      break;
-    case 'rejected':
-      variables.statuses = ['REJECTED'];
-      break;
-    }
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
       variables,
@@ -199,7 +190,8 @@ class ModerationContainer extends Component {
   };
 
   render () {
-    const {root, root: {asset, settings}, data, params: {id: assetId}} = this.props;
+    const {root, root: {asset, settings}, data} = this.props;
+    const assetId = getAssetId(this.props);
 
     if (data.error) {
       return <div>Error</div>;
@@ -222,6 +214,14 @@ class ModerationContainer extends Component {
       return <Spinner />;
     }
 
+    const premodEnabled = assetId ? isPremod(asset.settings.moderation) : isPremod(settings.moderation);
+    const currentQueueConfig = Object.assign({}, this.props.queueConfig);
+    if (premodEnabled) {
+      delete currentQueueConfig.new;
+    } else {
+      delete currentQueueConfig.premod;
+    }
+
     return <Moderation
       {...this.props}
       getModPath={getModPath}
@@ -229,7 +229,8 @@ class ModerationContainer extends Component {
       acceptComment={this.acceptComment}
       rejectComment={this.rejectComment}
       activeTab={this.activeTab}
-      premodEnabled={assetId ? isPremod(asset.settings.moderation) : isPremod(settings.moderation)}
+      queueConfig={currentQueueConfig}
+      handleCommentChange={this.handleCommentChange}
     />;
   }
 }
@@ -287,8 +288,8 @@ const COMMENT_REJECTED_SUBSCRIPTION = gql`
 `;
 
 const LOAD_MORE_QUERY = gql`
-  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Date, $sort: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
-    comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sort: $sort, action_type: $action_type}) {
+  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $sortOrder: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
+    comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sortOrder: $sortOrder, action_type: $action_type}) {
       nodes {
         ...${getDefinitionName(Comment.fragments.comment)}
       }
@@ -312,51 +313,27 @@ const commentConnectionFragment = gql`
   ${Comment.fragments.comment}
 `;
 
-const withModQueueQuery = withQuery(gql`
-  query CoralAdmin_Moderation($asset_id: ID, $sort: SORT_ORDER, $allAssets: Boolean!) {
-    all: comments(query: {
-      statuses: [NONE, PREMOD, ACCEPTED, REJECTED],
-      asset_id: $asset_id,
-      sort: $sort
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
-    new: comments(query: {
-      statuses: [NONE, PREMOD],
-      asset_id: $asset_id,
-      sort: $sort
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
-    approved: comments(query: {
-      statuses: [ACCEPTED],
-      asset_id: $asset_id,
-      sort: $sort
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
-    premod: comments(query: {
-        statuses: [PREMOD],
+const withModQueueQuery = withQuery(({queueConfig}) => gql`
+  query CoralAdmin_Moderation($asset_id: ID, $sortOrder: SORT_ORDER, $allAssets: Boolean!) {
+    ${Object.keys(queueConfig).map((queue) => `
+      ${queue}: comments(query: {
+        ${queueConfig[queue].statuses ? `statuses: [${queueConfig[queue].statuses.join(', ')}],` : ''}
+        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
+        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
         asset_id: $asset_id,
-        sort: $sort
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
-    reported: comments(query: {
-        action_type: FLAG,
+        sortOrder: $sortOrder
+      }) {
+        ...CoralAdmin_Moderation_CommentConnection
+      }
+    `)}
+    ${Object.keys(queueConfig).map((queue) => `
+      ${queue}Count: commentCount(query: {
+        ${queueConfig[queue].statuses ? `statuses: [${queueConfig[queue].statuses.join(', ')}],` : ''}
+        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
+        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
         asset_id: $asset_id,
-        statuses: [NONE, PREMOD],
-        sort: $sort
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
-    rejected: comments(query: {
-        statuses: [REJECTED],
-        asset_id: $asset_id,
-        sort: $sort
-    }) {
-      ...CoralAdmin_Moderation_CommentConnection
-    }
+      })
+    `)}
     asset(id: $asset_id) @skip(if: $allAssets) {
       id
       title
@@ -365,30 +342,6 @@ const withModQueueQuery = withQuery(gql`
         moderation
       }
     }
-    allCount: commentCount(query: {
-      asset_id: $asset_id
-    })
-    newCount: commentCount(query: {
-      statuses: [NONE, PREMOD],
-      asset_id: $asset_id
-    })
-    approvedCount: 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
-    })
-    reportedCount: commentCount(query: {
-      action_type: FLAG,
-      asset_id: $asset_id,
-      statuses: [NONE, PREMOD]
-    })
     settings {
       organizationName
       moderation
@@ -396,46 +349,32 @@ const withModQueueQuery = withQuery(gql`
   }
   ${commentConnectionFragment}
 `, {
-  options: ({params: {id = null}, moderation: {sortOrder}}) => {
+  options: (props) => {
+    const id = getAssetId(props);
     return {
       variables: {
         asset_id: id,
-        sort: sortOrder,
+        sortOrder: props.moderation.sortOrder,
         allAssets: id === null
       }
     };
   },
 });
 
-const withQueueCountPolling = withQuery(gql`
+const withQueueCountPolling = withQuery(({queueConfig}) => gql`
   query CoralAdmin_ModerationCountPoll($asset_id: ID) {
-    allCount: commentCount(query: {
-      asset_id: $asset_id
-    })
-    newCount: commentCount(query: {
-      statuses: [NONE, PREMOD],
-      asset_id: $asset_id
-    })
-    approvedCount: 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
-    })
-    reportedCount: commentCount(query: {
-      action_type: FLAG,
-      asset_id: $asset_id,
-      statuses: [NONE, PREMOD]
-    })
+    ${Object.keys(queueConfig).map((queue) => `
+      ${queue}Count: commentCount(query: {
+        ${queueConfig[queue].statuses ? `statuses: [${queueConfig[queue].statuses.join(', ')}],` : ''}
+        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
+        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
+        asset_id: $asset_id,
+      })
+    `)}
   }
 `, {
-  options: ({params: {id = null}}) => {
+  options: (props) => {
+    const id = getAssetId(props);
     return {
       pollInterval: 5000,
       variables: {
@@ -446,9 +385,9 @@ const withQueueCountPolling = withQuery(gql`
 });
 
 const mapStateToProps = (state) => ({
-  moderation: state.moderation.toJS(),
-  settings: state.settings.toJS(),
-  auth: state.auth.toJS(),
+  moderation: state.moderation,
+  settings: state.settings,
+  auth: state.auth,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -463,11 +402,13 @@ const mapDispatchToProps = (dispatch) => ({
     viewUserDetail,
     setSortOrder,
     storySearchChange,
-    clearState
+    clearState,
+    notify,
   }, dispatch),
 });
 
 export default compose(
+  withQueueConfig(baseQueueConfig),
   connect(mapStateToProps, mapDispatchToProps),
   withSetCommentStatus,
   withQueueCountPolling,

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

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

client/coral-admin/src/routes/Moderation/hoc/withQueueConfig.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import hoistStatics from 'recompose/hoistStatics';
+import PropTypes from 'prop-types';
+
+/**
+ * WithQueueConfig takes a `queueConfig` parameter that is
+ * passed down as a prop enriched with queue config data from plugins.
+ */
+export default (queueConfig) => hoistStatics((WrappedComponent) => {
+  class WithQueueConfig extends React.Component {
+    static contextTypes = {
+      plugins: PropTypes.object,
+    };
+
+    pluginsConfig = this.context.plugins.getModQueueConfigs();
+
+    render() {
+      return <WrappedComponent
+        {...this.props}
+        queueConfig={{...queueConfig, ...this.pluginsConfig}}
+      />;
+    }
+  }
+
+  return WithQueueConfig;
+});

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

@@ -0,0 +1,35 @@
+import t from 'coral-framework/services/i18n';
+
+export default {
+  premod: {
+    statuses: ['PREMOD'],
+    icon: 'access_time',
+    name: t('modqueue.premod'),
+  },
+  new: {
+    statuses: ['NONE', 'PREMOD'],
+    icon: 'question_answer',
+    name: t('modqueue.new'),
+  },
+  reported: {
+    action_type: 'FLAG',
+    statuses: ['NONE', 'PREMOD'],
+    icon: 'flag',
+    name: t('modqueue.reported'),
+  },
+  approved: {
+    statuses: ['ACCEPTED'],
+    icon: 'check',
+    name: t('modqueue.approved'),
+  },
+  rejected: {
+    statuses: ['REJECTED'],
+    icon: 'close',
+    name: t('modqueue.rejected'),
+  },
+  all: {
+    statuses: ['NONE', 'PREMOD', 'ACCEPTED', 'REJECTED'],
+    icon: 'question_answer',
+    name: t('modqueue.all'),
+  },
+};

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

@@ -12,7 +12,7 @@ class StoriesContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  assets: state.assets.toJS()
+  assets: state.assets
 });
 
 const mapDispatchToProps = (dispatch) =>

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

@@ -1,26 +1,18 @@
-import t from 'coral-framework/services/i18n';
-import {toast} from 'react-toastify';
-
-export function success(msg) {
-  return toast(msg, {type: 'success'});
-}
-
-export function error(msg) {
-  return toast(msg, {type: 'error'});
-}
-
-export function info(msg) {
-  return toast(msg, {type: 'info'});
-}
-
-export function showMutationErrors(error) {
-  console.error(error);
-  if (error.errors) {
-    error.errors.forEach((err) => {
-      toast(
-        err.translation_key ? t(`error.${err.translation_key}`) : err,
-        {type: 'error'}
-      );
-    });
-  }
+/**
+ * createNotificationService returns a notification services based on toast.
+ * @param  {Object}  toast
+ * @return {Object}  notification service
+ */
+export function createNotificationService(toast) {
+  return {
+    success(msg) {
+      toast(msg, {type: 'success'});
+    },
+    error(msg) {
+      toast(msg, {type: 'error'});
+    },
+    info(msg) {
+      toast(msg, {type: 'info'});
+    },
+  };
 }

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

@@ -1,31 +0,0 @@
-import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
-import thunk from 'redux-thunk';
-import mainReducer from '../reducers';
-import {getClient} from 'coral-framework/services/client';
-
-const middlewares = [
-  applyMiddleware(getClient().middleware()),
-  applyMiddleware(thunk)
-];
-
-if (window.devToolsExtension) {
-
-  // we can't have the last argument of compose() be undefined
-  middlewares.push(window.devToolsExtension());
-}
-
-const coralReducers = {
-  ...mainReducer,
-  apollo: getClient().reducer()
-};
-
-const store = createStore(
-  combineReducers(coralReducers),
-  {},
-  compose(...middlewares)
-);
-
-store.coralReducers = coralReducers;
-
-window.coralStore = store;
-export default store;

client/coral-configure/components/ConfigureCommentStream.css

@@ -12,10 +12,6 @@
   padding: 0;
 }
 
-.wrapper ul ul {
-  padding-left: 20px
-}
-
 .checkbox {
   vertical-align: top;
   margin: 12px 12px 12px 0;
@@ -36,4 +32,4 @@
 
 .hidden {
   display: none;
-}
+}

client/coral-configure/components/ConfigureCommentStream.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import {Button, Checkbox, TextField} from 'coral-ui';
+import {Button, Checkbox} from 'coral-ui';
+import QuestionBoxBuilder from './QuestionBoxBuilder';
 
 import styles from './ConfigureCommentStream.css';
 
@@ -55,17 +56,14 @@ export default ({handleChange, handleApply, changed, ...props}) => (
               title: t('configure.enable_questionbox'),
               description: t('configure.enable_questionbox_description')
             }} />
-          <div className={`${props.questionBoxEnable ? null : styles.hidden}`} >
-            <TextField
-              id="qboxcontent"
-              onChange={handleChange}
-              rows={3}
-              value={props.questionBoxContent}
-              label={t('configure.include_question_here')}
-            />
-          </div>
+            {
+              props.questionBoxEnable && <QuestionBoxBuilder
+                questionBoxIcon={props.questionBoxIcon}
+                questionBoxContent={props.questionBoxContent}
+                handleChange={handleChange}
+              />
+            }
         </li>
-
       </ul>
     </div>
   </form>

client/coral-configure/components/DefaultIcon.css

@@ -0,0 +1,27 @@
+.iconBubble{
+  position: absolute;
+  top: 8px;
+  left: 10px;
+  color: #9E9E9E;
+  font-size: 24px;
+  z-index: 0;
+}
+
+.iconPerson{
+  z-index: 2;
+  top: 12px;
+  left: 12px;
+  position: absolute;
+  font-size: 33px;
+  color: #262626;
+}
+
+.qbIconContainer {
+  position: relative;
+  border: 0;
+  color: white;
+  display: inline-block;
+  padding: 5px 20px;
+  vertical-align: middle;
+  width: 10px;
+}

client/coral-configure/components/DefaultIcon.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './DefaultIcon.css';
+import {Icon} from 'coral-ui';
+
+const DefaultIcon = ({className}) => (
+  <div className={cn(styles.qbIconContainer, className)}>
+    <Icon name="chat_bubble" className={cn(styles.iconBubble)} />
+    <Icon name="person" className={cn(styles.iconPerson)} />
+  </div>
+);
+
+export default DefaultIcon;

client/coral-configure/components/QuestionBoxBuilder.css

@@ -0,0 +1,45 @@
+.qbBuilder {
+  margin-left: 50px;
+}
+
+.qbItemIconList {
+  padding: 0;
+  margin: 10px 0;
+}
+
+.qbItemIcon {
+  background: #F0F0F0;
+  width: 45px;
+  height: 45px;
+  font-size: 24px;
+  text-align: center;
+  line-height: 45px;
+  color: #252525;
+  border-radius: 3px;
+  display: inline-block;
+  overflow: hidden;
+  margin-right: 10px;
+  position: relative;
+  border: solid 2px #F0F0F0;
+  transition: border 0.3s cubic-bezier(.4,0,.2,1);
+}
+
+.qbItemIcon:hover {
+  cursor: pointer;
+}
+
+.qbItemIconActive {
+  border: solid 2px #00796B;
+}
+
+.defaultIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.qb {
+  margin: 10px 0;
+}

client/coral-configure/components/QuestionBoxBuilder.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import QuestionBox from 'talk-plugin-questionbox/QuestionBox';
+import {Icon, Spinner} from 'coral-ui';
+import DefaultIcon from './DefaultIcon';
+import cn from 'classnames';
+import styles from './QuestionBoxBuilder.css';
+
+class QuestionBoxBuilder extends React.Component {
+  constructor() {
+    super();
+    
+    this.state = {
+      loading: true
+    };
+  }
+
+  componentWillMount() {
+    this.loadEditor();
+  }
+  
+  async loadEditor() {
+    const MarkdownEditor = await import('coral-framework/components/MarkdownEditor');
+
+    return this.setState({
+      loading : false,
+      MarkdownEditor
+    });
+  }
+
+  render() {
+    const {handleChange, questionBoxIcon, questionBoxContent} = this.props;
+    const {loading, MarkdownEditor} = this.state;
+
+    if (loading) {
+      return <Spinner/>;
+    }
+
+    return (
+      <div className={styles.qbBuilder}>
+        <h4>Include an Icon</h4>
+
+        <ul className={styles.qbItemIconList}>
+          <li className={cn(
+              styles.qbItemIcon,
+              {[styles.qbItemIconActive]: questionBoxIcon === 'default'}
+            )}
+            id="qboxicon"
+            onClick={handleChange}
+            data-icon="default" >
+            <DefaultIcon className={styles.defaultIcon} />
+          </li>
+          <li className={cn(
+              styles.qbItemIcon,
+              {[styles.qbItemIconActive]: questionBoxIcon === 'forum'}
+            )}
+            id="qboxicon"
+            onClick={handleChange}
+            data-icon="forum" >
+            <Icon name="forum" />
+          </li>
+          <li className={cn(
+              styles.qbItemIcon,
+              {[styles.qbItemIconActive]: questionBoxIcon === 'build'}
+            )}
+            id="qboxicon"
+            onClick={handleChange}
+            data-icon="build" >
+            <Icon name="build" />
+          </li>
+          <li className={cn(
+              styles.qbItemIcon,
+              {[styles.qbItemIconActive]: questionBoxIcon === 'format_quote'}
+            )}
+            id="qboxicon"
+            onClick={handleChange}
+            data-icon="format_quote" >
+            <Icon name="format_quote" />
+          </li>
+        </ul>
+
+        <QuestionBox
+          className={styles.qb} 
+          enable={true}
+          icon={questionBoxIcon}  
+          content={questionBoxContent}
+        />
+
+        <MarkdownEditor 
+          value={questionBoxContent}
+          onChange={(value) => handleChange({}, {questionBoxContent: value})}
+        />
+      
+      </div>
+    );
+  }
+}
+
+export default QuestionBoxBuilder;

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {compose} from 'react-apollo';
 
-import {updateOpenStatus, updateConfiguration} from 'coral-framework/actions/asset';
+import {updateOpenStatus, updateConfiguration} from 'coral-embed-stream/src/actions/asset';
 
 import CloseCommentsInfo from '../components/CloseCommentsInfo';
 import ConfigureCommentStream from '../components/ConfigureCommentStream';
@@ -15,8 +15,8 @@ class ConfigureStreamContainer extends Component {
 
     this.state = {
       changed: false,
-      dirtySettings: props.asset.settings,
-      closedAt: (props.asset.closedAt === null ? 'open' : 'closed')
+      dirtySettings: {...props.asset.settings},
+      closedAt: !props.asset.isClosed ? 'open' : 'closed'
     };
 
     this.toggleStatus = this.toggleStatus.bind(this);
@@ -27,10 +27,9 @@ class ConfigureStreamContainer extends Component {
   handleApply (e) {
     e.preventDefault();
     const {elements} = e.target;
+    const {questionBoxIcon, questionBoxContent} = this.state.dirtySettings;
     const premod = elements.premod.checked;
     const questionBoxEnable = elements.qboxenable.checked;
-    const questionBoxContent = elements.qboxcontent.value;
-
     const premodLinksEnable = elements.plinksenable.checked;
     const {changed} = this.state;
 
@@ -38,6 +37,7 @@ class ConfigureStreamContainer extends Component {
       moderation: premod ? 'PRE' : 'POST',
       questionBoxEnable,
       questionBoxContent,
+      questionBoxIcon,
       premodLinksEnable
     };
 
@@ -48,26 +48,32 @@ class ConfigureStreamContainer extends Component {
           changed: false
         });
       }, 300);
-
-      // this.props.loadAsset(this.props.data.asset);
     }
   }
 
-  handleChange (e) {
+  handleChange (e, newChanges) {
+    let changes = {};
 
-    // TODO: Don’t directly manipulate state and make state change immutable.
-    if (e.target && e.target.id === 'qboxenable') {
-      this.state.dirtySettings.questionBoxEnable = e.target.checked;
+    if (changes) {
+      changes = {...newChanges};
     }
-    if (e.target && e.target.id === 'qboxcontent') {
-      this.state.dirtySettings.questionBoxContent = e.target.value;
+
+    if (e.target && e.target.id === 'qboxenable') {
+      changes.questionBoxEnable = e.target.checked;
+    }
+    if (e.currentTarget && e.currentTarget.id === 'qboxicon') {
+      changes.questionBoxIcon = e.currentTarget.dataset.icon;
     }
     if (e.target && e.target.id === 'plinksenable') {
-      this.state.dirtySettings.premodLinksEnable = e.target.value;
+      changes.premodLinksEnable = e.target.value;
     }
 
     this.setState({
-      changed: true
+      changed: true,
+      dirtySettings: {
+        ...this.state.dirtySettings,
+        ...changes,
+      },
     });
   }
 
@@ -103,6 +109,7 @@ class ConfigureStreamContainer extends Component {
           changed={this.state.changed}
           premodLinksEnable={dirtySettings.premodLinksEnable}
           premod={premod}
+          questionBoxIcon={dirtySettings.questionBoxIcon}
           questionBoxEnable={dirtySettings.questionBoxEnable}
           questionBoxContent={dirtySettings.questionBoxContent}
         />
@@ -119,7 +126,7 @@ class ConfigureStreamContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-  asset: state.asset.toJS()
+  asset: state.asset
 });
 
 const mapDispatchToProps = (dispatch) => ({

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Router, Route} from 'react-router';
-import {history} from 'coral-framework/helpers/router';
+import PropTypes from 'prop-types';
 
 import Embed from './containers/Embed';
 import {LoginContainer} from 'coral-sign-in/containers/LoginContainer';
@@ -12,6 +12,14 @@ const routes = (
   </div>
 );
 
-const AppRouter = () => <Router history={history} routes={routes} />;
+class AppRouter extends React.Component {
+  static contextTypes = {
+    history: PropTypes.object,
+  };
+
+  render() {
+    return <Router history={this.context.history} routes={routes} />;
+  }
+}
 
 export default AppRouter;

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

@@ -1,6 +1,5 @@
 import * as actions from '../constants/asset';
-import coralApi from '../helpers/request';
-import {addNotification} from '../actions/notification';
+import {notify} from 'coral-framework/actions/notification';
 
 import t from 'coral-framework/services/i18n';
 
@@ -12,12 +11,12 @@ const updateAssetSettingsRequest = () => ({type: actions.UPDATE_ASSET_SETTINGS_R
 const updateAssetSettingsSuccess = (settings) => ({type: actions.UPDATE_ASSET_SETTINGS_SUCCESS, settings});
 const updateAssetSettingsFailure = (error) => ({type: actions.UPDATE_ASSET_SETTINGS_FAILURE, error});
 
-export const updateConfiguration = (newConfig) => (dispatch, getState) => {
-  const assetId = getState().asset.toJS().id;
+export const updateConfiguration = (newConfig) => (dispatch, getState, {rest}) => {
+  const assetId = getState().asset.id;
   dispatch(updateAssetSettingsRequest());
-  coralApi(`/assets/${assetId}/settings`, {method: 'PUT', body: newConfig})
+  rest(`/assets/${assetId}/settings`, {method: 'PUT', body: newConfig})
     .then(() => {
-      dispatch(addNotification('success', t('framework.success_update_settings')));
+      dispatch(notify('success', t('framework.success_update_settings')));
       dispatch(updateAssetSettingsSuccess(newConfig));
     })
     .catch((error) => {
@@ -26,12 +25,12 @@ export const updateConfiguration = (newConfig) => (dispatch, getState) => {
     });
 };
 
-export const updateOpenStream = (closedBody) => (dispatch, getState) => {
-  const assetId = getState().asset.toJS().id;
+export const updateOpenStream = (closedBody) => (dispatch, getState, {rest}) => {
+  const assetId = getState().asset.id;
   dispatch(fetchAssetRequest());
-  coralApi(`/assets/${assetId}/status`, {method: 'PUT', body: closedBody})
+  rest(`/assets/${assetId}/status`, {method: 'PUT', body: closedBody})
     .then(() => {
-      dispatch(addNotification('success', t('framework.success_update_settings')));
+      dispatch(notify('success', t('framework.success_update_settings')));
       dispatch(fetchAssetSuccess(closedBody));
     })
     .catch((error) => {

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

@@ -1,11 +1,8 @@
 import jwtDecode from 'jwt-decode';
 import bowser from 'bowser';
 import * as actions from '../constants/auth';
-import * as Storage from '../helpers/storage';
-import coralApi, {base} from '../helpers/request';
-import pym from '../services/pym';
+import {notify} from 'coral-framework/actions/notification';
 
-import {resetWebsocket} from 'coral-framework/services/client';
 import t from 'coral-framework/services/i18n';
 
 export const showSignInDialog = () => ({
@@ -58,9 +55,9 @@ export const updateUsername = ({username}) => ({
   username
 });
 
-export const createUsername = (userId, formData) => (dispatch) => {
+export const createUsername = (userId, formData) => (dispatch, _, {rest}) => {
   dispatch(createUsernameRequest());
-  coralApi('/account/username', {method: 'PUT', body: formData})
+  rest('/account/username', {method: 'PUT', body: formData})
     .then(() => {
       dispatch(createUsernameSuccess());
       dispatch(hideCreateUsernameDialog());
@@ -110,9 +107,11 @@ const signInFailure = (error) => ({
 // AUTH TOKEN
 //==============================================================================
 
-export const handleAuthToken = (token) => (dispatch) => {
-  Storage.setItem('exp', jwtDecode(token).exp);
-  Storage.setItem('token', token);
+export const handleAuthToken = (token) => (dispatch, _, {storage}) => {
+  if (storage) {
+    storage.setItem('exp', jwtDecode(token).exp);
+    storage.setItem('token', token);
+  }
 
   dispatch({type: 'HANDLE_AUTH_TOKEN'});
 };
@@ -122,10 +121,10 @@ export const handleAuthToken = (token) => (dispatch) => {
 //==============================================================================
 
 export const fetchSignIn = (formData) => {
-  return (dispatch) => {
+  return (dispatch, _, {rest}) => {
     dispatch(signInRequest());
 
-    return coralApi('/auth/local', {method: 'POST', body: formData})
+    return rest('/auth/local', {method: 'POST', body: formData})
       .then(({token}) => {
         if (!bowser.safari && !bowser.ios) {
           dispatch(handleAuthToken(token));
@@ -170,10 +169,10 @@ const signInFacebookFailure = (error) => ({
   error
 });
 
-export const fetchSignInFacebook = () => (dispatch) => {
+export const fetchSignInFacebook = () => (dispatch, _, {rest}) => {
   dispatch(signInFacebookRequest());
   window.open(
-    `${base}/auth/facebook`,
+    `${rest.uri}/auth/facebook`,
     'Continue with Facebook',
     'menubar=0,resizable=0,width=500,height=500,top=200,left=500'
   );
@@ -187,10 +186,10 @@ const signUpFacebookRequest = () => ({
   type: actions.FETCH_SIGNUP_FACEBOOK_REQUEST
 });
 
-export const fetchSignUpFacebook = () => (dispatch) => {
+export const fetchSignUpFacebook = () => (dispatch, _, {rest}) => {
   dispatch(signUpFacebookRequest());
   window.open(
-    `${base}/auth/facebook`,
+    `${rest.uri}/auth/facebook`,
     'Continue with Facebook',
     'menubar=0,resizable=0,width=500,height=500,top=200,left=500'
   );
@@ -219,11 +218,11 @@ const signUpRequest = () => ({type: actions.FETCH_SIGNUP_REQUEST});
 const signUpSuccess = (user) => ({type: actions.FETCH_SIGNUP_SUCCESS, user});
 const signUpFailure = (error) => ({type: actions.FETCH_SIGNUP_FAILURE, error});
 
-export const fetchSignUp = (formData) => (dispatch, getState) => {
-  const redirectUri = getState().auth.toJS().redirectUri;
+export const fetchSignUp = (formData) => (dispatch, getState, {rest}) => {
+  const redirectUri = getState().auth.redirectUri;
   dispatch(signUpRequest());
 
-  coralApi('/users', {
+  rest('/users', {
     method: 'POST',
     body: formData,
     headers: {'X-Pym-Url': redirectUri}
@@ -255,10 +254,10 @@ const forgotPasswordFailure = (error) => ({
   error,
 });
 
-export const fetchForgotPassword = (email) => (dispatch, getState) => {
+export const fetchForgotPassword = (email) => (dispatch, getState, {rest}) => {
   dispatch(forgotPasswordRequest(email));
-  const redirectUri = getState().auth.toJS().redirectUri;
-  coralApi('/account/password/reset', {
+  const redirectUri = getState().auth.redirectUri;
+  rest('/account/password/reset', {
     method: 'POST',
     body: {email, loc: redirectUri}
   })
@@ -274,16 +273,18 @@ export const fetchForgotPassword = (email) => (dispatch, getState) => {
 // LOGOUT
 //==============================================================================
 
-export const logout = () => (dispatch) => {
-  return coralApi('/auth', {method: 'DELETE'}).then(() => {
-    Storage.removeItem('token');
+export const logout = () => async (dispatch, _, {rest, client, pym, storage}) => {
+  await rest('/auth', {method: 'DELETE'});
 
-    // Reset the websocket.
-    resetWebsocket();
+  if (storage) {
+    storage.removeItem('token');
+  }
 
-    dispatch({type: actions.LOGOUT});
-    pym.sendMessage('coral-auth-changed');
-  });
+  // Reset the websocket.
+  client.resetWebsocket();
+
+  dispatch({type: actions.LOGOUT});
+  pym.sendMessage('coral-auth-changed');
 };
 
 //==============================================================================
@@ -299,17 +300,19 @@ const checkLoginSuccess = (user, isAdmin) => ({
   isAdmin
 });
 
-export const checkLogin = () => (dispatch) => {
+export const checkLogin = () => (dispatch, _, {rest, client, pym, storage}) => {
   dispatch(checkLoginRequest());
-  coralApi('/auth')
+  rest('/auth')
     .then((result) => {
       if (!result.user) {
-        Storage.removeItem('token');
+        if (storage) {
+          storage.removeItem('token');
+        }
         throw new Error('Not logged in');
       }
 
       // Reset the websocket.
-      resetWebsocket();
+      client.resetWebsocket();
 
       dispatch(checkLoginSuccess(result.user));
       pym.sendMessage('coral-auth-changed', JSON.stringify(result.user));
@@ -321,10 +324,10 @@ export const checkLogin = () => (dispatch) => {
     })
     .catch((error) => {
       console.error(error);
-      if (error.status && error.status === 401) {
+      if (error.status && error.status === 401 && storage) {
 
         // Unauthorized.
-        Storage.removeItem('token');
+        storage.removeItem('token');
       }
       const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
       dispatch(checkLoginFailure(errorMessage));
@@ -350,10 +353,10 @@ const verifyEmailFailure = () => ({
   type: actions.VERIFY_EMAIL_FAILURE
 });
 
-export const requestConfirmEmail = (email) => (dispatch, getState) => {
-  const redirectUri = getState().auth.toJS().redirectUri;
+export const requestConfirmEmail = (email) => (dispatch, getState, {rest}) => {
+  const redirectUri = getState().auth.redirectUri;
   dispatch(verifyEmailRequest());
-  return coralApi('/users/resend-verify', {
+  return rest('/users/resend-verify', {
     method: 'POST',
     body: {email},
     headers: {'X-Pym-Url': redirectUri}
@@ -378,3 +381,23 @@ export const setRedirectUri = (uri) => ({
   type: actions.SET_REDIRECT_URI,
   uri,
 });
+
+//==============================================================================
+// Edit Username
+//==============================================================================
+
+const editUsernameFailure = (error) => ({type: actions.EDIT_USERNAME_FAILURE, error});
+const editUsernameSuccess = () => ({type: actions.EDIT_USERNAME_SUCCESS});
+
+export const editName = (username) => (dispatch, _, {rest}) => {
+  return rest('/account/username', {method: 'PUT', body: {username}})
+    .then(() => {
+      dispatch(editUsernameSuccess());
+      dispatch(notify('success', t('framework.success_name_update')));
+    })
+    .catch((error) => {
+      console.error(error);
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch(editUsernameFailure(errorMessage));
+    });
+};

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

@@ -1,11 +1,12 @@
-import pym from 'coral-framework/services/pym';
 import * as actions from '../constants/stream';
-import {buildUrl} from 'coral-framework/utils';
+import {buildUrl} from 'coral-framework/utils/url';
 import queryString from 'query-string';
 
 export const setActiveReplyBox = (id) => ({type: actions.SET_ACTIVE_REPLY_BOX, id});
 
-export const viewAllComments = () => {
+export const setSort = ({sortOrder, sortBy}) => ({type: actions.SET_SORT, sortOrder, sortBy});
+
+export const viewAllComments = () => (dispatch, _, {pym}) => {
 
   const search = queryString.stringify({
     ...queryString.parse(location.search),
@@ -24,10 +25,10 @@ export const viewAllComments = () => {
     pym.sendMessage('coral-view-all-comments');
   } catch (e) { /* not sure if we're worried about old browsers */ }
 
-  return {type: actions.VIEW_ALL_COMMENTS};
+  dispatch({type: actions.VIEW_ALL_COMMENTS});
 };
 
-export const viewComment = (id) => {
+export const viewComment = (id) => (dispatch, _, {pym}) => {
 
   const search = queryString.stringify({
     ...queryString.parse(location.search),
@@ -46,7 +47,7 @@ export const viewComment = (id) => {
     pym.sendMessage('coral-view-comment', id);
   } catch (e) { /* not sure if we're worried about old browsers */ }
 
-  return {type: actions.VIEW_COMMENT, id};
+  dispatch({type: actions.VIEW_COMMENT, id});
 };
 
 export const addCommentClassName = (className) => ({

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

@@ -5,7 +5,7 @@ import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import NewCount from './NewCount';
 import {TransitionGroup} from 'react-transition-group';
 import {forEachError} from 'coral-framework/utils';
-import Comment from '../components/Comment';
+import Comment from '../containers/Comment';
 
 const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
 
@@ -87,12 +87,13 @@ class AllCommentsPane extends React.Component {
       })
       .catch((error) => {
         this.setState({loadingState: 'error'});
-        forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
+        forEachError(error, ({msg}) => {this.props.notify('error', msg);});
       });
   }
 
   viewNewComments = () => {
     this.setState(resetCursors);
+    this.props.emit('ui.AllCommentsPane.viewNewComments');
   };
 
   // getVisibileComments returns a list containing comments
@@ -128,7 +129,7 @@ class AllCommentsPane extends React.Component {
       ignoreUser,
       setActiveReplyBox,
       activeReplyBox,
-      addNotification,
+      notify,
       disableReply,
       postComment,
       asset,
@@ -142,6 +143,7 @@ class AllCommentsPane extends React.Component {
       charCountEnable,
       maxCharCount,
       editComment,
+      emit,
     } = this.props;
 
     const {loadingState} = this.state;
@@ -164,7 +166,7 @@ class AllCommentsPane extends React.Component {
                   disableReply={disableReply}
                   setActiveReplyBox={setActiveReplyBox}
                   activeReplyBox={activeReplyBox}
-                  addNotification={addNotification}
+                  notify={notify}
                   depth={0}
                   postComment={postComment}
                   asset={asset}
@@ -181,6 +183,7 @@ class AllCommentsPane extends React.Component {
                   charCountEnable={charCountEnable}
                   maxCharCount={maxCharCount}
                   editComment={editComment}
+                  emit={emit}
                 />;
           })}
         </TransitionGroup>

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

@@ -163,6 +163,7 @@
 .header {
   display: flex;
   align-items: center;
+  margin: 10px 0;
 }
 
 .content {
@@ -171,3 +172,7 @@
 .footer {
   min-height: 10px;
 }
+
+.username {
+  margin-right: 5px;
+} 

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import AuthorName from 'talk-plugin-author-name/AuthorName';
 import TagLabel from 'talk-plugin-tag-label/TagLabel';
 import PubDate from 'talk-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'talk-plugin-replies';
@@ -16,14 +15,17 @@ import mapValues from 'lodash/mapValues';
 
 import LoadMore from './LoadMore';
 import {getEditableUntilDate} from './util';
+import {findCommentWithId} from '../graphql/utils';
 import {TopRightMenu} from './TopRightMenu';
 import CommentContent from './CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import InactiveCommentLabel from './InactiveCommentLabel';
 import {EditableCommentContent} from './EditableCommentContent';
-import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive} from 'coral-framework/utils';
+import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive, getShallowChanges} from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
+import CommentContainer from '../containers/Comment';
+import {CommentAuthorName} from 'coral-framework/components';
 
 const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
 const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length;
@@ -72,6 +74,17 @@ const ActionButton = ({children}) => {
   );
 };
 
+// Determine whether the comment with id is in the part of the comments tree.
+function containsCommentId(props, id) {
+  if (props.comment.id === id) {
+    return true;
+  }
+  if (props.comment.replies) {
+    return findCommentWithId(props.comment.replies.nodes, id);
+  }
+  return false;
+}
+
 export default class Comment extends React.Component {
 
   constructor(props) {
@@ -86,7 +99,6 @@ export default class Comment extends React.Component {
       // Whether the comment should be editable (e.g. after a commenter clicking the 'Edit' button on their own comment)
       isEditing: false,
       replyBoxVisible: false,
-      animateEnter: false,
       loadingState: '',
       ...resetCursors({}, props),
     };
@@ -112,20 +124,21 @@ export default class Comment extends React.Component {
     }
   }
 
-  componentWillEnter(callback) {
-    callback();
-    const userId = this.props.currentUser ? this.props.currentUser.id : null;
-    if (this.props.comment.id.indexOf('pending') >= 0) {
-      return;
-    }
-    if (userId && this.props.comment.user.id === userId) {
+  shouldComponentUpdate(nextProps, nextState) {
 
-      // This comment was just added by currentUser.
-      if (Date.now() - Number(new Date(this.props.comment.created_at)) < 30 * 1000) {
-        return;
+    // Specifically handle `activeReplyBox` if it is the only change.
+    const changes = [...getShallowChanges(this.props, nextProps), ...getShallowChanges(this.state, nextState)];
+    if (changes.length === 1 && changes[0] === 'activeReplyBox') {
+      if (
+        !containsCommentId(this.props, this.props.activeReplyBox) &&
+        !containsCommentId(nextProps, nextProps.activeReplyBox)
+      ) {
+        return false;
       }
     }
-    this.setState({animateEnter: true});
+
+    // Prevent Slot from rerendering when no props has shallowly changed.
+    return changes.length !== 0;
   }
 
   static propTypes = {
@@ -139,7 +152,7 @@ export default class Comment extends React.Component {
     deleteAction: PropTypes.func.isRequired,
     parentId: PropTypes.string,
     highlighted: PropTypes.string,
-    addNotification: PropTypes.func.isRequired,
+    notify: PropTypes.func.isRequired,
     postComment: PropTypes.func.isRequired,
     depth: PropTypes.number.isRequired,
     liveUpdates: PropTypes.bool,
@@ -180,6 +193,9 @@ export default class Comment extends React.Component {
 
     // edit a comment, passed (id, asset_id, { body })
     editComment: PropTypes.func,
+
+    // emit custom events
+    emit: PropTypes.func.isRequired,
   }
 
   editComment = (...args) => {
@@ -189,7 +205,7 @@ export default class Comment extends React.Component {
   onClickEdit (e) {
     e.preventDefault();
     if (!can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
-      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
+      this.props.notify('error', t('error.NOT_AUTHORIZED'));
       return;
     }
     this.setState({isEditing: true});
@@ -207,7 +223,7 @@ export default class Comment extends React.Component {
   }
 
   loadNewReplies = () => {
-    const {replies, replyCount, id} = this.props.comment;
+    const {comment: {replies, replyCount, id}, emit} = this.props;
     if (replyCount > replies.nodes.length) {
       this.setState({loadingState: 'loading'});
       this.props.loadMore(id)
@@ -219,11 +235,13 @@ export default class Comment extends React.Component {
         })
         .catch((error) => {
           this.setState({loadingState: 'error'});
-          forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
+          forEachError(error, ({msg}) => {this.props.notify('error', msg);});
         });
+      emit('ui.Comment.showMoreReplies', {id});
       return;
     }
     this.setState(resetCursors);
+    emit('ui.Comment.showMoreReplies', {id});
   };
 
   showReplyBox = () => {
@@ -234,11 +252,15 @@ export default class Comment extends React.Component {
     if (can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
       this.props.setActiveReplyBox(this.props.comment.id);
     } else {
-      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
+      this.props.notify('error', t('error.NOT_AUTHORIZED'));
     }
     return;
   }
 
+  commentPostedHandler = () => {
+    this.props.setActiveReplyBox('');
+  }
+
   // getVisibileReplies returns a list containing comments
   // which were authored by current user or comes before the `idCursor`.
   getVisibileReplies() {
@@ -309,11 +331,13 @@ export default class Comment extends React.Component {
       deleteAction,
       disableReply,
       maxCharCount,
-      addNotification,
+      notify,
       charCountEnable,
       showSignInDialog,
       liveUpdates,
       commentIsIgnored,
+      animateEnter,
+      emit,
       commentClassNames = []
     } = this.props;
 
@@ -366,7 +390,7 @@ export default class Comment extends React.Component {
       styles[`rootLevel${depth}`],
       {
         ...conditionalClassNames,
-        [styles.enter]: this.state.animateEnter,
+        [styles.enter]: animateEnter,
       },
     );
 
@@ -386,10 +410,13 @@ export default class Comment extends React.Component {
     // props that are passed down the slots.
     const slotProps = {
       data,
+      depth,
+    };
+
+    const queryData = {
       root,
       asset,
       comment,
-      depth,
     };
 
     return (
@@ -400,16 +427,24 @@ export default class Comment extends React.Component {
         <div className={commentClassName}>
 
           <Slot
-            className={styles.commentAvatar}
+            className={`${styles.commentAvatar} talk-stream-comment-avatar`}
             fill="commentAvatar"
             {...slotProps}
+            queryData={queryData}
             inline
           />
 
-          <div className={styles.commentContainer}>
+          <div className={cn(styles.commentContainer, 'talk-stream-comment-container')}>
+            <div className={cn(styles.header, 'talk-stream-comment-header')}>
+
+              <Slot
+                className={cn(styles.username, 'talk-stream-comment-user-name')}
+                fill="commentAuthorName"
+                defaultComponent={CommentAuthorName}
+                queryData={queryData}
+                {...slotProps}
+              />
 
-            <div className={styles.header}>
-              <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
               {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
               <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
@@ -425,6 +460,7 @@ export default class Comment extends React.Component {
                 className={styles.commentInfoBar}
                 fill="commentInfoBar"
                 {...slotProps}
+                queryData={queryData}
               />
 
               { isActive && (currentUser && (comment.user.id === currentUser.id)) &&
@@ -446,7 +482,7 @@ export default class Comment extends React.Component {
                     <TopRightMenu
                       comment={comment}
                       ignoreUser={ignoreUser}
-                      addNotification={addNotification} />
+                      notify={notify} />
                   </span>
               }
               { !isActive &&
@@ -458,7 +494,7 @@ export default class Comment extends React.Component {
                 this.state.isEditing
                 ? <EditableCommentContent
                     editComment={this.editComment}
-                    addNotification={addNotification}
+                    notify={notify}
                     comment={comment}
                     currentUser={currentUser}
                     charCountEnable={charCountEnable}
@@ -471,6 +507,7 @@ export default class Comment extends React.Component {
                     fill="commentContent"
                     defaultComponent={CommentContent}
                     {...slotProps}
+                    queryData={queryData}
                   />
                   </div>
               }
@@ -482,6 +519,7 @@ export default class Comment extends React.Component {
                     <Slot
                       fill="commentReactions"
                       {...slotProps}
+                      queryData={queryData}
                       inline
                     />
                     {!disableReply &&
@@ -498,6 +536,7 @@ export default class Comment extends React.Component {
                       fill="commentActions"
                       wrapperComponent={ActionButton}
                       {...slotProps}
+                      queryData={queryData}
                       inline
                     />
                     <ActionButton>
@@ -507,7 +546,7 @@ export default class Comment extends React.Component {
                         id={comment.id}
                         author_id={comment.user.id}
                         postFlag={postFlag}
-                        addNotification={addNotification}
+                        notify={notify}
                         postDontAgree={postDontAgree}
                         deleteAction={deleteAction}
                         showSignInDialog={showSignInDialog}
@@ -523,14 +562,12 @@ export default class Comment extends React.Component {
 
         {activeReplyBox === comment.id
           ? <ReplyBox
-              commentPostedHandler={() => {
-                setActiveReplyBox('');
-              }}
+              commentPostedHandler={this.commentPostedHandler}
               charCountEnable={charCountEnable}
               maxCharCount={maxCharCount}
               setActiveReplyBox={setActiveReplyBox}
               parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
-              addNotification={addNotification}
+              notify={notify}
               postComment={postComment}
               currentUser={currentUser}
               assetId={asset.id}
@@ -541,13 +578,13 @@ export default class Comment extends React.Component {
         {view.map((reply) => {
           return commentIsIgnored(reply)
             ? <IgnoredCommentTombstone key={reply.id} />
-            : <Comment
+            : <CommentContainer
                 data={this.props.data}
                 root={this.props.root}
                 setActiveReplyBox={setActiveReplyBox}
                 disableReply={disableReply}
                 activeReplyBox={activeReplyBox}
-                addNotification={addNotification}
+                notify={notify}
                 parentId={comment.id}
                 postComment={postComment}
                 editComment={this.props.editComment}
@@ -567,6 +604,7 @@ export default class Comment extends React.Component {
                 reactKey={reply.id}
                 key={reply.id}
                 comment={reply}
+                emit={emit}
               />;
         })}
         </TransitionGroup>

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

@@ -17,7 +17,7 @@ export class EditableCommentContent extends React.Component {
   static propTypes = {
 
     // show notification to the user (e.g. for errors)
-    addNotification: PropTypes.func.isRequired,
+    notify: PropTypes.func.isRequired,
 
     // comment that is being edited
     comment: PropTypes.shape({
@@ -74,26 +74,26 @@ export class EditableCommentContent extends React.Component {
 
   handleSubmit = async () => {
     if (!can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
-      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
+      this.props.notify('error', t('error.NOT_AUTHORIZED'));
       return;
     }
 
     this.setState({loadingState: 'loading'});
 
-    const {editComment, addNotification, stopEditing} = this.props;
+    const {editComment, notify, stopEditing} = this.props;
     if (typeof editComment !== 'function') {return;}
     let response;
     try {
       response = await editComment({body: this.state.body});
       this.setState({loadingState: 'success'});
       const status = response.data.editComment.comment.status;
-      notifyForNewCommentStatus(this.props.addNotification, status);
+      notifyForNewCommentStatus(this.props.notify, status);
       if (typeof stopEditing === 'function') {
         stopEditing();
       }
     } catch (error) {
       this.setState({loadingState: 'error'});
-      forEachError(error, ({msg}) => addNotification('error', msg));
+      forEachError(error, ({msg}) => notify('error', msg));
     }
   }
 

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

@@ -28,7 +28,7 @@ export default class Embed extends React.Component {
   };
 
   render() {
-    const {activeTab, commentId, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog} = this.props;
+    const {activeTab, commentId, root, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog} = this.props;
     const {user} = this.props.auth;
     const hasHighlightedComment = !!commentId;
 
@@ -64,14 +64,18 @@ export default class Embed extends React.Component {
             </Tab>
           }
         </TabBar>
-        <Slot fill="embed" />
+        <Slot
+          data={data}
+          queryData={{root}}
+          fill="embed"
+        />
 
         <TabContent
           activeTab={activeTab}
           id='talk-embed-stream-tab-content'
         >
           <TabPane tabId={'stream'}>
-            <Stream data={this.props.data} root={this.props.root} />
+            <Stream data={data} root={root} />
           </TabPane>
           <TabPane tabId={'profile'}>
             <ProfileContainer />

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {StreamError} from './StreamError';
-import Comment from '../components/Comment';
+import Comment from '../containers/Comment';
 import SuspendedAccount from './SuspendedAccount';
 import Slot from 'coral-framework/components/Slot';
 import InfoBox from 'talk-plugin-infobox/InfoBox';
@@ -10,18 +10,21 @@ import {ModerationLink} from 'talk-plugin-moderation';
 import RestrictedMessageBox
   from 'coral-framework/components/RestrictedMessageBox';
 import t, {timeago} from 'coral-framework/services/i18n';
-import {getSlotComponents} from 'coral-framework/helpers/plugins';
 import CommentBox from 'talk-plugin-commentbox/CommentBox';
 import QuestionBox from 'talk-plugin-questionbox/QuestionBox';
 import {isCommentActive} from 'coral-framework/utils';
-import {Button, TabBar, Tab, TabCount, TabContent, TabPane} from 'coral-ui';
+import {Spinner, Button, Tab, TabCount, TabPane} from 'coral-ui';
 import cn from 'classnames';
 
 import {getTopLevelParent, attachCommentToParent} from '../graphql/utils';
 import AllCommentsPane from './AllCommentsPane';
+import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
+import StreamTabPanel from '../containers/StreamTabPanel';
 
 import styles from './Stream.css';
 
+const SpinnerWhenLoading = ({loading, children}) => loading ? <Spinner /> : <div>{children}</div>;
+
 class Stream extends React.Component {
 
   constructor(props) {
@@ -34,78 +37,44 @@ class Stream extends React.Component {
   componentWillReceiveProps(next) {
 
     // Keep comment box when user was live suspended, banned, ...
-    if (!this.userIsDegraged(this.props) && this.userIsDegraged(next)) {
+    if (!this.props.userIsDegraged && next.userIsDegraged) {
       this.setState({keepCommentBox: true});
     }
-
-    this.fallbackAllTab(next);
   }
 
-  componentDidMount() {
-    this.fallbackAllTab();
-  }
-
-  fallbackAllTab(props = this.props) {
-    if (props.activeStreamTab !== 'all') {
-      const slotPlugins = this.getSlotComponents('streamTabs', props).map((c) => c.talkPluginName);
-      if (slotPlugins.indexOf(props.activeStreamTab) === -1) {
-        props.setActiveStreamTab('all');
-      }
-    }
-  }
-
-  getSlotProps({data, root, root: {asset}} = this.props) {
-    return {data, root, asset};
-  }
-
-  getSlotComponents(slot, props = this.props) {
-    return getSlotComponents(slot, props.reduxState, this.getSlotProps(props));
-  }
-
-  setActiveReplyBox = (id) => {
-    if (!this.props.auth.user) {
-      this.props.showSignInDialog();
-    } else {
-      this.props.setActiveReplyBox(id);
-    }
+  commentIsIgnored = (comment) => {
+    const me = this.props.root.me;
+    return (
+      me &&
+      me.ignoredUsers &&
+      me.ignoredUsers.find((u) => u.id === comment.user.id)
+    );
   };
 
-  userIsDegraged({auth: {user}} = this.props) {
-    return !can(user, 'INTERACT_WITH_COMMUNITY');
-  }
-
-  render() {
+  renderHighlightedComment() {
     const {
       data,
       root,
       activeReplyBox,
       setActiveReplyBox,
-      appendItemArray,
       commentClassNames,
-      root: {asset, asset: {comment, comments, totalCommentCount}, me},
+      root: {asset, asset: {comment}},
       postComment,
-      addNotification,
+      notify,
       editComment,
       postFlag,
       postDontAgree,
       deleteAction,
       showSignInDialog,
-      updateItem,
       ignoreUser,
-      activeStreamTab,
-      setActiveStreamTab,
       loadNewReplies,
-      loadMoreComments,
-      viewAllComments,
-      auth: {loggedIn, user},
-      editName
+      auth: {user},
+      emit,
     } = this.props;
-    const {keepCommentBox} = this.state;
-    const open = asset.closedAt === null;
 
     // even though the permalinked comment is the highlighted one, we're displaying its parent + replies
-    let highlightedComment = comment && getTopLevelParent(comment);
-    if (highlightedComment) {
+    let topLevelComment = getTopLevelParent(comment);
+    if (topLevelComment) {
 
       // Inactive comments can be viewed by moderators and admins (e.g. using permalinks).
       const isInactive = !isCommentActive(comment.status);
@@ -113,35 +82,171 @@ class Stream extends React.Component {
 
         // the highlighted comment is not active and as such not in the replies, so we
         // attach it to the right parent.
-        highlightedComment = attachCommentToParent(highlightedComment, comment);
+        topLevelComment = attachCommentToParent(topLevelComment, comment);
       }
     }
 
+    return (
+      <div className={cn('talk-stream-highlighted-container', styles.highlightedContainer)}>
+        <Comment
+          data={data}
+          root={root}
+          commentClassNames={commentClassNames}
+          ignoreUser={ignoreUser}
+          setActiveReplyBox={setActiveReplyBox}
+          activeReplyBox={activeReplyBox}
+          notify={notify}
+          depth={0}
+          disableReply={!open}
+          postComment={postComment}
+          asset={asset}
+          currentUser={user}
+          highlighted={comment.id}
+          postFlag={postFlag}
+          postDontAgree={postDontAgree}
+          loadMore={loadNewReplies}
+          deleteAction={deleteAction}
+          showSignInDialog={showSignInDialog}
+          key={topLevelComment.id}
+          commentIsIgnored={this.commentIsIgnored}
+          comment={topLevelComment}
+          charCountEnable={asset.settings.charCountEnable}
+          maxCharCount={asset.settings.charCount}
+          editComment={editComment}
+          emit={emit}
+          liveUpdates={true}
+        />
+      </div>
+    );
+  }
+
+  renderTabPanel() {
+    const {
+      data,
+      root,
+      activeReplyBox,
+      setActiveReplyBox,
+      commentClassNames,
+      root: {asset, asset: {comments, totalCommentCount}},
+      postComment,
+      notify,
+      editComment,
+      postFlag,
+      postDontAgree,
+      deleteAction,
+      showSignInDialog,
+      ignoreUser,
+      activeStreamTab,
+      setActiveStreamTab,
+      loadNewReplies,
+      loadMoreComments,
+      auth: {user},
+      emit,
+      sortOrder,
+      sortBy,
+    } = this.props;
+
+    const slotProps = {data};
+    const slotQueryData = {root, asset};
+
+    // `key` of `StreamTabPanel` depends on sorting so that we always reset
+    // the state when changing sorting.
+    return (
+      <div className={cn('talk-stream-tab-container', styles.tabContainer)}>
+        <div
+          className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}
+        >
+          <Slot
+            fill="streamFilter"
+            queryData={slotQueryData}
+            {...slotProps}
+          />
+        </div>
+        <StreamTabPanel
+          key={`${sortBy}_${sortOrder}`}
+          activeTab={activeStreamTab}
+          setActiveTab={setActiveStreamTab}
+          fallbackTab={'all'}
+          tabSlot={'streamTabs'}
+          tabPaneSlot={'streamTabPanes'}
+          slotProps={slotProps}
+          queryData={slotQueryData}
+          appendTabs={
+            <Tab tabId={'all'} key='all'>
+              All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
+            </Tab>
+          }
+          appendTabPanes={
+            <TabPane tabId={'all'} key='all'>
+              <AllCommentsPane
+                data={data}
+                root={root}
+                comments={comments}
+                commentClassNames={commentClassNames}
+                ignoreUser={ignoreUser}
+                setActiveReplyBox={setActiveReplyBox}
+                activeReplyBox={activeReplyBox}
+                notify={notify}
+                disableReply={!open}
+                postComment={postComment}
+                asset={asset}
+                currentUser={user}
+                postFlag={postFlag}
+                postDontAgree={postDontAgree}
+                loadMore={loadMoreComments}
+                loadNewReplies={loadNewReplies}
+                deleteAction={deleteAction}
+                showSignInDialog={showSignInDialog}
+                commentIsIgnored={this.commentIsIgnored}
+                charCountEnable={asset.settings.charCountEnable}
+                maxCharCount={asset.settings.charCount}
+                editComment={editComment}
+                emit={emit}
+              />
+            </TabPane>
+          }
+          sub
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      data,
+      root,
+      appendItemArray,
+      root: {asset, asset: {comment: highlightedComment, comments}},
+      postComment,
+      notify,
+      updateItem,
+      viewAllComments,
+      auth: {loggedIn, user},
+      editName,
+      loading,
+    } = this.props;
+    const {keepCommentBox} = this.state;
+    const open = !asset.isClosed;
+
     const banned = user && user.status === 'BANNED';
     const temporarilySuspended =
       user &&
       user.suspension.until &&
       new Date(user.suspension.until) > new Date();
 
-    const commentIsIgnored = (comment) => {
-      return (
-        me &&
-        me.ignoredUsers &&
-        me.ignoredUsers.find((u) => u.id === comment.user.id)
-      );
-    };
-
     const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox);
-    const slotProps = this.getSlotProps();
+    const slotProps = {data};
+    const slotQueryData = {root, asset};
 
-    if (!comment && !comments) {
+    if (!highlightedComment && !comments) {
       console.error('Talk: No comments came back from the graph given that query. Please, check the query params.');
       return <StreamError />;
     }
 
     return (
       <div id="stream" className={styles.root}>
-        {comment &&
+        <AutomaticAssetClosure assetId={asset.id} closedAt={asset.closedAt}/>
+        {highlightedComment &&
           <Button
             cStyle="darkGrey"
             className={cn('talk-stream-show-all-comments-button', styles.viewAllButton)}
@@ -159,6 +264,7 @@ class Stream extends React.Component {
               <QuestionBox
                 content={asset.settings.questionBoxContent}
                 enable={asset.settings.questionBoxEnable}
+                icon={asset.settings.questionBoxIcon}
               />
               {!banned &&
                 temporarilySuspended &&
@@ -177,7 +283,7 @@ class Stream extends React.Component {
                 />}
               {showCommentBox &&
                 <CommentBox
-                  addNotification={addNotification}
+                  notify={notify}
                   postComment={postComment}
                   appendItemArray={appendItemArray}
                   updateItem={updateItem}
@@ -193,6 +299,7 @@ class Stream extends React.Component {
 
         <Slot
           fill="stream"
+          queryData={slotQueryData}
           {...slotProps}
         />
 
@@ -203,105 +310,19 @@ class Stream extends React.Component {
           />
         )}
 
-        {/* the highlightedComment is isolated after the user followed a permalink */}
-        {highlightedComment
-          ? (
-            <div className={cn('talk-stream-highlighted-container', styles.highlightedContainer)}>
-              <Comment
-                data={data}
-                root={root}
-                commentClassNames={commentClassNames}
-                ignoreUser={ignoreUser}
-                setActiveReplyBox={setActiveReplyBox}
-                activeReplyBox={activeReplyBox}
-                addNotification={addNotification}
-                depth={0}
-                disableReply={!open}
-                postComment={postComment}
-                asset={asset}
-                currentUser={user}
-                highlighted={comment.id}
-                postFlag={postFlag}
-                postDontAgree={postDontAgree}
-                loadMore={loadNewReplies}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                key={highlightedComment.id}
-                commentIsIgnored={commentIsIgnored}
-                comment={highlightedComment}
-                charCountEnable={asset.settings.charCountEnable}
-                maxCharCount={asset.settings.charCount}
-                editComment={editComment}
-                liveUpdates={true}
-              />
-            </div>
-            )
-          : <div className={cn('talk-stream-tab-container', styles.tabContainer)}>
-              <div
-                className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}
-              >
-                <Slot
-                  fill="streamFilter"
-                  {...slotProps}
-                />
-              </div>
-              <TabBar activeTab={activeStreamTab} onTabClick={setActiveStreamTab} sub>
-                {this.getSlotComponents('streamTabs').map((PluginComponent) => (
-                  <Tab tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
-                    <PluginComponent
-                      {...slotProps}
-                      active={activeStreamTab === PluginComponent.talkPluginName}
-                    />
-                  </Tab>
-                ))}
-                <Tab tabId={'all'}>
-                  All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
-                </Tab>
-              </TabBar>
-              <TabContent activeTab={activeStreamTab} sub>
-                {this.getSlotComponents('streamTabPanes').map((PluginComponent) => (
-                  <TabPane tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
-                    <PluginComponent
-                      {...slotProps}
-                    />
-                  </TabPane>
-                ))}
-                <TabPane tabId={'all'}>
-                  <AllCommentsPane
-                    data={data}
-                    root={root}
-                    comments={comments}
-                    commentClassNames={commentClassNames}
-                    ignoreUser={ignoreUser}
-                    setActiveReplyBox={setActiveReplyBox}
-                    activeReplyBox={activeReplyBox}
-                    addNotification={addNotification}
-                    disableReply={!open}
-                    postComment={postComment}
-                    asset={asset}
-                    currentUser={user}
-                    postFlag={postFlag}
-                    postDontAgree={postDontAgree}
-                    loadMore={loadMoreComments}
-                    loadNewReplies={loadNewReplies}
-                    deleteAction={deleteAction}
-                    showSignInDialog={showSignInDialog}
-                    commentIsIgnored={commentIsIgnored}
-                    charCountEnable={asset.settings.charCountEnable}
-                    maxCharCount={asset.settings.charCount}
-                    editComment={editComment}
-                  />
-                </TabPane>
-              </TabContent>
-            </div>
+        <SpinnerWhenLoading loading={loading}>
+          {highlightedComment
+            ? this.renderHighlightedComment()
+            : this.renderTabPanel()
           }
+        </SpinnerWhenLoading>
       </div>
     );
   }
 }
 
 Stream.propTypes = {
-  addNotification: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,
 
   // dispatch action to ignore another user

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import {TabBar, TabContent} from 'coral-ui';
+import PropTypes from 'prop-types';
+
+class StreamTabPanel extends React.Component {
+
+  render() {
+    const {activeTab, setActiveTab, tabs, tabPanes, sub} = this.props;
+    return (
+      <div>
+        <TabBar activeTab={activeTab} onTabClick={setActiveTab} sub={sub}>
+          {tabs}
+        </TabBar>
+        <TabContent activeTab={activeTab} sub={sub}>
+          {tabPanes}
+        </TabContent>
+      </div>
+    );
+  }
+}
+
+StreamTabPanel.propTypes = {
+  activeTab: PropTypes.string.isRequired,
+  setActiveTab: PropTypes.func.isRequired,
+  tabs: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  tabPanes: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  className: PropTypes.string,
+  sub: PropTypes.bool,
+};
+
+export default StreamTabPanel;

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 import styles from './Toggleable.css';
-import classnames from 'classnames';
+import cn from 'classnames';
 
-const upArrow = <span className={classnames(styles.chevron, styles.up)}></span>;
-const downArrow = <span className={classnames(styles.chevron, styles.down)}></span>;
+const upArrow = <span className={cn(styles.chevron, styles.up)}></span>;
+const downArrow = <span className={cn(styles.chevron, styles.down)}></span>;
 
 export default class Toggleable extends React.Component {
   constructor(props) {
@@ -19,15 +19,17 @@ export default class Toggleable extends React.Component {
   }
 
   close = () => {
-    this.setState({isOpen: false});
+    if (this.state.isOpen) {
+      this.setState({isOpen: false});
+    }
   }
 
   render() {
-    const {children} = this.props;
+    const {children, className, ...rest} = this.props;
     const {isOpen} = this.state;
     return (
       <ClickOutside onClickOutside={this.close}>
-        <span className={styles.Toggleable}>
+        <span {...rest} className={cn(className, styles.Toggleable)} >
           <button className={styles.toggler} onClick={this.toggle}>{isOpen ? upArrow : downArrow}</button>
           {isOpen ? children : null}
         </span>

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

@@ -18,7 +18,7 @@ export class TopRightMenu extends React.Component {
     ignoreUser: PropTypes.func,
 
     // show notification to the user (e.g. for errors)
-    addNotification: PropTypes.func.isRequired,
+    notify: PropTypes.func.isRequired,
   }
   constructor(props) {
     super(props);
@@ -27,7 +27,7 @@ export class TopRightMenu extends React.Component {
     };
   }
   render() {
-    const {comment, ignoreUser, addNotification} = this.props;
+    const {comment, ignoreUser, notify} = 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});
@@ -40,12 +40,12 @@ export class TopRightMenu extends React.Component {
       try {
         await ignoreUser({id});
       } catch (error) {
-        addNotification('error', 'Failed to ignore user');
+        notify('error', 'Failed to ignore user');
         throw error;
       }
     };
     return (
-      <Toggleable key={this.state.timesReset}>
+      <Toggleable key={this.state.timesReset} className="talk-stream-comment-chevron">
         <div style={{position: 'absolute', right: 0, zIndex: 1}}>
           <IgnoreUserWizard
             user={comment.user}

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

@@ -6,3 +6,4 @@ export const ADD_COMMENT_CLASSNAME = 'ADD_COMMENT_CLASSNAME';
 export const REMOVE_COMMENT_CLASSNAME = 'REMOVE_COMMENT_CLASSNAME';
 export const THREADING_LEVEL = process.env.TALK_THREADING_LEVEL;
 export const SET_ACTIVE_TAB = 'CORAL_STREAM_SET_ACTIVE_TAB';
+export const SET_SORT = 'CORAL_STREAM_SET_SORT';

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {gql} from 'react-apollo';
+
+const FRAGMENT = gql`
+  fragment CoralEmbedStream_AutomaticAssetClosure_Fragment on Asset {
+    id
+    isClosed
+  }
+`;
+
+function getFragmentId(assetId) {
+  return `Asset_${assetId}`;
+}
+
+/**
+ * AutomaticAssetClosure updates the graphql state of the provide asset
+ * to `isClosed=true` when passed `closedAt`.
+ */
+class AutomaticAssetClosure extends React.Component {
+  static contextTypes = {
+    client: PropTypes.object.isRequired,
+  };
+
+  timer = null;
+
+  componentWillMount() {
+    this.setupTimer(this.props.assetId, this.props.closedAt);
+  }
+
+  componentWillReceiveProps(next) {
+    if (
+      this.props.assetId !== next.assetId ||
+      this.props.closedAt !== next.closedAt
+    ) {
+      this.setupTimer(next.assetId, next.closedAt);
+    }
+  }
+
+  closeAsset(assetId) {
+    this.context.client.writeFragment({
+      fragment: FRAGMENT,
+      id: getFragmentId(assetId),
+      data: {
+        isClosed: true,
+      },
+    });
+  }
+
+  setupTimer(assetId, closedAt) {
+    clearTimeout(this.timer);
+    this.timer = null;
+
+    if (assetId && closedAt) {
+      const asset = this.context.client.readFragment({
+        fragment: FRAGMENT,
+        id: getFragmentId(assetId),
+      });
+
+      if (!asset.isClosed && closedAt) {
+        const diff = (new Date(closedAt) - new Date());
+        if (diff >= 0) {
+          this.timer = setTimeout(() => this.closeAsset(assetId), diff);
+        } else {
+          this.closeAsset(assetId);
+        }
+      }
+    }
+  }
+
+  render() {
+    return null;
+  }
+}
+
+AutomaticAssetClosure.PropTypes = {
+  assetId: PropTypes.string,
+  closedAt: PropTypes.string,
+};
+
+export default AutomaticAssetClosure;

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

@@ -1,7 +1,11 @@
-import {gql} from 'react-apollo';
+import {gql, compose} from 'react-apollo';
+import React from 'react';
 import Comment from '../components/Comment';
 import {withFragments} from 'coral-framework/hocs';
 import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {THREADING_LEVEL} from '../constants/stream';
+import hoistStatics from 'recompose/hoistStatics';
+import {nest} from '../graphql/utils';
 
 const slots = [
   'streamQuestionArea',
@@ -11,10 +15,79 @@ const slots = [
   'commentActions',
   'commentContent',
   'commentReactions',
-  'commentAvatar'
+  'commentAvatar',
+  'commentAuthorName'
 ];
 
-export default withFragments({
+/**
+ * withAnimateEnter is a HOC that passes a property `animateEnter` to the
+ * underlying BaseComponent. It must be a direct child of a `TransitionGroup`
+ * from https://github.com/reactjs/react-transition-group and as such must
+ * be the uppermost HOC applied to the BaseComponent.
+ */
+const withAnimateEnter = hoistStatics((BaseComponent) => {
+  class WithAnimateEnter extends React.Component {
+    state = {
+      animateEnter: false,
+    };
+
+    componentWillEnter(callback) {
+      callback();
+      const userId = this.props.currentUser ? this.props.currentUser.id : null;
+      if (this.props.comment.id.indexOf('pending') >= 0) {
+        return;
+      }
+      if (userId && this.props.comment.user.id === userId) {
+
+        // This comment was just added by currentUser.
+        if (Date.now() - Number(new Date(this.props.comment.created_at)) < 30 * 1000) {
+          return;
+        }
+      }
+      this.setState({animateEnter: true});
+    }
+
+    render() {
+      return <BaseComponent
+        {...this.props}
+        animateEnter={this.state.animateEnter}
+      />;
+    }
+  }
+  return WithAnimateEnter;
+});
+
+const singleCommentFragment = gql`
+  fragment CoralEmbedStream_Comment_SingleComment on Comment {
+    id
+    body
+    created_at
+    status
+    replyCount
+    tags {
+      tag {
+        name
+      }
+    }
+    user {
+      id
+      username
+    }
+    action_summaries {
+      __typename
+      count
+      current_user {
+        id
+      }
+    }
+    editing {
+      edited
+      editableUntil
+    }
+  }
+`;
+
+const withCommentFragments = withFragments({
   root: gql`
     fragment CoralEmbedStream_Comment_root on RootQuery {
       __typename
@@ -24,37 +97,33 @@ export default withFragments({
   asset: gql`
     fragment CoralEmbedStream_Comment_asset on Asset {
       __typename
+      id
       ${getSlotFragmentSpreads(slots, 'asset')}
     }
     `,
   comment: gql`
     fragment CoralEmbedStream_Comment_comment on Comment {
-      id
-      body
-      created_at
-      status
-      replyCount
-      tags {
-        tag {
-          name
+      ...CoralEmbedStream_Comment_SingleComment
+      ${nest(`
+        replies(query: {limit: 3, excludeIgnored: $excludeIgnored}) {
+          nodes {
+            ...CoralEmbedStream_Comment_SingleComment
+            ...nest
+          }
+          hasNextPage
+          startCursor
+          endCursor
         }
-      }
-      user {
-        id
-        username
-      }
-      action_summaries {
-        __typename
-        count
-        current_user {
-          id
-        }
-      }
-      editing {
-        edited
-        editableUntil
-      }
+      `, THREADING_LEVEL)}
       ${getSlotFragmentSpreads(slots, 'comment')}
     }
+    ${singleCommentFragment}
   `
-})(Comment);
+});
+
+const enhance = compose(
+  withAnimateEnter,
+  withCommentFragments,
+);
+
+export default enhance(Comment);

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

@@ -8,22 +8,25 @@ import branch from 'recompose/branch';
 import renderComponent from 'recompose/renderComponent';
 
 import {Spinner} from 'coral-ui';
-import * as authActions from 'coral-framework/actions/auth';
-import * as assetActions from 'coral-framework/actions/asset';
-import pym from 'coral-framework/services/pym';
-import {getDefinitionName} from 'coral-framework/utils';
+import * as authActions from '../actions/auth';
+import * as assetActions from '../actions/asset';
+import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {withQuery} from 'coral-framework/hocs';
 import Embed from '../components/Embed';
 import Stream from './Stream';
-import {addNotification} from 'coral-framework/actions/notification';
+import {notify} from 'coral-framework/actions/notification';
 import t from 'coral-framework/services/i18n';
-
+import PropTypes from 'prop-types';
 import {setActiveTab} from '../actions/embed';
 
 const {logout, checkLogin, focusSignInDialog, blurSignInDialog, hideSignInDialog} = authActions;
 const {fetchAssetSuccess} = assetActions;
 
 class EmbedContainer extends React.Component {
+  static contextTypes = {
+    pym: PropTypes.object,
+  };
+
   subscriptions = [];
 
   subscribeToUpdates(props = this.props) {
@@ -31,19 +34,19 @@ class EmbedContainer extends React.Component {
       const newSubscriptions = [{
         document: USER_BANNED_SUBSCRIPTION,
         updateQuery: () => {
-          addNotification('info', t('your_account_has_been_banned'));
+          notify('info', t('your_account_has_been_banned'));
         },
       },
       {
         document: USER_SUSPENDED_SUBSCRIPTION,
         updateQuery: () => {
-          addNotification('info', t('your_account_has_been_suspended'));
+          notify('info', t('your_account_has_been_suspended'));
         },
       },
       {
         document: USERNAME_REJECTED_SUBSCRIPTION,
         updateQuery: () => {
-          addNotification('info', t('your_username_has_been_rejected'));
+          notify('info', t('your_username_has_been_rejected'));
         },
       }];
 
@@ -95,7 +98,7 @@ class EmbedContainer extends React.Component {
     if (!get(prevProps, 'root.asset.comment') && get(this.props, 'root.asset.comment')) {
 
       // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
-      setTimeout(() => pym.scrollParentToChildEl('talk-embed-stream-container'), 0);
+      setTimeout(() => this.context.pym.scrollParentToChildEl('talk-embed-stream-container'), 0);
     }
   }
 
@@ -146,36 +149,53 @@ const USERNAME_REJECTED_SUBSCRIPTION = gql`
   }
 `;
 
+const slots = [
+  'embed',
+];
+
 const EMBED_QUERY = gql`
-  query CoralEmbedStream_Embed($assetId: ID, $assetUrl: String, $commentId: ID!, $hasComment: Boolean!, $excludeIgnored: Boolean) {
+  query CoralEmbedStream_Embed(
+    $assetId: ID,
+    $assetUrl: String,
+    $commentId: ID!,
+    $hasComment: Boolean!,
+    $excludeIgnored: Boolean,
+    $sortBy: SORT_COMMENTS_BY!,
+    $sortOrder: SORT_ORDER!,
+  ) {
     me {
       id
       status
     }
+    ${getSlotFragmentSpreads(slots, 'root')}
     ...${getDefinitionName(Stream.fragments.root)}
   }
   ${Stream.fragments.root}
 `;
 
 export const withEmbedQuery = withQuery(EMBED_QUERY, {
-  options: ({auth, commentId, assetId, assetUrl}) => ({
+  options: ({auth, commentId, assetId, assetUrl, sortBy, sortOrder}) => ({
     variables: {
       assetId,
       assetUrl,
       commentId,
       hasComment: commentId !== '',
       excludeIgnored: Boolean(auth && auth.user && auth.user.id),
+      sortBy,
+      sortOrder,
     },
   }),
 });
 
 const mapStateToProps = (state) => ({
-  auth: state.auth.toJS(),
+  auth: state.auth,
   commentId: state.stream.commentId,
   assetId: state.stream.assetId,
   assetUrl: state.stream.assetUrl,
   activeTab: state.embed.activeTab,
-  config: state.config
+  config: state.config,
+  sortOrder: state.stream.sortOrder,
+  sortBy: state.stream.sortBy,
 });
 
 const mapDispatchToProps = (dispatch) =>
@@ -185,7 +205,7 @@ const mapDispatchToProps = (dispatch) =>
       checkLogin,
       setActiveTab,
       fetchAssetSuccess,
-      addNotification,
+      notify,
       focusSignInDialog,
       blurSignInDialog,
       hideSignInDialog,

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

@@ -8,15 +8,15 @@ import {
   withDeleteAction, withIgnoreUser, withEditComment
 } from 'coral-framework/graphql/mutations';
 
-import * as authActions from 'coral-framework/actions/auth';
+import * as authActions from 'coral-embed-stream/src/actions/auth';
 import * as notificationActions from 'coral-framework/actions/notification';
-import {editName} from 'coral-framework/actions/user';
 import {setActiveReplyBox, setActiveTab, viewAllComments} from '../actions/stream';
 import Stream from '../components/Stream';
 import Comment from './Comment';
-import {withFragments} from 'coral-framework/hocs';
+import {withFragments, withEmit} from 'coral-framework/hocs';
 import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {Spinner} from 'coral-ui';
+import {can} from 'coral-framework/services/perms';
 import {
   findCommentInEmbedQuery,
   insertCommentIntoEmbedQuery,
@@ -24,17 +24,20 @@ import {
   insertFetchedCommentsIntoEmbedQuery,
   nest,
 } from '../graphql/utils';
-import omit from 'lodash/omit';
 
-const {showSignInDialog} = authActions;
-const {addNotification} = notificationActions;
+const {showSignInDialog, editName} = authActions;
+const {notify} = notificationActions;
 
 class StreamContainer extends React.Component {
-  subscriptions = [];
+  commentsAddedSubscription = null;
+  commentsEditedSubscription = null;
 
-  subscribeToUpdates() {
-    const newSubscriptions = [{
+  subscribeToCommentsEdited() {
+    this.commentsEditedSubscription = this.props.data.subscribeToMore({
       document: COMMENTS_EDITED_SUBSCRIPTION,
+      variables: {
+        assetId: this.props.root.asset.id,
+      },
       updateQuery: (prev, {subscriptionData: {data: {commentEdited}}}) => {
 
         // Ignore mutations from me.
@@ -52,9 +55,15 @@ class StreamContainer extends React.Component {
           return removeCommentFromEmbedQuery(prev, commentEdited.id);
         }
       },
-    },
-    {
+    });
+  }
+
+  subscribeToCommentsAdded() {
+    this.commentsAddedSubscription = this.props.data.subscribeToMore({
       document: COMMENTS_ADDED_SUBSCRIPTION,
+      variables: {
+        assetId: this.props.root.asset.id,
+      },
       updateQuery: (prev, {subscriptionData: {data: {commentAdded}}}) => {
 
         // Ignore mutations from me.
@@ -76,21 +85,22 @@ class StreamContainer extends React.Component {
         }
 
         return insertCommentIntoEmbedQuery(prev, commentAdded);
-      }
-    }];
-
-    this.subscriptions = newSubscriptions.map((s) => this.props.data.subscribeToMore({
-      document: s.document,
-      variables: {
-        assetId: this.props.root.asset.id,
       },
-      updateQuery: s.updateQuery,
-    }));
+    });
   }
 
-  unsubscribe() {
-    this.subscriptions.forEach((unsubscribe) => unsubscribe());
-    this.subscriptions = [];
+  unsubscribeCommentsAdded() {
+    if (this.commentsAddedSubscription) {
+      this.commentsAddedSubscription();
+      this.commentsAddedSubscription = null;
+    }
+  }
+
+  unsubscribeCommentsEdited() {
+    if (this.commentsEditedSubscription) {
+      this.commentsEditedSubscription();
+      this.commentsEditedSubscription = null;
+    }
   }
 
   loadNewReplies = (parent_id) => {
@@ -103,7 +113,7 @@ class StreamContainer extends React.Component {
         cursor: comment.replies.endCursor,
         parent_id,
         asset_id: this.props.root.asset.id,
-        sort: 'CHRONOLOGICAL',
+        sortOrder: 'ASC',
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
       updateQuery: (prev, {fetchMoreResult:{comments}}) => {
@@ -120,7 +130,8 @@ class StreamContainer extends React.Component {
         cursor: this.props.root.asset.comments.endCursor,
         parent_id: null,
         asset_id: this.props.root.asset.id,
-        sort: 'REVERSE_CHRONOLOGICAL',
+        sortOrder: this.props.data.variables.sortOrder,
+        sortBy: this.props.data.variables.sortBy,
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
       updateQuery: (prev, {fetchMoreResult:{comments}}) => {
@@ -129,27 +140,78 @@ class StreamContainer extends React.Component {
     });
   };
 
+  isSortedByNewestFirst({sortBy, sortOrder} = this.props) {
+    return sortBy === 'CREATED_AT' && sortOrder === 'DESC';
+  }
+
   componentDidMount() {
     if (this.props.previousTab) {
       this.props.data.refetch();
     }
-    this.subscribeToUpdates();
+
+    if (this.isSortedByNewestFirst()) {
+      this.subscribeToCommentsAdded();
+    }
+
+    this.subscribeToCommentsEdited();
   }
 
   componentWillUnmount() {
-    this.unsubscribe();
+    this.unsubscribeCommentsAdded();
+    this.unsubscribeCommentsEdited();
     clearInterval(this.countPoll);
   }
 
+  componentWillReceiveProps(nextProps) {
+    const prevSortedNewest = this.isSortedByNewestFirst(this.props);
+    const nextSortedNewest = this.isSortedByNewestFirst(nextProps);
+
+    // When switching to 'Newest first' we refetch and subscribe so that
+    // we always have the newest comments.
+    if (!prevSortedNewest && nextSortedNewest) {
+      nextProps.data.refetch();
+      this.subscribeToCommentsAdded();
+    }
+
+    // When switching away from 'Newest first' unsubscribe from newest comments.
+    if (prevSortedNewest && !nextSortedNewest) {
+      this.unsubscribeCommentsAdded();
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const prevSortedNewest = this.isSortedByNewestFirst(this.props);
+    const nextSortedNewest = this.isSortedByNewestFirst(nextProps);
+    if (!prevSortedNewest && nextSortedNewest) {
+
+      // When switching to 'Newest first' we refetch => skip
+      // rendering this frame and wait for refetch to kick in.
+      return false;
+    }
+    return true;
+  }
+
+  userIsDegraged({auth: {user}} = this.props) {
+    return !can(user, 'INTERACT_WITH_COMMUNITY');
+  }
+
   render() {
-    if (this.props.refetching) {
+    if (!this.props.root.asset
+      || !this.props.root.asset.comment
+      && !this.props.root.asset.comments
+    ) {
       return <Spinner />;
     }
+
+    const streamLoading = this.props.refetching || this.props.data.loading;
+
     return <Stream
       {...this.props}
       loadMore={this.loadMore}
       loadMoreComments={this.loadMoreComments}
       loadNewReplies={this.loadNewReplies}
+      userIsDegraged={this.userIsDegraged()}
+      loading={streamLoading}
     />;
   }
 }
@@ -157,19 +219,11 @@ class StreamContainer extends React.Component {
 const commentFragment = gql`
   fragment CoralEmbedStream_Stream_comment on Comment {
     id
+    status
+    user {
+      id
+    }
     ...${getDefinitionName(Comment.fragments.comment)}
-    ${nest(`
-      replies(excludeIgnored: $excludeIgnored) {
-        nodes {
-          id
-          ...${getDefinitionName(Comment.fragments.comment)}
-          ...nest
-        }
-        hasNextPage
-        startCursor
-        endCursor
-      }
-    `, THREADING_LEVEL)}
   }
   ${Comment.fragments.comment}
 `;
@@ -203,35 +257,41 @@ const COMMENTS_EDITED_SUBSCRIPTION = gql`
 `;
 
 const LOAD_MORE_QUERY = gql`
-  query CoralEmbedStream_LoadMoreComments($limit: Int = 5, $cursor: Date, $parent_id: ID, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) {
-    comments(query: {limit: $limit, cursor: $cursor, parent_id: $parent_id, asset_id: $asset_id, sort: $sort, excludeIgnored: $excludeIgnored}) {
+  query CoralEmbedStream_LoadMoreComments(
+    $limit: Int = 5
+    $cursor: Cursor
+    $parent_id: ID
+    $asset_id: ID
+    $sortOrder: SORT_ORDER
+    $sortBy: SORT_COMMENTS_BY = CREATED_AT
+    $excludeIgnored: Boolean
+  ) {
+    comments(
+      query: {
+        limit: $limit
+        cursor: $cursor
+        parent_id: $parent_id
+        asset_id: $asset_id
+        sortOrder: $sortOrder
+        sortBy: $sortBy
+        excludeIgnored: $excludeIgnored
+      }
+    ) {
       nodes {
-        id
-        ...${getDefinitionName(Comment.fragments.comment)}
-        ${nest(`
-          replies(limit: 3, excludeIgnored: $excludeIgnored) {
-            nodes {
-              id
-              ...${getDefinitionName(Comment.fragments.comment)}
-              ...nest
-            }
-            hasNextPage
-            startCursor
-            endCursor
-          }
-        `, THREADING_LEVEL)}
+        ...CoralEmbedStream_Stream_comment
       }
       hasNextPage
       startCursor
       endCursor
     }
   }
-  ${Comment.fragments.comment}
+  ${commentFragment}
 `;
 
 const slots = [
   'streamTabs',
   'streamTabPanes',
+  'streamFilter',
 ];
 
 const fragments = {
@@ -251,6 +311,7 @@ const fragments = {
         title
         url
         closedAt
+        isClosed
         created_at
         settings {
           moderation
@@ -259,15 +320,16 @@ const fragments = {
           premodLinksEnable
           questionBoxEnable
           questionBoxContent
+          questionBoxIcon
           closeTimeout
           closedMessage
           charCountEnable
           charCount
           requireEmailConfirmation
         }
-        commentCount(excludeIgnored: $excludeIgnored) @skip(if: $hasComment)
-        totalCommentCount(excludeIgnored: $excludeIgnored) @skip(if: $hasComment)
-        comments(limit: 10, excludeIgnored: $excludeIgnored) @skip(if: $hasComment) {
+        commentCount @skip(if: $hasComment)
+        totalCommentCount @skip(if: $hasComment)
+        comments(query: {limit: 10, excludeIgnored: $excludeIgnored, sortOrder: $sortOrder, sortBy: $sortBy}) @skip(if: $hasComment) {
           nodes {
             ...CoralEmbedStream_Stream_comment
           }
@@ -297,7 +359,7 @@ const fragments = {
 };
 
 const mapStateToProps = (state) => ({
-  auth: state.auth.toJS(),
+  auth: state.auth,
   refetching: state.embed.refetching,
   commentCountCache: state.stream.commentCountCache,
   activeReplyBox: state.stream.activeReplyBox,
@@ -310,13 +372,14 @@ const mapStateToProps = (state) => ({
   previousStreamTab: state.stream.previousTab,
   commentClassNames: state.stream.commentClassNames,
   pluginConfig: state.config.plugin_config,
-  reduxState: omit(state, 'apollo'),
+  sortOrder: state.stream.sortOrder,
+  sortBy: state.stream.sortBy,
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     showSignInDialog,
-    addNotification,
+    notify,
     setActiveReplyBox,
     editName,
     viewAllComments,
@@ -325,6 +388,7 @@ const mapDispatchToProps = (dispatch) =>
 
 export default compose(
   withFragments(fragments),
+  withEmit,
   connect(mapStateToProps, mapDispatchToProps),
   withPostComment,
   withPostFlag,