Merge pull request #476 from coralproject/metadata

MetadataService

.dockerignore

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

.editorconfig

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

.eslintignore

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

.gitignore

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

.nodemon.json

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

CONTRIBUTING.md

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

Dockerfile

@@ -5,16 +5,21 @@ RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app
 
 # Setup the environment
-ENV NODE_ENV production
 ENV PATH /usr/src/app/bin:$PATH
 ENV TALK_PORT 5000
 EXPOSE 5000
 
-# Install app dependencies
-COPY package.json yarn.lock /usr/src/app/
-RUN yarn install --production
-
 # Bundle app source
 COPY . /usr/src/app
 
+# Install app dependencies and build static assets.
+RUN yarn install --frozen-lockfile && \
+    cli plugins reconcile && \
+    yarn build && \
+    yarn install --production && \
+    yarn cache clean
+
+# Ensure the runtime of the container is in production mode.
+ENV NODE_ENV production
+
 CMD ["yarn", "start"]

Dockerfile.onbuild

@@ -0,0 +1,14 @@
+FROM coralproject/talk:latest
+
+# Bundle app source
+ONBUILD COPY . /usr/src/app
+
+# At this stage, we need to install the development dependancies again because 
+# we need to have webpack available. We then build the new dependancies and
+# clear out the development dependancies again. After this we of course need to
+# clear out the yarn cache, this saves quite a lot of size.
+ONBUILD RUN NODE_ENV=development yarn install --frozen-lockfile && \
+            NODE_ENV=production  cli plugins reconcile && \
+            NODE_ENV=production  yarn build && \
+            NODE_ENV=production  yarn install --production && \
+            yarn cache clean

PLUGINS.md

@@ -3,13 +3,20 @@
 Plugins for Talk can take various forms, currently we are only supporting server
 side plugins.
 
-## Plugin Registration: `plugins.json`
+## Plugin Registration
 
-All plugins must be registered in the root file `plugins.json`.
+The parsing order for the plugin registration is as follows:
 
-The format for this file is thus:
+- `TALK_PLUGINS_JSON` environment variable
+- `plugins.json` file
+- `plugins.default.json` file
 
