Merge pull request #661 from coralproject/comment-stream-cleanup

Refinement of design for banned and suspend user messaging on comment stream.

.eslintignore

@@ -1,4 +1,5 @@
 dist
+docs
 client/lib
 **/*.html
 plugins/*
@@ -9,4 +10,5 @@ plugins/*
 !plugins/coral-plugin-like
 !plugins/coral-plugin-mod
 !plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
 node_modules

.gitignore

@@ -23,5 +23,6 @@ plugins/*
 !plugins/coral-plugin-like
 !plugins/coral-plugin-mod
 !plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
 
 **/node_modules/*

PLUGINS.md

@@ -280,6 +280,41 @@ send data to the client. If the type in question contains args, clients may subs
 
 For more information, see the [Apollo Docs](https://github.com/apollographql/graphql-subscriptions).
 
+#### Field: `tokenUserNotFound`
+
+```js
+tokenUserNotFound: async ({jwt, token}) => {
+  let profile = await someExternalService(token);
+  if (!profile) {
+    return null;
+  }
+
+  let user = await UserModel.findOneAndUpdate({
+    id: profile.id
+  }, {
+    id: profile.id,
+    username: profile.username,
+    lowercaseUsername: profile.username.toLowerCase(),
+    roles: [],
+    profiles: []
+  }, {
+    setDefaultsOnInsert: true,
+    new: true,
+    upsert: true
+  });
+
+  return user;
+}
+```
+
+The `tokenUserNotFound` hook allows auth integrations to hook into the event
+when a valid token is provided but a user can't be found in the database that
+matches the provided id.
+
+The function is async, and should return the user object that was created in the
+database, or null if the user wasn't found. The `jwt` paramenter of the object
+is the unpacked token, while `token` is the original jwt token string.
+
 #### Field: `router`
 
 ```js

README.md

@@ -17,7 +17,6 @@ To set up a development environment or build from source, see [INSTALL.md](https
 
 To launch a Talk server of your own from your browser without any need to muck about in a terminal or think about engineering concepts, stay tuned. We will launch [our installer](https://github.com/coralproject/talk-install) shortly!
 
-
 ### Configuration
 
 The Talk application looks for the following configuration values either as environment variables:
@@ -45,6 +44,12 @@ sign and verify tokens via a `HS256` algorithm.
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.
 
+### Using Trust
+
+Talk ships with core components we call "Trust". This allows Talk to automate certain actions based on previous user behavior.
+
+Our first feature is the notion of Karma. Talk will automatically pre-moderate comments of users who have a negative karma score. You can [see more how karma works here](/services/karma.js).
+
 ## Supported Browsers
 
 ### Web

app.js

@@ -6,6 +6,7 @@ const helmet = require('helmet');
 const authentication = require('./middleware/authentication');
 const {passport} = require('./services/passport');
 const plugins = require('./services/plugins');
+const i18n = require('./services/i18n');
 const enabled = require('debug').enabled;
 const errors = require('./errors');
 const {createGraphOptions} = require('./graph');
@@ -157,6 +158,8 @@ app.use('/', (err, req, res, next) => {
     console.error(err);
   }
 
+  i18n.init(req);
+  
   if (err instanceof errors.APIError) {
     res.status(err.status);
     res.render('error', {

bin/cli-assets

@@ -5,7 +5,7 @@
  */
 
 const program = require('./commander');
-const parseDuration = require('parse-duration');
+const parseDuration = require('ms');
 const Table = require('cli-table');
 const AssetModel = require('../models/asset');
 const mongoose = require('../services/mongoose');

client/.eslintrc.json

@@ -4,21 +4,20 @@
         "es6": true,
         "mocha": true
     },
-    "extends": "../.eslintrc.json",
     "parserOptions": {
+        "sourceType": "module",
         "ecmaFeatures": {
             "experimentalObjectRestSpread": true,
             "jsx": true
-        },
-        "sourceType": "module"
+        }
     },
     "parser": "babel-eslint",
     "plugins": [
         "react"
     ],
     "rules": {
-      "react/jsx-uses-react": "error",
-      "react/jsx-uses-vars": "error",
-      "no-console": ["warn", { "allow": ["warn", "error"] }]
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error",
+        "no-console": ["warn", { "allow": ["warn", "error"] }]
     }
 }

client/coral-admin/config.json

@@ -1,3 +0,0 @@
-{
-  "basePath": "admin"
-}

client/coral-admin/src/AppRouter.js

@@ -1,25 +1,20 @@
 import React from 'react';
 import {Router, Route, IndexRedirect, browserHistory} from 'react-router';
 
-import Stories from 'containers/Stories/Stories';
-import Configure from 'containers/Configure/Configure';
-import LayoutContainer from 'containers/LayoutContainer';
-import InstallContainer from 'containers/Install/InstallContainer';
+import Configure from 'routes/Configure';
+import Dashboard from 'routes/Dashboard';
+import Install from 'routes/Install';
+import Stories from 'routes/Stories';
+import {CommunityLayout, Community} from 'routes/Community';
+import {ModerationLayout, Moderation} from 'routes/Moderation';
 
-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';
+import Layout from 'containers/Layout';
 
 const routes = (
   <div>
-    <Route exact path="/admin/install" component={InstallContainer}/>
-    <Route path='/admin' component={LayoutContainer}>
+    <Route exact path="/admin/install" component={Install}/>
+    <Route path='/admin' component={Layout}>
       <IndexRedirect to='/admin/moderate/all' />
-      <Route path='community' component={CommunityContainer} />
       <Route path='configure' component={Configure} />
       <Route path='stories' component={Stories} />
       <Route path='dashboard' component={Dashboard} />
@@ -27,11 +22,11 @@ const routes = (
       {/* Community Routes */}
 
       <Route path='community' component={CommunityLayout}>
-        <Route path='flagged' components={CommunityContainer}>
-          <Route path=':id' components={CommunityContainer} />
+        <Route path='flagged' components={Community}>
+          <Route path=':id' components={Community} />
         </Route>
-        <Route path='people' components={CommunityContainer}>
-          <Route path=':id' components={CommunityContainer} />
+        <Route path='people' components={Community}>
+          <Route path=':id' components={Community} />
         </Route>
         <IndexRedirect to='flagged' />
       </Route>
@@ -39,22 +34,22 @@ const routes = (
       {/* Moderation Routes */}
 
       <Route path='moderate' component={ModerationLayout}>
-        <Route path='all' components={ModerationContainer}>
-          <Route path=':id' components={ModerationContainer} />
+        <Route path='all' components={Moderation}>
+          <Route path=':id' components={Moderation} />
         </Route>
-        <Route path='accepted' components={ModerationContainer}>
-          <Route path=':id' components={ModerationContainer} />
+        <Route path='accepted' components={Moderation}>
+          <Route path=':id' components={Moderation} />
         </Route>
-        <Route path='premod' components={ModerationContainer}>
-          <Route path=':id' components={ModerationContainer} />
+        <Route path='premod' components={Moderation}>
+          <Route path=':id' components={Moderation} />
         </Route>
-        <Route path='rejected' components={ModerationContainer}>
-          <Route path=':id' components={ModerationContainer} />
+        <Route path='rejected' components={Moderation}>
+          <Route path=':id' components={Moderation} />
         </Route>
-        <Route path='flagged' components={ModerationContainer}>
-          <Route path=':id' components={ModerationContainer} />
+        <Route path='flagged' components={Moderation}>
+          <Route path=':id' components={Moderation} />
         </Route>
-        <Route path=':id' components={ModerationContainer} />
+        <Route path=':id' components={Moderation} />
         <IndexRedirect to='premod' />
       </Route>
     </Route>

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

@@ -5,7 +5,7 @@ export const singleView = () => ({type: actions.SINGLE_VIEW});
 
 // Ban User Dialog
 export const showBanUserDialog = (user, commentId, commentStatus, showRejectedNote) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId, commentStatus, showRejectedNote});
-export const hideBanUserDialog = (showDialog) => ({type: actions.HIDE_BANUSER_DIALOG, showDialog});
+export const hideBanUserDialog = () => ({type: actions.HIDE_BANUSER_DIALOG});
 
 // Suspend User Dialog
 export const showSuspendUserDialog = (userId, username, commentId, commentStatus) =>
@@ -27,3 +27,27 @@ export const hideShortcutsNote = () => {
 
 export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
 export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
+
+export const setSortOrder = (order) => ({
+  type: actions.SET_SORT_ORDER,
+  order
+});
+
+export const changeUserDetailStatuses = (tab) => {
+  let statuses;
+  if (tab === 'all') {
+    statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'];
+  } else if (tab === 'rejected') {
+    statuses = ['REJECTED'];
+  }
+  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
+};
+
+export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
+
+export const toggleSelectCommentInUserDetail = (id, active) => {
+  return {
+    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
+    id
+  };
+};

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

@@ -1,25 +1,27 @@
 import React, {PropTypes} from 'react';
 import styles from './ModerationList.css';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../containers/ModerationQueue/helpers/moderationQueueActionsMap';
+import {menuActionsMap} from '../routes/Moderation/helpers/moderationQueueActionsMap';
+
+import t from 'coral-framework/services/i18n';
 
 const ActionButton = ({type = '', active, ...props}) => {
   const typeName = type.toLowerCase();
   let text = menuActionsMap[type].text;
 
-  if (text === 'Approve' && active) {
-    text = 'Approved';
-  } else if (text === 'Reject' && active) {
-    text = 'Rejected';
+  if (text === 'approve' && active) {
+    text = 'approved';
+  } else if (text === 'reject' && active) {
+    text = 'rejected';
   }
 
   return (
     <Button
-      className={`${typeName} ${styles.actionButton} ${active ? styles[`${typeName}__active`] : ''}`}
+      className={`${typeName} ${styles.actionButton} ${props.minimal ? styles.minimal : ''} ${active ? styles[`${typeName}__active`] : ''}`}
       cStyle={typeName}
       icon={menuActionsMap[type].icon}
       onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
-    >{text}</Button>
+    >{props.minimal ? '' : t(`modqueue.${text}`)}</Button>
   );
 };
 

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

@@ -5,9 +5,7 @@ import cn from 'classnames';
 import {findDOMNode} from 'react-dom';
 import styles from './ActionsMenu.css';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 let count = 0;
 
@@ -43,7 +41,7 @@ class ActionsMenu extends React.Component {
           onClick={this.syncOpenState}
           icon={this.props.icon}
           raised>
-          {lang.t('modqueue.actions')}
+          {t('modqueue.actions')}
           <Icon
             name={this.state.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
             className={styles.arrowIcon}

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

@@ -2,10 +2,8 @@ import React, {PropTypes} from 'react';
 import Layout from 'coral-admin/src/components/ui/Layout';
 import styles from './NotFound.css';
 import {Button, TextField, Alert, Success} from 'coral-ui';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
+import t from 'coral-framework/services/i18n';
 import Recaptcha from 'react-recaptcha';
-const lang = new I18n(translations);
 
 class AdminLogin extends React.Component {
 
@@ -37,7 +35,7 @@ class AdminLogin extends React.Component {
     const {errorMessage, loginMaxExceeded, recaptchaPublic} = this.props;
     const signInForm = (
       <form onSubmit={this.handleSignIn}>
-        {errorMessage && <Alert>{lang.t(`errors.${errorMessage}`)}</Alert>}
+        {errorMessage && <Alert>{t(`error.${errorMessage}`)}</Alert>}
         <TextField
           label='Email Address'
           value={this.state.email}

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

@@ -1,17 +1,14 @@
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations.json';
 import React, {PropTypes} from 'react';
 import Modal from 'components/Modal';
 import styles from './ModerationKeysModal.css';
-
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 const shortcuts = [
   {
     title: 'modqueue.navigation',
     shortcuts: {
-      'j': 'modqueue.nextcomment',
-      'k': 'modqueue.prevcomment',
+      'j': 'modqueue.next_comment',
+      'k': 'modqueue.prev_comment',
       's': 'modqueue.singleview',
       '?': 'modqueue.thismenu'
     }
@@ -40,29 +37,29 @@ export default class ModerationKeysModal extends React.Component {
       <div>
         <div className={styles.callToAction} style={{display: shortcutsNoteVisible === 'show' ? 'block' : 'none'}}>
           <div onClick={hideShortcutsNote} className={styles.closeButton}>×</div>
-          <p className={styles.ctaHeader}>{lang.t('modqueue.mod-faster')}</p>
-          <p><strong>{lang.t('modqueue.try-these')}:</strong></p>
+          <p className={styles.ctaHeader}>{t('modqueue.mod_faster')}</p>
+          <p><strong>{t('modqueue.try_these')}:</strong></p>
           <ul>
-            <li><span>{lang.t('modqueue.approve')}</span> <span className={styles.smallKey}>t</span></li>
-            <li><span>{lang.t('modqueue.reject')}</span> <span className={styles.smallKey}>r</span></li>
+            <li><span>{t('modqueue.approve')}</span> <span className={styles.smallKey}>t</span></li>
+            <li><span>{t('modqueue.reject')}</span> <span className={styles.smallKey}>r</span></li>
           </ul>
-          <p><span>{lang.t('modqueue.view-more-shortcuts')}</span> <span className={styles.smallKey}>{lang.t('modqueue.shift-key')}</span> + <span className={styles.smallKey}>/</span></p>
+          <p><span>{t('modqueue.view_more_shortcuts')}</span> <span className={styles.smallKey}>{t('modqueue.shift_key')}</span> + <span className={styles.smallKey}>/</span></p>
         </div>
         <Modal open={open} onClose={onClose}>
-          <h3>{lang.t('modqueue.shortcuts')}</h3>
+          <h3>{t('modqueue.shortcuts')}</h3>
           <div className={styles.container}>
             {shortcuts.map((shortcut, i) => (
               <table className={styles.table} key={i}>
                 <thead>
                   <tr>
-                    <th>{lang.t(shortcut.title)}</th>
+                    <th>{t(shortcut.title)}</th>
                   </tr>
                 </thead>
                 <tbody>
                   {Object.keys(shortcut.shortcuts).map((key) => (
                     <tr key={`${key}tr`}>
                       <td className={styles.shortcut}><span className={styles.key}>{key}</span></td>
-                      <td>{lang.t(shortcut.shortcuts[key])}</td>
+                      <td>{t(shortcut.shortcuts[key])}</td>
                     </tr>
                   ))}
                 </tbody>

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

@@ -189,6 +189,12 @@
   width: 140px;
 }
 
+.minimal {
+  width: 45px;
+  min-width: 0;
+  float: left;
+}
+
 .approve__active {
   box-shadow: none;
   color: white;

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

@@ -2,8 +2,7 @@ import React, {PropTypes} from 'react';
 import {Navigation, Drawer} from 'react-mdl';
 import {IndexLink, Link} from 'react-router';
 import styles from './Drawer.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
 
 const CoralDrawer = ({handleLogout, auth}) => (
@@ -15,7 +14,7 @@ const CoralDrawer = ({handleLogout, auth}) => (
             className={styles.navLink}
             to="/admin/dashboard"
             activeClassName={styles.active}>
-            {lang.t('configure.dashboard')}
+            {t('configure.dashboard')}
           </IndexLink>
           {
             can(auth.user, 'MODERATE_COMMENTS') && (
@@ -23,19 +22,19 @@ const CoralDrawer = ({handleLogout, auth}) => (
                 className={styles.navLink}
                 to="/admin/moderate"
                 activeClassName={styles.active}>
-                {lang.t('configure.moderate')}
+                {t('configure.moderate')}
               </Link>
             )
           }
           <Link className={styles.navLink}
             to="/admin/stories"
             activeClassName={styles.active}>
-            {lang.t('configure.stories')}
+            {t('configure.stories')}
           </Link>
           <Link className={styles.navLink}
             to="/admin/community"
             activeClassName={styles.active}>
-            {lang.t('configure.community')}
+            {t('configure.community')}
           </Link>
           {
             can(auth.user, 'UPDATE_CONFIG') &&
@@ -44,7 +43,7 @@ const CoralDrawer = ({handleLogout, auth}) => (
                 className={styles.navLink}
                 to="/admin/configure"
                 activeClassName={styles.active}>
-                {lang.t('configure.configure')}
+                {t('configure.configure')}
               </Link>
             )
           }
@@ -60,6 +59,4 @@ CoralDrawer.propTypes = {
   restricted: PropTypes.bool // hide app elements from a logged out user
 };
 
-const lang = new I18n(translations);
-
 export default CoralDrawer;

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

@@ -73,6 +73,8 @@
   font-weight: 500;
   background-color: transparent;
   transition: background-color 200ms;
+  font-weight: 100;
+  letter-spacing: .8;
 
   &:hover {
     background-color: #232323;
@@ -80,6 +82,7 @@
 
   &.active {
     background-color: #232323;
+    font-weight: 400;
   }
 }
 

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

@@ -2,8 +2,7 @@ import React, {PropTypes} from 'react';
 import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
 import {Link, IndexLink} from 'react-router';
 import styles from './Header.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import t from 'coral-framework/services/i18n';
 import {Logo} from './Logo';
 import {can} from 'coral-framework/services/perms';
 
@@ -23,7 +22,7 @@ const CoralHeader = ({
               className={styles.navLink}
               to="/admin/dashboard"
               activeClassName={styles.active}>
-              {lang.t('configure.dashboard')}
+              {t('configure.dashboard')}
             </IndexLink>
             {
               can(auth.user, 'MODERATE_COMMENTS') && (
@@ -32,7 +31,7 @@ const CoralHeader = ({
                   className={styles.navLink}
                   to="/admin/moderate"
                   activeClassName={styles.active}>
-                  {lang.t('configure.moderate')}
+                  {t('configure.moderate')}
                 </Link>
               )
             }
@@ -41,14 +40,14 @@ const CoralHeader = ({
               className={styles.navLink}
               to="/admin/stories"
               activeClassName={styles.active}>
-              {lang.t('configure.stories')}
+              {t('configure.stories')}
             </Link>
             <Link
               id='communityNav'
               className={styles.navLink}
               to="/admin/community"
               activeClassName={styles.active}>
-              {lang.t('configure.community')}
+              {t('configure.community')}
             </Link>
             {
               can(auth.user, 'UPDATE_CONFIG') && (
@@ -57,7 +56,7 @@ const CoralHeader = ({
                   className={styles.navLink}
                   to="/admin/configure"
                   activeClassName={styles.active}>
-                  {lang.t('configure.configure')}
+                  {t('configure.configure')}
                 </Link>
               )
             }
@@ -71,8 +70,8 @@ const CoralHeader = ({
               <div>
                 <IconButton name="settings" id="menu-settings"/>
                 <Menu target="menu-settings" align="right">
-                  <MenuItem onClick={() => showShortcuts(true)}>{lang.t('configure.shortcuts')}</MenuItem>
-                  <MenuItem onClick={handleLogout}>{lang.t('configure.sign-out')}</MenuItem>
+                  <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                  <MenuItem onClick={handleLogout}>{t('configure.sign_out')}</MenuItem>
                 </Menu>
               </div>
             </li>
@@ -91,6 +90,4 @@ CoralHeader.propTypes = {
   handleLogout: PropTypes.func.isRequired
 };
 
-const lang = new I18n(translations);
-
 export default CoralHeader;

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

@@ -7,3 +7,8 @@ export const SHOW_SUSPEND_USER_DIALOG = 'SHOW_SUSPEND_USER_DIALOG';
 export const HIDE_SUSPEND_USER_DIALOG = 'HIDE_SUSPEND_USER_DIALOG';
 export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
 export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
+export const SET_SORT_ORDER = 'MODERATION_SET_SORT_ORDER';
+export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
+export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
+export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
+export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';

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

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const Loading = () => (
-  <h1> Loading results </h1>
-);
-
-export default Loading;

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

@@ -1,81 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {SelectField, Option} from 'react-mdl-selectfield';
-import styles from './Community.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations';
-import {setRole, setCommenterStatus} from '../../actions/community';
-
-const lang = new I18n(translations);
-
-class Table extends Component {
-
-  constructor (props) {
-    super(props);
-    this.onRoleChange = this.onRoleChange.bind(this);
-  }
-
-  onRoleChange (id, role) {
-    this.props.dispatch(setRole(id, role));
-  }
-
-  onCommenterStatusChange (id, status) {
-    this.props.dispatch(setCommenterStatus(id, status));
-  }
-
-  render () {
-    const {headers, commenters, onHeaderClickHandler} = this.props;
-
-    return (
-      <table className={`mdl-data-table ${styles.dataTable}`}>
-        <thead>
-          <tr>
-            {headers.map((header, i) =>(
-              <th
-              key={i}
-              className="mdl-data-table__cell--non-numeric"
-              onClick={() => onHeaderClickHandler({field: header.field})}>
-                {header.title}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {commenters.map((row, i)=> (
-            <tr key={i}>
-              <td className="mdl-data-table__cell--non-numeric">
-                {row.username}
-                <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
-              </td>
-              <td className="mdl-data-table__cell--non-numeric">
-                {row.created_at}
-              </td>
-              <td className="mdl-data-table__cell--non-numeric">
-                <SelectField label={'Select me'} value={row.status || ''}
-                  className={styles.selectField}
-                  label={lang.t('community.status')}
-                  onChange={(status) => this.onCommenterStatusChange(row.id, status)}>
-                  <Option value={'ACTIVE'}>{lang.t('community.active')}</Option>
-                  <Option value={'BANNED'}>{lang.t('community.banned')}</Option>
-                </SelectField>
-              </td>
-              <td className="mdl-data-table__cell--non-numeric">
-                <SelectField label={'Select me'} value={row.roles[0] || ''}
-                  className={styles.selectField}
-                  label={lang.t('community.role')}
-                  onChange={(role) => this.onRoleChange(row.id, role)}>
-                  <Option value={''}>.</Option>
-                  <Option value={'STAFF'}>{lang.t('community.staff')}</Option>
-                  <Option value={'MODERATOR'}>{lang.t('community.moderator')}</Option>
-                  <Option value={'ADMIN'}>{lang.t('community.admin')}</Option>
-                </SelectField>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    );
-  }
-}
-
-export default connect((state) => ({commenters: state.community.get('accounts')}))(Table);

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import styles from './Dashboard.css';
-import {compose} from 'react-apollo';
-import {connect} from 'react-redux';
-import {getMetrics} from 'coral-admin/src/graphql/queries';
-import FlagWidget from './FlagWidget';
-import ActivityWidget from './ActivityWidget';
-import CountdownTimer from 'coral-admin/src/components/CountdownTimer';
-
-import {Spinner} from 'coral-ui';
-
-class Dashboard extends React.Component {
-
-  reloadData = () => {
-    this.props.data.refetch();
-  }
-
-  render () {
-
-    if (this.props.data && this.props.data.loading) {
-      return <Spinner />;
-    }
-
-    const {data: {assetsByActivity, assetsByFlag}} = this.props;
-
-    return (
-      <div>
-        <CountdownTimer handleTimeout={this.reloadData} />
-        <div className={styles.Dashboard}>
-          <FlagWidget assets={assetsByFlag} />
-          <ActivityWidget assets={assetsByActivity} />
-        </div>
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => {
-  return {
-    settings: state.settings.toJS(),
-    moderation: state.moderation.toJS()
-  };
-};
-
-export default compose(
-  connect(mapStateToProps),
-  getMetrics
-)(Dashboard);

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

@@ -1,101 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import styles from './style.css';
-import {Wizard, WizardNav} from 'coral-ui';
-import Layout from 'coral-admin/src/components/ui/Layout';
-
-import {
-  goToStep,
-  nextStep,
-  submitUser,
-  checkInstall,
-  previousStep,
-  finishInstall,
-  submitSettings,
-  updateUserFormData,
-  updateSettingsFormData,
-  updatePermittedDomains
-} from '../../actions/install';
-
-import InitialStep from './components/Steps/InitialStep';
-import AddOrganizationName from './components/Steps/AddOrganizationName';
-import CreateYourAccount from './components/Steps/CreateYourAccount';
-import PermittedDomainsStep from './components/Steps/PermittedDomainsStep';
-import FinalStep from './components/Steps/FinalStep';
-
-class InstallContainer extends Component {
-  componentDidMount() {
-    const {checkInstall} = this.props;
-    checkInstall(() => {
-      this.context.router.push('/admin');
-    });
-  }
-
-  render() {
-    const {install} = this.props;
-
-    return (
-      <Layout restricted={true}>
-        <div className={styles.Install}>
-          {
-            !install.alreadyInstalled ? (
-              <div>
-                <h2>Welcome to the Coral Project</h2>
-                { install.step !== 0 ? <WizardNav items={install.navItems} currentStep={install.step} icon='check'/> : null }
-                <Wizard currentStep={install.step} {...this.props}>
-                  <InitialStep/>
-                  <AddOrganizationName/>
-                  <CreateYourAccount/>
-                  <PermittedDomainsStep/>
-                  <FinalStep/>
-                </Wizard>
-              </div>
-            ) : (
-              <div>Talk is already installed</div>
-            )
-          }
-        </div>
-      </Layout>
-    );
-  }
-}
-
-InstallContainer.contextTypes = {
-  router: React.PropTypes.object
-};
-
-const mapStateToProps = (state) => ({
-  install: state.install.toJS()
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  nextStep: () => dispatch(nextStep()),
-  goToStep: (step) => dispatch(goToStep(step)),
-  previousStep: () => dispatch(previousStep()),
-  finishInstall: () => dispatch(finishInstall()),
-  checkInstall: (next) => dispatch(checkInstall(next)),
-  handleDomainsChange: (value) => {
-    dispatch(updatePermittedDomains(value));
-  },
-  handleSettingsChange: (e) => {
-    const {name, value} = e.currentTarget;
-    dispatch(updateSettingsFormData(name, value));
-  },
-  handleUserChange: (e) => {
-    const {name, value} = e.currentTarget;
-    dispatch(updateUserFormData(name, value));
-  },
-  handleSettingsSubmit: (e) => {
-    e.preventDefault();
-    dispatch(submitSettings());
-  },
-  handleUserSubmit: (e) => {
-    e.preventDefault();
-    dispatch(submitUser());
-  }
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(InstallContainer);

client/coral-admin/src/containers/Install/components/Steps/InitialStep.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import styles from './style.css';
-import {Button} from 'coral-ui';
-
-const lang = new I18n(translations);
-import translations from '../../translations.json';
-import I18n from 'coral-framework/modules/i18n/i18n';
-
-const InitialStep = (props) => {
-  const {nextStep} = props;
-  return (
-    <div className={styles.step}>
-      <p>{lang.t('INITIAL.DESCRIPTION')}</p>
-      <Button cStyle='green' onClick={nextStep} raised>{lang.t('INITIAL.SUBMIT')}</Button>
-    </div>
-  );
-};
-
-export default InitialStep;

client/coral-admin/src/containers/Install/translations.json

@@ -1,58 +0,0 @@
-{
-  "en": {
-    "INITIAL" : {
-      "DESCRIPTION": "Let's set up your Talk community in just a few short steps.",
-      "SUBMIT": "Get Started"
-    },
-    "ADD_ORGANIZATION": {
-      "DESCRIPTION": "Please tell us the name of your organization. This will appear in emails when inviting new team members.",
-      "LABEL": "Organization Name",
-      "SAVE": "Save"
-    },
-    "CREATE": {
-      "EMAIL": "Email address",
-      "USERNAME": "Username",
-      "PASSWORD": "Password",
-      "CONFIRM_PASSWORD": "Confirm Password",
-      "SAVE": "Save"
-    },
-    "PERMITTED_DOMAINS": {
-      "TITLE": "Permitted domains",
-      "DESCRIPTION": "Enter the domains you would like to permit for Talk, e.g. your local, staging and production environments (ex. localhost:3000, staging.domain.com, domain.com).",
-      "SUBMIT": "Finish install"
-    },
-    "FINAL": {
-      "DESCRIPTION": "Thanks for installing Talk! We sent an email to verify your email address. While you finish setting up the account, you can start engaging with your readers now.",
-      "LAUNCH": "Launch Talk",
-      "CLOSE": "Close this Installer"
-    }
-  },
-  "es": {
-    "INITIAL" : {
-      "DESCRIPTION": "Configuremos tu comunidad de Talk en sólo algunos pasos.",
-      "SUBMIT": "Empezá!"
-    },
-    "ADD_ORGANIZATION": {
-      "DESCRIPTION": "Por favor, dinos el nombre de tu organización. Este aparecerá en los emails cuando invites nuevos miembros.",
-      "LABEL": "Nombre de la Organización",
-      "SAVE": "Guardar"
-    },
-    "CREATE": {
-      "EMAIL": "Dirección de E-Mail",
-      "USERNAME": "Usuario",
-      "PASSWORD": "Contraseña",
-      "CONFIRM_PASSWORD": "Confirmar contraseña",
-      "SAVE": "Guardar"
-    },
-    "PERMITTED_DOMAINS": {
-      "TITLE": "Dominios Permitidos",
-      "DESCRIPTION": "Agrega dominios permitidos a Talk, e.g. tu localhost, staging y ambientes de production  (ex. localhost:3000, staging.domain.com, domain.com).",
-      "SUBMIT": "Finalizar instalación"
-    },
-    "FINAL": {
-      "DESCRIPTION": "Gracias por instalar Talk! Te enviamos un email para verificar tu identidad. Mientras se termina de configurar la cuenta, ya puedes empezar a interactuar con tus lectores",
-      "LAUNCH": "Lanzar Talk",
-      "CLOSE": "Cerrar este instalador"
-    }
-  }
-}

client/coral-admin/src/containers/ModerationQueue/UserDetail.css

@@ -1,41 +0,0 @@
-.copyButton {
-  float: right;
-  top: -10px;
-}
-
-.memberSince {
-  clear: both;
-}
-
-.small {
-  color: #aaa;
-}
-
-.stats {
-  display: flex;
-
-  .stat {
-    margin: 0 4px 12px;
-  }
-
-  .stat:last-child {
-    margin-right: 0;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .stat p:first-child {
-    font-weight: bold;
-  }
-}
-
-.profileEmail {
-  border: none;
-  background-color: transparent;
-  font-size: 16px;
-  position: absolute;
-  width: 100%;
-  outline: none;
-}

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

@@ -1,74 +0,0 @@
-import React, {PropTypes} from 'react';
-import {Button, Drawer} from 'coral-ui';
-import styles from './UserDetail.css';
-import {compose} from 'react-apollo';
-import {getUserDetail} from 'coral-admin/src/graphql/queries';
-import Slot from 'coral-framework/components/Slot';
-
-class UserDetail extends React.Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired
-  }
-
-  copyPermalink = () => {
-    this.profile.select();
-    try {
-      document.execCommand('copy');
-    } catch (e) {
-
-      /* nothing */
-    }
-  }
-
-  render () {
-    const {data, hideUserDetail} = this.props;
-
-    if (!('user' in data)) {
-      return null;
-    }
-
-    const {user, totalComments, rejectedComments} = data;
-    const localProfile = user.profiles.find((p) => p.provider === 'local');
-    let profile;
-    if (localProfile) {
-      profile = localProfile.id;
-    }
-
-    let rejectedPercent = rejectedComments / totalComments;
-    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
-
-      // if totalComments is 0, you're dividing by zero, which is naughty
-      rejectedPercent = 0;
-    }
-
-    return (
-      <Drawer handleClickOutside={hideUserDetail}>
-        <h3>{user.username}</h3>
-        <Button className={styles.copyButton} onClick={this.copyPermalink}>Copy</Button>
-        {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
-        <Slot fill="userProfile" user={user} />
-        <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
-        <hr/>
-        <p>
-          <strong>Account summary</strong>
-          <br/><small className={styles.small}>Data represents the last six months of activity</small>
-        </p>
-        <div className={styles.stats}>
-          <div className={styles.stat}>
-            <p>Total Comments</p>
-            <p>{totalComments}</p>
-          </div>
-          <div className={styles.stat}>
-            <p>Reject Rate</p>
-            <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
-          </div>
-        </div>
-      </Drawer>
-    );
-  }
-}
-
-export default compose(
-  getUserDetail
-)(UserDetail);

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

@@ -1,34 +0,0 @@
-import React, {PropTypes} from 'react';
-import {Button} from 'coral-ui';
-import styles from './styles.css';
-
-const LoadMore = ({comments, loadMore, sort, tab, assetId, showLoadMore}) =>
-  <div className={styles.loadMoreContainer}>
-    {
-      showLoadMore && <Button
-        className={styles.loadMore}
-        onClick={() => {
-          const lastComment = comments[comments.length - 1];
-          const cursor = lastComment ? lastComment.created_at : null;
-          return loadMore({
-            cursor,
-            sort,
-            tab,
-            asset_id: assetId
-          });
-        }}>
-        Load More
-      </Button>
-    }
-  </div>;
-
-LoadMore.propTypes = {
-  comments: PropTypes.array.isRequired,
-  loadMore: PropTypes.func.isRequired,
-  sort: PropTypes.oneOf(['CHRONOLOGICAL', 'REVERSE_CHRONOLOGICAL']).isRequired,
-  tab: PropTypes.oneOf(['rejected', 'premod', 'flagged', 'all', 'accepted']).isRequired,
-  assetId: PropTypes.string,
-  showLoadMore: PropTypes.bool.isRequired
-};
-
-export default LoadMore;

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

@@ -1,14 +0,0 @@
-export const actionsMap = {
-  PREMOD: ['APPROVE', 'REJECT'],
-  FLAGGED: ['APPROVE', 'REJECT'],
-  REJECTED: ['APPROVE', 'REJECTED']
-};
-
-export const menuActionsMap = {
-  'REJECT': {status: 'REJECTED', text: 'Reject', icon: 'close', key: 'r'},
-  'REJECTED': {status: 'REJECTED', text: 'Rejected', icon: 'close'},
-  'APPROVE': {status: 'ACCEPTED', text: 'Approve', icon: 'done', key: 't'},
-  'FLAGGED': {status: 'FLAGGED', text: 'Flag', icon: 'flag', filter: 'Untouched'},
-  'BAN': {status: 'BANNED', text: 'Ban User', icon: 'not interested'},
-  '': {icon: 'done'}
-};

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

@@ -1,187 +0,0 @@
-import React, {Component} from 'react';
-import styles from './Stories.css';
-import {connect} from 'react-redux';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import {fetchAssets, updateAssetState} from '../../actions/assets';
-import translations from '../../translations.json';
-import {Link} from 'react-router';
-
-import {Pager, Icon} from 'coral-ui';
-import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl';
-import EmptyCard from 'coral-admin/src/components/EmptyCard';
-
-const limit = 25;
-
-class Stories extends Component {
-
-  state = {
-    search: '',
-    sort: 'desc',
-    filter: 'all',
-    statusMenus: {},
-    timer: null,
-    page: 0
-  }
-
-  componentDidMount () {
-    this.props.fetchAssets(0, limit, '', this.state.sortBy);
-  }
-
-  onSettingChange = (setting) => (e) => {
-    let options = this.state;
-    this.setState({[setting]: e.target.value});
-    options[setting] = e.target.value;
-    this.props.fetchAssets(0, limit, options.search, options.sort, options.filter);
-  }
-
-  onSearchChange = (e) => {
-    const search = e.target.value;
-    this.setState((prevState) => {
-      prevState.search = search;
-      clearTimeout(prevState.timer);
-      const fetchAssets = this.props.fetchAssets;
-      prevState.timer = setTimeout(() => {
-        fetchAssets(0, limit, search, this.state.sort, this.state.filter);
-      }, 350);
-      return prevState;
-    });
-  }
-
-  renderDate = (date) => {
-    const d = new Date(date);
-    return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
-  }
-
-  onStatusClick = (closeStream, id, statusMenuOpen) => () => {
-    if (statusMenuOpen) {
-      this.setState((prev) => {
-        prev.statusMenus[id] = false;
-        return prev;
-      });
-      this.props.updateAssetState(id, closeStream ? Date.now() : null)
-        .then(() => {
-          const {search, sort, filter, page} = this.state;
-          this.props.fetchAssets(page, limit, search, sort, filter);
-        });
-    } else {
-      this.setState((prev) => {
-        prev.statusMenus[id] = true;
-        return prev;
-      });
-    }
-  }
-
-  renderTitle = (title, {id}) =>  <Link to={`/admin/moderate/${id}`}>{title}</Link>
-
-  renderStatus = (closedAt, {id}) => {
-    const closed = closedAt && new Date(closedAt).getTime() < Date.now();
-    const statusMenuOpen = this.state.statusMenus[id];
-    return <div className={styles.statusMenu}>
-      <div
-        className={closed ? styles.statusMenuClosed : styles.statusMenuOpen}
-        onClick={this.onStatusClick(closed, id, statusMenuOpen)}>
-        {!statusMenuOpen && <Icon className={styles.statusMenuIcon} name='keyboard_arrow_down'/>}
-        {closed ? lang.t('streams.closed') : lang.t('streams.open')}
-      </div>
-      {
-        statusMenuOpen &&
-        <div
-          className={!closed ? styles.statusMenuClosed : styles.statusMenuOpen}
-          onClick={this.onStatusClick(!closed, id, statusMenuOpen)}>
-          {!closed ? lang.t('streams.closed') : lang.t('streams.open')}
-        </div>
-      }
-    </div>;
-  }
-
-  onPageClick = (page) => {
-    this.setState({page});
-    const {search, sort, filter} = this.state;
-    this.props.fetchAssets((page - 1) * limit, limit, search, sort, filter);
-  }
-
-  render () {
-    const {search, sort, filter} = this.state;
-    const {assets} = this.props;
-
-    const assetsIds = assets.ids.map((id) => assets.byId[id]);
-
-    return (
-      <div className={styles.container}>
-        <div className={styles.leftColumn}>
-          <div className={styles.searchBox}>
-            <Icon name='search' className={styles.searchIcon}/>
-            <input
-              type='text'
-              value={search}
-              className={styles.searchBoxInput}
-              onChange={this.onSearchChange}
-              placeholder={lang.t('streams.search')}/>
-          </div>
-          <div className={styles.optionHeader}>{lang.t('streams.filter-streams')}</div>
-          <div className={styles.optionDetail}>{lang.t('streams.stream-status')}</div>
-          <RadioGroup
-            name='status filter'
-            value={filter}
-            childContainer='div'
-            onChange={this.onSettingChange('filter')}
-            className={styles.radioGroup}
-          >
-            <Radio value='all'>{lang.t('streams.all')}</Radio>
-            <Radio value='open'>{lang.t('streams.open')}</Radio>
-            <Radio value='closed'>{lang.t('streams.closed')}</Radio>
-          </RadioGroup>
-          <div className={styles.optionHeader}>{lang.t('streams.sort-by')}</div>
-            <RadioGroup
-              name='sort by'
-              value={sort}
-              childContainer='div'
-              onChange={this.onSettingChange('sort')}
-              className={styles.radioGroup}
-            >
-              <Radio value='desc'>{lang.t('streams.newest')}</Radio>
-              <Radio value='asc'>{lang.t('streams.oldest')}</Radio>
-            </RadioGroup>
-          </div>
-        {
-          assetsIds.length
-          ? <div className={styles.mainContent}>
-              <DataTable className={styles.streamsTable} rows={assetsIds} onClick={this.goToModeration}>
-                <TableHeader name="title" cellFormatter={this.renderTitle}>{lang.t('streams.article')}</TableHeader>
-                <TableHeader name="publication_date" cellFormatter={this.renderDate}>
-                  {lang.t('streams.pubdate')}
-                </TableHeader>
-                <TableHeader name="closedAt" cellFormatter={this.renderStatus} className={styles.status}>
-                  {lang.t('streams.status')}
-                </TableHeader>
-              </DataTable>
-              <Pager
-                totalPages={Math.ceil((assets.count || 0) / limit)}
-                page={this.state.page}
-                onNewPageHandler={this.onPageClick} />
-            </div>
-          : <EmptyCard>{lang.t('streams.empty_result')}</EmptyCard>
-        }
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = ({assets}) => {
-  return {
-    assets: assets.toJS()
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    fetchAssets: (...args) => {
-      dispatch(fetchAssets.apply(this, args));
-    },
-    updateAssetState: (...args) => dispatch(updateAssetState.apply(this, args))
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Stories);
-
-const lang = new I18n(translations);

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

@@ -1,12 +0,0 @@
-fragment metrics on Asset {
-  id
-  title
-  url
-  author
-  created_at
-  commentCount
-  action_summaries {
-    actionCount
-    actionableItemCount
-  }
-}

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

@@ -1,31 +0,0 @@
-fragment commentView on Comment {
-    id
-    body
-    created_at
-    status
-    user {
-        id
-        name: username
-        status
-    }
-    asset {
-      id
-      title
-      url
-    }
-    action_summaries {
-      count
-      ... on FlagActionSummary {
-        reason
-      }
-    }
-    actions {
-      ... on FlagAction {
-        reason
-        message
-        user {
-          username
-        }
-      }
-    }
-}

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

@@ -0,0 +1,68 @@
+import {add} from 'coral-framework/services/graphqlRegistry';
+import update from 'immutability-helper';
+const queues = ['all', 'premod', 'flagged', 'accepted', 'rejected'];
+
+const extension = {
+  mutations: {
+    SetUserStatus: () => ({
+      refetchQueries: ['CoralAdmin_Community'],
+    }),
+    RejectUsername: () => ({
+      refetchQueries: ['CoralAdmin_Community'],
+    }),
+    SetCommentStatus: ({variables: {commentId, status}}) => ({
+      updateQueries: {
+        CoralAdmin_Moderation: (prev) => {
+          const comment = queues.reduce((comment, queue) => {
+            return comment ? comment : prev[queue].nodes.find((c) => c.id === commentId);
+          }, null);
+
+          let acceptedNodes = prev.accepted.nodes;
+          let acceptedCount = prev.acceptedCount;
+          let rejectedNodes = prev.rejected.nodes;
+          let rejectedCount = prev.rejectedCount;
+
+          if (status !== comment.status) {
+            if (status === 'ACCEPTED') {
+              comment.status = 'ACCEPTED';
+              acceptedCount++;
+              acceptedNodes = [comment, ...acceptedNodes];
+            }
+            else if (status === 'REJECTED') {
+              comment.status = 'REJECTED';
+              rejectedCount++;
+              rejectedNodes = [comment, ...rejectedNodes];
+            }
+          }
+
+          const premodNodes = prev.premod.nodes.filter((c) => c.id !== commentId);
+          const flaggedNodes = prev.flagged.nodes.filter((c) => c.id !== commentId);
+          const premodCount = premodNodes.length < prev.premod.nodes.length ? prev.premodCount - 1 : prev.premodCount;
+          const flaggedCount = flaggedNodes.length < prev.flagged.nodes.length ? prev.flaggedCount - 1 : prev.flaggedCount;
+
+          if (status === 'REJECTED') {
+            acceptedNodes = prev.accepted.nodes.filter((c) => c.id !== commentId);
+            acceptedCount = acceptedNodes.length < prev.accepted.nodes.length ? prev.acceptedCount - 1 : prev.acceptedCount;
+          }
+          else if (status === 'ACCEPTED') {
+            rejectedNodes = prev.rejected.nodes.filter((c) => c.id !== commentId);
+            rejectedCount = rejectedNodes.length < prev.rejected.nodes.length ? prev.rejectedCount - 1 : prev.rejectedCount;
+          }
+
+          return update(prev, {
+            premodCount: {$set: Math.max(0, premodCount)},
+            flaggedCount: {$set: Math.max(0, flaggedCount)},
+            acceptedCount: {$set: Math.max(0, acceptedCount)},
+            rejectedCount: {$set: Math.max(0, rejectedCount)},
+            premod: {nodes: {$set: premodNodes}},
+            flagged: {nodes: {$set: flaggedNodes}},
+            accepted: {nodes: {$set: acceptedNodes}},
+            rejected: {nodes: {$set: rejectedNodes}},
+          });
+        }
+      }
+    }),
+  },
+};
+
+add(extension);

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

@@ -1,153 +0,0 @@
-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';
-import REJECT_USERNAME from './rejectUsername.graphql';
-
-export const banUser = graphql(SET_USER_STATUS, {
-  props: ({mutate}) => ({
-    banUser: ({userId}) => {
-      return mutate({
-        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: (input) => {
-      return mutate({
-        variables: {
-          input,
-        },
-      });
-    }
-  })
-});
-
-export const rejectUsername = graphql(REJECT_USERNAME, {
-  props: ({mutate}) => ({
-    rejectUsername: (input) => {
-      return mutate({
-        variables: {
-          input,
-        },
-        refetchQueries: ['Users']
-      });
-    }
-  })
-});
-
-const views = ['all', 'premod', 'flagged', 'accepted', 'rejected'];
-export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
-  props: ({mutate}) => ({
-    acceptComment: ({commentId}) => {
-      return mutate({
-        variables: {
-          commentId,
-          status: 'ACCEPTED'
-        },
-        updateQueries: {
-          ModQueue: (oldData) => {
-            const comment = views.reduce((comment, view) => {
-              return comment ? comment : oldData[view].find((c) => c.id === commentId);
-            }, null);
-            let accepted;
-            let acceptedCount = oldData.acceptedCount;
-
-            // if the comment was already in the Approved queue, don't re-add it
-            if (comment.status === 'ACCEPTED') {
-              accepted = [...oldData.accepted];
-            } else {
-              comment.status = 'ACCEPTED';
-              acceptedCount++;
-              accepted = [comment, ...oldData.accepted];
-            }
-
-            const premod = oldData.premod.filter((c) => c.id !== commentId);
-            const flagged = oldData.flagged.filter((c) => c.id !== commentId);
-            const rejected = oldData.rejected.filter((c) => c.id !== commentId);
-            const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
-            const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
-            const rejectedCount = rejected.length < oldData.rejected.length ? oldData.rejectedCount - 1 : oldData.rejectedCount;
-
-            return {
-              ...oldData,
-              premodCount: Math.max(0, premodCount),
-              flaggedCount: Math.max(0, flaggedCount),
-              acceptedCount: Math.max(0, acceptedCount),
-              rejectedCount: Math.max(0, rejectedCount),
-              premod,
-              flagged,
-              accepted,
-              rejected,
-            };
-          }
-        }
-      });
-    },
-    rejectComment: ({commentId}) => {
-      return mutate({
-        variables: {
-          commentId,
-          status: 'REJECTED'
-        },
-        updateQueries: {
-          ModQueue: (oldData) => {
-            const comment = views.reduce((comment, view) => {
-              return comment ? comment : oldData[view].find((c) => c.id === commentId);
-            }, null);
-            let rejected;
-            let rejectedCount = oldData.rejectedCount;
-
-            // if the item was already in the Rejected queue, don't put it in again
-            if (comment.status === 'REJECTED') {
-              rejected = oldData.rejected;
-            } else {
-              comment.status = 'REJECTED';
-              rejectedCount++;
-              rejected = [comment, ...oldData.rejected];
-            }
-
-            const premod = oldData.premod.filter((c) => c.id !== commentId);
-            const flagged = oldData.flagged.filter((c) => c.id !== commentId);
-            const accepted = oldData.accepted.filter((c) => c.id !== commentId);
-            const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
-            const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
-            const acceptedCount = accepted.length < oldData.accepted.length ? oldData.acceptedCount - 1 : oldData.acceptedCount;
-
-            return {
-              ...oldData,
-              premodCount: Math.max(0, premodCount),
-              flaggedCount: Math.max(0, flaggedCount),
-              acceptedCount: Math.max(0, acceptedCount),
-              rejectedCount: Math.max(0, rejectedCount),
-              premod,
-              flagged,
-              accepted,
-              rejected
-            };
-          }
-        }
-      });
-    }
-  })
-});

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

@@ -1,7 +0,0 @@
-mutation rejectUsername($input: RejectUsernameInput!) {
-  rejectUsername(input: $input) {
-    errors {
-      translation_key
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-mutation setCommentStatus($commentId: ID!, $status: COMMENT_STATUS!){
-  setCommentStatus(id: $commentId, status: $status) {
-    errors {
-      translation_key
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-mutation setUserStatus($userId: ID!, $status: USER_STATUS!) {
-  setUserStatus(id: $userId, status: $status) {
-    errors {
-      translation_key
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-mutation suspendUser($input: SuspendUserInput!) {
-  suspendUser(input: $input) {
-    errors {
-      translation_key
-    }
-  }
-}

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

@@ -1,6 +0,0 @@
-query Assets {
-  assets {
-    id
-    title
-  }
-}

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

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

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

@@ -1,116 +0,0 @@
-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';
-import USER_DETAIL from './userDetail.graphql';
-import GET_QUEUE_COUNTS from './getQueueCounts.graphql';
-
-export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
-  options: ({params: {id = null}}) => {
-    return {
-      variables: {
-        asset_id: id,
-        sort: 'REVERSE_CHRONOLOGICAL'
-      }
-    };
-  },
-  props: ({ownProps: {params: {id = null}}, data}) => ({
-    data,
-    modQueueResort: modQueueResort(id, data.fetchMore),
-    loadMore: loadMore(data.fetchMore)
-  })
-});
-
-export const getMetrics = graphql(METRICS, {
-  options: ({settings: {dashboardWindowStart, dashboardWindowEnd}}) => {
-
-    return {
-      variables: {
-        from: dashboardWindowStart,
-        to: dashboardWindowEnd
-      }
-    };
-  }
-});
-
-export const loadMore = (fetchMore) => ({limit = 10, cursor, sort, tab, asset_id}) => {
-  let variables = {
-    limit,
-    cursor,
-    sort,
-    asset_id
-  };
-  switch(tab) {
-  case 'all':
-    variables.statuses = null;
-    break;
-  case 'accepted':
-    variables.statuses = ['ACCEPTED'];
-    break;
-  case 'premod':
-    variables.statuses = ['PREMOD'];
-    break;
-  case 'flagged':
-    variables.statuses = ['NONE', 'PREMOD'];
-    variables.action_type = 'FLAG';
-    break;
-  case 'rejected':
-    variables.statuses = ['REJECTED'];
-    break;
-  }
-  return fetchMore({
-    query: MOD_QUEUE_LOAD_MORE,
-    variables,
-    updateQuery: (oldData, {fetchMoreResult:{comments}}) => {
-      return {
-        ...oldData,
-        [tab]: [
-          ...oldData[tab],
-          ...comments
-        ]
-      };
-    }
-  });
-};
-
-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,
-    variables: {
-      asset_id: id,
-      sort
-    },
-    updateQuery: (oldData, {fetchMoreResult:{data}}) => data
-  });
-};
-
-export const getUserDetail = graphql(USER_DETAIL, {
-  options: ({id}) => {
-    return {
-      variables: {author_id: id}
-    };
-  }
-});
-
-export const getQueueCounts = graphql(GET_QUEUE_COUNTS, {
-  options: ({params: {id = null}}) => {
-    return {
-      pollInterval: 5000,
-      variables: {
-        asset_id: id
-      }
-    };
-  }
-});

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

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

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

@@ -1,10 +0,0 @@
-#import "../fragments/assetMetricsView.graphql"
-
-query Metrics ($from: Date!, $to: Date!) {
-  assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) {
-    ...metrics
-  }
-  assetsByActivity: assetMetrics(from: $from, to: $to, sort: ACTIVITY) {
-    ...metrics
-  }
-}

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

@@ -1,68 +0,0 @@
-#import "../fragments/commentView.graphql"
-
-query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
-    all: comments(query: {
-      statuses: [NONE, PREMOD, ACCEPTED, REJECTED],
-      asset_id: $asset_id,
-      sort: $sort
-    }) {
-      ...commentView
-    }
-    accepted: comments(query: {
-      statuses: [ACCEPTED],
-      asset_id: $asset_id,
-      sort: $sort
-    }) {
-      ...commentView
-    }
-    premod: comments(query: {
-        statuses: [PREMOD],
-        asset_id: $asset_id,
-        sort: $sort
-    }) {
-        ...commentView
-    }
-    flagged: comments(query: {
-        action_type: FLAG,
-        asset_id: $asset_id,
-        statuses: [NONE, PREMOD],
-        sort: $sort
-    }) {
-        ...commentView
-    }
-    rejected: comments(query: {
-        statuses: [REJECTED],
-        asset_id: $asset_id,
-        sort: $sort
-    }) {
-        ...commentView
-    }
-    assets: assets {
-      id
-      title
-      url
-    }
-    allCount: commentCount(query: {
-      asset_id: $asset_id
-    })
-    acceptedCount: commentCount(query: {
-      statuses: [ACCEPTED],
-      asset_id: $asset_id
-    })
-    premodCount: commentCount(query: {
-      statuses: [PREMOD],
-      asset_id: $asset_id
-    })
-    rejectedCount: commentCount(query: {
-       statuses: [REJECTED],
-       asset_id: $asset_id
-    })
-    flaggedCount: commentCount(query: {
-      action_type: FLAG,
-      asset_id: $asset_id,
-      statuses: [NONE, PREMOD]
-    })
-    settings {
-      organizationName
-    }
-}

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

@@ -1,26 +0,0 @@
-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/graphql/queries/userDetail.graphql

@@ -1,13 +0,0 @@
-query UserDetail ($author_id: ID!) {
-  user(id: $author_id) {
-    id
-    username
-    created_at
-    profiles {
-      id
-      provider
-    }
-  }
-  totalComments: commentCount(query: {author_id: $author_id})
-  rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
-}

client/coral-admin/src/index.js

@@ -8,6 +8,11 @@ import store from './services/store';
 import App from './components/App';
 
 import 'react-mdl/extra/material.js';
+import './graphql';
+import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
+
+loadPluginsTranslations();
+injectPluginsReducers();
 
 render(
   <ApolloProvider client={client} store={store}>

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

@@ -13,5 +13,5 @@ export default {
   community,
   moderation,
   install,
-  config
+  config,
 };

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

@@ -1,4 +1,4 @@
-import {fromJS, Map} from 'immutable';
+import {fromJS, Map, Set} from 'immutable';
 import * as actions from '../constants/moderation';
 
 const initialState = fromJS({
@@ -8,8 +8,12 @@ const initialState = fromJS({
   commentId: null,
   commentStatus: null,
   userDetailId: null,
+  userDetailActiveTab: 'all',
+  userDetailStatuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
+  userDetailSelectedIds: new Set(),
   banDialog: false,
   shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show',
+  sortOrder: 'REVERSE_CHRONOLOGICAL',
   suspendUserDialog: {
     show: false,
     userId: null,
@@ -63,7 +67,21 @@ export default function moderation (state = initialState, action) {
   case actions.VIEW_USER_DETAIL:
     return state.set('userDetailId', action.userId);
   case actions.HIDE_USER_DETAIL:
-    return state.set('userDetailId', null);
+    return state
+      .set('userDetailId', null)
+      .update('userDetailSelectedIds', (set) => set.clear());
+  case actions.CLEAR_USER_DETAIL_SELECTIONS:
+    return state.update('userDetailSelectedIds', (set) => set.clear());
+  case actions.CHANGE_USER_DETAIL_STATUSES:
+    return state
+      .set('userDetailActiveTab', action.tab)
+      .set('userDetailStatuses', action.statuses);
+  case actions.SELECT_USER_DETAIL_COMMENT:
+    return state.update('userDetailSelectedIds', (set) => set.add(action.id));
+  case actions.UNSELECT_USER_DETAIL_COMMENT:
+    return state.update('userDetailSelectedIds', (set) => set.delete(action.id));
+  case actions.SET_SORT_ORDER:
+    return state.set('sortOrder', action.order);
   default :
     return state;
   }

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

@@ -1,8 +1,10 @@
 import React from 'react';
-import styles from '../Community.css';
+import styles from './Community.css';
 import BanUserButton from './BanUserButton';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../../../containers/ModerationQueue/helpers/moderationQueueActionsMap';
+import {menuActionsMap} from '../../Moderation/helpers/moderationQueueActionsMap';
+
+import t from 'coral-framework/services/i18n';
 
 const ActionButton = ({type = '', user, ...props}) => {
   if (type === 'BAN') {
@@ -17,7 +19,7 @@ const ActionButton = ({type = '', user, ...props}) => {
       onClick={() => {
         type === 'APPROVE' ? props.approveUser({userId: user.id}) : props.showSuspendUserDialog({user: user});
       }}
-    >{menuActionsMap[type].text}</Button>
+    >{t(`modqueue.${menuActionsMap[type].text}`)}</Button>
   );
 };
 

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

@@ -2,9 +2,7 @@ import React, {PropTypes} from 'react';
 import {Button, Icon} from 'coral-ui';
 import styles from './BanUserButton.css';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 const BanUserButton = ({user, ...props}) => (
   <div className={styles.ban}>
@@ -14,7 +12,7 @@ const BanUserButton = ({user, ...props}) => (
       onClick={props.onClick}
       raised>
       <Icon name='not_interested' />
-      {lang.t('comment.ban_user')}
+      {t('comment.ban_user')}
     </Button>
   </div>
 );

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

@@ -4,10 +4,7 @@ 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);
+import t from 'coral-framework/services/i18n';
 
 const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
   <Dialog
@@ -16,19 +13,19 @@ const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
     open={open}
     onClose={handleClose}
     onCancel={handleClose}
-    title={lang.t('community.ban_user')}>
+    title={t('community.ban_user')}>
     <span className={styles.close} onClick={handleClose}>×</span>
     <div>
       <div className={styles.header}>
-        <h2>{lang.t('community.ban_user')}</h2>
+        <h2>{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>
+        <h3>{t('community.are_you_sure', user.username)}</h3>
+        <i>{t('community.note')}</i>
       </div>
       <div className={styles.buttons}>
         <Button cStyle="cancel" className={styles.cancel} onClick={handleClose} raised>
-          {lang.t('community.cancel')}
+          {t('community.cancel')}
         </Button>
         <Button
           cStyle="black" className={styles.ban}
@@ -38,7 +35,7 @@ const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
             });
           }}
           raised>
-          {lang.t('community.yes_ban_user')}
+          {t('community.yes_ban_user')}
         </Button>
       </div>
     </div>

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

@@ -1,55 +1,26 @@
 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, rejectUsername} from 'coral-admin/src/graphql/mutations';
-
-import {
-  fetchAccounts,
-  updateSorting,
-  newPage,
-  showBanUserDialog,
-  hideBanUserDialog,
-  showSuspendUserDialog,
-  hideSuspendUserDialog
-} from '../../actions/community';
-
-import CommunityMenu from './components/CommunityMenu';
-import BanUserDialog from './components/BanUserDialog';
-import SuspendUserDialog from './components/SuspendUserDialog';
 
+import CommunityMenu from './CommunityMenu';
+import BanUserDialog from './BanUserDialog';
+import SuspendUserDialog from './SuspendUserDialog';
 import People from './People';
 import FlaggedAccounts from './FlaggedAccounts';
 
-class CommunityContainer extends Component {
+export default class Community extends Component {
 
-  constructor(props) {
-    super(props);
+  state = {
+    searchValue: '',
+    timer: null
+  };
 
-    this.state = {
-      searchValue: '',
-      timer: null
-    };
-
-    this.onKeyDownHandler = this.onKeyDownHandler.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) {
+  onKeyDownHandler = (e) => {
     if (e.key === 'Enter') {
       e.preventDefault();
       this.search();
     }
   }
 
-  onSearchChange(e) {
+  onSearchChange = (e) => {
     const value = e.target.value;
     this.setState((prevState) => {
       prevState.searchValue = value;
@@ -62,6 +33,16 @@ class CommunityContainer extends Component {
     });
   }
 
+  onHeaderClickHandler = (sort) => {
+    this.props.updateSorting(sort);
+    this.search();
+  }
+
+  onNewPageHandler = (page) => {
+    this.props.newPage(page);
+    this.search({page});
+  }
+
   search(query = {}) {
     const {community} = this.props;
 
@@ -71,21 +52,10 @@ class CommunityContainer extends Component {
       asc: community.ascPeople,
       ...query
     });
-
-  }
-
-  onHeaderClickHandler(sort) {
-    this.props.dispatch(updateSorting(sort));
-    this.search();
-  }
-
-  onNewPageHandler(page) {
-    this.props.dispatch(newPage(page));
-    this.search({page});
   }
 
   getTabContent(searchValue, props) {
-    const {community, data} = props;
+    const {community, root: {users}} = props;
     const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
 
     if (activeTab === 'people') {
@@ -108,9 +78,7 @@ class CommunityContainer extends Component {
     return (
       <div>
         <FlaggedAccounts
-          commenters={data.users}
-          isFetching={data.loading}
-          error={data.error}
+          commenters={users}
           showBanUserDialog={props.showBanUserDialog}
           approveUser={props.approveUser}
           rejectUsername={props.rejectUsername}
@@ -134,7 +102,6 @@ class CommunityContainer extends Component {
 
   render() {
     const {searchValue} = this.state;
-
     const tab = this.getTabContent(searchValue, this.props);
 
     return (
@@ -148,22 +115,3 @@ class CommunityContainer extends Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  community: state.community.toJS()
-});
-
-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,
-  rejectUsername
-)(CommunityContainer);

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

@@ -1,14 +1,9 @@
 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 t from 'coral-framework/services/i18n';
 import {Link} from 'react-router';
 
-const lang = new I18n(translations);
-
 const CommunityMenu = () => {
   const flaggedPath = '/admin/community/flagged';
   const peoplePath = '/admin/community/people';
@@ -17,10 +12,10 @@ const CommunityMenu = () => {
       <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')}
+            {t('community.flaggedaccounts')}
           </Link>
           <Link to={peoplePath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-            {lang.t('community.people')}
+            {t('community.people')}
           </Link>
         </div>
       </div>

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

@@ -1,25 +1,19 @@
 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 t from 'coral-framework/services/i18n';
 import styles from './Community.css';
-
-import Loading from './Loading';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
-import User from './components/User';
+import User from './User';
 
 const FlaggedAccounts = ({...props}) => {
-  const {commenters, isFetching} = props;
-  const hasResults = !isFetching && commenters && !!commenters.length;
+  const {commenters} = props;
+  const hasResults = 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) => {
@@ -34,7 +28,7 @@ const FlaggedAccounts = ({...props}) => {
               suspendUser={props.suspendUser}
               />;
           })
-          : <EmptyCard>{lang.t('community.no-flagged-accounts')}</EmptyCard>
+          : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
         }
       </div>
     </div>

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

@@ -1,29 +1,26 @@
 import React from 'react';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
 
 import styles from './Community.css';
-import Table from './Table';
+import Table from '../containers/Table';
 import {Pager, Icon} from 'coral-ui';
-import EmptyCard from '../../components/EmptyCard';
-
-const lang = new I18n(translations);
+import EmptyCard from '../../../components/EmptyCard';
+import t from 'coral-framework/services/i18n';
 
 const tableHeaders = [
   {
-    title: lang.t('community.username_and_email'),
+    title: t('community.username_and_email'),
     field: 'username'
   },
   {
-    title: lang.t('community.account_creation_date'),
+    title: t('community.account_creation_date'),
     field: 'created_at'
   },
   {
-    title: lang.t('community.status'),
+    title: t('community.status'),
     field: 'status'
   },
   {
-    title: lang.t('community.newsroom_role'),
+    title: t('community.newsroom_role'),
     field: 'role'
   }
 ];
@@ -41,7 +38,7 @@ const People = ({commenters, searchValue, onSearchChange, ...props}) => {
             className={styles.searchBoxInput}
             value={searchValue}
             onChange={onSearchChange}
-            placeholder={lang.t('streams.search')}
+            placeholder={t('streams.search')}
           />
         </div>
       </div>
@@ -53,7 +50,7 @@ const People = ({commenters, searchValue, onSearchChange, ...props}) => {
               commenters={commenters}
               onHeaderClickHandler={props.onHeaderClickHandler}
             />
-          : <EmptyCard>{lang.t('community.no-results')}</EmptyCard>
+          : <EmptyCard>{t('community.no_results')}</EmptyCard>
         }
         <Pager
           totalPages={props.totalPages}

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

@@ -3,10 +3,7 @@ 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);
+import t from 'coral-framework/services/i18n';
 
 const stages = [
   {
@@ -38,7 +35,7 @@ class SuspendUserDialog extends Component  {
   }
 
   componentDidMount() {
-    this.setState({email: lang.t('suspenduser.email_message_reject'), about: lang.t('suspenduser.username')});
+    this.setState({email: t('suspenduser.email_message_reject'), about: t('suspenduser.username')});
   }
 
   /*
@@ -79,18 +76,18 @@ class SuspendUserDialog extends Component  {
             open={open}
             onClose={handleClose}
             onCancel={handleClose}
-            title={lang.t('suspenduser.suspend_user')}>
+            title={t('suspenduser.suspend_user')}>
             <div className={styles.title}>
-              {lang.t(stages[stage].title, lang.t('suspenduser.username'))}
+              {t(stages[stage].title, t('suspenduser.username'))}
             </div>
             <div className={styles.container}>
               <div className={styles.description}>
-                {lang.t(stages[stage].description, lang.t('suspenduser.username'))}
+                {t(stages[stage].description, t('suspenduser.username'))}
               </div>
               {
                 stage === 1 &&
                 <div className={styles.writeContainer}>
-                  <div className={styles.emailMessage}>{lang.t('suspenduser.write_message')}</div>
+                  <div className={styles.emailMessage}>{t('suspenduser.write_message')}</div>
                   <div className={styles.emailContainer}>
                     <textarea
                       rows={5}
@@ -103,7 +100,7 @@ class SuspendUserDialog extends Component  {
               <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'))}
+                    {t(stages[stage].options[key], t('suspenduser.username'))}
                   </Button>
                 ))}
               </div>

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import {SelectField, Option} from 'react-mdl-selectfield';
+import styles from '../components/Community.css';
+import t from 'coral-framework/services/i18n';
+
+export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange}) => (
+  <table className={`mdl-data-table ${styles.dataTable}`}>
+    <thead>
+      <tr>
+        {headers.map((header, i) =>(
+          <th
+          key={i}
+          className="mdl-data-table__cell--non-numeric"
+          onClick={() => onHeaderClickHandler({field: header.field})}>
+            {header.title}
+          </th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {commenters.map((row, i)=> (
+        <tr key={i}>
+          <td className="mdl-data-table__cell--non-numeric">
+            {row.username}
+            <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
+          </td>
+          <td className="mdl-data-table__cell--non-numeric">
+            {row.created_at}
+          </td>
+          <td className="mdl-data-table__cell--non-numeric">
+            <SelectField label={'Select me'} value={row.status || ''}
+              className={styles.selectField}
+              label={t('community.status')}
+              onChange={(status) => onCommenterStatusChange(row.id, status)}>
+              <Option value={'ACTIVE'}>{t('community.active')}</Option>
+              <Option value={'BANNED'}>{t('community.banned')}</Option>
+            </SelectField>
+          </td>
+          <td className="mdl-data-table__cell--non-numeric">
+            <SelectField label={'Select me'} value={row.roles[0] || ''}
+              className={styles.selectField}
+              label={t('community.role')}
+              onChange={(role) => onRoleChange(row.id, role)}>
+              <Option value={''}>.</Option>
+              <Option value={'STAFF'}>{t('community.staff')}</Option>
+              <Option value={'MODERATOR'}>{t('community.moderator')}</Option>
+              <Option value={'ADMIN'}>{t('community.admin')}</Option>
+            </SelectField>
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);

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

@@ -1,12 +1,17 @@
 import React from 'react';
-import styles from '../Community.css';
+import styles from './Community.css';
 
 import ActionButton from './ActionButton';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../../translations.json';
+import t from 'coral-framework/services/i18n';
 
-const lang = new I18n(translations);
+const shortReasons = {
+  'This comment is offensive': t('community.offensive'),
+  'This looks like an ad/marketing': t('community.spam_ads'),
+  'This user is impersonating': t('community.impersonating'),
+  'I don\'t like this username': t('community.dont_like_username'),
+  'Other': t('community.other')
+};
 
 // Render a single user for the list
 const User = (props) => {
@@ -35,11 +40,11 @@ const User = (props) => {
         <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>:
+              <i className="material-icons">flag</i><span className={styles.flaggedByLabel}>{t('community.flags')}({ user.actions.length })</span>:
                 { user.action_summaries.map(
                 (action, i) => {
                   return <span className={styles.flaggedBy} key={i}>
-                    {lang.t(`community.${action.reason}`)} ({action.count})
+                    {shortReasons[action.reason]} ({action.count})
                   </span>;
                 }
               )}
@@ -49,7 +54,7 @@ const User = (props) => {
                 (action_sum, i) => {
                   return <div key={i}>
                     <span className={styles.flaggedByLabel}>
-                      {lang.t(`community.${action_sum.reason}`)} ({action_sum.count})
+                      {shortReasons[action_sum.reason]} ({action_sum.count})
                     </span>
                     {user.actions.map(
 

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

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

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

@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose} from 'react-apollo';
+import {setRole, setCommenterStatus} from '../../../actions/community';
+import Table from '../components/Table';
+
+class TableContainer extends Component {
+
+  constructor (props) {
+    super(props);
+  }
+
+  render () {
+    return <Table
+      {...this.props}
+      onRoleChange={this.props.setRole}
+      onCommenterStatusChange={this.props.setCommenterStatus}
+      commenters={this.props.commenters}
+    />;
+  }
+}
+
+const mapStateToProps = (state) => ({
+  commenters: state.community.get('accounts'),
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    setCommenterStatus,
+    setRole,
+  }, dispatch);
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+)(TableContainer);
+

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

@@ -0,0 +1,2 @@
+export {default as Community} from './containers/Community';
+export {default as CommunityLayout} from './components/CommunityLayout';

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

@@ -99,7 +99,7 @@
 .inlineTextfield {
   border-color: #ccc;
   border-style: solid;
-  border-width: 0px 0px 1px 0px;  
+  border-width: 0px 0px 1px 0px;
   text-align: center;
   font-size: inherit;
 }
@@ -108,7 +108,7 @@
   outline: none;
 }
 
-.charCountTexfield {
+.charCountTexfield, .editCommentTimeframeTextfield {
   width: 4em;
   padding: 0px;
 }

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

@@ -1,61 +1,43 @@
 import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {
-  fetchSettings,
-  updateSettings,
-  saveSettingsToServer,
-  updateWordlist,
-  updateDomainlist
-} from '../../actions/settings';
 
 import {Button, List, Item, Card, Spinner} from 'coral-ui';
 import styles from './Configure.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
 import StreamSettings from './StreamSettings';
 import ModerationSettings from './ModerationSettings';
 import TechSettings from './TechSettings';
+import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
 
-class Configure extends Component {
-  constructor (props) {
-    super(props);
+export default class Configure extends Component {
 
-    this.state = {
-      activeSection: 'stream',
-      changed: false,
-      errors: {}
-    };
-
-    this.changeSection = this.changeSection.bind(this);
-  }
-
-  componentWillMount = () => {
-    this.props.dispatch(fetchSettings());
-  }
+  state = {
+    activeSection: 'stream',
+    changed: false,
+    errors: {}
+  };
 
   saveSettings = () => {
-    this.props.dispatch(saveSettingsToServer());
+    this.props.saveSettingsToServer();
     this.setState({changed: false});
   }
 
-  changeSection(activeSection) {
+  changeSection = (activeSection) => {
     this.setState({activeSection});
   }
 
   onChangeWordlist = (listName, list) => {
     this.setState({changed: true});
-    this.props.dispatch(updateWordlist(listName, list));
+    this.props.updateWordlist(listName, list);
   }
 
   onChangeDomainlist = (listName, list) => {
     this.setState({changed: true});
-    this.props.dispatch(updateDomainlist(listName, list));
+    this.props.updateDomainlist(listName, list);
   }
 
   onSettingUpdate = (setting) => {
     this.setState({changed: true});
-    this.props.dispatch(updateSettings(setting));
+    this.props.updateSettings(setting);
   }
 
   // Sets an arbitrary error string and a boolean state.
@@ -106,11 +88,11 @@ class Configure extends Component {
   getPageTitle (section) {
     switch(section) {
     case 'stream':
-      return lang.t('configure.stream-settings');
+      return t('configure.stream_settings');
     case 'moderation':
-      return lang.t('configure.moderation-settings');
+      return t('configure.moderation_settings');
     case 'tech':
-      return lang.t('configure.tech-settings');
+      return t('configure.tech_settings');
     default:
       return '';
     }
@@ -133,13 +115,13 @@ class Configure extends Component {
           <div className={styles.leftColumn}>
             <List onChange={this.changeSection} activeItem={activeSection}>
               <Item itemId='stream' icon='speaker_notes'>
-                {lang.t('configure.stream-settings')}
+                {t('configure.stream_settings')}
               </Item>
               <Item itemId='moderation' icon='thumbs_up_down'>
-                {lang.t('configure.moderation-settings')}
+                {t('configure.moderation_settings')}
               </Item>
               <Item itemId='tech' icon='code'>
-                {lang.t('configure.tech-settings')}
+                {t('configure.tech_settings')}
               </Item>
             </List>
             <div className={styles.saveBox}>
@@ -152,7 +134,7 @@ class Configure extends Component {
                   icon='check'
                   full
                 >
-                  {lang.t('configure.save-changes')}
+                  {t('configure.save_changes')}
                 </Button>
               :
                 <Button
@@ -161,7 +143,7 @@ class Configure extends Component {
                   icon='check'
                   full
                 >
-                {lang.t('configure.save-changes')}
+                {t('configure.save_changes')}
                </Button>
             }
             </div>
@@ -176,11 +158,3 @@ class Configure extends Component {
     );
   }
 }
-
-const mapStateToProps = (state) => ({
-  auth: state.auth.toJS(),
-  settings: state.settings.toJS()
-});
-export default connect(mapStateToProps)(Configure);
-
-const lang = new I18n(translations);

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

@@ -2,17 +2,14 @@ import React from 'react';
 import {Card} from 'coral-ui';
 import styles from './Configure.css';
 import TagsInput from 'react-tagsinput';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 const Domainlist = ({domains, onChangeDomainlist}) => {
   return (
     <Card id={styles.domainlist} className={styles.configSetting}>
       <div className={styles.wrapper}>
-        <div className={styles.settingsHeader}>{lang.t('configure.domain-list-title')}</div>
-        <p className={styles.domainlistDesc}>{lang.t('configure.domain-list-text')}</p>
+        <div className={styles.settingsHeader}>{t('configure.domain_list_title')}</div>
+        <p className={styles.domainlistDesc}>{t('configure.domain_list_text')}</p>
         <div className={styles.wrapper}>
           <TagsInput
             value={domains}

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

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import t from 'coral-framework/services/i18n';
 import styles from './Configure.css';
 import {Button, Card} from 'coral-ui';
 
@@ -47,11 +46,11 @@ class EmbedLink extends Component {
       <Card shadow="2" className={styles.configSetting}>
         <div className={styles.wrapper}>
           <div className={styles.settingsHeader}>Embed Comment Stream</div>
-          <p>{lang.t('configure.copy-and-paste')}</p>
+          <p>{t('configure.copy_and_paste')}</p>
           <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
           <div className={styles.actions}>
             <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
-              {lang.t('embedlink.copy')}
+              {t('embedlink.copy')}
             </Button>
             <div className={styles.copiedText}>
               {this.state.copied && 'Copied!'}
@@ -64,5 +63,3 @@ class EmbedLink extends Component {
 }
 
 export default EmbedLink;
-
-const lang = new I18n(translations);

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

@@ -3,9 +3,7 @@ import styles from './Configure.css';
 import {Card} from 'coral-ui';
 import {Checkbox} from 'react-mdl';
 import Wordlist from './Wordlist';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 const updateModeration = (updateSettings, mod) => () => {
   const moderation = mod === 'PRE' ? 'POST' : 'PRE';
@@ -27,12 +25,6 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
   const on = styles.enabledSetting;
   const off = styles.disabledSetting;
 
-  const onChangeEditCommentWindowLength = (e) => {
-    const value = e.target.value;
-    const valueAsNumber = parseFloat(value);
-    const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
-    updateSettings({editCommentWindowLength: milliseconds || value});
-  };
   return (
     <div className={styles.Configure}>
       <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
@@ -42,9 +34,9 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
             checked={settings.requireEmailConfirmation} />
         </div>
         <div className={styles.content}>
-          <div className={styles.settingsHeader}>{lang.t('configure.require-email-verification')}</div>
+          <div className={styles.settingsHeader}>{t('configure.require_email_verification')}</div>
           <p className={settings.requireEmailConfirmation ? '' : styles.disabledSettingText}>
-            {lang.t('configure.require-email-verification-text')}
+            {t('configure.require_email_verification_text')}
           </p>
         </div>
       </Card>
@@ -55,9 +47,9 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
             checked={settings.moderation === 'PRE'} />
         </div>
         <div className={styles.content}>
-          <div className={styles.settingsHeader}>{lang.t('configure.enable-pre-moderation')}</div>
+          <div className={styles.settingsHeader}>{t('configure.enable_pre_moderation')}</div>
           <p className={settings.moderation === 'PRE' ? '' : styles.disabledSettingText}>
-            {lang.t('configure.enable-pre-moderation-text')}
+            {t('configure.enable_pre_moderation_text')}
           </p>
         </div>
       </Card>
@@ -68,9 +60,9 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
             checked={settings.premodLinksEnable} />
         </div>
         <div className={styles.content}>
-          <div className={styles.settingsHeader}>{lang.t('configure.enable-premod-links')}</div>
+          <div className={styles.settingsHeader}>{t('configure.enable_premod_links')}</div>
           <p>
-            {lang.t('configure.enable-premod-links-text')}
+            {t('configure.enable_premod_links_text')}
           </p>
         </div>
       </Card>
@@ -78,27 +70,6 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
         bannedWords={settings.wordlist.banned}
         suspectWords={settings.wordlist.suspect}
         onChangeWordlist={onChangeWordlist} />
-
-      {/* Edit Comment Timeframe */}
-      <Card className={styles.configSetting}>
-        <div className={styles.settingsHeader}>{lang.t('configure.edit-comment-timeframe-heading')}</div>
-        <p>
-          {lang.t('configure.edit-comment-timeframe-text-pre')}
-          &nbsp;
-          <input
-            style={{width: '3em'}}
-            className={styles.inlineTextfield}
-            type="number"
-            min="0"
-            onChange={onChangeEditCommentWindowLength}
-            placeholder="30"
-            defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
-            pattern='[0-9]+([\.][0-9]*)?'
-          />
-          &nbsp;
-          {lang.t('configure.edit-comment-timeframe-text-post')}
-        </p>
-      </Card>      
     </div>
   );
 };

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import {SelectField, Option} from 'react-mdl-selectfield';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import t from 'coral-framework/services/i18n';
 import styles from './Configure.css';
 import {Checkbox, Textfield} from 'react-mdl';
 import {Card, Icon, TextArea} from 'coral-ui';
@@ -62,6 +61,13 @@ const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
   }
 };
 
+const updateEditCommentWindowLength = (updateSettings) => (e) => {
+  const value = e.target.value;
+  const valueAsNumber = parseFloat(value);
+  const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
+  updateSettings({editCommentWindowLength: milliseconds || value});
+};
+
 const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
 
   // just putting this here for shorthand below
@@ -77,9 +83,9 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
             checked={settings.charCountEnable} />
         </div>
         <div className={styles.content}>
-          <div className={styles.settingsHeader}>{lang.t('configure.comment-count-header')}</div>
+          <div className={styles.settingsHeader}>{t('configure.comment_count_header')}</div>
           <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
-            <span>{lang.t('configure.comment-count-text-pre')}</span>
+            <span>{t('configure.comment_count_text_pre')}</span>
             <input type='text'
               className={`${styles.inlineTextfield} ${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
               htmlFor='charCount'
@@ -87,13 +93,13 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
               value={settings.charCount}
               disabled={settings.charCountEnable ? '' : 'disabled'}
             />
-            <span>{lang.t('configure.comment-count-text-post')}</span>
+          <span>{t('configure.comment_count_text_post')}</span>
               {
                 errors.charCount &&
                 <span className={styles.settingsError}>
                   <br/>
                   <Icon name="error_outline"/>
-                  {lang.t('configure.comment-count-error')}
+                  {t('configure.comment_count_error')}
                 </span>
               }
           </p>
@@ -107,10 +113,10 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
         </div>
         <div className={styles.content}>
           <div className={styles.settingsHeader}>
-            {lang.t('configure.include-comment-stream')}
+            {t('configure.include_comment_stream')}
           </div>
           <p className={settings.infoBoxEnable ? '' : styles.disabledSettingText}>
-            {lang.t('configure.include-comment-stream-desc')}
+            {t('configure.include_comment_stream_desc')}
           </p>
           <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
             <MarkdownEditor
@@ -123,8 +129,8 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
       </Card>
       <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
         <div className={styles.wrapper}>
-          <div className={styles.settingsHeader}>{lang.t('configure.closed-stream-settings')}</div>
-          <p>{lang.t('configure.closed-comments-desc')}</p>
+          <div className={styles.settingsHeader}>{t('configure.closed_stream_settings')}</div>
+          <p>{t('configure.closed_comments_desc')}</p>
           <div>
             <TextArea className={styles.descriptionBox}
               onChange={updateClosedMessage(updateSettings)}
@@ -133,6 +139,25 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
           </div>
         </div>
       </Card>
+      {/* Edit Comment Timeframe */}
+      <Card className={styles.configSetting}>
+        <div className={styles.settingsHeader}>{t('configure.edit_comment_timeframe_heading')}</div>
+        <p>
+          {t('configure.edit_comment_timeframe_text_pre')}
+          &nbsp;
+          <input
+            className={`${styles.inlineTextfield} ${styles.editCommentTimeframeTextfield}`}
+            type="number"
+            min="0"
+            onChange={updateEditCommentWindowLength(updateSettings)}
+            placeholder="30"
+            defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
+            pattern='[0-9]+([\.][0-9]*)?'
+          />
+          &nbsp;
+          {t('configure.edit_comment_timeframe_text_post')}
+        </p>
+      </Card>
       <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
         <div className={styles.action}>
           <Checkbox
@@ -140,7 +165,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
             checked={settings.autoCloseStream} />
         </div>
         <div className={styles.content}>
-          {lang.t('configure.close-after')}
+          {t('configure.close_after')}
           <br />
           <Textfield
             type='number'
@@ -148,15 +173,15 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
             style={{width: 50}}
             onChange={updateClosedTimeout(updateSettings, settings.closedTimeout)}
             value={getTimeoutAmount(settings.closedTimeout)}
-            label={lang.t('configure.closed-comments-label')} />
+            label={t('configure.closed_comments_label')} />
           <div className={styles.configTimeoutSelect}>
             <SelectField
               label="comments closed time window"
               value={getTimeoutMeasure(settings.closedTimeout)}
               onChange={updateClosedTimeout(updateSettings, settings.closedTimeout, true)}>
-              <Option value={'hours'}>{lang.t('configure.hours')}</Option>
-              <Option value={'days'}>{lang.t('configure.days')}</Option>
-              <Option value={'weeks'}>{lang.t('configure.weeks')}</Option>
+              <Option value={'hours'}>{t('configure.hours')}</Option>
+              <Option value={'days'}>{t('configure.days')}</Option>
+              <Option value={'weeks'}>{t('configure.weeks')}</Option>
             </SelectField>
           </div>
         </div>
@@ -183,5 +208,3 @@ const getTimeoutMeasure = (ts) => {
 // Dividing the amount by it's measure (hours, days, weeks) we
 // obtain the amount of time
 const getTimeoutAmount = (ts) => ts / TIMESTAMPS[getTimeoutMeasure(ts)];
-
-const lang = new I18n(translations);

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

@@ -3,9 +3,7 @@ import {Card} from 'coral-ui';
 import Domainlist from './Domainlist';
 import EmbedLink from './EmbedLink';
 import styles from './Configure.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 const updateCustomCssUrl = (updateSettings) => (event) => {
   const customCssUrl = event.target.value;
@@ -21,8 +19,8 @@ const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
       <EmbedLink />
       <Card className={styles.configSetting}>
         <div className={styles.wrapper}>
-          <div className={styles.settingsHeader}>{lang.t('configure.custom-css-url')}</div>
-          <p>{lang.t('configure.custom-css-url-desc')}</p>
+          <div className={styles.settingsHeader}>{t('configure.custom_css_url')}</div>
+          <p>{t('configure.custom_css_url_desc')}</p>
           <input
             className={styles.customCSSInput}
             value={settings.customCssUrl}

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import t from 'coral-framework/services/i18n';
 import TagsInput from 'react-tagsinput';
 import styles from './Configure.css';
 import {Card} from 'coral-ui';
@@ -8,8 +7,8 @@ import {Card} from 'coral-ui';
 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
   <div>
     <Card id={styles.bannedWordlist} className={styles.configSetting}>
-      <div className={styles.settingsHeader}>{lang.t('configure.banned-words-title')}</div>
-      <p className={styles.wordlistDesc}>{lang.t('configure.banned-word-text')}</p>
+      <div className={styles.settingsHeader}>{t('configure.banned_words_title')}</div>
+      <p className={styles.wordlistDesc}>{t('configure.banned_word_text')}</p>
       <div className={styles.wrapper}>
         <TagsInput
           value={bannedWords}
@@ -21,8 +20,8 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
       </div>
     </Card>
     <Card id={styles.suspectWordlist} className={styles.configSetting}>
-      <div className={styles.settingsHeader}>{lang.t('configure.suspect-words-title')}</div>
-      <p className={styles.wordlistDesc}>{lang.t('configure.suspect-word-text')}</p>
+      <div className={styles.settingsHeader}>{t('configure.suspect_word_title')}</div>
+      <p className={styles.wordlistDesc}>{t('configure.suspect_word_text')}</p>
       <div className={styles.wrapper}>
         <TagsInput
           value={suspectWords}
@@ -36,5 +35,3 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
 );
 
 export default Wordlist;
-
-const lang = new I18n(translations);

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

@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose} from 'react-apollo';
+import {
+  fetchSettings,
+  updateSettings,
+  saveSettingsToServer,
+  updateWordlist,
+  updateDomainlist
+} from '../../../actions/settings';
+
+import Configure from '../components/Configure';
+
+class ConfigureContainer extends Component {
+  componentWillMount = () => {
+    this.props.fetchSettings();
+  }
+
+  render () {
+    return <Configure {...this.props} />;
+  }
+}
+
+const mapStateToProps = (state) => ({
+  auth: state.auth.toJS(),
+  settings: state.settings.toJS()
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    fetchSettings,
+    updateSettings,
+    saveSettingsToServer,
+    updateWordlist,
+    updateDomainlist
+  }, dispatch);
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+)(ConfigureContainer);
+

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

@@ -0,0 +1 @@
+export {default} from './containers/Configure';

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

@@ -1,18 +1,15 @@
 import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
 import styles from './Widget.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations';
-
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 const ActivityWidget = ({assets}) => {
   return (
     <div className={styles.widget}>
-      <h2 className={styles.heading}>Articles with the most conversations</h2>
+      <h2 className={styles.heading}>{t('dashboard.most_conversations')}</h2>
       <div className={styles.widgetHead}>
-        <p>{lang.t('streams.article')}</p>
-        <p>{lang.t('dashboard.comment_count')}</p>
+        <p>{t('streams.article')}</p>
+        <p>{t('dashboard.comment_count')}</p>
       </div>
       <div className={styles.widgetTable}>
         {
@@ -29,7 +26,7 @@ const ActivityWidget = ({assets}) => {
               </div>
             );
           })
-          : <div className={styles.rowLinkify}>{lang.t('dashboard.no_activity')}</div>
+          : <div className={styles.rowLinkify}>{t('dashboard.no_activity')}</div>
         }
       </div>
     </div>

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

@@ -1,10 +1,8 @@
 import React, {PropTypes} from 'react';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations';
-import styles from 'coral-admin/src/containers/Dashboard/Dashboard.css';
+import styles from './Dashboard.css';
 import {Icon} from 'coral-ui';
 
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 const refreshIntervalSeconds = 60 * 5;
 
 class CountdownTimer extends React.Component {
@@ -74,7 +72,7 @@ class CountdownTimer extends React.Component {
         className={styles.autoUpdate}
         onClick={this.dismissNote}>
         <b>×</b>
-        <Icon name='timer' /> <strong>{lang.t('dashboard.next-update', this.formatTime())}</strong> {lang.t('dashboard.auto-update')}
+        <Icon name='timer' /> <strong>{t('dashboard.next_update', this.formatTime())}</strong> {t('dashboard.auto_update')}
       </p>
     );
   }

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import FlagWidget from './FlagWidget';
+import ActivityWidget from './ActivityWidget';
+import CountdownTimer from './CountdownTimer';
+import styles from './Dashboard.css';
+
+export default ({root: {assetsByActivity, assetsByFlag}, reloadData}) => (
+  <div>
+    <CountdownTimer handleTimeout={reloadData} />
+    <div className={styles.Dashboard}>
+      <FlagWidget assets={assetsByFlag} />
+      <ActivityWidget assets={assetsByActivity} />
+    </div>
+  </div>
+);

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

@@ -1,19 +1,17 @@
 import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
 import styles from './Widget.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations';
 
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 const FlagWidget = ({assets}) => {
 
   return (
     <div className={styles.widget}>
-      <h2 className={styles.heading}>{lang.t('dashboard.most_flags')}</h2>
+      <h2 className={styles.heading}>{t('dashboard.most_flags')}</h2>
       <div className={styles.widgetHead}>
-        <p>{lang.t('streams.article')}</p>
-        <p>{lang.t('dashboard.flags')}</p>
+        <p>{t('streams.article')}</p>
+        <p>{t('dashboard.flags')}</p>
       </div>
       <div className={styles.widgetTable}>
         {
@@ -35,7 +33,7 @@ const FlagWidget = ({assets}) => {
               </div>
             );
           })
-          : <div className={styles.rowLinkify}>{lang.t('dashboard.no_flags')}</div>
+          : <div className={styles.rowLinkify}>{t('dashboard.no_flags')}</div>
         }
       </div>
     </div>

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

@@ -1,10 +1,7 @@
 import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
 import styles from './Widget.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations';
-
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 const LikeWidget = ({assets}) => {
 
@@ -12,8 +9,8 @@ const LikeWidget = ({assets}) => {
     <div className={styles.widget}>
       <h2 className={styles.heading}>Articles with the most likes</h2>
       <div className={styles.widgetHead}>
-        <p>{lang.t('streams.article')}</p>
-        <p>{lang.t('modqueue.likes')}</p>
+        <p>{t('streams.article')}</p>
+        <p>{t('modqueue.likes')}</p>
       </div>
       <div className={styles.widgetTable}>
         {
@@ -31,7 +28,7 @@ const LikeWidget = ({assets}) => {
               </div>
             );
           })
-          : <div className={styles.rowLinkify}>{lang.t('dashboard.no_likes')}</div>
+          : <div className={styles.rowLinkify}>{t('dashboard.no_likes')}</div>
         }
       </div>
     </div>

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

@@ -1,11 +1,9 @@
 import React from 'react';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations';
+
 import ModerationQueue from 'coral-admin/src/containers/ModerationQueue/ModerationQueue';
 import styles from './Widget.css';
 import BanUserDialog from 'coral-admin/src/components/BanUserDialog';
-
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 const MostLikedCommentsWidget = (props) => {
   const {
@@ -21,7 +19,7 @@ const MostLikedCommentsWidget = (props) => {
 
   return (
     <div className={styles.widget}>
-      <h2 className={styles.heading}>{lang.t('most_liked_comments')}</h2>
+      <h2 className={styles.heading}>{t('most_liked_comments')}</h2>
       <ModerationQueue
         comments={comments}
         suspectWords={settings.wordlist.suspect}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import Dashboard from '../components/Dashboard';
+import {compose,  gql} from 'react-apollo';
+import withQuery from 'coral-framework/hocs/withQuery';
+
+import {Spinner} from 'coral-ui';
+
+class DashboardContainer extends React.Component {
+
+  reloadData = () => {
+    this.props.data.refetch();
+  }
+
+  render () {
+    if (this.props.data.loading) {
+      return <Spinner />;
+    }
+    return <Dashboard {...this.props} reloadData={this.reloadData} />;
+  }
+}
+
+export const witDashboardQuery = withQuery(gql`
+  query CoralAdmin_Dashboard($from: Date!, $to: Date!) {
+    assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) {
+      ...CoralAdmin_Metrics
+    }
+    assetsByActivity: assetMetrics(from: $from, to: $to, sort: ACTIVITY) {
+      ...CoralAdmin_Metrics
+    }
+  }
+  fragment CoralAdmin_Metrics on Asset {
+    id
+    title
+    url
+    author
+    created_at
+    commentCount
+    action_summaries {
+      actionCount
+      actionableItemCount
+    }
+  }
+`, {
+  options: ({settings: {dashboardWindowStart, dashboardWindowEnd}}) => {
+    return {
+      variables: {
+        from: dashboardWindowStart,
+        to: dashboardWindowEnd
+      }
+    };
+  }
+});
+
+const mapStateToProps = (state) => {
+  return {
+    settings: state.settings.toJS(),
+    moderation: state.moderation.toJS()
+  };
+};
+
+export default compose(
+  connect(mapStateToProps),
+  witDashboardQuery,
+)(DashboardContainer);

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

@@ -0,0 +1 @@
+export {default} from './containers/Dashboard.js';

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

@@ -0,0 +1,79 @@
+import React, {Component} from 'react';
+import styles from './style.css';
+import {Wizard, WizardNav} from 'coral-ui';
+import Layout from 'coral-admin/src/components/ui/Layout';
+
+import InitialStep from './Steps/InitialStep';
+import AddOrganizationName from './Steps/AddOrganizationName';
+import CreateYourAccount from './Steps/CreateYourAccount';
+import PermittedDomainsStep from './Steps/PermittedDomainsStep';
+import FinalStep from './Steps/FinalStep';
+
+export default class Install extends Component {
+  handleDomainsChange = (value) => {
+    this.props.updatePermittedDomains(value);
+  };
+
+  handleSettingsChange = ({currentTarget: {name, value}}) => {
+    this.props.updateSettingsFormData(name, value);
+  };
+
+  handleUserChange = ({currentTarget: {name, value}}) => {
+    this.props.updateUserFormData(name, value);
+  };
+
+  handleSettingsSubmit = (e) => {
+    e.preventDefault();
+    this.props.submitSettings();
+  };
+
+  handleUserSubmit = (e) => {
+    e.preventDefault();
+    this.props.submitUser();
+  }
+
+  render() {
+    const {install} = this.props;
+
+    return (
+      <Layout restricted={true}>
+        <div className={styles.Install}>
+          {
+            !install.alreadyInstalled ? (
+              <div>
+                <h2>Welcome to the Coral Project</h2>
+                { install.step !== 0 ? <WizardNav items={install.navItems} currentStep={install.step} icon='check'/> : null }
+                <Wizard
+                  currentStep={install.step}
+                  nextStep={this.props.nextStep}
+                  previousStep={this.props.previousStep}
+                  goToStep={this.props.goToStep}
+                >
+                  <InitialStep/>
+                  <AddOrganizationName
+                    install={install}
+                    handleSettingsChange={this.handleSettingsChange}
+                    handleSettingsSubmit={this.handleSettingsSubmit}
+                  />
+                  <CreateYourAccount
+                    install={install}
+                    handleUserChange={this.handleUserChange}
+                    handleUserSubmit={this.handleUserSubmit}
+                  />
+                  <PermittedDomainsStep
+                    install={install}
+                    handleDomainsChange={this.handleDomainsChange}
+                    finishInstall={this.props.finishInstall}
+                  />
+                  <FinalStep/>
+                </Wizard>
+              </div>
+            ) : (
+              <div>Talk is already installed</div>
+            )
+          }
+        </div>
+      </Layout>
+    );
+  }
+}

client/coral-admin/src/routes/Install/components/Steps/AddOrganizationName.js

@@ -2,26 +2,24 @@ import React from 'react';
 import styles from './style.css';
 import {TextField, Button} from 'coral-ui';
 
-const lang = new I18n(translations);
-import translations from '../../translations.json';
-import I18n from 'coral-framework/modules/i18n/i18n';
+import t from 'coral-framework/services/i18n';
 
 const AddOrganizationName = (props) => {
   const {handleSettingsChange, handleSettingsSubmit, install} = props;
   return (
     <div className={styles.step}>
-      <p>{lang.t('ADD_ORGANIZATION.DESCRIPTION')}</p>
+      <p>{t('install.add_organization.description')}</p>
       <div className={styles.form}>
         <form onSubmit={handleSettingsSubmit}>
           <TextField
             className={styles.TextField}
             id="organizationName"
             type="text"
-            label={lang.t('ADD_ORGANIZATION.LABEL')}
+            label={t('install.add_organization.label')}
             onChange={handleSettingsChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.organizationName} />
-          <Button type="submit" cStyle='black' full>{lang.t('ADD_ORGANIZATION.SAVE')}</Button>
+          <Button type="submit" cStyle='black' full>{t('install.add_organization.save')}</Button>
         </form>
       </div>
     </div>

client/coral-admin/src/routes/Install/components/Steps/CreateYourAccount.js

@@ -2,9 +2,7 @@ import React from 'react';
 import styles from './style.css';
 import {TextField, Button, Spinner} from 'coral-ui';
 
-const lang = new I18n(translations);
-import translations from '../../translations.json';
-import I18n from 'coral-framework/modules/i18n/i18n';
+import t from 'coral-framework/services/i18n';
 
 const InitialStep = (props) => {
   const {handleUserChange, handleUserSubmit, install} = props;
@@ -16,7 +14,7 @@ const InitialStep = (props) => {
             className={styles.textField}
             id="email"
             type="email"
-            label={lang.t('CREATE.EMAIL')}
+            label={t('install.create.email')}
             onChange={handleUserChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.email}
@@ -27,7 +25,7 @@ const InitialStep = (props) => {
             className={styles.textField}
             id="username"
             type="text"
-            label={lang.t('CREATE.USERNAME')}
+            label={t('install.create.username')}
             onChange={handleUserChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.username}
@@ -37,7 +35,7 @@ const InitialStep = (props) => {
             className={styles.textField}
             id="password"
             type="password"
-            label={lang.t('CREATE.PASSWORD')}
+            label={t('install.create.password')}
             onChange={handleUserChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.password}
@@ -47,15 +45,15 @@ const InitialStep = (props) => {
             className={styles.textField}
             id="confirmPassword"
             type="password"
-            label={lang.t('CREATE.CONFIRM_PASSWORD')}
+            label={t('install.create.confirm_password')}
             onChange={handleUserChange}
             showErrors={install.showErrors}
-            errorMsg={install.errors.confirmPassword}
+            errorMsg={install.errors.confirm_password}
             />
 
           {
             !props.install.isLoading ?
-            <Button cStyle='black' type="submit" full>{lang.t('CREATE.SAVE')}</Button>
+            <Button cStyle='black' type="submit" full>{t('install.create.save')}</Button>
             :
             <Spinner />
           }

client/coral-admin/src/routes/Install/components/Steps/FinalStep.js

@@ -3,16 +3,14 @@ import styles from './style.css';
 import {Button} from 'coral-ui';
 import {Link} from 'react-router';
 
-const lang = new I18n(translations);
-import translations from '../../translations.json';
-import I18n from 'coral-framework/modules/i18n/i18n';
+import t from 'coral-framework/services/i18n';
 
 const InitialStep = () => {
   return (
     <div className={`${styles.step} ${styles.finalStep}`}>
-      <p>{lang.t('FINAL.DESCRIPTION')}</p>
-      <Button raised><Link to='/admin'>{lang.t('FINAL.LAUNCH')}</Link></Button>
-      <Button cStyle='black' raised><a href="http://coralproject.net">{lang.t('FINAL.CLOSE')}</a></Button>
+      <p>{t('install.final.description')}</p>
+      <Button raised><Link to='/admin'>{t('install.final.launch')}</Link></Button>
+      <Button cStyle='black' raised><a href="http://coralproject.net">{t('install.final.close')}</a></Button>
     </div>
   );
 };

client/coral-admin/src/routes/Install/components/Steps/InitialStep.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './style.css';
+import {Button} from 'coral-ui';
+
+import t from 'coral-framework/services/i18n';
+
+const InitialStep = (props) => {
+  const {nextStep} = props;
+  return (
+    <div className={styles.step}>
+      <p>{t('install.initial.description')}</p>
+      <Button cStyle='green' onClick={nextStep} raised>{t('install.initial.submit')}</Button>
+    </div>
+  );
+};
+
+export default InitialStep;

client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js

@@ -3,18 +3,16 @@ import styles from './style.css';
 import {Button, Card} from 'coral-ui';
 import TagsInput from 'react-tagsinput';
 
-const lang = new I18n(translations);
-import translations from '../../translations.json';
-import I18n from 'coral-framework/modules/i18n/i18n';
+import t from 'coral-framework/services/i18n';
 
 const PermittedDomainsStep = (props) => {
   const {finishInstall, install, handleDomainsChange} = props;
   const domains = install.data.settings.domains.whitelist;
   return (
     <div className={styles.step}>
-      <h3>{lang.t('PERMITTED_DOMAINS.TITLE')}</h3>
+      <h3>{t('install.permitted_domains.title')}</h3>
       <Card className={styles.card}>
-        <p>{lang.t('PERMITTED_DOMAINS.DESCRIPTION')}</p>
+        <p>{t('install.permitted_domains.description')}</p>
         <TagsInput
           value={domains}
           inputProps={{placeholder: 'URL'}}
@@ -23,7 +21,7 @@ const PermittedDomainsStep = (props) => {
           onChange={(tags) => handleDomainsChange(tags)}
         />
       </Card>
-      <Button cStyle='green' onClick={finishInstall} raised>{lang.t('PERMITTED_DOMAINS.SUBMIT')}</Button>
+      <Button cStyle='green' onClick={finishInstall} raised>{t('install.permitted_domains.submit')}</Button>
     </div>
   );
 };

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

@@ -0,0 +1,57 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose} from 'react-apollo';
+import Install from '../components/Install';
+
+import {
+  goToStep,
+  nextStep,
+  submitUser,
+  checkInstall,
+  previousStep,
+  finishInstall,
+  submitSettings,
+  updateUserFormData,
+  updateSettingsFormData,
+  updatePermittedDomains
+} from '../../../actions/install';
+
+class InstallContainer extends Component {
+  componentDidMount() {
+    const {checkInstall} = this.props;
+    checkInstall(() => {
+      this.context.router.push('/admin');
+    });
+  }
+
+  render() {
+    return <Install {...this.props}/>;
+  }
+}
+
+InstallContainer.contextTypes = {
+  router: React.PropTypes.object
+};
+
+const mapStateToProps = (state) => ({
+  install: state.install.toJS()
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    goToStep,
+    nextStep,
+    submitUser,
+    checkInstall,
+    previousStep,
+    finishInstall,
+    submitSettings,
+    updateUserFormData,
+    updateSettingsFormData,
+    updatePermittedDomains
+  }, dispatch);
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+)(InstallContainer);

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

@@ -0,0 +1 @@
+export {default} from './containers/Install.js';