-```js
+If you need to "disable all plugins", you can simply provide `{}` as the
+contents of `process.env.TALK_PLUGINS_JSON` or the `plugins.json`.
+
+The format for this is thus:
+
+```json
 {
   "server": [
     "people"
@@ -18,10 +25,46 @@ The format for this file is thus:
 ```
 
 Where we have a `server` key with an array of plugins that match the folder
-name in the `plugins/` folder. For example, the above `plugins.json` would
+name in the `plugins/` folder. For example, the above config would
 require a plugin from `plugins/people`, which must provide a `index.js` file
 that returns an object that matches the Plugin Specification.
 
+If the package is external (available on NPM) you can specify the string for
+the version by using an object instead, for example:
+
+```json
+{
+  "server": [
+    {"people": "^1.2.0"}
+  ]
+}
+```
+
+External plugins can be resolved by running:
+
+```bash
+./bin/cli plugins reconcile
+```
+
+This will also traverse into local plugin folders and install their
+dependancies. _Note that if the plugin is already installed and available in the
+node_modules folder, it will not be fetched again unless there is a version
+mismatch._
+
+## Plugin Dependencies
+
+From your plugins you may import any component of server code relative to the
+project root. An example could be:
+
+```js
+const cache = require('services/cache');
+```
+
+You may also include additional external depenancies in your local packages by
+specifying a `package.json` at your plugin root which will result in a
+`node_modules` folder being generated at the plugin root with your specific
+dependencies.
+
 ## Server Plugins
 
 ### Specification
@@ -170,6 +213,88 @@ If your post function accepts four parameters, then it can modify the field
 result. It is *required* that the function resolves a promise (or returns) with
 the modified value or simply the original if you didn't modify it.
 
+#### Field: `router`
+
+```js
+(router) => {
+  router.get('/api/v1/people', (req, res) => {
+    res.json({people: [{name: 'Bob'}]});
+  });
+}
+```
+
+The Router hook allows you to create a function that accepts the base express
+router where you can mount any amount of middleware/routes to do any form of
+action needed by external applications. We also provide the authorization
+middleware via:
+
+```js
+const authorization = require('middleware/authorization');
+
+module.exports = {
+  router(router) {
+    router.get('/api/v1/people', authorization.needed('ADMIN'), (req, res) => {
+      res.json({people: [{name: 'SECRET PEOPLE'}]});
+    });
+  }
+}
+```
+
+#### Field: `passport`
+
+```js
+const FacebookStrategy = require('passport-facebook').Strategy;
+const UsersService = require('services/users');
+const {ValidateUserLogin, HandleAuthPopupCallback} = require('services/passport');
+
+module.exports = {
+  passport(passport) {
+    passport.use(new FacebookStrategy({
+      clientID: process.env.TALK_FACEBOOK_APP_ID,
+      clientSecret: process.env.TALK_FACEBOOK_APP_SECRET,
+      callbackURL: `${process.env.TALK_ROOT_URL}/api/v1/auth/facebook/callback`,
+      passReqToCallback: true,
+      profileFields: ['id', 'displayName', 'picture.type(large)']
+    }, async (req, accessToken, refreshToken, profile, done) => {
+
+      let user;
+      try {
+        user = await UsersService.findOrCreateExternalUser(profile);
+      } catch (err) {
+        return done(err);
+      }
+
+      return ValidateUserLogin(profile, user, done);
+    }));
+  },
+  router(router) {
+
+    // Note that we have to import the passport instance here, it is
+    // instantiated after all the strategies have been mounted.
+    const {passport} = require('services/passport');
+
+    /**
+     * Facebook auth endpoint, this will redirect the user immediatly to facebook
+     * for authorization.
+     */
+    router.get('/facebook', passport.authenticate('facebook', {display: 'popup', authType: 'rerequest', scope: ['public_profile']}));
+
+    /**
+     * Facebook callback endpoint, this will send the user a html page designed to
+     * send back the user credentials upon sucesfull login.
+     */
+    router.get('/facebook/callback', (req, res, next) => {
+
+      // Perform the facebook login flow and pass the data back through the opener.
+      passport.authenticate('facebook', HandleAuthPopupCallback(req, res, next))(req, res, next);
+    });
+  }
+};
+```
+
+This is a full example including the routes hook to add the required components
+to the application router to support a different auth strategy.
+
 ### Full Example
 
 Contents of `plugins.json`:

README.md

@@ -1,6 +1,6 @@
 # Talk [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
 
-A commenting platform from [The Coral Project](https://coralproject.net). Talk enters a closed beta in March 2017, but you can download the code for our alpha here. [Read more about Talk here.](https://coralproject.net/products/talk.html)
+Talk is currently in Beta! [Read more about Talk here.](https://coralproject.net/products/talk.html)
 
 Third party licenses are available via the `/client/3rdpartylicenses.txt`
 endpoint when the server is running with built assets.
@@ -28,12 +28,6 @@ The Talk application looks for the following configuration values either as envi
 secure cookies.
 - `TALK_ROOT_URL` (*required*) - root url of the installed application externally
 available in the format: `<scheme>://<host>` without the path.
-
-- `TALK_FACEBOOK_APP_ID` (*required for login via fb*) - the Facebook app id for your Facebook
-Login enabled app.
-- `TALK_FACEBOOK_APP_SECRET` (*required for login via fb*) - the Facebook app secret for your
-Facebook Login enabled app.
-
 - `TALK_SMTP_EMAIL` (*required for email*) - the address to send emails from using the
   SMTP provider.
 - `TALK_SMTP_USERNAME` (*required for email*) - username of the SMTP provider you are using.
@@ -43,6 +37,7 @@ Facebook Login enabled app.
 - `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - Defaults to `FALSE`. When `TRUE`, disables the dynamic setup endpoint.
 - `TALK_RECAPTCHA_SECRET` (*required for reCAPTCHA support*) - server secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
 - `TALK_RECAPTCHA_PUBLIC` (*required for reCAPTCHA support*) - client secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
+- `TALK_PLUGINS_JSON` (_optional_) - used to specify the plugin config via the environment
 
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.

app.js

@@ -3,7 +3,8 @@ const bodyParser = require('body-parser');
 const morgan = require('morgan');
 const path = require('path');
 const helmet = require('helmet');
-const passport = require('./services/passport');
+const {passport} = require('./services/passport');
+const plugins = require('./services/plugins');
 const session = require('express-session');
 const enabled = require('debug').enabled;
 const RedisStore = require('connect-redis')(session);
@@ -75,6 +76,17 @@ app.use(session(session_opts));
 // PASSPORT MIDDLEWARE
 //==============================================================================
 
+const passportDebug = require('debug')('talk:passport');
+
+// Install the passport plugins.
+plugins.get('server', 'passport').forEach((plugin) => {
+  passportDebug(`added plugin '${plugin.plugin.name}'`);
+
+  // Pass the passport.js instance to the plugin to allow it to inject it's
+  // functionality.
+  plugin.passport(passport);
+});
+
 // Setup the PassportJS Middleware.
 app.use(passport.initialize());
 app.use(passport.session());

bin/cli

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

bin/cli-plugins

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

circle.yml

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

client/.babelrc

@@ -1,6 +1,14 @@
 {
-  "extends": "../.babelrc",
+  "presets": [
+    "es2015"
+  ],
   "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
     "transform-async-to-generator",
+    "transform-react-jsx"
   ]
 }

client/coral-admin/README.md

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

client/coral-admin/src/AppRouter.js

@@ -5,10 +5,13 @@ import Stories from 'containers/Stories/Stories';
 import Configure from 'containers/Configure/Configure';
 import LayoutContainer from 'containers/LayoutContainer';
 import InstallContainer from 'containers/Install/InstallContainer';
+
+import CommunityLayout from 'containers/Community/CommunityLayout';
 import CommunityContainer from 'containers/Community/CommunityContainer';
 
 import ModerationLayout from 'containers/ModerationQueue/ModerationLayout';
 import ModerationContainer from 'containers/ModerationQueue/ModerationContainer';
+
 import Dashboard from 'containers/Dashboard/Dashboard';
 
 const routes = (
@@ -21,6 +24,18 @@ const routes = (
       <Route path='stories' component={Stories} />
       <Route path='dashboard' component={Dashboard} />
 
+      {/* Community Routes */}
+
+      <Route path='community' component={CommunityLayout}>
+        <Route path='flagged' components={CommunityContainer}>
+          <Route path=':id' components={CommunityContainer} />
+        </Route>
+        <Route path='people' components={CommunityContainer}>
+          <Route path=':id' components={CommunityContainer} />
+        </Route>
+        <IndexRedirect to='flagged' />
+      </Route>
+
       {/* Moderation Routes */}
 
       <Route path='moderate' component={ModerationLayout}>

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

@@ -7,28 +7,33 @@ import {
   SORT_UPDATE,
   COMMENTERS_NEW_PAGE,
   SET_ROLE,
-  SET_COMMENTER_STATUS
+  SET_COMMENTER_STATUS,
+  SHOW_BANUSER_DIALOG,
+  HIDE_BANUSER_DIALOG,
+  SHOW_SUSPENDUSER_DIALOG,
+  HIDE_SUSPENDUSER_DIALOG
 } from '../constants/community';
 
 import coralApi from '../../../coral-framework/helpers/response';
 
-export const fetchCommenters = (query = {}) => dispatch => {
-  dispatch(requestFetchCommenters());
+export const fetchAccounts = (query = {}) => dispatch => {
+
+  dispatch(requestFetchAccounts());
   coralApi(`/users?${qs.stringify(query)}`)
-    .then(({result, page, count, limit, totalPages}) =>
+    .then(({result, page, count, limit, totalPages}) =>{
       dispatch({
         type: FETCH_COMMENTERS_SUCCESS,
-        commenters: result,
+        accounts: result,
         page,
         count,
         limit,
         totalPages
-      })
-    )
+      });
+    })
     .catch(error => dispatch({type: FETCH_COMMENTERS_FAILURE, error}));
 };
 
-const requestFetchCommenters = () => ({
+const requestFetchAccounts = () => ({
   type: FETCH_COMMENTERS_REQUEST
 });
 
@@ -55,3 +60,11 @@ export const setCommenterStatus = (id, status) => (dispatch) => {
     return dispatch({type: SET_COMMENTER_STATUS, id, status});
   });
 };
+
+// Ban User Dialog
+export const showBanUserDialog = (user) => ({type: SHOW_BANUSER_DIALOG, user});
+export const hideBanUserDialog = () => ({type: HIDE_BANUSER_DIALOG});
+
+// Suspend User Dialog
+export const showSuspendUserDialog = (user) => ({type: SHOW_SUSPENDUSER_DIALOG, user});
+export const hideSuspendUserDialog = () => ({type: HIDE_SUSPENDUSER_DIALOG});

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

@@ -0,0 +1,622 @@
+$minHeight: 200px;
+$fullscreenZIndex: 10;
+
+.wrapper {
+  /* Fix blockquote styling of MDL: https://github.com/google/material-design-lite/issues/2037 */
+  blockquote {
+    > p:first-child {
+      padding-top: 16px;
+    }
+    > p:last-child {
+      margin-bottom: 0;
+    }
+    &::after {
+      margin-left: -0.5em;
+    }
+  }
+}
+
+.iconBold {
+  composes: material-icons from global;
+  &::before {
+    content: 'format_bold';
+  }
+}
+
+.iconItalic {
+  composes: material-icons from global;
+  &::before {
+    content: 'format_italic';
+  }
+}
+
+.iconTitle {
+  composes: material-icons from global;
+  &::before {
+    content: 'title';
+  }
+}
+
+.iconQuote {
+  composes: material-icons from global;
+  &::before {
+    content: 'format_quote';
+  }
+}
+
+.iconUnorderedList {
+  composes: material-icons from global;
+  &::before {
+    content: 'format_list_bulleted';
+  }
+}
+
+.iconOrderedList {
+  composes: material-icons from global;
+  &::before {
+    content: 'format_list_numbered';
+  }
+}
+
+.iconLink {
+  composes: material-icons from global;
+  &::before {
+    content: 'link';
+  }
+}
+
+.iconImage {
+  composes: material-icons from global;
+  &::before {
+    content: 'insert_photo';
+  }
+}
+
+.iconPreview {
+  composes: material-icons from global;
+  &::before {
+    content: 'remove_red_eye';
+  }
+}
+
+.iconSideBySide {
+  composes: material-icons from global;
+  &::before {
+    content: 'chrome_reader_mode';
+  }
+}
+
+.iconFullscreen {
+  composes: material-icons from global;
+  &::before {
+    content: 'fullscreen';
+  }
+}
+
+.iconGuide {
+  composes: material-icons from global;
+  &::before {
+    content: 'help_outline';
+  }
+}
+
+/*
+ * These are modified styles taken from https://github.com/NextStepWebs/simplemde-markdown-editor and
+ * put through http://sebastianpontow.de/css2compass/.
+ */
+
+/*
+ * simplemde v1.11.2
+ * Copyright Next Step Webs, Inc.
+ * @link https://github.com/NextStepWebs/simplemde-markdown-editor
+ * @license MIT
+ */
+:global {
+  .CodeMirror {
+    font-family: monospace;
+    color: black;
+    position: relative;
+    overflow: hidden;
+    background: white;
+    height: auto;
+    min-height: $minHeight;
+    border: 1px solid #ddd;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    padding: 10px;
+    font: inherit;
+    z-index: 1;
+    pre {
+      padding: 0 4px;
+      border-radius: 0;
+      border-width: 0;
+      background: transparent;
+      font-family: inherit;
+      font-size: inherit;
+      margin: 0;
+      white-space: pre;
+      word-wrap: normal;
+      line-height: inherit;
+      color: inherit;
+      z-index: 2;
+      position: relative;
+      overflow: visible;
+      font-variant-ligatures: none;
+    }
+    span {
+      /*TODO: vertical-align: text-bottom;*/
+    }
+    .CodeMirror-code {
+      .cm-tag {
+        color: #63a35c;
+      }
+      .cm-attribute {
+        color: #795da3;
+      }
+      .cm-string {
+        color: #183691;
+      }
+      .cm-header-1 {
+        font-size: 200%;
+        line-height: 200%;
+      }
+      .cm-header-2 {
+        font-size: 160%;
+        line-height: 160%;
+      }
+      .cm-header-3 {
+        font-size: 125%;
+        line-height: 125%;
+      }
+      .cm-header-4 {
+        font-size: 110%;
+        line-height: 110%;
+      }
+      .cm-comment {
+        background: rgba(0, 0, 0, .05);
+        border-radius: 2px;
+      }
+      .cm-link {
+        color: #7f8c8d;
+      }
+      .cm-url {
+        color: #aab2b3;
+      }
+      .cm-strikethrough {
+        text-decoration: line-through;
+      }
+      .cm-tab {
+        display: inline-block;
+        text-decoration: inherit;
+      }
+      .CodeMirror-ruler {
+        border-left: 1px solid #ccc;
+        position: absolute;
+      }
+      .cm-header {
+        font-weight: bold;
+      }
+      .cm-strong {
+        font-weight: bold;
+      }
+      .cm-em {
+        font-style: italic;
+      }
+      .cm-link {
+        text-decoration: underline;
+      }
+      .cm-strikethrough {
+        text-decoration: line-through;
+      }
+      .cm-invalidchar {
+        color: #f00;
+      }
+    }
+    .CodeMirror-selected {
+      background: #d9d9d9;
+    }
+    .CodeMirror-placeholder {
+      opacity: .5;
+    }
+    div.CodeMirror-secondarycursor {
+      border-left: 1px solid  silver;
+    }
+    .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
+      background: rgba(255, 0, 0, .15);
+    }
+  }
+  .CodeMirror-lines {
+    padding: 4px 0;
+    cursor: text;
+    min-height: 1px;
+  }
+  .CodeMirror-scrollbar-filler {
+    background-color: white;
+    position: absolute;
+    z-index: 6;
+    display: none;
+    right: 0;
+    bottom: 0;
+  }
+  .CodeMirror-gutter-filler {
+    background-color: white;
+    position: absolute;
+    z-index: 6;
+    display: none;
+    left: 0;
+    bottom: 0;
+  }
+  .CodeMirror-gutters {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+    white-space: nowrap;
+    position: absolute;
+    left: 0;
+    top: 0;
+    min-height: 100%;
+    z-index: 3;
+    box-sizing: content-box;
+  }
+  .CodeMirror-guttermarker {
+    color: black;
+  }
+  .CodeMirror-guttermarker-subtle {
+    color: #999;
+  }
+  .CodeMirror-cursors {
+    visibility: hidden;
+    position: relative;
+    z-index: 3;
+  }
+  .CodeMirror-cursor {
+    border-left: 1px solid  black;
+    border-right: none;
+    width: 0;
+    position: absolute;
+  }
+  @keyframes blink {
+    0% {
+    }
+    50% {
+      background-color: transparent;
+    }
+    100% {
+    }
+  }
+  .CodeMirror-scroll {
+    overflow: scroll !important;
+    margin-bottom: -30px;
+    margin-right: -30px;
+    padding-bottom: 30px;
+    height: 100%;
+    outline: none;
+    position: relative;
+    min-height: $minHeight;
+    box-sizing: content-box;
+  }
+  .CodeMirror-sizer {
+    position: relative;
+    border-right: 30px solid transparent;
+    box-sizing: content-box;
+  }
+  .CodeMirror-vscrollbar {
+    position: absolute;
+    z-index: 6;
+    display: none;
+    right: 0;
+    top: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+  .CodeMirror-hscrollbar {
+    position: absolute;
+    z-index: 6;
+    display: none;
+    bottom: 0;
+    left: 0;
+    overflow-y: hidden;
+    overflow-x: scroll;
+  }
+  .CodeMirror-gutter {
+    white-space: normal;
+    height: 100%;
+    display: inline-block;
+    vertical-align: top;
+    margin-bottom: -30px;
+    *zoom: 1;
+    *display: inline;
+    box-sizing: content-box;
+  }
+  .CodeMirror-gutter-wrapper {
+    position: absolute;
+    z-index: 4;
+    background: none !important;
+    border: none !important;
+    user-select: none;
+  }
+  .CodeMirror-gutter-background {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 4;
+  }
+  .CodeMirror-gutter-elt {
+    position: absolute;
+    cursor: default;
+    z-index: 4;
+  }
+  .CodeMirror-code {
+    outline: none;
+  }
+  .CodeMirror-measure {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pre {
+      position: static;
+    }
+  }
+  .CodeMirror-focused {
+    .CodeMirror-selected {
+      background: #d7d4f0;
+    }
+    div.CodeMirror-cursors {
+      visibility: visible;
+    }
+  }
+  .CodeMirror-selected {
+    background: #d9d9d9;
+  }
+  .CodeMirror-line::selection {
+    background: #d7d4f0;
+  }
+  .CodeMirror-line {
+    > span::selection {
+      background: #d7d4f0;
+    }
+    > span {
+      > span::selection {
+        background: #d7d4f0;
+      }
+    }
+  }
+  @media print {
+    .CodeMirror div.CodeMirror-cursors {
+      visibility: hidden;
+    }
+  }
+  .CodeMirror-fullscreen {
+    background: #fff;
+    position: fixed !important;
+    top: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: auto;
+    z-index: $fullscreenZIndex;
+  }
+  .CodeMirror-sided {
+    width: 50% !important;
+  }
+  .editor-toolbar {
+    position: relative;
+    opacity: .6;
+    user-select: none;
+    padding: 0 10px;
+    border-top: 1px solid #bbb;
+    border-left: 1px solid #bbb;
+    border-right: 1px solid #bbb;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    &:after {
+      display: block;
+      content: ' ';
+      height: 1px;
+      margin-top: 8px;
+    }
+    &:before {
+      display: block;
+      content: ' ';
+      height: 1px;
+      margin-bottom: 8px;
+    }
+    &:hover {
+      opacity: .8;
+    }
+    &.fullscreen {
+      width: 100%;
+      height: 50px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      white-space: nowrap;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      box-sizing: border-box;
+      background: #fff;
+      border: 0;
+      position: fixed;
+      top: 0;
+      left: 0;
+      opacity: 1;
+      z-index: $fullscreenZIndex;
+    }
+    &.fullscreen::before {
+      width: 20px;
+      height: 50px;
+      background: linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
+      position: fixed;
+      top: 0;
+      left: 0;
+      margin: 0;
+      padding: 0;
+    }
+    &.fullscreen::after {
+      width: 20px;
+      height: 50px;
+      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);
+      position: fixed;
+      top: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+    }
+    a {
+      display: inline-block;
+      text-align: center;
+      text-decoration: none!important;
+      color: #2c3e50!important;
+      width: 30px;
+      height: 30px;
+      margin: 0;
+      border: 1px solid transparent;
+      border-radius: 3px;
+      cursor: pointer;
+      outline: 0;
+      margin-right: 2px;
+      &.active {
+        background: #fcfcfc;
+        border-color: #95a5a6;
+      }
+      &:hover {
+        background: #fcfcfc;
+        border-color: #95a5a6;
+      }
+      &:active {
+        background: #eee;
+      }
+      &:before {
+        line-height: 30px;
+      }
+    }
+    i.separator {
+      display: inline-block;
+      width: 0;
+      border-left: 1px solid #d9d9d9;
+      border-right: 1px solid #fff;
+      color: transparent;
+      text-indent: -10px;
+      margin: 0 6px;
+    }
+    &.disabled-for-preview a:not(.no-disable) {
+      pointer-events: none;
+      background: #fff;
+      border-color: transparent;
+      text-shadow: inherit;
+    }
+  }
+  @media only screen and(max-width: 700px) {
+    .editor-toolbar a.no-mobile {
+      display: none;
+    }
+  }
+  .editor-statusbar {
+    padding: 8px 10px;
+    font-size: 12px;
+    color: #959694;
+    text-align: right;
+    span {
+      display: inline-block;
+      min-width: 4em;
+      margin-left: 1em;
+    }
+    .lines:before {
+      content: 'lines: ';
+    }
+    .words:before {
+      content: 'words: ';
+    }
+    .characters:before {
+      content: 'characters: ';
+    }
+  }
+  .editor-preview {
+    padding: 10px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #fafafa;
+    z-index: 7;
+    overflow: auto;
+    display: none;
+    box-sizing: border-box;
+    > p {
+      margin-top: 0;
+    }
+    pre {
+      background: #eee;
+      margin-bottom: 10px;
+    }
+    table {
+      td {
+        border: 1px solid #ddd;
+        padding: 5px;
+      }
+      th {
+        border: 1px solid #ddd;
+        padding: 5px;
+      }
+    }
+  }
+  .editor-preview-side {
+    padding: 10px;
+    position: fixed;
+    bottom: 0;
+    width: 50%;
+    top: 50px;
+    right: 0;
+    background: #fafafa;
+    z-index: $fullscreenZIndex;
+    overflow: auto;
+    display: none;
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+    > p {
+      margin-top: 0;
+    }
+    pre {
+      background: #eee;
+      margin-bottom: 10px;
+    }
+    table {
+      td {
+        border: 1px solid #ddd;
+        padding: 5px;
+      }
+      th {
+        border: 1px solid #ddd;
+        padding: 5px;
+      }
+    }
+  }
+  .editor-preview-active-side {
+    display: block;
+  }
+  .editor-preview-active {
+    display: block;
+  }
+  .CodeMirror-overwrite .CodeMirror-cursor {
+  }
+  .CodeMirror-wrap pre {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: normal;
+  }
+  .cm-tab-wrap-hack:after {
+    content: '';
+  }
+  span.CodeMirror-selectedtext {
+    background: none;
+  }
+  .editor-wrapper input.title {
+    &:focus {
+      opacity: .8;
+    }
+    &:hover {
+      opacity: .8;
+    }
+  }
+}

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

@@ -0,0 +1,147 @@
+import React, {Component, PropTypes} from 'react';
+import SimpleMDE from 'simplemde';
+import cn from 'classnames';
+import noop from 'lodash/noop';
+import styles from './MarkdownEditor.css';
+
+const config = {
+  status: false,
+
+  // Do not download fontAwesome icons as we replace them with
+  // material icons.
+  autoDownloadFontAwesome: false,
+
+  // Disable built-in spell checker as it is very rudimentary.
+  spellChecker: false,
+
+  toolbar: [
+    {
+      name: 'bold',
+      action: SimpleMDE.toggleBold,
+      className: styles.iconBold,
+      title: 'Bold',
+    },
+    {
+      name: 'italic',
+      action: SimpleMDE.toggleItalic,
+      className: styles.iconItalic,
+      title: 'Italic',
+    },
+    {
+      name: 'title',
+      action: SimpleMDE.toggleHeadingSmaller,
+      className: styles.iconTitle,
+      title: 'Title, Subtitle, Heading',
+    },
+    '|',
+    {
+      name: 'quote',
+      action: SimpleMDE.toggleBlockquote,
+      className: styles.iconQuote,
+      title: 'Quote',
+    },
+    {
+      name: 'unordered-list',
+      action: SimpleMDE.toggleUnorderedList,
+      className: styles.iconUnorderedList,
+      title: 'Generic List',
+    },
+    {
+      name: 'ordered-list',
+      action: SimpleMDE.toggleOrderedList,
+      className: styles.iconOrderedList,
+      title: 'Numbered List',
+    },
+    '|',
+    {
+      name: 'link',
+      action: SimpleMDE.drawLink,
+      className: styles.iconLink,
+      title: 'Create Link',
+    },
+    {
+      name: 'image',
+      action: SimpleMDE.drawImage,
+      className: styles.iconImage,
+      title: 'Insert Image',
+    },
+    '|',
+    {
+      name: 'preview',
+      action: SimpleMDE.togglePreview,
+      className: cn(styles.iconPreview, 'no-disable'),
+      title: 'Toggle Preview',
+    },
+    {
+      name: 'side-by-side',
+      action: SimpleMDE.toggleSideBySide,
+      className: cn(styles.iconSideBySide, 'no-disable'),
+      title: 'Toggle Side by Side',
+    },
+    {
+      name: 'fullscreen',
+      action: SimpleMDE.toggleFullScreen,
+      className: cn(styles.iconFullscreen, 'no-disable'),
+      title: 'Toggle Fullscreen',
+    },
+    '|',
+    {
+      name: 'guide',
+      action: 'https://simplemde.com/markdown-guide',
+      className: styles.iconGuide,
+      title: 'Markdown Guide',
+    },
+  ],
+};
+
+export default class MarkdownEditor extends Component  {
+
+  textarea = null
+  editor = null
+
+  onRef = (ref) => this.textarea = ref
+
+  componentDidMount() {
+    this.editor = new SimpleMDE({
+      ...config,
+      element: this.textarea,
+    });
+    this.editor.codemirror.on('change', this.onChange);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.value !== nextProps.value && nextProps.value !== this.editor.value()) {
+      this.editor.value(nextProps.value);
+    }
+  }
+
+  componentDidUpdate() {
+
+    // Workaround empty render issue.
+    // https://github.com/NextStepWebs/simplemde-markdown-editor/issues/313
+    this.editor.codemirror.refresh();
+  }
+
+  componentWillUnmount() {
+    this.editor.toTextArea();
+  }
+
+  onChange = () => {
+    if (this.props.onChange) {
+      this.props.onChange(this.editor.value());
+    }
+  }
+
+  render() {
+    return (
+      <div className={styles.wrapper}>
+        <textarea ref={this.onRef} {...this.props} onChange={noop} />
+      </div>
+    );
+  }
+}
+
+MarkdownEditor.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+};

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

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import {Button, Icon} from 'react-mdl';
 import styles from './Modal.css';

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

@@ -1,106 +0,0 @@
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations.json';
-import React, {Component, PropTypes} from 'react';
-import Modal from 'components/Modal';
-import styles from './SuspendUserModal.css';
-import {Button} from 'coral-ui';
-
-const stages = [
-  {
-    title: 'suspenduser.title_0',
-    description: 'suspenduser.description_0',
-    options: {
-      'j': 'suspenduser.no_cancel',
-      'k': 'suspenduser.yes_suspend'
-    }
-  },
-  {
-    title: 'suspenduser.title_1',
-    description: 'suspenduser.description_1',
-    options: {
-      'j': 'bandialog.cancel',
-      'k': 'suspenduser.send'
-    }
-  }
-];
-
-class SuspendUserModal extends Component  {
-
-  state = {email: '', stage: 0}
-
-  static propTypes = {
-    stage: PropTypes.number,
-    actionType: PropTypes.string,
-    onClose: PropTypes.func.isRequired,
-    suspendUser: PropTypes.func.isRequired
-  }
-
-  componentDidMount() {
-    const about = lang.t('suspenduser.username');
-    this.setState({email: lang.t('suspenduser.email', about)});
-  }
-
-  /*
-  * When an admin clicks to suspend a user a dialog is shown, this function
-  * handles the possible actions for that dialog.
-  */
-  onActionClick = (stage, menuOption) => () => {
-    const {suspendUser, action} = this.props;
-    const {stage, email} = this.state;
-    const cancel = this.props.onClose;
-    const next = () => this.setState({stage: stage + 1});
-    const suspend = () => suspendUser(action.item_id, lang.t('suspenduser.email_subject'), email)
-      .then(this.props.onClose);
-    const suspendModalActions = [
-      [ cancel, next ],
-      [ cancel, suspend ]
-    ];
-    return suspendModalActions[stage][menuOption]();
-  }
-
-  onEmailChange = (e) => this.setState({email: e.target.value})
-
-  render () {
-    const {action, onClose} = this.props;
-
-    if (!action) {
-      return null;
-    }
-
-    const {stage} = this.state;
-    const actionType = action.actionType;
-    const about = actionType === 'flag_bio' ? lang.t('suspenduser.bio') : lang.t('suspenduser.username');
-    return <Modal open={true} onClose={onClose}>
-        <div className={styles.title}>{lang.t(stages[stage].title, about)}</div>
-        <div className={styles.container}>
-          <div className={styles.description}>
-            {lang.t(stages[stage].description, about)}
-          </div>
-          {
-            stage === 1 &&
-            <div className={styles.writeContainer}>
-              <div className={styles.emailMessage}>{lang.t('suspenduser.write_message')}</div>
-              <div className={styles.emailContainer}>
-                <textarea
-                  rows={5}
-                  className={styles.emailInput}
-                  value={this.state.email}
-                  onChange={this.onEmailChange}/>
-              </div>
-            </div>
-          }
-          <div className={styles.modalButtons}>
-            {Object.keys(stages[stage].options).map((key, i) => (
-              <Button key={i} onClick={this.onActionClick(stage, i)}>
-                {lang.t(stages[stage].options[key], about)}
-              </Button>
-            ))}
-        </div>
-        </div>
-      </Modal>;
-  }
-}
-
-export default SuspendUserModal;
-
-const lang = new I18n(translations);

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

@@ -1,50 +0,0 @@
-import React from 'react';
-import styles from './ModerationList.css';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations.json';
-
-import {Icon} from 'react-mdl';
-import ActionButton from './ActionButton';
-
-// Render a single comment for the list
-const User = props => {
-  const {action, user} = props;
-  let userStatus = user.status;
-
-  // Do not display unless the user status is 'pending' or 'banned'.
-  // This means that they have already been reviewed and approved.
-  return (userStatus === 'PENDING' ||  userStatus === 'BANNED') &&
-    <li tabIndex={props.index} className={`mdl-card mdl-shadow--2dp ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
-      <div className={styles.itemHeader}>
-        <div className={styles.author}>
-          <span>{user.username}</span>
-          </div>
-        <div className={styles.sideActions}>
-          <div className={`actions ${styles.actions}`}>
-            {props.modActions.map(
-              (action, i) =>
-              <ActionButton
-                type={action.toUpperCase()}
-                key={i}
-                user={user}
-                menuOptionsMap={props.menuOptionsMap}
-                onClickAction={props.onClickAction}
-                onClickShowBanDialog={props.onClickShowBanDialog}/>
-            )}
-          </div>
-        </div>
-        <div>
-          {userStatus === 'banned' ?
-          <span className={styles.banned}><Icon name='error_outline'/> {lang.t('comment.banned_user')}</span> : null}
-        </div>
-      </div>
-      <div className={styles.flagCount}>
-        {`${action.count} ${action.action_type === 'flag_bio' ? lang.t('user.bio_flags') : lang.t('user.username_flags')}`}
-      </div>
-    </li>;
-};
-
-export default User;
-
-const lang = new I18n(translations);

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

@@ -1,6 +1,7 @@
 export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
 export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
-export const USERS_MODERATION_QUEUE_FETCH_SUCCESS = 'USERS_MODERATION_QUEUE_FETCH_SUCCESS';
+export const SHOW_SUSPENDUSER_DIALOG = 'SHOW_SUSPENDUSER_DIALOG';
+export const HIDE_SUSPENDUSER_DIALOG = 'HIDE_SUSPENDUSER_DIALOG';
 export const COMMENTS_MODERATION_QUEUE_FETCH_REQUEST = 'COMMENTS_MODERATION_QUEUE_FETCH_REQUEST';
 export const COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS = 'COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS';
 export const COMMENT_CREATE_SUCCESS = 'COMMENT_CREATE_SUCCESS';

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

@@ -5,3 +5,13 @@ export const SORT_UPDATE = 'SORT_UPDATE';
 export const COMMENTERS_NEW_PAGE = 'COMMENTERS_NEW_PAGE';
 export const SET_ROLE = 'SET_ROLE';
 export const SET_COMMENTER_STATUS = 'SET_COMMENTER_STATUS';
+
+export const FETCH_FLAGGED_COMMENTERS_REQUEST = 'FETCH_FLAGGED_COMMENTERS_REQUEST';
+export const FETCH_FLAGGED_COMMENTERS_SUCCESS = 'FETCH_FLAGGED_COMMENTERS_SUCCESS';
+export const FETCH_FLAGGED_COMMENTERS_FAILURE = 'FETCH_FLAGGED_COMMENTERS_FAILURE';
+
+export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
+export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
+
+export const SHOW_SUSPENDUSER_DIALOG = 'SHOW_SUSPENDUSER_DIALOG';
+export const HIDE_SUSPENDUSER_DIALOG = 'HIDE_SUSPENDUSER_DIALOG';

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

@@ -3,4 +3,3 @@ export const UPDATE_STATUS_SUCCESS = 'UPDATE_STATUS_SUCCESS';
 export const UPDATE_STATUS_FAILURE = 'UPDATE_STATUS_FAILURE';
 export const USER_EMAIL_FAILURE = 'USER_EMAIL_FAILURE';
 export const USERNAME_ENABLE_FAILURE = 'USERNAME_ENABLE_FAILURE';
-export const USERS_MODERATION_QUEUE_FETCH_SUCCESS = 'USERS_MODERATION_QUEUE_FETCH_SUCCESS';

client/coral-admin/src/containers/Community/Community.css

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

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

@@ -1,27 +1,47 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
+import {compose} from 'react-apollo';
+
+import {modUserFlaggedQuery} from 'coral-admin/src/graphql/queries';
+import {banUser, setUserStatus, suspendUser} from 'coral-admin/src/graphql/mutations';
+
 import {
-  fetchCommenters,
+  fetchAccounts,
   updateSorting,
   newPage,
+  showBanUserDialog,
+  hideBanUserDialog,
+  showSuspendUserDialog,
+  hideSuspendUserDialog
 } from '../../actions/community';
 
-import Community from './Community';
+import CommunityMenu from './components/CommunityMenu';
+import BanUserDialog from './components/BanUserDialog';
+import SuspendUserDialog from './components/SuspendUserDialog';
+
+import People from './People';
+import FlaggedAccounts from './FlaggedAccounts';
 
 class CommunityContainer extends Component {
+
   constructor(props) {
     super(props);
 
     this.state = {
-      searchValue: ''
+      searchValue: '',
+      timer: null
     };
 
     this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
-    this.onChangeHandler = this.onChangeHandler.bind(this);
+    this.onSearchChange = this.onSearchChange.bind(this);
     this.onHeaderClickHandler = this.onHeaderClickHandler.bind(this);
     this.onNewPageHandler = this.onNewPageHandler.bind(this);
   }
 
+  componentWillMount() {
+    this.props.fetchAccounts({});
+  }
+
   onKeyDownHandler(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -29,25 +49,29 @@ class CommunityContainer extends Component {
     }
   }
 
-  onChangeHandler(e) {
-    this.setState({
-      searchValue: e.target.value
+  onSearchChange(e) {
+    const value = e.target.value;
+    this.setState((prevState) => {
+      prevState.searchValue = value;
+      clearTimeout(prevState.timer);
+      const fetchAccounts = this.props.fetchAccounts;
+      prevState.timer = setTimeout(() => {
+        fetchAccounts({value});
+      }, 350);
+      return prevState;
     });
   }
 
   search(query = {}) {
     const {community} = this.props;
 
-    this.props.dispatch(fetchCommenters({
+    this.props.fetchAccounts({
       value: this.state.searchValue,
-      field: community.field,
-      asc: community.asc,
+      field: community.fieldPeople,
+      asc: community.ascPeople,
       ...query
-    }));
-  }
+    });
 
-  componentDidMount() {
-    this.search();
   }
 
   onHeaderClickHandler(sort) {
@@ -60,19 +84,66 @@ class CommunityContainer extends Component {
     this.search({page});
   }
 
+  getTabContent(searchValue, props) {
+    const {community, data} = props;
+    const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
+
+    if (activeTab === 'people') {
+      return (
+        <People
+          isFetching={community.isFetchingPeople}
+          commenters={community.accounts}
+          searchValue={searchValue}
+          onSearchChange={this.onSearchChange}
+          error={community.errorPeople}
+          totalPages={community.totalPagesPeople}
+          page={community.pagePeople}
+          onKeyDown={this.onKeyDownHandler}
+          onHeaderClickHandler={this.onHeaderClickHandler}
+          onNewPageHandler={this.onNewPageHandler}
+        />
+      );
+    }
+
+    return (
+      <div>
+        <FlaggedAccounts
+          commenters={data.users}
+          isFetching={data.loading}
+          error={data.error}
+          showBanUserDialog={props.showBanUserDialog}
+          approveUser={props.approveUser}
+          suspendUser={props.suspendUser}
+          showSuspendUserDialog={props.showSuspendUserDialog}
+        />
+        <BanUserDialog
+          open={community.banDialog}
+          user={community.user}
+          handleClose={props.hideBanUserDialog}
+          handleBanUser={props.banUser}
+        />
+        <SuspendUserDialog
+          open={community.suspendDialog}
+          handleClose={props.hideSuspendUserDialog}
+          user={community.user}
+          suspendUser={props.suspendUser}
+        />
+      </div>
+    );
+  }
+
   render() {
     const {searchValue} = this.state;
-    const {community} = this.props;
+
+    const tab = this.getTabContent(searchValue, this.props);
+
     return (
-      <Community
-        searchValue={searchValue}
-        commenters={community.commenters}
-        isFetching={community.isFetching}
-        error={community.error}
-        totalPages={community.totalPages}
-        page={community.page}
-        {...this}
-      />
+      <div>
+        <CommunityMenu />
+        <div>
+          { tab }
+        </div>
+      </div>
     );
   }
 }
@@ -81,4 +152,18 @@ const mapStateToProps = state => ({
   community: state.community.toJS()
 });
 
-export default connect(mapStateToProps)(CommunityContainer);
+const mapDispatchToProps = dispatch => ({
+  fetchAccounts: query => dispatch(fetchAccounts(query)),
+  showBanUserDialog: (user) => dispatch(showBanUserDialog(user)),
+  hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
+  showSuspendUserDialog: (user) => dispatch(showSuspendUserDialog(user)),
+  hideSuspendUserDialog: () => dispatch(hideSuspendUserDialog())
+});
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  modUserFlaggedQuery,
+  banUser,
+  setUserStatus,
+  suspendUser
+)(CommunityContainer);

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

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CommunityLayout = props => (
+  <div>
+    {props.children}
+  </div>
+);
+
+export default CommunityLayout;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations.json';
+const lang = new I18n(translations);
+
+import styles from './Community.css';
+
+import Loading from './Loading';
+import EmptyCard from 'coral-admin/src/components/EmptyCard';
+import User from './components/User';
+
+const FlaggedAccounts = ({...props}) => {
+  const {commenters, isFetching} = props;
+  const hasResults = !isFetching && commenters && !!commenters.length;
+
+// if (commenter.status === 'PENDING' && commenter.actions.length > 0) {
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.mainFlaggedContent}>
+        { isFetching && <Loading /> }
+        {
+          hasResults
+          ? commenters.map((commenter, index) => {
+            return <User
+              user={commenter}
+              key={index}
+              index={index}
+              modActionButtons={['APPROVE', 'REJECT']}
+              showBanUserDialog={props.showBanUserDialog}
+              showSuspendUserDialog={props.showSuspendUserDialog}
+              approveUser={props.approveUser}
+              suspendUser={props.suspendUser}
+              />;
+          })
+          : <EmptyCard>{lang.t('community.no-flagged-accounts')}</EmptyCard>
+        }
+      </div>
+    </div>
+  );
+};
+
+export default FlaggedAccounts;

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

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

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

@@ -77,4 +77,4 @@ class Table extends Component {
   }
 }
 
-export default connect(state => ({commenters: state.community.get('commenters')}))(Table);
+export default connect(state => ({commenters: state.community.get('accounts')}))(Table);

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from '../Community.css';
+import BanUserButton from '../../../components/BanUserButton';
+import {Button} from 'coral-ui';
+import {menuActionsMap} from '../../../containers/ModerationQueue/helpers/moderationQueueActionsMap';
+
+const ActionButton = ({type = '', user, ...props}) => {
+  if (type === 'BAN') {
+    return <BanUserButton icon='not interested' user={user} onClick={() => props.showBanUserDialog(user)} />;
+  }
+
+  return (
+    <Button
+      className={`${type.toLowerCase()} ${styles.actionButton}`}
+      cStyle={type.toLowerCase()}
+      icon={menuActionsMap[type].icon}
+      onClick={() => {
+        type === 'APPROVE' ? props.approveUser({userId: user.id}) : props.showSuspendUserDialog({user: user});
+      }}
+    >{menuActionsMap[type].text}</Button>
+  );
+};
+
+export default ActionButton;

client/coral-admin/src/containers/Community/components/BanUserDialog.css

@@ -0,0 +1,164 @@
+.dialog {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 500px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 184px;
+  padding: 20px;
+
+  h2 {
+    color: black;
+    font-size: 1.76em;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  h3 {
+    color: black;
+    font-size: 1.4em;
+    font-weight: 500;
+    margin: 0;
+  }
+}
+
+.textField {
+    margin-top: 15px;
+}
+
+.textField label {
+    font-size: 1.08em;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.textField input {
+    width: 100%;
+    display: block;
+    border: none;
+    outline: none;
+    border: 1px solid rgba(0,0,0,.12);
+    padding: 10px 6px;
+    box-sizing: border-box;
+    border-radius: 2px;
+    margin: 5px auto;
+}
+
+.footer {
+    margin: 20px auto 10px;
+    text-align: center;
+}
+
+.footer span {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.footer a {
+    color: #2c69b6;
+    cursor: pointer;
+    margin: 0 5px;
+}
+
+.socialConnections {
+    margin-bottom: 20px;
+}
+
+.signInButton {
+    margin-top: 10px;
+}
+
+.close {
+    font-size: 20px;
+    line-height: 14px;
+    top: 10px;
+    right: 10px;
+    position: absolute;
+    display: block;
+    font-weight: bold;
+    color: #363636;
+    cursor: pointer;
+}
+
+.close:hover {
+    color: #6b6b6b;
+}
+
+input.error{
+    border: solid 2px #f44336;
+}
+
+.errorMsg, .hint {
+    color: grey;
+    font-weight: 600;
+    padding: 3px 0 16px;
+}
+
+.alert {
+    padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 2px;
+}
+
+.alert--success {
+    border: solid 1px #1ec00e;
+    background: #cbf1b8;
+    color: #006900;
+}
+
+.alert--error {
+    background: #FFEBEE;
+    color: #B71C1C;
+}
+
+.userBox a {
+    color: #2c69b6;
+    cursor: pointer;
+    margin: 0px;
+}
+
+.attention {
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    background: #B71C1C;
+    color: #FFEBEE;
+    font-weight: bolder;
+    padding: 4px;
+    vertical-align: middle;
+    border-radius: 20px;
+    box-sizing: border-box;
+    font-size: 9px;
+    line-height: 7px;
+    text-align: center;
+    margin-right: 5px;
+}
+
+.action {
+    margin-top: 15px;
+}
+
+.passwordRequestSuccess {
+    border: 1px solid green;
+    background-color: lightgreen;
+    padding: 10px;
+}
+
+.passwordRequestFailure {
+    border: 1px solid orange;
+    background-color: 1px solid coral;
+    padding: 10px;
+}
+
+.cancel {
+  margin-right: 10px;
+  width: 47%;
+}
+
+.ban {
+  width: 47%;
+}
+
+.buttons {
+  margin: 20px 0;
+}

client/coral-admin/src/containers/Community/components/BanUserDialog.js

@@ -0,0 +1,54 @@
+import React, {PropTypes} from 'react';
+import {Dialog} from 'coral-ui';
+import styles from './BanUserDialog.css';
+
+import Button from 'coral-ui/components/Button';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations.json';
+
+const lang = new I18n(translations);
+
+const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
+  <Dialog
+    className={styles.dialog}
+    id="banuserDialog"
+    open={open}
+    onClose={handleClose}
+    onCancel={handleClose}
+    title={lang.t('community.ban_user')}>
+    <span className={styles.close} onClick={handleClose}>×</span>
+    <div>
+      <div className={styles.header}>
+        <h2>{lang.t('community.ban_user')}</h2>
+      </div>
+      <div className={styles.separator}>
+        <h3>{lang.t('community.are_you_sure', user.username)}</h3>
+        <i>{lang.t('community.note')}</i>
+      </div>
+      <div className={styles.buttons}>
+        <Button cStyle="cancel" className={styles.cancel} onClick={handleClose} raised>
+          {lang.t('community.cancel')}
+        </Button>
+        <Button
+          cStyle="black" className={styles.ban}
+          onClick={() => {
+            handleBanUser({userId: user.id}).then(() => {
+              handleClose();
+            });
+          }}
+          raised>
+          {lang.t('community.yes_ban_user')}
+        </Button>
+      </div>
+    </div>
+  </Dialog>
+);
+
+BanUserDialog.propTypes = {
+  handleBanUser: PropTypes.func.isRequired,
+  handleClose: PropTypes.func.isRequired,
+  user: PropTypes.object.isRequired,
+};
+
+export default BanUserDialog;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import styles from './styles.css';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations.json';
+
+import {Link} from 'react-router';
+
+const lang = new I18n(translations);
+
+const CommunityMenu = () => {
+  const flaggedPath = '/admin/community/flagged';
+  const peoplePath = '/admin/community/people';
+  return (
+    <div className='mdl-tabs'>
+      <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
+        <div>
+          <Link to={flaggedPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+            {lang.t('community.flaggedaccounts')}
+          </Link>
+          <Link to={peoplePath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+            {lang.t('community.people')}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CommunityMenu;

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

@@ -0,0 +1,115 @@
+import React, {Component, PropTypes} from 'react';
+
+import {Dialog, Button} from 'coral-ui';
+import styles from './SuspendUserDialog.css';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations.json';
+
+const lang = new I18n(translations);
+
+const stages = [
+  {
+    title: 'suspenduser.title_0',
+    description: 'suspenduser.description_0',
+    options: {
+      'j': 'suspenduser.no_cancel',
+      'k': 'suspenduser.yes_suspend'
+    }
+  },
+  {
+    title: 'suspenduser.title_1',
+    description: 'suspenduser.description_1',
+    options: {
+      'j': 'bandialog.cancel',
+      'k': 'suspenduser.send'
+    }
+  }
+];
+
+class SuspendUserDialog extends Component  {
+
+  state = {email: '', stage: 0}
+
+  static propTypes = {
+    stage: PropTypes.number,
+    handleClose: PropTypes.func.isRequired,
+    suspendUser: PropTypes.func.isRequired
+  }
+
+  componentDidMount() {
+    this.setState({email: lang.t('suspenduser.email'), about: lang.t('suspenduser.username')});
+  }
+
+  /*
+  * When an admin clicks to suspend a user a dialog is shown, this function
+  * handles the possible actions for that dialog.
+  */
+  onActionClick = (stage, menuOption) => () => {
+    const {suspendUser, user} = this.props;
+    const {stage} = this.state;
+
+    const cancel = this.props.handleClose;
+    const next = () => this.setState({stage: stage + 1});
+    const suspend = () => {
+      suspendUser({userId: user.user.id, message: this.state.email})
+      .then(() => {
+        this.props.handleClose();
+      });
+    };
+
+    const suspendModalActions = [
+      [ cancel, next ],
+      [ cancel, suspend ]
+    ];
+    return suspendModalActions[stage][menuOption]();
+  }
+
+  onEmailChange = (e) => {
+    this.setState({email: e.target.value});
+  }
+
+  render () {
+    const {open, handleClose} = this.props;
+    const {stage} = this.state;
+
+    return <Dialog
+            className={styles.suspendDialog}
+            id="suspendUserDialog"
+            open={open}
+            onClose={handleClose}
+            onCancel={handleClose}
+            title={lang.t('suspenduser.title')}>
+            <div className={styles.title}>
+              {lang.t(stages[stage].title, lang.t('suspenduser.username'))}
+            </div>
+            <div className={styles.container}>
+              <div className={styles.description}>
+                {lang.t(stages[stage].description, lang.t('suspenduser.username'))}
+              </div>
+              {
+                stage === 1 &&
+                <div className={styles.writeContainer}>
+                  <div className={styles.emailMessage}>{lang.t('suspenduser.write_message')}</div>
+                  <div className={styles.emailContainer}>
+                    <textarea
+                      rows={5}
+                      className={styles.emailInput}
+                      value={this.state.email}
+                      onChange={this.onEmailChange}/>
+                  </div>
+                </div>
+              }
+              <div className={styles.modalButtons}>
+                {Object.keys(stages[stage].options).map((key, i) => (
+                  <Button key={i} onClick={this.onActionClick(stage, i)}>
+                    {lang.t(stages[stage].options[key], lang.t('suspenduser.username'))}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          </Dialog>;
+  }
+}
+
+export default SuspendUserDialog;

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import styles from '../Community.css';
+
+import ActionButton from './ActionButton';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../../../translations.json';
+
+const lang = new I18n(translations);
+
+// Render a single user for the list
+const User = props => {
+  const {user, modActionButtons} = props;
+  let userStatus = user.status;
+
+  // Do not display unless the user status is 'pending' or 'banned'.
+  // This means that they have already been reviewed and approved.
+  return (userStatus === 'PENDING' ||  userStatus === 'BANNED') &&
+    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
+      <div className={styles.container}>
+        <div className={styles.itemHeader}>
+          <div className={styles.author}>
+            <span>
+              {user.username}
+            </span>
+            <ActionButton
+              className={styles.banButton}
+              type='BAN'
+              user={user}
+              showBanUserDialog={props.showBanUserDialog}
+            />
+          </div>
+        </div>
+
+        <div className={styles.itemBody}>
+          <div className={styles.body}>
+            <div className={styles.flaggedByCount}>
+              <i className="material-icons">flag</i><span className={styles.flaggedByLabel}>{lang.t('community.flags')}({ user.actions.length })</span>:
+                { user.action_summaries.map(
+                (action, i ) => {
+                  return <span className={styles.flaggedBy} key={i}>
+                    {lang.t(`community.${action.reason}`)} ({action.count})
+                  </span>;
+                }
+              )}
+            </div>
+            <div className={styles.flaggedReasons}>
+              { user.action_summaries.map(
+                (action_sum, i ) => {
+                  return <div key={i}>
+                    <span className={styles.flaggedByLabel}>
+                      {lang.t(`community.${action_sum.reason}`)} ({action_sum.count})
+                    </span>
+                    {user.actions.map(
+
+                      // find the action by action_sum.reason
+                      (action, j) => {
+                        if (action.reason === action_sum.reason) {
+                          return <p className={styles.flaggedByReason} key={j}>
+                            {action.user && action.user.username}: {action.message ? action.message : 'n/a'}
+                          </p>;
+                        }
+                        return null;
+                      }
+                    )}
+                  </div>;
+                }
+              )}
+
+            </div>
+          </div>
+          <div className={styles.sideActions}>
+            <div className={`actions ${styles.actions}`}>
+              {modActionButtons.map((action, i) =>
+                <ActionButton key={i}
+                              type={action.toUpperCase()}
+                              user={user}
+                              approveUser={props.approveUser}
+                              suspendUser={props.suspendUser}
+                              showSuspendUserDialog={props.showSuspendUserDialog}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>;
+};
+
+export default User;

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

@@ -0,0 +1,339 @@
+@custom-media --big-viewport (min-width: 780px);
+
+.listContainer {
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.tabBar {
+  background-color: rgba(44, 44, 44, 0.89);
+  z-index: 5;
+}
+
+.tab {
+  flex: 1;
+  color: white;
+  text-transform: capitalize;
+  font-weight: 500;
+  font-size: 15px;
+  letter-spacing: 1px;
+  transition: border-bottom 200ms;
+}
+
+.active {
+  color: white;
+  box-sizing: border-box;
+  border-bottom: solid 5px #F36451;
+}
+
+.active > span {
+  color: white;
+}
+
+.active:after {
+  background: transparent !important;
+}
+
+.showShortcuts {
+  position: absolute;
+  right: 130px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+
+span {
+  margin-left: 7px;
+}
+}
+
+@media (--big-viewport) {
+  .tab {
+    flex: none;
+  }
+}
+
+.notFound {
+  position: relative;
+  margin: 20px auto;
+  text-align: center;
+  padding: 68px 45px;
+  vertical-align: middle;
+  min-width: 500px;
+
+  a {
+    color: rgb(244, 126, 107);
+    font-weight: 500;
+
+    &.goToStreams {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+    }
+  }
+}
+
+.header {
+  background-color: #2c2c2c;
+  color: white;
+  margin-bottom: -1px;
+
+  .settingsButton {
+    i {
+      vertical-align: middle;
+      margin-left: 10px;
+      margin-top: -4px;
+    }
+  }
+
+  .moderateAsset {
+    a {
+      -webkit-box-flex: 1;
+      -ms-flex: 1;
+      flex: 1;
+      color: white;
+      text-transform: capitalize;
+      font-weight: 500;
+      font-size: 15px;
+      letter-spacing: 1px;
+      transition: opacity 200ms;
+      opacity: 1;
+
+      &:hover {
+          opacity: .8;
+         cursor: pointer;
+      }
+
+      &:first-child {
+        text-align: left;
+      }
+
+      &:nth-child(2) {
+       text-align: center;
+      }
+
+      &:last-child {
+        text-align: right;
+      }
+    }
+  }
+}
+
+
+@custom-media --big-viewport (min-width: 780px);
+
+.list {
+  padding: 8px 0;
+  list-style: none;
+  display: block;
+
+  &.singleView .listItem {
+    display: none;
+  }
+
+  &.singleView .listItem.activeItem {
+    display: block;
+    height: 100%;
+    font-size: 1.5em;
+    line-height: 1.5em;
+    border: none;
+
+    .actions {
+      position: fixed;
+      bottom: 60px;
+      left: 25%;
+      display: flex;
+      justify-content: space-around;
+      width: 50%;
+      margin: 0;
+    }
+
+    .actionButton {
+      transform: scale(1.4);
+    }
+  }
+}
+
+.listItem {
+  border-bottom: 1px solid #e0e0e0;
+  font-size: 18px;
+  width: 100%;
+  max-width: 660px;
+  min-width: 400px;
+  margin: 0 auto;
+  position: relative;
+  transition: all 200ms;
+  padding: 10px 0 0;
+  min-height: 220px;
+
+  .container {
+    padding: 0 14px;
+    min-height: 180px;
+  }
+
+  &:hover {
+     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .context {
+    a {
+      color: #f36451;
+      text-decoration: underline;
+      float: right;
+    }
+  }
+
+   .sideActions {
+     position: absolute;
+     right: 0;
+     height: 100%;
+     top: 0;
+     padding: 40px 18px;
+     box-sizing: border-box;
+   }
+
+  .itemHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .author {
+      min-width: 230px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .itemBody {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .avatar {
+    margin-right: 16px;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    background-color: #757575;
+    font-size: 40px;
+    color: #fff;
+  }
+
+  .created {
+    color: #666;
+    font-size: 13px;
+    margin-left: 40px;
+  }
+
+  .actionButton {
+    transform: scale(.8);
+    margin: 0;
+  }
+
+  .body {
+    margin-top: 0px;
+    flex: 1;
+    color: black;
+    max-width: 500px;
+    word-wrap: break-word;
+    font-weight: 300;
+  }
+
+  .flagged {
+    color: rgba(255, 0, 0, .5);
+    padding-top: 15px;
+    padding-left: 10px;
+  }
+
+  .flagCount{
+    font-size: 12px;
+    color: #d32f2f;
+  }
+
+}
+
+.empty {
+  color: #444;
+  margin-top: 50px;
+  text-align: center;
+}
+
+
+@media (--big-viewport) {
+  .listItem {
+    border: 1px solid #e0e0e0;
+    margin-bottom: 30px;
+
+    &:last-child {
+      border-bottom: 1px solid #e0e0e0;
+    }
+
+    &.activeItem {
+      border: 2px solid #333;
+    }
+  }
+
+}
+
+.hasLinks {
+  color: #f00;
+  text-align: right;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 5px;
+  }
+}
+
+.banned {
+  color: #f00;
+  text-align: left;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 5px;
+  }
+}
+
+.ban {
+  display: block;
+  text-align: center;
+  margin-top: 5px;
+}
+
+.Comment {
+  .moderateArticle {
+    font-size: 12px;
+    a {
+      display: inline-block;
+      color: #679af3;
+      text-decoration: none;
+      font-size: 1em;
+      font-weight: 400;
+      letter-spacing: .5px;
+      font-size: 12px;
+      margin-left: 10px;
+
+      &:hover {
+        text-decoration: underline;
+        opacity: .9;
+        cursor: pointer;
+       }
+    }
+  }
+}
+
+.flagBox {
+  max-width: 480px;
+  border-top: 1px solid rgba(66, 66, 66, 0.12);
+  h3 {
+    font-size: 14px;
+    margin: 0;
+    font-weight: 500;
+  }
+}

client/coral-admin/src/containers/Configure/Configure.css

@@ -73,7 +73,6 @@
 .configSettingInfoBox {
   min-height: 100px;
   margin-bottom: 20px;
-  cursor: pointer;
   width: auto;
   height: auto;
   text-align: left;
@@ -180,7 +179,9 @@
 
   .content {
     display: inline-block;
-    padding-left: 30px;
+    padding: 0px 30px;
+    box-sizing: border-box;
+    width: 100%;
   }
 }
 
@@ -192,12 +193,11 @@
   }
 
   .wrapper {
-    width: 550px;
+    width: 100%;
   }
 
   .descriptionBox {
     margin-top: 15px;
-    max-width: 550px;
 
     input {
       height: 150px;

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

@@ -5,6 +5,7 @@ import translations from '../../translations.json';
 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';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -32,11 +33,15 @@ const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
   updateSettings({infoBoxEnable});
 };
 
-const updateInfoBoxContent = (updateSettings) => (event) => {
-  const infoBoxContent =  event.target.value;
+const updateInfoBoxContent = (updateSettings) => (value) => {
+  const infoBoxContent = value;
   updateSettings({infoBoxContent});
 };
 
+const updateAutoClose = (updateSettings, autoCloseStream) => () => {
+  updateSettings({autoCloseStream});
+};
+
 const updateClosedMessage = (updateSettings) => (event) => {
   const closedMessage = event.target.value;
   updateSettings({closedMessage});
@@ -108,19 +113,17 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
             {lang.t('configure.include-comment-stream-desc')}
           </p>
           <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-            <div>
-              <TextArea
-                className={styles.descriptionBox}
-                onChange={updateInfoBoxContent(updateSettings)}
-                value={settings.infoBoxContent}
-              />
-            </div>
+            <MarkdownEditor
+              className={styles.descriptionBox}
+              onChange={updateInfoBoxContent(updateSettings)}
+              value={settings.infoBoxContent}
+            />
           </div>
         </div>
       </Card>
       <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
-        <div className={styles.settingsHeader}>{lang.t('configure.closed-stream-settings')}</div>
         <div className={styles.wrapper}>
+          <div className={styles.settingsHeader}>{lang.t('configure.closed-stream-settings')}</div>
           <p>{lang.t('configure.closed-comments-desc')}</p>
           <div>
             <TextArea className={styles.descriptionBox}
@@ -131,6 +134,11 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
         </div>
       </Card>
       <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
+        <div className={styles.action}>
+          <Checkbox
+            onChange={updateAutoClose(updateSettings, !settings.autoCloseStream)}
+            checked={settings.autoCloseStream} />
+        </div>
         <div className={styles.content}>
           {lang.t('configure.close-after')}
           <br />

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

@@ -22,19 +22,19 @@ const Comment = ({actions = [], ...props}) => {
   const linkText = links ? links.map(link => link.raw) : [];
   const actionSummaries = props.comment.action_summaries;
   return (
-    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
+    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem}`}>
       <div className={styles.container}>
         <div className={styles.itemHeader}>
           <div className={styles.author}>
-          <span>
-            {props.comment.user.name}
-          </span>
-          <span className={styles.created}>
-            {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
-          </span>
-          <BanUserButton user={props.comment.user} onClick={() => props.showBanUserDialog(props.comment.user, props.comment.id, props.comment.status !== 'REJECTED')} />
-          <CommentType type={props.commentType} />
-        </div>
+            <span>
+              {props.comment.user.name}
+            </span>
+            <span className={styles.created}>
+              {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
+            </span>
+            <BanUserButton user={props.comment.user} onClick={() => props.showBanUserDialog(props.comment.user, props.comment.id, props.comment.status !== 'REJECTED')} />
+            <CommentType type={props.commentType} />
+          </div>
           {props.comment.user.status === 'banned' ?
             <span className={styles.banned}>
               <Icon name='error_outline'/>

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

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

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

@@ -1,15 +1,15 @@
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react';
 import CommentCount from './CommentCount';
 import styles from './styles.css';
-import { SelectField, Option } from 'react-mdl-selectfield';
+import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
-import { Link } from 'react-router';
+import {Link} from 'react-router';
 
 const lang = new I18n(translations);
 
 const ModerationMenu = (
-  { asset, premodCount, rejectedCount, flaggedCount, selectSort, sort }
+  {asset, premodCount, rejectedCount, flaggedCount, selectSort, sort}
 ) => {
   const premodPath = asset
     ? `/admin/moderate/premod/${asset.id}`

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

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

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

@@ -1,6 +1,7 @@
 import {graphql} from 'react-apollo';
 import SET_USER_STATUS from './setUserStatus.graphql';
 import SET_COMMENT_STATUS from './setCommentStatus.graphql';
+import SUSPEND_USER from './suspendUser.graphql';
 
 export const banUser = graphql(SET_USER_STATUS, {
   props: ({mutate}) => ({
@@ -9,11 +10,40 @@ export const banUser = graphql(SET_USER_STATUS, {
         variables: {
           userId,
           status: 'BANNED'
-        }
+        },
+        refetchQueries: ['Users']
       });
     }}),
 });
 
+export const setUserStatus = graphql(SET_USER_STATUS, {
+  props: ({mutate}) => ({
+    approveUser: ({userId}) => {
+      return mutate({
+        variables: {
+          userId,
+          status: 'APPROVED'
+        },
+        refetchQueries: ['Users']
+      });
+    }
+  })
+});
+
+export const suspendUser = graphql(SUSPEND_USER, {
+  props: ({mutate}) => ({
+    suspendUser: ({userId, message}) => {
+      return mutate({
+        variables: {
+          userId,
+          message
+        },
+        refetchQueries: ['Users']
+      });
+    }
+  })
+});
+
 export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
   props: ({mutate}) => ({
     acceptComment: ({commentId}) => {

client/coral-admin/src/graphql/mutations/suspendUser.graphql

@@ -0,0 +1,7 @@
+mutation suspendUser($userId: ID!, $message: String) {
+  suspendUser(id: $userId, message: $message) {
+    errors {
+      translation_key
+    }
+  }
+}

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

@@ -2,6 +2,7 @@ import {graphql} from 'react-apollo';
 
 import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
 import MOD_QUEUE_LOAD_MORE from './loadMore.graphql';
+import MOD_USER_FLAGGED_QUERY from './modUserFlaggedQuery.graphql';
 import METRICS from './metricsQuery.graphql';
 
 export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
@@ -66,6 +67,16 @@ export const loadMore = (fetchMore) => ({limit, cursor, sort, tab, asset_id}) =>
   });
 };
 
+export const modUserFlaggedQuery  = graphql(MOD_USER_FLAGGED_QUERY, {
+  options: ({params: {action_type = 'FLAG'}}) => {
+    return {
+      variables: {
+        action_type: action_type
+      }
+    };
+  }
+});
+
 export const modQueueResort = (id, fetchMore) => (sort) => {
   return fetchMore({
     query: MOD_QUEUE_QUERY,

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

@@ -0,0 +1,26 @@
+query Users ($action_type: ACTION_TYPE) {
+  users (query:{action_type: $action_type}){
+    id
+    username
+    status
+    roles
+    actions{
+      id
+      created_at
+      ... on FlagAction {
+        reason
+        message
+        user {
+          id
+          username
+        }
+      }
+    }
+    action_summaries {
+      count
+    	... on FlagActionSummary {
+      	reason
+      }
+    }
+  }
+}

client/coral-admin/src/index.js

@@ -7,7 +7,6 @@ import store from './services/store';
 
 import App from './components/App';
 
-import 'react-mdl/extra/material.css';
 import 'react-mdl/extra/material.js';
 
 render(

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

@@ -6,58 +6,88 @@ import {
   FETCH_COMMENTERS_SUCCESS,
   SORT_UPDATE,
   SET_ROLE,
-  SET_COMMENTER_STATUS
+  SET_COMMENTER_STATUS,
+  SHOW_BANUSER_DIALOG,
+  HIDE_BANUSER_DIALOG,
+  SHOW_SUSPENDUSER_DIALOG,
+  HIDE_SUSPENDUSER_DIALOG
 } from '../constants/community';
 
 const initialState = Map({
   community: Map(),
-  isFetching: false,
-  error: '',
-  commenters: [],
-  field: 'created_at',
-  asc: false,
-  totalPages: 0,
-  page: 0
+  isFetchingPeople: false,
+  errorPeople: '',
+  accounts: [],
+  fieldPeople: 'created_at',
+  ascPeople: false,
+  totalPagesPeople: 0,
+  pagePeople: 0,
+  user: Map({}),
+  banDialog: false,
+  suspendDialog: false
 });
 
 export default function community (state = initialState, action) {
   switch (action.type) {
   case FETCH_COMMENTERS_REQUEST :
     return state
-      .set('isFetching', true);
+      .set('isFetchingPeople', true);
   case FETCH_COMMENTERS_FAILURE :
     return state
-      .set('isFetching', false)
-      .set('error', action.error);
+      .set('isFetchingPeople', false)
+      .set('errorPeople', action.error);
+
   case FETCH_COMMENTERS_SUCCESS : {
-    const {commenters, type, ...rest} = action; // eslint-disable-line
+    const {accounts, type, page, count, limit, totalPages, ...rest} = action; // eslint-disable-line
     return state
       .merge({
-        isFetching: false,
-        error: '',
+        isFetchingPeople: false,
+        errorPeople: '',
+        pagePeople: page,
+        countPeople: count,
+        limitPeople: limit,
+        totalPagesPeople: totalPages,
         ...rest
       })
-      .set('commenters', commenters); // Sets to normal array
+      .set('accounts', accounts); // Sets to normal array
   }
   case SET_ROLE : {
-    const commenters = state.get('commenters');
+    const commenters = state.get('accounts');
     const idx = commenters.findIndex(el => el.id === action.id);
 
     commenters[idx].roles[0] = action.role;
-    return state.set('commenters', commenters.map(id => id));
+    return state.set('accounts', commenters.map(id => id));
   }
   case SET_COMMENTER_STATUS: {
-    const commenters = state.get('commenters');
+    const commenters = state.get('accounts');
     const idx = commenters.findIndex(el => el.id === action.id);
 
     commenters[idx].status = action.status;
-    return state.set('commenters', commenters.map(id => id));
+    return state.set('accounts', commenters.map(id => id));
 
   }
   case SORT_UPDATE :
     return state
-      .set('field', action.sort.field)
-      .set('asc', !state.get('asc'));
+      .set('fieldPeople', action.sort.field)
+      .set('ascPeople', !state.get('ascPeople'));
+  case HIDE_BANUSER_DIALOG:
+    return state
+      .set('banDialog', false);
+  case SHOW_BANUSER_DIALOG:
+    return state
+      .merge({
+        user: Map(action.user),
+        banDialog: true
+      });
+  case HIDE_SUSPENDUSER_DIALOG:
+    return state
+      .set('suspendDialog', false);
+  case SHOW_SUSPENDUSER_DIALOG:
+    return state
+      .merge({
+        user: Map(action.user),
+        suspendDialog: true
+      });
   default :
     return state;
   }

client/coral-admin/src/translations.json

@@ -17,7 +17,21 @@
       "active": "Active",
       "banned": "Banned",
       "banned-user": "Banned User",
-      "loading": "Loading results"
+      "loading": "Loading results",
+      "flags": "Flags",
+      "flaggedaccounts": "Flagged Usernames",
+      "people": "People",
+      "no-flagged-accounts": "The Account Flags queue is currently empty.",
+      "I don't like this username": "I don't like this username",
+      "This user is impersonating": "Impersonation",
+      "This looks like an ad/marketing": "Spam/Ads",
+      "This username is offensive": "Offensive",
+      "Other": "Other",
+      "ban_user": "Ban User?",
+      "are_you_sure": "Are you sure you would like to ban {0}?",
+      "note": "Note: Banning this user will not let them edit, comment or remove anything.",
+      "cancel": "Cancel",
+      "yes_ban_user": "Yes, Ban User"
     },
     "modqueue": {
       "likes": "likes",
@@ -104,8 +118,9 @@
       "yes_ban_user": "Yes, Ban User"
     },
     "suspenduser": {
-      "title_0": "We noticed you rejected a {0}",
-      "description_0": "Would you like to temporarily ban this user becuase of their {0}? Doing so will temporarily hide their comments until they rewrite their {0}.",
+      "title": "Suspend a user",
+      "title_0": "We noticed you rejected a username",
+      "description_0": "Would you like to temporarily ban this user because of their {0}? Doing so will temporarily hide their comments until they rewrite their {0}.",
       "title_1": "Notify the user of their temporary suspension",
       "description_1": "Suspending this user will temporarily disable their account and hide all of their comments on the site.",
       "no_cancel": "No, cancel",
@@ -114,7 +129,7 @@
       "bio": "bio",
       "username": "username",
       "email_subject": "Your account has been suspended",
-      "email": "Another member of the community recently flagged your {0} for review. Because of its content your {0} was rejected. This means you can no longer comment, like, or flag content until you rewrite your {0}. Please e-mail moderator@newsorg.com if you have any questions or concerns.",
+      "email": "Another member of the community recently flagged your username for review. Because of its content your user was rejected. This means you can no longer comment, like, or flag content until you rewrite your username. Please e-mail us if you have any questions or concerns.",
       "write_message": "Write a message"
     },
     "dashboard": {
@@ -163,6 +178,7 @@
       "banned": "Suspendido",
       "banned-user": "Usuario Suspendido",
       "loading": "Cargando resultados",
+      "flags": "Reporte",
       "flaggedaccounts": "Nombres de Usuario Reportados",
       "people": "Gente",
       "no-flagged-accounts": "No hay ninguna cuenta reportada.",
@@ -179,16 +195,16 @@
     },
     "suspenduser": {
       "title": "Suspendiendo un usuario",
-      "title_0": "¿Esta queriendo suspender un usuario?",
-      "description_0": "¿Le gustaría suspender a esta usuaria temporalmente devido a su nombre de usuario? Si lo hace sus comentarios serán escondidos temporalmente hasta que el usuario pueda cambiar su nombre.",
-      "title_1": "Enviarle un correo al usuario informandole que su cuenta fue suspendida",
+      "title_0": "Esta queriendo suspender un usuario?",
+      "description_0": "Le gustaria suspender a esta usuaria temporarianmente por su nombre de usuario? Si lo hace sus comentarios serán escondidos temporariamente hasta que puedan reescribir su nombre de usuario.",
+      "title_1": "Enviarle una nota al usuario sobre su cuenta suspendida",
       "description_1": "Si suspende a este usuario, su cuenta va a ser deshabilitada y todos sus comentarios escondidos del sitio.",
       "no_cancel": "No, cancelar",
       "yes_suspend": "Si, suspender",
       "send": "Enviar",
       "username": "nombre de usuario",
-      "email_subject": "Su cuenta ha sido suspendida temporalmente",
-      "email": "Una persona de la comunidad recientemente marcó su nombre de usuario para ser revisado. Por su contenido, el nombre de usuario ha sido rechazado. Esto quiere decir que no puede comentar, gustar o marcar contenido hasta que modifique su nombre de usuario. Por favor, envienos un correo si tiene alguna pregunta o comentario.",
+      "email_subject": "Su cuenta ha sido suspendida temporariamente",
+      "email": "Otra persona de la comunidad recientemente marcó su nombre de usuario para ser revisado. Por su contenido, el nombre de usuario ha sido rechazado. Esto quiere decir que no puede comentar, gustar o marcar contenido hasta que modifique su nombre de usuario. Por favor, envienos un correo a moderator@newsorg.com si tiene alguna pregunta o preocupación",
       "write_message": "Escribir un mensaje",
       "loading": "Cargando resultados"
     },

client/coral-configure/translations.json

@@ -9,7 +9,7 @@
       "enablePremodLinks": "Pre-Moderate Comments Containing Links",
       "enablePremodLinksDescription": "Moderators must approve any comment containing a link before its published.",
       "enableQuestionBox": "Ask readers a question",
-      "enableQuestionBoxDescription": "This question will appear at the top of this comment stram. Ask readers about a certain issue in the article or pose discussion questions, etc.",
+      "enableQuestionBoxDescription": "This question will appear at the top of this comment stream. Ask readers about a certain issue in the article or pose discussion questions, etc.",
       "includeQuestionHere": "Write your question here."
     }
   },

client/coral-docs/src/index.js

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

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

@@ -5,6 +5,7 @@
 
 .Comment {
   margin-bottom: 15px;
+  position: relative;
 }
 
 .pendingComment {

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

@@ -19,6 +19,7 @@ import FlagComment from 'coral-plugin-flags/FlagComment';
 import LikeButton from 'coral-plugin-likes/LikeButton';
 import {BestButton, IfUserCanModifyBest, BEST_TAG, commentIsBest, BestIndicator} from 'coral-plugin-best/BestButton';
 import LoadMore from 'coral-embed-stream/src/LoadMore';
+import {Slot} from 'coral-framework';
 
 import styles from './Comment.css';
 
@@ -117,7 +118,6 @@ class Comment extends React.Component {
     const flag = getActionSummary('FlagActionSummary', comment);
     const dontagree = getActionSummary('DontAgreeActionSummary', comment);
     let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`;
-    commentClass += highlighted === comment.id ? ' highlighted-comment' : '';
     commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : '';
 
     // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
@@ -147,18 +147,20 @@ class Comment extends React.Component {
         id={`c_${comment.id}`}
         style={{marginLeft: depth * 30}}>
         <hr aria-hidden={true} />
-        <AuthorName
-          author={comment.user}/>
-        { isStaff(comment.tags)
-          ? <TagLabel>Staff</TagLabel>
+        <div className={highlighted === comment.id ? 'highlighted-comment' : ''}>
+          <AuthorName
+            author={comment.user}/>
+          { isStaff(comment.tags)
+            ? <TagLabel>Staff</TagLabel>
           : null }
 
-        { commentIsBest(comment)
-          ? <TagLabel><BestIndicator /></TagLabel>
+          { commentIsBest(comment)
+            ? <TagLabel><BestIndicator /></TagLabel>
           : null }
-        <PubDate created_at={comment.created_at} />
+          <PubDate created_at={comment.created_at} />
+          <Slot fill="commentInfoBar" commentId={comment.id} />
 
-        <Content body={comment.body} />
+          <Content body={comment.body} />
           <div className="commentActionsLeft comment__action-container">
             <ActionButton>
               <LikeButton
@@ -187,22 +189,24 @@ class Comment extends React.Component {
                   removeBest={removeBestTag} />
               </IfUserCanModifyBest>
             </ActionButton>
+            <Slot fill="commentDetail" commentId={comment.id} />
+          </div>
+          <div className="commentActionsRight comment__action-container">
+            <ActionButton>
+              <PermalinkButton articleURL={asset.url} commentId={comment.id} />
+            </ActionButton>
+            <ActionButton>
+              <FlagComment
+                flag={flag && flag.current_user ? flag : dontagree}
+                id={comment.id}
+                author_id={comment.user.id}
+                postFlag={postFlag}
+                postDontAgree={postDontAgree}
+                deleteAction={deleteAction}
+                showSignInDialog={showSignInDialog}
+                currentUser={currentUser} />
+            </ActionButton>
           </div>
-        <div className="commentActionsRight comment__action-container">
-          <ActionButton>
-            <PermalinkButton articleURL={asset.url} commentId={comment.id} />
-          </ActionButton>
-          <ActionButton>
-            <FlagComment
-              flag={flag && flag.current_user ? flag : dontagree}
-              id={comment.id}
-              author_id={comment.user.id}
-              postFlag={postFlag}
-              postDontAgree={postDontAgree}
-              deleteAction={deleteAction}
-              showSignInDialog={showSignInDialog}
-              currentUser={currentUser} />
-          </ActionButton>
         </div>
         {
           activeReplyBox === comment.id
@@ -240,7 +244,8 @@ class Comment extends React.Component {
               showSignInDialog={showSignInDialog}
               reactKey={reply.id}
               key={reply.id}
-              comment={reply} />;
+              comment={reply}
+            />;
           })
         }
         {

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

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React from 'react';
 import {compose} from 'react-apollo';
 import {connect} from 'react-redux';
 import isEqual from 'lodash/isEqual';
@@ -6,16 +6,17 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations';
 const lang = new I18n(translations);
 
-import {TabBar, Tab, TabContent, Spinner} from 'coral-ui';
+import {TabBar, Tab, TabContent, Spinner, Button} from 'coral-ui';
 
 const {logout, showSignInDialog, requestConfirmEmail} = authActions;
 const {addNotification, clearNotification} = notificationActions;
 const {fetchAssetSuccess} = assetActions;
+import {NEW_COMMENT_COUNT_POLL_INTERVAL} from 'coral-framework/constants/comments';
 
 import {queryStream} from 'coral-framework/graphql/queries';
 import {postComment, postFlag, postLike, postDontAgree, deleteAction, addCommentTag, removeCommentTag} from 'coral-framework/graphql/mutations';
 import {editName} from 'coral-framework/actions/user';
-import {updateCountCache} from 'coral-framework/actions/asset';
+import {updateCountCache, viewAllComments} from 'coral-framework/actions/asset';
 import {notificationActions, authActions, assetActions, pym} from 'coral-framework';
 
 import Stream from './Stream';
@@ -31,18 +32,26 @@ import ChangeUsernameContainer from '../../coral-sign-in/containers/ChangeUserna
 import ProfileContainer from 'coral-settings/containers/ProfileContainer';
 import RestrictedContent from 'coral-framework/components/RestrictedContent';
 import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
-import Comment from './Comment';
+import HighlightedComment from './Comment';
 import LoadMore from './LoadMore';
 import NewCount from './NewCount';
 
-class Embed extends Component {
+class Embed extends React.Component {
 
-  state = {activeTab: 0, showSignInDialog: false, activeReplyBox: ''};
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeTab: 0,
+      showSignInDialog: false,
+      activeReplyBox: ''
+    };
+  }
 
   changeTab = (tab) => {
 
     // Everytime the comes from another tab, the Stream needs to be updated.
     if (tab === 0) {
+      this.props.viewAllComments();
       this.props.data.refetch();
     }
 
@@ -68,10 +77,32 @@ class Embed extends Component {
     pym.sendMessage('childReady');
   }
 
+  componentWillUnmount () {
+    clearInterval(this.state.countPoll);
+  }
+
   componentWillReceiveProps (nextProps) {
     const {loadAsset} = this.props;
     if(!isEqual(nextProps.data.asset, this.props.data.asset)) {
       loadAsset(nextProps.data.asset);
+
+      const {getCounts, updateCountCache, asset: {countCache}} = this.props;
+      const {asset} = nextProps.data;
+
+      if (!countCache) {
+        updateCountCache(asset.id, asset.commentCount);
+      }
+
+      this.setState({
+        countPoll: setInterval(() => {
+          const {asset} = this.props.data;
+          getCounts({
+            asset_id: asset.id,
+            limit: asset.comments.length,
+            sort: 'REVERSE_CHRONOLOGICAL'
+          });
+        }, NEW_COMMENT_COUNT_POLL_INTERVAL)
+      });
     }
   }
 
@@ -79,7 +110,7 @@ class Embed extends Component {
     if(!isEqual(prevProps.data.comment, this.props.data.comment)) {
 
       // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
-      setTimeout(()=>pym.scrollParentToChildEl(`c_${this.props.data.comment.id}`), 0);
+      setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0);
     }
   }
 
@@ -95,19 +126,27 @@ class Embed extends Component {
   render () {
     const {activeTab} = this.state;
     const {closedAt, countCache = {}} = this.props.asset;
-    const {loading, asset, refetch, comment} = this.props.data;
+    const {asset, refetch, comment} = this.props.data;
     const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth;
+
+    // even though the permalinked comment is the highlighted one, we're displaying its parent + replies
     const highlightedComment = comment && comment.parent ? comment.parent : comment;
 
     const openStream = closedAt === null;
 
     const banned = user && user.status === 'BANNED';
 
+    const hasOlderComments = !!(
+      asset &&
+      asset.lastComment &&
+      asset.lastComment.id !== asset.comments[asset.comments.length - 1].id
+    );
+
     const expandForLogin = showSignInDialog ? {
       minHeight: document.body.scrollHeight + 200
     } : {};
 
-    if (loading || !asset) {
+    if (!asset) {
       return <Spinner />;
     }
 
@@ -120,10 +159,21 @@ class Embed extends Component {
       <div style={expandForLogin}>
         <div className="commentStream">
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
-            <Tab><Count count={asset.commentCount}/></Tab>
+            <Tab><Count count={asset.totalCommentCount}/>
+            </Tab>
             <Tab>{lang.t('MY_COMMENTS')}</Tab>
             <Tab restricted={!isAdmin}>Configure Stream</Tab>
           </TabBar>
+          {
+            highlightedComment &&
+            <Button
+              cStyle='darkGrey'
+              style={{float: 'right'}}
+              onClick={() => {
+                this.props.viewAllComments();
+                this.props.data.refetch();
+              }}>{lang.t('showAllComments')}</Button>
+          }
           {loggedIn && <UserBox user={user} logout={() => this.props.logout().then(refetch)}  changeTab={this.changeTab}/>}
           <TabContent show={activeTab === 0}>
             {
@@ -170,9 +220,11 @@ class Embed extends Component {
               offset={signInOffset}/>}
             {loggedIn &&  user && <ChangeUsernameContainer loggedIn={loggedIn} offset={signInOffset} user={user} />}
             {loggedIn && <ModerationLink assetId={asset.id} isAdmin={isAdmin} />}
+
+            {/* the highlightedComment is isolated after the user followed a permalink */}
             {
-              highlightedComment &&
-              <Comment
+              highlightedComment
+              ? <HighlightedComment
                 refetch={refetch}
                 setActiveReplyBox={this.setActiveReplyBox}
                 activeReplyBox={this.state.activeReplyBox}
@@ -191,42 +243,42 @@ class Embed extends Component {
                 key={highlightedComment.id}
                 reactKey={highlightedComment.id}
                 comment={highlightedComment} />
+              : <div>
+                <NewCount
+                  commentCount={asset.commentCount}
+                  countCache={countCache[asset.id]}
+                  loadMore={this.props.loadMore}
+                  firstCommentDate={firstCommentDate}
+                  assetId={asset.id}
+                  updateCountCache={this.props.updateCountCache}
+                  />
+                <div className="embed__stream">
+                  <Stream
+                    open={openStream}
+                    addNotification={this.props.addNotification}
+                    postItem={this.props.postItem}
+                    setActiveReplyBox={this.setActiveReplyBox}
+                    activeReplyBox={this.state.activeReplyBox}
+                    asset={asset}
+                    currentUser={user}
+                    postLike={this.props.postLike}
+                    postFlag={this.props.postFlag}
+                    postDontAgree={this.props.postDontAgree}
+                    addCommentTag={this.props.addCommentTag}
+                    removeCommentTag={this.props.removeCommentTag}
+                    loadMore={this.props.loadMore}
+                    deleteAction={this.props.deleteAction}
+                    showSignInDialog={this.props.showSignInDialog}
+                    comments={asset.comments} />
+                </div>
+                <LoadMore
+                  topLevel={true}
+                  assetId={asset.id}
+                  comments={asset.comments}
+                  moreComments={hasOlderComments}
+                  loadMore={this.props.loadMore} />
+              </div>
             }
-            <NewCount
-              commentCount={asset.commentCount}
-              countCache={countCache[asset.id]}
-              loadMore={this.props.loadMore}
-              firstCommentDate={firstCommentDate}
-              assetId={asset.id}
-              updateCountCache={this.props.updateCountCache}
-              />
-            <div className="embed__stream">
-              <Stream
-                open={openStream}
-                addNotification={this.props.addNotification}
-                postItem={this.props.postItem}
-                setActiveReplyBox={this.setActiveReplyBox}
-                activeReplyBox={this.state.activeReplyBox}
-                asset={asset}
-                currentUser={user}
-                postLike={this.props.postLike}
-                postFlag={this.props.postFlag}
-                postDontAgree={this.props.postDontAgree}
-                getCounts={this.props.getCounts}
-                addCommentTag={this.props.addCommentTag}
-                removeCommentTag={this.props.removeCommentTag}
-                updateCountCache={this.props.updateCountCache}
-                loadMore={this.props.loadMore}
-                deleteAction={this.props.deleteAction}
-                showSignInDialog={this.props.showSignInDialog}
-                comments={asset.comments} />
-            </div>
-          <LoadMore
-            topLevel={true}
-            assetId={asset.id}
-            comments={asset.comments}
-            moreComments={countCache[asset.id] > asset.comments.length}
-            loadMore={this.props.loadMore}/>
         </TabContent>
          <TabContent show={activeTab === 1}>
            <ProfileContainer
@@ -263,6 +315,7 @@ const mapDispatchToProps = dispatch => ({
   editName: (username) => dispatch(editName(username)),
   showSignInDialog: (offset) => dispatch(showSignInDialog(offset)),
   updateCountCache: (id, count) => dispatch(updateCountCache(id, count)),
+  viewAllComments: () => dispatch(viewAllComments()),
   logout: () => dispatch(logout()),
   dispatch: d => dispatch(d)
 });
@@ -276,5 +329,5 @@ export default compose(
   addCommentTag,
   removeCommentTag,
   deleteAction,
-  queryStream
+  queryStream,
 )(Embed);

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

@@ -5,7 +5,7 @@ import {ADDTL_COMMENTS_ON_LOAD_MORE} from 'coral-framework/constants/comments';
 import {Button} from 'coral-ui';
 const lang = new I18n(translations);
 
-const loadMoreComments = (assetId, comments, loadMore, parentId) => {
+const loadMoreComments = (assetId, comments, loadMore, parentId, replyCount) => {
 
   let cursor = null;
   if (comments.length) {
@@ -15,7 +15,7 @@ const loadMoreComments = (assetId, comments, loadMore, parentId) => {
   }
 
   loadMore({
-    limit: ADDTL_COMMENTS_ON_LOAD_MORE,
+    limit: parentId ? replyCount : ADDTL_COMMENTS_ON_LOAD_MORE,
     cursor,
     asset_id: assetId,
     parent_id: parentId,
@@ -48,7 +48,7 @@ class LoadMore extends React.Component {
         <Button
           onClick={() => {
             this.initialState = false;
-            loadMoreComments(assetId, comments, loadMore, parentId);
+            loadMoreComments(assetId, comments, loadMore, parentId, replyCount);
           }}>
           {topLevel ? lang.t('viewMoreComments') : this.replyCountFormat(replyCount)}
         </Button>

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

@@ -17,10 +17,10 @@ const onLoadMoreClick = ({loadMore, commentCount, firstCommentDate, assetId, upd
 const NewCount = (props) => {
   const newComments = props.commentCount - props.countCache;
 
-  return <div className='coral-new-comments'>
+  return <div className='coral-new-comments coral-load-more'>
     {
       props.countCache && newComments > 0 ?
-      <button onClick={onLoadMoreClick(props)} className='coral-load-more'>
+      <button onClick={onLoadMoreClick(props)}>
         {newComments === 1
           ? lang.t('newCount', newComments, lang.t('comment'))
           : lang.t('newCount', newComments, lang.t('comments'))}

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

@@ -1,6 +1,5 @@
 import React, {PropTypes} from 'react';
 import Comment from './Comment';
-import {NEW_COMMENT_COUNT_POLL_INTERVAL} from 'coral-framework/constants/comments';
 
 class Stream extends React.Component {
 
@@ -27,26 +26,6 @@ class Stream extends React.Component {
     this.state = {activeReplyBox: '', countPoll: null};
   }
 
-  componentDidMount() {
-    const {asset, getCounts, updateCountCache} = this.props;
-
-    updateCountCache(asset.id, asset.commentCount);
-
-    // Note: Apollo's built-in polling doesn't work with fetchMore queries, so a
-    // setInterval is being used instead.
-    this.setState({
-      countPoll: setInterval(() => getCounts({
-        asset_id: asset.id,
-        limit: asset.comments.length,
-        sort: 'REVERSE_CHRONOLOGICAL'
-      }), NEW_COMMENT_COUNT_POLL_INTERVAL),
-    });
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.state.countPoll);
-  }
-
   render () {
     const {
       comments,
@@ -62,7 +41,8 @@ class Stream extends React.Component {
       deleteAction,
       showSignInDialog,
       addCommentTag,
-      removeCommentTag
+      removeCommentTag,
+      pluginProps
     } = this.props;
 
     return (
@@ -88,7 +68,9 @@ class Stream extends React.Component {
               showSignInDialog={showSignInDialog}
               key={comment.id}
               reactKey={comment.id}
-              comment={comment} />
+              comment={comment}
+              pluginProps={pluginProps}
+            />
           )
         }
       </div>

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

@@ -11,11 +11,12 @@ html, body {
 }
 
 body {
-  font-family: 'Lato', sans-serif;
+  font-family: Helvetica, 'Helvetica Neue', Verdana, sans-serif;
   width: 100%;
   font-size: 14px;
   margin: 0px;
   padding: 0px 0px 50px 0px;
+  height: auto !important;
 }
 
 .expandForSignin {
@@ -79,8 +80,8 @@ hr {
 .coral-plugin-infobox-info {
   top: 0;
   border: 0;
-  background: rgb(35,118,216);
-  color: white;
+  background: #DEEDFF;
+  color: #2a2a2a;
   width: 100%;
   text-align: left;
   padding: 10px;
@@ -91,6 +92,24 @@ hr {
 }
 
 
+.coral-plugin-infobox-info em{
+  font-style: italic;
+}
+
+.coral-plugin-infobox-info strong{
+  font-weight: bold;
+}
+
+.coral-plugin-infobox-info blockquote{
+  border-left: solid 2px #2a2a2a;
+  padding-left: 10px;
+}
+
+
+.coral-plugin-infobox-info a{
+  color: #2a2a2a;
+}
+
 .commentStream .material-icons {
   vertical-align: middle;
   width: 1em;
@@ -110,15 +129,15 @@ hr {
   margin-bottom: 0px;
   font-weight: bold;
   font-size: 14px;
-  display: block;
   overflow: hidden;
-  height: 50px;
+  min-height: 50px;
+  display: flex;
 }
 
 .coral-plugin-questionbox-icon.bubble{
   position: absolute;
   top: 11px;
-  left: 15px;
+  left: 10px;
   color: #949393;
   font-size: 20px;
   z-index: 0;
@@ -127,7 +146,7 @@ hr {
 .coral-plugin-questionbox-icon.person{
   z-index: 2;
   top: 20px;
-  left: 20px;
+  left: 15px;
   position: absolute;
   font-size: 24px;
   color: white;
@@ -142,12 +161,19 @@ hr {
   margin-left: 0px !important;
   margin-right: 10px;
   display: inline-block;
-  width: 15px;
-  height: 100%;
-  padding: 3px 20px;
+  width: 10px;
+  min-height: 100%;
+  padding: 5px 20px;
   vertical-align: middle;
 }
 
+.coral-plugin-questionbox-content {
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .hidden  {
   visibility: hidden;
   display: none;
@@ -254,13 +280,13 @@ hr {
 .commentActionsRight, .replyActionsRight {
   display: flex;
   justify-content: flex-end;
-  width: 50%;
+  width: 30%;
 }
 .commentActionsLeft, .replyActionsLeft {
   display: flex;
   justify-content: flex-start;
   float: left;
-  width: 50%;
+  width: 70%;
 }
 
 .comment__action-container .material-icons {
@@ -306,10 +332,7 @@ button.comment__action-button[disabled],
   display: none;
   background-color: white;
   border: 1px solid black;
-  width: calc(100% - 15px);
   position: absolute;
-  top: 70px;
-  right: 0;
   padding: 5px;
 }
 

client/coral-embed/src/index.js

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

client/coral-framework/actions/asset.js

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

client/coral-framework/actions/auth.js

@@ -1,3 +1,5 @@
+import {gql} from 'react-apollo';
+import client from 'coral-framework/services/client';
 import I18n from '../../coral-framework/modules/i18n/i18n';
 import translations from './../translations';
 const lang = new I18n(translations);
@@ -5,6 +7,20 @@ import * as actions from '../constants/auth';
 import coralApi, {base} from '../helpers/response';
 import {pym} from 'coral-framework';
 
+const ME_QUERY = gql`
+  query Me {
+    me {
+      status
+    }
+  }
+`;
+
+function fetchMe() {
+  return client.query({
+    fetchPolicy: 'network-only',
+    query: ME_QUERY});
+}
+
 // Dialog Actions
 export const showSignInDialog = (offset = 0) => ({type: actions.SHOW_SIGNIN_DIALOG, offset});
 export const hideSignInDialog = () => ({type: actions.HIDE_SIGNIN_DIALOG});
@@ -52,6 +68,7 @@ export const fetchSignIn = (formData) => (dispatch) => {
       const isAdmin = !!user && !!user.roles.filter(i => i === 'ADMIN').length;
       dispatch(signInSuccess(user, isAdmin));
       dispatch(hideSignInDialog());
+      fetchMe();
     })
     .catch(error => {
       if (error.metadata) {
@@ -104,6 +121,7 @@ export const facebookCallback = (err, data) => dispatch => {
     dispatch(signInFacebookSuccess(user));
     dispatch(hideSignInDialog());
     dispatch(showCreateUsernameDialog());
+    fetchMe();
   } catch (err) {
     dispatch(signInFacebookFailure(err));
     return;
@@ -151,7 +169,10 @@ const logOutFailure = () => ({type: actions.LOGOUT_FAILURE});
 export const logout = () => dispatch => {
   dispatch(logOutRequest());
   return coralApi('/auth', {method: 'DELETE'})
-    .then(() => dispatch(logOutSuccess()))
+    .then(() => {
+      dispatch(logOutSuccess());
+      fetchMe();
+    })
     .catch(error => dispatch(logOutFailure(error)));
 };
 

client/coral-framework/actions/index.js

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

client/coral-framework/actions/notification.js

@@ -1,4 +1,4 @@
-import {pym} from '../../coral-framework';
+import pym from '../services/PymConnection';
 
 export const addNotification = (notifType, text) => {
   pym.sendMessage('coral-alert', `${notifType}|${text}`);

client/coral-framework/actions/user.js

@@ -1,13 +1,21 @@
 import {addNotification} from '../actions/notification';
 import coralApi from '../helpers/response';
+import * as actions from '../constants/auth';
 
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from './../translations';
 const lang = new I18n(translations);
 
+const editUsernameFailure = error => ({type: actions.EDIT_USERNAME_FAILURE, error});
+const editUsernameSuccess = () => ({type: actions.EDIT_USERNAME_SUCCESS});
+
 export const editName = (username) => (dispatch) => {
   return coralApi('/account/username', {method: 'PUT', body: {username}})
     .then(() => {
+      dispatch(editUsernameSuccess());
       dispatch(addNotification('success', lang.t('successNameUpdate')));
+    })
+    .catch(error => {
+      dispatch(editUsernameFailure(lang.t(`error.${error.translation_key}`)));
     });
 };

client/coral-framework/components/Slot.js

@@ -0,0 +1,19 @@
+import React, {Component} from 'react';
+import {getSlotElements} from 'coral-framework/helpers/plugins';
+
+class Slot extends Component {
+  render() {
+    const {fill, ...rest} = this.props;
+    return (
+      <div>
+        {getSlotElements(fill, rest)}
+      </div>
+    );
+  }
+}
+
+Slot.propTypes = {
+  fill: React.PropTypes.string
+};
+
+export default Slot;

client/coral-framework/constants/asset.js

@@ -9,3 +9,5 @@ export const UPDATE_ASSET_SETTINGS_FAILURE = 'UPDATE_ASSET_SETTINGS_FAILURE';
 export const OPEN_COMMENTS = 'OPEN_COMMENTS';
 export const CLOSE_COMMENTS = 'CLOSE_COMMENTS';
 export const UPDATE_COUNT_CACHE = 'UPDATE_COUNT_CACHE';
+
+export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS';

client/coral-framework/constants/auth.js

@@ -11,6 +11,11 @@ export const CREATE_USERNAME = 'CREATE_USERNAME';
 export const SHOW_CREATEUSERNAME_DIALOG = 'SHOW_CREATEUSERNAME_DIALOG';
 export const HIDE_CREATEUSERNAME_DIALOG = 'HIDE_CREATEUSERNAME_DIALOG';
 
+export const EDIT_USERNAME_REQUEST = 'CREATE_USERNAME_REQUEST';
+export const EDIT_USERNAME_SUCCESS = 'CREATE_USERNAME_SUCCESS';
+export const EDIT_USERNAME_FAILURE = 'CREATE_USERNAME_FAILURE';
+export const EDIT_USERNAME = 'CREATE_USERNAME';
+
 export const FETCH_SIGNUP_REQUEST = 'FETCH_SIGNUP_REQUEST';
 export const FETCH_SIGNUP_FAILURE = 'FETCH_SIGNUP_FAILURE';
 export const FETCH_SIGNUP_SUCCESS = 'FETCH_SIGNUP_SUCCESS';

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

@@ -5,6 +5,7 @@ import GET_COUNTS from './getCounts.graphql';
 import MY_COMMENT_HISTORY from './myCommentHistory.graphql';
 import uniqBy from 'lodash/uniqBy';
 import sortBy from 'lodash/sortBy';
+import isNil from 'lodash/isNil';
 
 function getQueryVariable(variable) {
   let query = window.location.search.substring(1);
@@ -20,6 +21,7 @@ function getQueryVariable(variable) {
   return null;
 }
 
+// get the counts of the top-level comments
 export const getCounts = (data) => ({asset_id, limit, sort}) => {
   return data.fetchMore({
     query: GET_COUNTS,
@@ -28,36 +30,60 @@ export const getCounts = (data) => ({asset_id, limit, sort}) => {
       limit,
       sort
     },
-    updateQuery: (oldData, {fetchMoreResult:{data}}) => {
+    updateQuery: (oldData, {fetchMoreResult:{asset}}) => {
 
       return {
         ...oldData,
         asset: {
           ...oldData.asset,
-          commentCount: data.asset.commentCount
+          commentCount: asset.commentCount
         }
       };
     }
   });
 };
 
+// handle paginated requests for more Comments pertaining to the Asset
 export const loadMore = (data) => ({limit, cursor, parent_id = null, asset_id, sort}, newComments) => {
   return data.fetchMore({
     query: LOAD_MORE,
     variables: {
-      limit,
-      cursor,
-      parent_id,
-      asset_id,
-      sort
+      limit, // how many comments are we returning
+      cursor, // the date of the first/last comment depending on the sort order
+      parent_id, // if null, we're loading more top-level comments, if not, we're loading more replies to a comment
+      asset_id, // the id of the asset we're currently on
+      sort // CHRONOLOGICAL or REVERSE_CHRONOLOGICAL
     },
-    updateQuery: (oldData, {fetchMoreResult:{data:{new_top_level_comments}}}) => {
-
+    updateQuery: (oldData, {fetchMoreResult:{new_top_level_comments}}) => {
       let updatedAsset;
 
-      if (parent_id) {
+      if (!isNil(oldData.comment)) { // loaded replies on a highlighted (permalinked) comment
+
+        let comment = {};
+        if (oldData.comment && oldData.comment.parent) {
+
+          // put comments (replies) onto the oldData.comment.parent object
+          // the initial comment permalinked was a reply
+          const uniqReplies = uniqBy([...new_top_level_comments, ...oldData.comment.parent.replies], 'id');
+          comment.parent = {...oldData.comment.parent, replies: sortBy(uniqReplies, 'created_at')};
+        } else if (oldData.comment) {
+
+          // put the comments (replies) directly onto oldData.comment
+          // the initial comment permalinked was a top-level comment
+          const uniqReplies = uniqBy([...new_top_level_comments, ...oldData.comment.replies], 'id');
+          comment.replies = sortBy(uniqReplies, 'created_at');
+        }
+
+        updatedAsset = {
+          ...oldData,
+          comment: {
+            ...oldData.comment,
+            ...comment
+          }
+        };
+
+      } else if (parent_id) { // If loading more replies
 
-        // If loading more replies
         updatedAsset = {
           ...oldData,
           asset: {
@@ -76,9 +102,8 @@ export const loadMore = (data) => ({limit, cursor, parent_id = null, asset_id, s
             })
           }
         };
-      } else {
+      } else { // If loading more top-level comments
 
-        // If loading more top-level comments
         updatedAsset = {
           ...oldData,
           asset: {
@@ -94,8 +119,11 @@ export const loadMore = (data) => ({limit, cursor, parent_id = null, asset_id, s
   });
 };
 
+// load the comment stream.
 export const queryStream = graphql(STREAM_QUERY, {
   options: () => {
+
+    // where the query string is from the embeded iframe url
     let comment_id = getQueryVariable('comment_id');
     let has_comment = comment_id != null;
 

client/coral-framework/graphql/queries/streamQuery.graphql

@@ -1,10 +1,18 @@
 #import "../fragments/commentView.graphql"
 
-query AssetQuery($asset_id: ID, $asset_url: String!, $comment_id: ID!, $has_comment: Boolean!) {
+query AssetQuery($asset_id: ID, $asset_url: String, $comment_id: ID!, $has_comment: Boolean!) {
+    # the comment here is for loading one comment and it's children, probably after following a permalink
+    # $has_comment is derived from the comment_id query param in the iframe url,
+    # which is in turn pulled from the host page url
     comment(id: $comment_id) @include(if: $has_comment) {
       ...commentView
+      replyCount
+      replies {
+        ...commentView
+      }
       parent {
         ...commentView
+        replyCount
         replies {
           ...commentView
         }
@@ -29,6 +37,10 @@ query AssetQuery($asset_id: ID, $asset_url: String!, $comment_id: ID!, $has_comm
             requireEmailConfirmation
         }
         commentCount
+        totalCommentCount
+        lastComment {
+          id
+        }
         comments(limit: 10) {
             ...commentView
             replyCount

client/coral-framework/helpers/plugins.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import merge from 'lodash/merge';
+import flatten from 'lodash/flatten';
+import plugins from 'pluginsConfig';
+
+export const pluginReducers = merge(
+  ...plugins
+    .filter(o => o.module.reducer)
+    .map(o => ({...o.module.reducer}))
+);
+
+/**
+ * Returns React Elements for given slot.
+ */
+export function getSlotElements(slot, props = {}) {
+  const components = flatten(plugins
+    .filter(o => o.module.slots[slot])
+    .map(o => o.module.slots[slot]));
+  return components
+    .map((component, i) => React.createElement(component, {...props, key: i}));
+}

client/coral-framework/index.js

@@ -1,15 +1,16 @@
 import store from './services/store';
 import pym from './services/PymConnection';
 import I18n from './modules/i18n/i18n';
-import * as authActions from './actions/auth';
-import * as assetActions from './actions/asset';
-import * as notificationActions from './actions/notification';
+import actions from './actions';
+import Slot from './components/Slot';
 
-export {
+// TODO (bc): Deprecate old actions. Spreading actions is now needed.
+
+export default {
   pym,
+  Slot,
   I18n,
   store,
-  authActions,
-  assetActions,
-  notificationActions
+  actions,
+  ...actions
 };

client/coral-framework/loaders/plugins-loader.js

@@ -0,0 +1,33 @@
+/**
+ * Executes `source` to retrieve plugins configuration
+ * and loads the `index.js` of specified plugins.
+ *
+ * Outputs a module that looks like the following:
+ *
+ * module.exports = [{plugin: string, module: object}, ...]
+ *
+ */
+const {stripIndent} = require('common-tags');
+
+function getPluginList(config) {
+  if (config && config.client) {
+    return config.client.map(x => typeof x === 'string' ? x : Object.keys(x)[0]);
+  }
+
+  return [];
+}
+
+module.exports = function(source) {
+  this.cacheable();
+  const config = this.exec(source, this.resourcePath);
+  const plugins = getPluginList(config).map((plugin) => `{
+    module: require('${plugin}/client'),
+    plugin: '${plugin}'
+  }`);
+
+  return stripIndent`
+    module.exports = [
+      ${plugins.join(',')}
+    ];
+  `;
+};

client/coral-framework/reducers/index.js

@@ -1,9 +1,11 @@
 import auth from './auth';
 import user from './user';
 import asset from './asset';
+import {pluginReducers} from '../helpers/plugins';
 
 export default {
   auth,
   user,
   asset,
+  ...pluginReducers
 };

client/coral-framework/services/client.js

@@ -6,9 +6,11 @@ export const client = new ApolloClient({
   queryTransformer: addTypename,
   dataIdFromObject: (result) => {
     if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
-      return result.__typename + result.id; // eslint-disable-line no-underscore-dangle
+      return `${result.__typename}_${result.id}`; // eslint-disable-line no-underscore-dangle
     }
     return null;
   },
   networkInterface: getNetworkInterface()
 });
+
+export default client;

client/coral-framework/services/store.js

@@ -3,9 +3,19 @@ import thunk from 'redux-thunk';
 import mainReducer from '../reducers';
 import {client} from './client';
 
+const apolloErrorReporter = () => next => action => {
+  if (action.type === 'APOLLO_QUERY_ERROR') {
+    console.error(action.error);
+  }
+  return next(action);
+};
+
 const middlewares = [
-  applyMiddleware(client.middleware()),
-  applyMiddleware(thunk)
+  applyMiddleware(
+    client.middleware(),
+    thunk,
+    apolloErrorReporter,
+  ),
 ];
 
 if (window.devToolsExtension) {

client/coral-framework/translations.json

@@ -13,6 +13,7 @@
       "error": "Usernames can contain letters, numbers and _ only"
     },
     "viewMoreComments": "view more comments",
+    "showAllComments": "Show all comments",
     "viewReply": "view reply",
     "viewAllRepliesInitial": "view all {0} replies",
     "viewAllReplies": "view {0} replies",
@@ -56,6 +57,7 @@
     "newCount": "Ver {0} {1} más",
     "comment": "commentario",
     "comments": "commentarios",
+    "showAllComments": "Mostrar todos los comentarios",
     "error": {
       "emailNotVerified": "E-mail {0} no verificado.",
       "email": "No es un e-mail válido",

client/coral-framework/utils/index.js

@@ -0,0 +1,7 @@
+/**
+* getActionSummary
+* retrieves the action summary based on the type and the comment
+*/
+
+export const getActionSummary = (type, comment) =>
+  comment.action_summaries.filter(a => a.__typename === type)[0];

client/coral-plugin-flags/FlagComment.js

@@ -23,14 +23,14 @@ const getPopupMenu = [
       {val: 'This comment is offensive', text: lang.t('comment-offensive')},
       {val: 'This looks like an ad/marketing', text: lang.t('marketing')},
       {val: 'I don\'t agree with this comment', text: lang.t('no-agree-comment')},
-      {val: 'other', text: lang.t('other')}
+      {val: 'Other', text: lang.t('other')}
     ]
     : [
       {val: 'This username is offensive', text: lang.t('username-offensive')},
       {val: 'I don\'t like this username', text: lang.t('no-like-username')},
       {val: 'This user is impersonating', text: lang.t('user-impersonating')},
       {val: 'This looks like an ad/marketing', text: lang.t('marketing')},
-      {val: 'other', text: lang.t('other')}
+      {val: 'Other', text: lang.t('other')}
     ];
     return {
       header: lang.t('step-2-header'),

client/coral-plugin-history/Comment.js

@@ -1,5 +1,5 @@
-import React, { PropTypes } from 'react';
-import { Icon } from '../coral-ui';
+import React, {PropTypes} from 'react';
+import {Icon} from '../coral-ui';
 import styles from './Comment.css';
 import PubDate from '../coral-plugin-pubdate/PubDate';
 import Content from '../coral-plugin-commentcontent/CommentContent';

client/coral-plugin-infobox/InfoBox.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import Markdown from './Markdown';
+
 const packagename = 'coral-plugin-infobox';
 
 const InfoBox = ({enable, content}) =>
 <div
-  className={`${packagename}-info ${enable ? null : ', hidden'}` }>
-  {content}
+  className={`${packagename}-info ${enable ? '' : 'hidden'}` }>
+  <Markdown content={content} />
 </div>;
 
 export default InfoBox;

client/coral-plugin-infobox/Markdown.js

@@ -0,0 +1,23 @@
+import React, {PureComponent, PropTypes} from 'react';
+import marked from 'marked';
+
+const renderer = new marked.Renderer();
+
+// Set link target to `_parent` to work properly in an embed.
+renderer.link = ( href, title, text ) =>
+  `<a target="_parent" href="${href}" title="${title}">${text}</a>`;
+
+marked.setOptions({renderer});
+
+export default class Markdown extends PureComponent {
+  render() {
+    const {content, ...rest} = this.props;
+    const __html = marked(content);
+    return <div {...rest} dangerouslySetInnerHTML={{__html}} />;
+  }
+}
+
+Markdown.propTypes = {
+  content: PropTypes.string,
+};
+

client/coral-plugin-infobox/__tests__/infoBox.spec.js

@@ -3,24 +3,27 @@ import {shallow} from 'enzyme';
 import {expect} from 'chai';
 import InfoBox from '../InfoBox';
 
+const render = props => shallow(<InfoBox {...props} />);
+
 describe('InfoBox', () => {
-  let comment;
-  let render;
-  beforeEach(() => {
-    comment = {};
-    const postItem = (item) => {
-      comment.posted = item;
-      return Promise.resolve(4);
-    };
-    render = shallow(<InfoBox
-      postItem={postItem}
-      updateItem={(e) => comment.text = e.target.value}
-      item_id={'1'}
-      comments={['1', '2', '3']}/>);
+  it('should render hidden InfoBox', () => {
+    const wrapper = render();
+    const className = wrapper.prop('className');
+    expect(className).to.include('-info');
+    expect(className).to.include('hidden');
   });
 
-  it('should render the InfoBox appropriately', () => {
-    expect(render.contains('<div class="InfoBox"')).to.be.truthy;
-    expect(render.contains('<button class="postCommentButton"')).to.be.truthy;
+  it('should render enabled InfoBox', () => {
+    const wrapper = render({enable: true});
+    const className = wrapper.prop('className');
+    expect(className).to.include('-info');
+    expect(className).to.not.include('hidden');
+  });
+
+  it('should render Markdown', () => {
+    const wrapper = render({content: 'x'});
+    const Markddown = wrapper.find('Markdown');
+    expect(Markddown).to.have.length(1);
+    expect(Markddown.prop('content')).to.equal('x');
   });
 });

client/coral-plugin-infobox/__tests__/markdown.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {expect} from 'chai';
+import Markdown from '../Markdown';
+
+const render = props => shallow(<Markdown {...props} />);
+
+describe('Markdown', () => {
+  it('should convert Markdown to html', () => {
+    const wrapper = render({content: '*test*'});
+    const html = wrapper.html();
+    expect(html).to.contain('<em>');
+  });
+
+  it('should set target="_parent" for links', () => {
+    const wrapper = render({content: '[link](https://coralproject.net)'});
+    const html = wrapper.html();
+    expect(html).to.contain('target="_parent"');
+  });
+});

client/coral-plugin-permalinks/PermalinkButton.js

@@ -23,6 +23,10 @@ class PermalinkButton extends React.Component {
   }
 
   toggle () {
+
+    // I wish I could position this with a stylesheet, but top-level comments with
+    // nested replies throws everything off, as well as very long comments
+    this.popover.style.top = `${this.linkButton.offsetTop - 80}px`;
     this.setState({popoverOpen: !this.state.popoverOpen});
   }
 
@@ -48,11 +52,16 @@ class PermalinkButton extends React.Component {
     const {copySuccessful, copyFailure} = this.state;
     return (
       <div className={`${name}-container`}>
-        <button onClick={this.toggle} className={`${name}-button`}>
+        <button
+          ref={ref => this.linkButton = ref}
+          onClick={this.toggle}
+          className={`${name}-button`}>
           {lang.t('permalink.permalink')}
           <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
         </button>
-        <div className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
+        <div
+          ref={ref => this.popover = ref}
+          className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
           <input
             className={`${name}-copy-field`}
             type='text'

client/coral-plugin-permalinks/styles.css

@@ -4,22 +4,15 @@
   box-sizing: border-box;
   /* box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); */
   border: solid 1px rgba(153, 153, 153, 0.33);
-  width: auto;
-  margin: 0 auto;
-  left: 0;
-  margin: 0 5px;
-  top: 0;
   left: 0;
   width: 100%;
-  margin: 0;
-  margin-top: -13px;
 
   &::before {
     content: '';
     border: 10px solid transparent;
     border-top-color: white;
     position: absolute;
-    right: 8.69em;
+    right: 7em;
     bottom: -20px;
     z-index: 2;
   }
@@ -29,7 +22,7 @@
     border: 10px solid transparent;
     border-top-color: rgba(153, 153, 153, 0.33);
     position: absolute;
-    right: 8.69em;
+    right: 7em;
     bottom: -21px;
     z-index: 1;
   }

client/coral-plugin-questionbox/QuestionBox.js

@@ -7,7 +7,9 @@ const QuestionBox = ({enable, content}) =>
     <i className={`${packagename}-icon material-icons bubble`}>chat_bubble</i>
     <i className={`${packagename}-icon material-icons person`}>person</i>
   </div>
-  {content}
+  <div className={`${packagename}-content`}>
+    {content}
+  </div>
 </div>;
 
 export default QuestionBox;

client/coral-settings/containers/ProfileContainer.js

@@ -8,7 +8,6 @@ import {myCommentHistory} from 'coral-framework/graphql/queries';
 import {link} from 'coral-framework/services/PymConnection';
 import NotLoggedIn from '../components/NotLoggedIn';
 import {Spinner} from 'coral-ui';
-import ProfileHeader from '../components/ProfileHeader';
 import CommentHistory from 'coral-plugin-history/CommentHistory';
 
 import translations from '../translations';
@@ -44,7 +43,6 @@ class ProfileContainer extends Component {
 
     return (
       <div>
-        <ProfileHeader username={this.props.userData.username} />
         {
 
           // Hiding bio until moderation can get figured out

client/coral-settings/translations.json

@@ -10,13 +10,13 @@
     "fromSettingsPage": "From the Profile Page you can see your comment history."
   },
   "es":{
-    "profile": "Pérfil",
-    "userNoComment": "No has dejado áun ningún comentario. ¡Unete a la conversación!",
+    "profile": "Perfil",
+    "userNoComment": "No has dejado aún ningún comentario. ¡Únete a la conversación!",
     "allComments": "Todos los comentarios",
-    "profileSettings": "Configuración del pérfil",
+    "profileSettings": "Configuración del perfil",
     "myCommentHistory": "Mi historial de comentarios",
     "signIn": "Entrar",
-    "toAccess": "para acceder a al pérfil",
-    "fromSettingsPage": "Desde la peagina de configuración puedes ver tu historia de comentarios."
+    "toAccess": "para acceder a al perfil",
+    "fromSettingsPage": "Desde la página de configuración puedes ver tu historia de comentarios."
   }
 }

client/coral-sign-in/components/FakeComment.js

@@ -28,10 +28,10 @@ class FakeComment extends React.Component {
           author={{'name': username}}/>
         <PubDate created_at={created_at} />
         <Content body={body} />
-          <div className="commentActionsLeft">
+          <div className="commentActionsLeft comment__action-container">
               <div className={`${'coral-plugin-likes'}-container`}>
-                <button className={`${'coral-plugin-likes'}-button`}>
-                  <span className={`${'coral-plugin-likes'}-button-text`}>{lang.t('like')}</span>
+                <button className={'coral-plugin-likes-button'}>
+                  <span className={'coral-plugin-likes-button-text'}>{lang.t('like')}</span>
                   <i className={`${'coral-plugin-likes'}-icon material-icons`}
                     aria-hidden={true}>thumb_up</i>
                 </button>
@@ -43,16 +43,16 @@ class FakeComment extends React.Component {
                 banned={false}
               />
             </div>
-        <div className="commentActionsRight">
+        <div className="commentActionsRight comment__action-container">
           <div className="coral-plugin-permalinks-container">
             <button className="coral-plugin-permalinks-button">
+              <span className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}>{lang.t('permalink.permalink')}</span>
               <i className="coral-plugin-permalinks-icon material-icons" aria-hidden={true}>link</i>
-              {lang.t('permalink.permalink')}
             </button>
           </div>
           <div className={`${'coral-plugin-flags'}-container`}>
             <button className={`${'coral-plugin-flags'}-button`}>
-              <span className={`${'coral-plugin-flags'}-button-text`}>{lang.t('report')}</span>
+              <span className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}>{lang.t('report')}</span>
               <i className={`${'coral-plugin-flags'}-icon material-icons`}
                 aria-hidden={true}>flag</i>
             </button>

client/coral-sign-in/translations.json

@@ -25,14 +25,14 @@
       "emailInUse": "Email address already in use",
       "emailORusernameInUse": "Email address or Username already in use",
       "requiredField": "This field is required",
-      "passwordsDontMatch": "Passwords don\"t match.",
+      "passwordsDontMatch": "Passwords don't match.",
       "specialCharacters": "Usernames can contain letters, numbers and _ only",
       "checkTheForm": "Invalid Form. Please, check the fields"
     },
     "createdisplay": {
       "writeyourusername": "Edit your username",
       "yourusername": "Your username appears on every comment you post.",
-      "ifyoudontchangeyourname": "If you don\"t change your username at this step, your Facebook display name will appear alongside of all your comments.",
+      "ifyoudontchangeyourname": "If you don't change your username at this step, your Facebook display name will appear alongside of all your comments.",
       "username": "Username",
       "continue": "Continue with the same Facebook username",
       "save": "Save",

client/coral-ui/components/Card.css

@@ -10,7 +10,6 @@
   min-height: 200px;
   overflow: hidden;
   width: 330px;
-  z-index: 1;
   position: relative;
   background: #fff;
   border-radius: 2px;

graph/context.js

@@ -1,7 +1,7 @@
 const loaders = require('./loaders');
 const mutators = require('./mutators');
 
-const plugins = require('../plugins');
+const plugins = require('../services/plugins');
 const debug = require('debug')('talk:graph:context');
 
 /**

graph/helpers/response.js

@@ -0,0 +1,31 @@
+const errors = require('../../errors');
+const {Error: {ValidationError}} = require('mongoose');
+
+/**
+ * Wraps up a promise to return an object with the resolution of the promise
+ * keyed at `key` or an error caught at `errors`.
+ */
+
+const wrapResponse = (key) => (promise) => {
+  return promise.then((value) => {
+    let res = {};
+    if (key) {
+      res[key] = value;
+    }
+    return res;
+  }).catch((err) => {
+    if (err instanceof errors.APIError) {
+      return {
+        errors: [err]
+      };
+    } else if (err instanceof ValidationError) {
+
+      // TODO: wrap this with one of our internal errors.
+      throw err;
+    }
+
+    throw err;
+  });
+};
+
+module.exports = wrapResponse;

graph/hooks.js

@@ -1,5 +1,9 @@
-const {forEachField} = require('graphql-tools');
+const {
+  GraphQLObjectType,
+  GraphQLInterfaceType
+} = require('graphql');
 const debug = require('debug')('talk:graph:schema');
+const Joi = require('joi');
 
 /**
  * XXX taken from graphql-js: src/execution/execute.js, because that function
@@ -22,6 +26,33 @@ const defaultResolveFn = (source, args, context, {fieldName}) => {
   }
 };
 
+// This function is pretty much copied verbatim from the graphql-tools repo:
+// https://github.com/apollographql/graphql-tools/blob/b12973c86e00be209d04af0184780998056051c4/src/schemaGenerator.ts#L180-L194
+// With the small alteration that we look for the `resolveType` function on the
+// schema so we can wrap post hooks around it to provide additional resolve
+// points.
+const forEachField = (schema, fn) => {
+  const typeMap = schema.getTypeMap();
+  Object.keys(typeMap).forEach((typeName) => {
+    const type = typeMap[typeName];
+
+    if (type instanceof GraphQLObjectType || type instanceof GraphQLInterfaceType) {
+
+      // Here we capture the change to extract the resolve type. We pass this
+      // with the `isResolveType = true` to introduce the specific beheviour.
+      if ('resolveType' in type) {
+        fn(type, typeName, '__resolveType', true);
+      }
+
+      const fields = type.getFields();
+      Object.keys(fields).forEach((fieldName) => {
+        const field = fields[fieldName];
+        fn(field, typeName, fieldName);
+      });
+    }
+  });
+};
+
 /**
  * Decorates the schema with pre and post hooks as provided by the Plugin
  * Manager.
@@ -29,7 +60,7 @@ const defaultResolveFn = (source, args, context, {fieldName}) => {
  * @param  {Array}         hooks  hooks to apply to the schema
  * @return {void}
  */
-const decorateWithHooks = (schema, hooks) => forEachField(schema, (field, typeName, fieldName) => {
+const decorateWithHooks = (schema, hooks) => forEachField(schema, (field, typeName, fieldName, isResolveType = false) => {
 
   // Pull out the pre/post hooks from the available hooks.
   const {
@@ -52,6 +83,8 @@ const decorateWithHooks = (schema, hooks) => forEachField(schema, (field, typeNa
       Object.keys(hooks).forEach((hook) => {
         switch (hook) {
         case 'pre':
+          Joi.assert(hooks.pre, Joi.func().maxArity(4));
+
           debug(`adding pre hook to resolver ${typeName}.${fieldName} from plugin '${plugin.name}'`);
 
           if (typeof hooks.pre !== 'function') {
@@ -61,6 +94,8 @@ const decorateWithHooks = (schema, hooks) => forEachField(schema, (field, typeNa
           acc.pre.push(hooks.pre);
           break;
         case 'post':
+          Joi.assert(hooks.pre, Joi.func().maxArity(5));
+
           debug(`adding post hook to resolver ${typeName}.${fieldName} from plugin '${plugin.name}'`);
 
           if (typeof hooks.post !== 'function') {
@@ -85,6 +120,51 @@ const decorateWithHooks = (schema, hooks) => forEachField(schema, (field, typeNa
     return;
   }
 
+  // If this is a resolve type, we need to do some specific things to handle
+  // this type of field.
+  if (isResolveType) {
+
+    // Warn if we have any pre hooks.
+    if (pre.length !== 0) {
+      throw new Error(`invalid pre hooks were found for ${typeName}.${fieldName}, only post hooks are supported on the __resolveType hook`);
+    }
+
+    // This only needs to do something if post hooks are defined.
+    if (post.length === 0) {
+      return;
+    }
+
+    // Ensure it matches the format we expect.
+    Joi.assert(post, Joi.array().items(Joi.func().maxArity(3)), `invalid post hooks were found for ${typeName}.${fieldName}`);
+
+    // Cache the original resolverType function.
+    let resolveType = field.resolveType;
+
+    // Return the function to handle the resolveType hooks.
+    field.resolveType = (obj, context, info) => {
+      let type = resolveType(obj, context, info);
+
+      // Only if a previous resolver was unable to resolve the field type do we
+      // progress to the hooks (in order!) to resolve the field name until we
+      // have resolved it.
+      if (typeof type !== 'undefined' && type != null) {
+        return type;
+      }
+
+      // We will walk through the post hooks until we find the right one. This
+      // follows what redux does to combine existing reducers.
+      for (let i = 0; i < post.length; i++) {
+        let resolveType = post[i];
+        type = resolveType(obj, context, info);
+        if (typeof type !== 'undefined' && type != null) {
+          return type;
+        }
+      }
+    };
+
+    return;
+  }
+
   // Cache the original resolve function, this emulates the beheviour found in
   // graphql-tools: https://github.com/apollographql/graphql-tools/blob/6e9cc124b10d673448386041e6c3d058bc205a02/src/schemaGenerator.ts#L423-L425
   let resolve = field.resolve;
@@ -102,7 +182,7 @@ const decorateWithHooks = (schema, hooks) => forEachField(schema, (field, typeNa
     await Promise.all(pre.map((pre) => pre(obj, args, context, info)));
 
     // Resolve the field.
-    let result = resolve(obj, args, context, info);
+    let result = await resolve(obj, args, context, info);
 
     // Insure all post hooks after we've resolved the field with the result
     // passed in as the fifth argument.

graph/loaders/index.js

@@ -8,7 +8,7 @@ const Metrics = require('./metrics');
 const Settings = require('./settings');
 const Users = require('./users');
 
-const plugins = require('../../plugins');
+const plugins = require('../../services/plugins');
 
 let loaders = [
 

graph/loaders/users.js

@@ -3,11 +3,51 @@ const DataLoader = require('dataloader');
 const util = require('./util');
 
 const UsersService = require('../../services/users');
+const UserModel = require('../../models/user');
 
 const genUserByIDs = (context, ids) => UsersService
   .findByIdArray(ids)
   .then(util.singleJoinBy(ids, 'id'));
 
+/**
+ * Retrieves users based on the passed in query that is filtered by the
+ * current used passed in via the context.
+ * @param  {Object} context   graph context
+ * @param  {Object} query     query terms to apply to the users query
+ */
+const getUsersByQuery = ({user}, {ids, limit, cursor, sort}) => {
+
+  let users = UserModel.find();
+
+  if (ids) {
+    users = users.find({
+      id: {
+        $in: ids
+      }
+    });
+  }
+
+  if (cursor) {
+    if (sort === 'REVERSE_CHRONOLOGICAL') {
+      users = users.where({
+        created_at: {
+          $lt: cursor
+        }
+      });
+    } else {
+      users = users.where({
+        created_at: {
+          $gt: cursor
+        }
+      });
+    }
+  }
+
+  return users
+    .sort({created_at: sort === 'REVERSE_CHRONOLOGICAL' ? -1 : 1})
+    .limit(limit);
+};
+
 /**
  * Creates a set of loaders based on a GraphQL context.
  * @param  {Object} context the context of the GraphQL request
@@ -15,6 +55,7 @@ const genUserByIDs = (context, ids) => UsersService
  */
 module.exports = (context) => ({
   Users: {
+    getByQuery: (query) => getUsersByQuery(context, query),
     getByID: new DataLoader((ids) => genUserByIDs(context, ids))
   }
 });