merge with master after huge coral-embed-stream refactor

.gitignore

@@ -19,5 +19,6 @@ plugins/*
 !plugins/coral-plugin-facebook-auth
 !plugins/coral-plugin-respect
 !plugins/coral-plugin-offtopic
+!plugins/coral-plugin-like
 
 **/node_modules/*

Dockerfile

@@ -13,7 +13,8 @@ EXPOSE 5000
 COPY . /usr/src/app
 
 # Install app dependencies and build static assets.
-RUN yarn install --frozen-lockfile && \
+RUN yarn global add node-gyp && \
+    yarn install --frozen-lockfile && \
     cli plugins reconcile && \
     yarn build && \
     yarn install --production && \

INSTALL.md

@@ -243,7 +243,7 @@ file under the `scripts` key including:
 # Setup
 
 Once you've installed Talk (either via Docker or source), you still need to
-setup the application. If you are unfamiliar with any terminoligy used in the
+setup the application. If you are unfamiliar with any terminology used in the
 setup process, refer to the `TERMINOLOGY.md` document.
 
 ## Via Web

PLUGINS.md

@@ -145,6 +145,10 @@ type RootMutation {
 type RootQuery {
   people: [Person!]
 }
+
+type Subscription {
+  leader: Person
+}
 ```
 
 Thanks to [gql-merge](https://www.npmjs.com/package/gql-merge) the contents of
@@ -259,6 +263,23 @@ If your post function accepts four parameters, then it can modify the field
 result. It is *required* that the function resolves a promise (or returns) with
 the modified value or simply the original if you didn't modify it.
 
+#### Field: `setupFunctions`
+
+```js
+setupFunctions: {
+  leader: (options, args) => ({
+    leader: {
+      filter: (person) => person.place === 1
+    },
+  }),
+}
+```
+
+Setup functions allow you to create filters that control which pubsub.publish() events
+send data to the client. If the type in question contains args, clients may subscribe using those arguments to further filter their subscription.
+
+For more information, see the [Apollo Docs](https://github.com/apollographql/graphql-subscriptions).
+
 #### Field: `router`
 
 ```js
@@ -375,6 +396,10 @@ module.exports = {
   type RootQuery {
     people: [Person!]
   }
+
+  type Subscription {
+    leader: Person
+  }
   `,
   context: {
     Slack: () => ({
@@ -430,6 +455,13 @@ module.exports = {
         }
       }
     }
+  },
+  setupFunctions: {
+    leader: (options, args) => ({
+      leader: {
+        filter: (person) => person.place === 1
+      }
+    }
   }
 };
 

app.js

@@ -5,13 +5,11 @@ const path = require('path');
 const helmet = require('helmet');
 const {passport} = require('./services/passport');
 const plugins = require('./services/plugins');
-const session = require('express-session');
 const enabled = require('debug').enabled;
-const RedisStore = require('connect-redis')(session);
-const redis = require('./services/redis');
 const csrf = require('csurf');
 const errors = require('./errors');
-const graph = require('./graph');
+const session = require('./services/session');
+const {createGraphOptions} = require('./graph');
 const apollo = require('graphql-server-express');
 
 const app = express();
@@ -43,34 +41,7 @@ app.set('view engine', 'ejs');
 // SESSION MIDDLEWARE
 //==============================================================================
 
-const session_opts = {
-  secret: process.env.TALK_SESSION_SECRET,
-  httpOnly: true,
-  rolling: true,
-  saveUninitialized: true,
-  resave: true,
-  unset: 'destroy',
-  name: 'talk.sid',
-  cookie: {
-    secure: false,
-    maxAge: 8.64e+7, // 24 hours for session token expiry
-  },
-  store: new RedisStore({
-    client: redis.createClient(),
-  })
-};
-
-if (app.get('env') === 'production') {
-
-  // Enable the secure cookie when we are in production mode.
-  session_opts.cookie.secure = true;
-} else if (app.get('env') === 'test') {
-
-  // Add in the secret during tests.
-  session_opts.secret = 'keyboard cat';
-}
-
-app.use(session(session_opts));
+app.use(session);
 
 //==============================================================================
 // PASSPORT MIDDLEWARE
@@ -96,7 +67,7 @@ app.use(passport.session());
 //==============================================================================
 
 // GraphQL endpoint.
-app.use('/api/v1/graph/ql', apollo.graphqlExpress(graph.createGraphOptions));
+app.use('/api/v1/graph/ql', apollo.graphqlExpress(createGraphOptions));
 
 // Only include the graphiql tool if we aren't in production mode.
 if (app.get('env') !== 'production') {

bin/cli-serve

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

client/coral-admin/src/AppRouter.js

@@ -42,6 +42,9 @@ const routes = (
         <Route path='all' components={ModerationContainer}>
           <Route path=':id' components={ModerationContainer} />
         </Route>
+        <Route path='accepted' components={ModerationContainer}>
+          <Route path=':id' components={ModerationContainer} />
+        </Route>
         <Route path='premod' components={ModerationContainer}>
           <Route path=':id' components={ModerationContainer} />
         </Route>

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

@@ -3,9 +3,15 @@ import styles from './ModerationList.css';
 import {Button} from 'coral-ui';
 import {menuActionsMap} from '../containers/ModerationQueue/helpers/moderationQueueActionsMap';
 
-const ActionButton = ({type = '', status, ...props}) => {
+const ActionButton = ({type = '', active, ...props}) => {
   const typeName = type.toLowerCase();
-  const active = ((type === 'REJECT' && status === 'REJECTED') || (type === 'APPROVE' && status === 'ACCEPTED'));
+  let text = menuActionsMap[type].text;
+
+  if (text === 'Approve' && active) {
+    text = 'Approved';
+  } else if (text === 'Reject' && active) {
+    text = 'Rejected';
+  }
 
   return (
     <Button
@@ -13,12 +19,12 @@ const ActionButton = ({type = '', status, ...props}) => {
       cStyle={typeName}
       icon={menuActionsMap[type].icon}
       onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
-    >{menuActionsMap[type].text}</Button>
+    >{text}</Button>
   );
 };
 
 ActionButton.propTypes = {
-  status: PropTypes.string
+  active: PropTypes.bool
 };
 
 export default ActionButton;

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

@@ -28,6 +28,8 @@ const shortcuts = [
 export default class ModerationKeysModal extends React.Component {
 
   static propTypes = {
+    open: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
     hideShortcutsNote: PropTypes.func.isRequired,
     shortcutsNoteVisible: PropTypes.string.isRequired
   }

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

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

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

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

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

@@ -4,7 +4,6 @@ import translations from 'coral-admin/src/translations.json';
 
 import styles from './Community.css';
 import Table from './Table';
-import Loading from './Loading';
 import {Pager, Icon} from 'coral-ui';
 import EmptyCard from '../../components/EmptyCard';
 
@@ -29,8 +28,8 @@ const tableHeaders = [
   }
 ];
 
-const People = ({isFetching, commenters, searchValue, onSearchChange, ...props}) => {
-  const hasResults = !isFetching && !!commenters.length;
+const People = ({commenters, searchValue, onSearchChange, ...props}) => {
+  const hasResults = !!commenters.length;
   return (
     <div className={styles.container}>
       <div className={styles.leftColumn}>
@@ -47,7 +46,6 @@ const People = ({isFetching, commenters, searchValue, onSearchChange, ...props})
         </div>
       </div>
       <div className={styles.mainContent}>
-        { isFetching && <Loading /> }
         {
           hasResults
           ? <Table

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

@@ -21,7 +21,7 @@ const FlagWidget = ({assets}) => {
           ? assets.map(asset => {
             let flagSummary = null;
             if (asset.action_summaries) {
-              flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary');
+              flagSummary = asset.action_summaries.find(s => s.__typename === 'FlagAssetActionSummary');
             }
 
             return (

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

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

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

@@ -5,7 +5,7 @@ import key from 'keymaster';
 import isEqual from 'lodash/isEqual';
 import styles from './components/styles.css';
 
-import {modQueueQuery} from '../../graphql/queries';
+import {modQueueQuery, getQueueCounts} from '../../graphql/queries';
 import {banUser, setCommentStatus} from '../../graphql/mutations';
 
 import {fetchSettings} from 'actions/settings';
@@ -138,6 +138,9 @@ class ModerationContainer extends Component {
     case 'all':
       activeTabCount = data.allCount;
       break;
+    case 'accepted':
+      activeTabCount = data.acceptedCount;
+      break;
     case 'premod':
       activeTabCount = data.premodCount;
       break;
@@ -155,6 +158,7 @@ class ModerationContainer extends Component {
         <ModerationMenu
           asset={asset}
           allCount={data.allCount}
+          acceptedCount={data.acceptedCount}
           premodCount={data.premodCount}
           rejectedCount={data.rejectedCount}
           flaggedCount={data.flaggedCount}
@@ -216,6 +220,7 @@ const mapDispatchToProps = dispatch => ({
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   setCommentStatus,
+  getQueueCounts,
   modQueueQuery,
   banUser
 )(ModerationContainer);

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

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

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

@@ -31,7 +31,7 @@ const Comment = ({actions = [], comment, ...props}) => {
   }
 
   return (
-    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem}`}>
+    <li tabIndex={props.index} className={`mdl-card ${props.selected ?  'mdl-shadow--16dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
       <div className={styles.container}>
         <div className={styles.itemHeader}>
           <div className={styles.author}>
@@ -66,15 +66,17 @@ const Comment = ({actions = [], comment, ...props}) => {
           <div className={styles.sideActions}>
             {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
             <div className={`actions ${styles.actions}`}>
-              {actions.map((action, i) =>
-                <ActionButton key={i}
-                              type={action}
-                              user={comment.user}
-                              status={comment.status}
-                              acceptComment={() => props.acceptComment({commentId: comment.id})}
-                              rejectComment={() => props.rejectComment({commentId: comment.id})}
-                />
-              )}
+              {actions.map((action, i) => {
+                const active = (action === 'REJECT' && comment.status === 'REJECTED') ||
+                               (action === 'APPROVE' && comment.status === 'ACCEPTED');
+                return <ActionButton key={i}
+                  type={action}
+                  user={comment.user}
+                  status={comment.status}
+                  active={active}
+                  acceptComment={() => props.acceptComment({commentId: comment.id})}
+                  rejectComment={() => props.rejectComment({commentId: comment.id})} />;
+              })}
             </div>
           </div>
         </div>

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

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

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

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

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

@@ -10,7 +10,7 @@ import {Link} from 'react-router';
 const lang = new I18n(translations);
 
 const ModerationMenu = (
-  {asset, allCount, premodCount, rejectedCount, flaggedCount, selectSort, sort}
+  {asset, allCount, acceptedCount, premodCount, rejectedCount, flaggedCount, selectSort, sort}
 ) => {
 
   function getPath (type) {
@@ -28,6 +28,12 @@ const ModerationMenu = (
             activeClassName={styles.active}>
             <Icon name='question_answer' className={styles.tabIcon} /> {lang.t('modqueue.all')} <CommentCount count={allCount} />
           </Link>
+          <Link
+            to={getPath('accepted')}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            <Icon name='check' className={styles.tabIcon} /> {lang.t('modqueue.approved')} <CommentCount count={acceptedCount} />
+          </Link>
           <Link
             to={getPath('premod')}
             className={`mdl-tabs__tab ${styles.tab}`}

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

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

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

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

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

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

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

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

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

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

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

@@ -8,6 +8,13 @@ query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
     }) {
       ...commentView
     }
+    accepted: comments(query: {
+      statuses: [ACCEPTED],
+      asset_id: $asset_id,
+      sort: $sort
+    }) {
+      ...commentView
+    }
     premod: comments(query: {
         statuses: [PREMOD],
         asset_id: $asset_id,
@@ -38,6 +45,10 @@ query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
     allCount: commentCount(query: {
       asset_id: $asset_id
     })
+    acceptedCount: commentCount(query: {
+      statuses: [ACCEPTED],
+      asset_id: $asset_id
+    })
     premodCount: commentCount(query: {
       statuses: [PREMOD],
       asset_id: $asset_id

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

@@ -7,12 +7,37 @@ const fm = new IntrospectionFragmentMatcher({
   introspectionQueryResultData: {
     __schema: {
       types: [
+        {
+          kind: 'INTERFACE',
+          name: 'UserError',
+          possibleTypes: [
+            {name: 'GenericUserError'},
+            {name: 'ValidationUserError'}
+          ]
+        },
+        {
+          kind: 'INTERFACE',
+          name: 'Response',
+          possibleTypes: [
+            {name: 'CreateCommentResponse'},
+            {name: 'CreateFlagResponse'},
+            {name: 'CreateDontAgreeResponse'},
+            {name: 'DeleteActionResponse'},
+            {name: 'SetUserStatusResponse'},
+            {name: 'SuspendUserResponse'},
+            {name: 'SetCommentStatusResponse'},
+            {name: 'AddCommentTagResponse'},
+            {name: 'RemoveCommentTagResponse'},
+            {name: 'IgnoreUserResponse'},
+            {name: 'StopIgnoringUserResponse'}
+          ]
+        },
         {
           kind: 'INTERFACE',
           name: 'Action',
           possibleTypes: [
+            {name: 'DefaultAction'},
             {name: 'FlagAction'},
-            {name: 'LikeAction'},
             {name: 'DontAgreeAction'}
           ],
         },
@@ -20,10 +45,18 @@ const fm = new IntrospectionFragmentMatcher({
           kind: 'INTERFACE',
           name: 'ActionSummary',
           possibleTypes: [
+            {name: 'DefaultActionSummary'},
             {name: 'FlagActionSummary'},
-            {name: 'LikeActionSummary'},
             {name: 'DontAgreeActionSummary'}
           ],
+        },
+        {
+          kind: 'INTERFACE',
+          name: 'AssetActionSummary',
+          possibleTypes: [
+            {name: 'DefaultAssetActionSummary'},
+            {name: 'FlagAssetActionSummary'},
+          ]
         }
       ],
     },

client/coral-admin/src/translations.json

@@ -36,6 +36,7 @@
     "modqueue": {
       "likes": "likes",
       "all": "all",
+      "approved": "approved",
       "premod": "pre-mod",
       "rejected": "rejected",
       "flagged": "flagged",
@@ -62,7 +63,10 @@
       "impersonating": "Impersonating",
       "offensive": "Offensive",
       "spam/ads": "Spam/Ads",
-      "other": "Other"
+      "other": "Other",
+      "thousand": "k",
+      "million": "M",
+      "billion": "B"
     },
     "comment": {
       "flagged": "flagged",
@@ -79,6 +83,8 @@
       "copy": "Copy to Clipboard"
     },
     "configure": {
+      "sign-out": "Sign Out",
+      "shortcuts": "Shortcuts",
       "closed-stream-settings": "Closed Stream Message",
       "open-stream-configuration": "This comment stream is currently open. By closing this comment stream, no new comments may be submitted and all previous comments will still be displayed.",
       "close-stream-configuration": "This comment stream is currently closed. By opening this comment stream, new comments may be submitted and displayed",
@@ -225,6 +231,8 @@
       "loading": "Cargando resultados"
     },
     "modqueue": {
+      "all": "todos",
+      "approved": "aprobado",
       "likes": "gustos",
       "premod": "pre-mod",
       "rejected": "rechazado",
@@ -243,7 +251,10 @@
       "impersonating": "Suplantación",
       "offensive": "Ofensivo",
       "spam/ads": "Spam/Propaganda",
-      "other": "Otros"
+      "other": "Otros",
+      "thousand": "m",
+      "million": "M",
+      "billion": "B"
     },
     "comment": {
       "flagged": "marcado",
@@ -257,6 +268,8 @@
       "username_flags": "marcas para este nombre de usuario"
     },
     "configure": {
+      "sign-out": "Desconectar",
+      "shortcuts": "Atajos",
       "closed-stream-settings": "Mensaje a enviar cuando los comentarios están cerrados en el artículo",
       "open-stream-configuration": "Este hilo de comentarios esta abierto. Al cerrarlo, ningún nuevo comentario será publicado y todos los comentarios anteriores serán mostrados.",
       "close-stream-configuration": "Este hilo de comentario está en este momento cerrado. Al abrirlo, nuevos comentarios serán publicaods y mostrados.",

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Router, Route, browserHistory} from 'react-router';
 
-import Embed from './Embed';
+import Embed from './containers/Embed';
 import SignInContainer from 'coral-sign-in/containers/SignInContainer';
 
 const routes = (

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

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

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

@@ -1,107 +0,0 @@
-import React, {PropTypes} from 'react';
-import Comment from './Comment';
-import IgnoredCommentTombstone from './IgnoredCommentTombstone';
-
-class Stream extends React.Component {
-
-  static propTypes = {
-    addNotification: PropTypes.func.isRequired,
-    postItem: PropTypes.func.isRequired,
-    asset: PropTypes.object.isRequired,
-    open: PropTypes.bool.isRequired,
-    comments: PropTypes.array.isRequired,
-    currentUser: PropTypes.shape({
-      username: PropTypes.string,
-      id: PropTypes.string
-    }),
-
-    charCountEnable: PropTypes.bool.isRequired,
-    maxCharCount: PropTypes.number,
-
-    // dispatch action to add a tag to a comment
-    addCommentTag: PropTypes.func,
-
-    // dispatch action to remove a tag from a comment
-    removeCommentTag: PropTypes.func,
-
-    // dispatch action to ignore another user
-    ignoreUser: React.PropTypes.func,
-
-    // list of user ids that should be rendered as ignored
-    ignoredUsers: React.PropTypes.arrayOf(React.PropTypes.string),
-
-    // edit a comment, passed (id, { body })
-    editComment: React.PropTypes.func,
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {activeReplyBox: '', countPoll: null};
-  }
-
-  render () {
-    const {
-      comments,
-      currentUser,
-      asset,
-      postItem,
-      addNotification,
-      postFlag,
-      postLike,
-      open,
-      postDontAgree,
-      loadMore,
-      deleteAction,
-      showSignInDialog,
-      addCommentTag,
-      removeCommentTag,
-      pluginProps,
-      ignoreUser,
-      ignoredUsers,
-      charCountEnable,
-      maxCharCount,
-    } = this.props;
-    const commentIsIgnored = (comment) => ignoredUsers && ignoredUsers.includes(comment.user.id);
-    return (
-      <div id='stream'>
-        {
-          comments.map(comment =>
-            commentIsIgnored(comment)
-              ? <IgnoredCommentTombstone
-                  key={comment.id}
-                />
-              : <Comment
-                  disableReply={!open}
-                  setActiveReplyBox={this.props.setActiveReplyBox}
-                  activeReplyBox={this.props.activeReplyBox}
-                  addNotification={addNotification}
-                  depth={0}
-                  postItem={postItem}
-                  editComment={this.props.editComment}
-                  asset={asset}
-                  currentUser={currentUser}
-                  postLike={postLike}
-                  postFlag={postFlag}
-                  postDontAgree={postDontAgree}
-                  addCommentTag={addCommentTag}
-                  removeCommentTag={removeCommentTag}
-                  ignoreUser={ignoreUser}
-                  commentIsIgnored={commentIsIgnored}
-                  loadMore={loadMore}
-                  deleteAction={deleteAction}
-                  showSignInDialog={showSignInDialog}
-                  key={comment.id}
-                  reactKey={comment.id}
-                  comment={comment}
-                  maxCharCount={maxCharCount}
-                  charCountEnable={charCountEnable}
-                  pluginProps={pluginProps}
-                />
-          )
-        }
-      </div>
-    );
-  }
-}
-
-export default Stream;

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

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

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

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

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

@@ -1,11 +1,3 @@
-// this component will
-// render its children
-// render a like button
-// render a permalink button
-// render a reply button
-// render a flag button
-// translate things?
-
 import React, {PropTypes} from 'react';
 import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
 
@@ -16,27 +8,35 @@ import Content from 'coral-plugin-commentcontent/CommentContent';
 import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
-import LikeButton from 'coral-plugin-likes/LikeButton';
-import {BestButton, IfUserCanModifyBest, BEST_TAG, commentIsBest, BestIndicator} from 'coral-plugin-best/BestButton';
-import LoadMore from 'coral-embed-stream/src/LoadMore';
+import {
+  BestButton,
+  IfUserCanModifyBest,
+  BEST_TAG,
+  commentIsBest,
+  BestIndicator
+} from 'coral-plugin-best/BestButton';
 import Slot from 'coral-framework/components/Slot';
+import LoadMore from './LoadMore';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import {TopRightMenu} from './TopRightMenu';
-import {getActionSummary, getTotalActionCount, iPerformedThisAction} from 'coral-framework/utils';
 import classnames from 'classnames';
 import {EditableCommentContent} from './EditableCommentContent';
+import {getActionSummary, iPerformedThisAction} from 'coral-framework/utils';
 
 import styles from './Comment.css';
 
-const isStaff = (tags) => !tags.every((t) => t.name !== 'STAFF') ;
+const isStaff = tags => !tags.every(t => t.name !== 'STAFF');
 
-// hold actions links (e.g. Like, Reply) along the comment footer
+// hold actions links (e.g. Reply) along the comment footer
 const ActionButton = ({children}) => {
-  return <span className="comment__action-button comment__action-button--nowrap">{ children }</span>;
+  return (
+    <span className="comment__action-button comment__action-button--nowrap">
+      {children}
+    </span>
+  );
 };
 
 class Comment extends React.Component {
-
   constructor(props) {
     super(props);
 
@@ -60,7 +60,6 @@ class Comment extends React.Component {
     setActiveReplyBox: PropTypes.func.isRequired,
     showSignInDialog: PropTypes.func.isRequired,
     postFlag: PropTypes.func.isRequired,
-    postLike: PropTypes.func.isRequired,
     deleteAction: PropTypes.func.isRequired,
     parentId: PropTypes.string,
     highlighted: PropTypes.string,
@@ -91,7 +90,8 @@ class Comment extends React.Component {
         PropTypes.shape({
           body: PropTypes.string.isRequired,
           id: PropTypes.string.isRequired
-        })),
+        })
+      ),
       user: PropTypes.shape({
         id: PropTypes.string.isRequired,
         name: PropTypes.string.isRequired
@@ -155,7 +155,6 @@ class Comment extends React.Component {
       postItem,
       addNotification,
       showSignInDialog,
-      postLike,
       highlighted,
       postFlag,
       postDontAgree,
@@ -169,12 +168,14 @@ class Comment extends React.Component {
       disableReply,
       commentIsIgnored,
       maxCharCount,
-      charCountEnable,
+      charCountEnable
     } = this.props;
 
-    const likeSummary = getActionSummary('LikeActionSummary', comment);
     const flagSummary = getActionSummary('FlagActionSummary', comment);
-    const dontAgreeSummary = getActionSummary('DontAgreeActionSummary', comment);
+    const dontAgreeSummary = getActionSummary(
+      'DontAgreeActionSummary',
+      comment
+    );
     let myFlag = null;
     if (iPerformedThisAction('FlagActionSummary', comment)) {
       myFlag = flagSummary.find(s => s.current_user);
@@ -182,46 +183,60 @@ class Comment extends React.Component {
       myFlag = dontAgreeSummary.find(s => s.current_user);
     }
 
-    let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`;
+    let commentClass = parentId
+      ? `reply ${styles.Reply}`
+      : `comment ${styles.Comment}`;
     commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : '';
 
     // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
-    const notifyOnError = (fn, errorToMessage) => async function (...args) {
-      if (typeof errorToMessage !== 'function') {errorToMessage = (error) => error.message;}
-      try {
-        return await fn(...args);
-      } catch (error) {
-        addNotification('error', errorToMessage(error));
-        throw error;
-      }
-    };
+    const notifyOnError = (fn, errorToMessage) =>
+      async function(...args) {
+        if (typeof errorToMessage !== 'function') {
+          errorToMessage = error => error.message;
+        }
+        try {
+          return await fn(...args);
+        } catch (error) {
+          addNotification('error', errorToMessage(error));
+          throw error;
+        }
+      };
 
-    const addBestTag = notifyOnError(() => addCommentTag({
-      id: comment.id,
-      tag: BEST_TAG,
-    }), () => 'Failed to tag comment as best');
+    const addBestTag = notifyOnError(
+      () =>
+        addCommentTag({
+          id: comment.id,
+          tag: BEST_TAG
+        }),
+      () => 'Failed to tag comment as best'
+    );
 
-    const removeBestTag = notifyOnError(() => removeCommentTag({
-      id: comment.id,
-      tag: BEST_TAG,
-    }), () => 'Failed to remove best comment tag');
+    const removeBestTag = notifyOnError(
+      () =>
+        removeCommentTag({
+          id: comment.id,
+          tag: BEST_TAG
+        }),
+      () => 'Failed to remove best comment tag'
+    );
 
     return (
       <div
         className={commentClass}
         id={`c_${comment.id}`}
-        style={{marginLeft: depth * 30}}>
+        style={{marginLeft: depth * 30}}
+      >
         <hr aria-hidden={true} />
-        <div className={highlighted === comment.id ? 'highlighted-comment' : ''}>
-          <AuthorName
-            author={comment.user}/>
-          { isStaff(comment.tags)
-            ? <TagLabel>Staff</TagLabel>
-          : null }
+        <div
+          className={highlighted === comment.id ? 'highlighted-comment' : ''}
+        >
+          <AuthorName author={comment.user} />
+          {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
-          { commentIsBest(comment)
+          {commentIsBest(comment)
             ? <TagLabel><BestIndicator /></TagLabel>
-          : null }
+            : null }
+
           <span className={styles.bylineSecondary}>
             <PubDate created_at={comment.created_at} />
             {
@@ -230,7 +245,15 @@ class Comment extends React.Component {
               : null
             }
           </span>
-          <Slot fill="commentInfoBar" comment={comment} commentId={comment.id} inline/>
+
+          <Slot
+            fill="commentInfoBar"
+            data={this.props.data}
+            root={this.props.root}
+            comment={comment}
+            commentId={comment.id}
+            inline
+          />
 
           { (currentUser &&
               (comment.user.id === currentUser.id))
@@ -266,40 +289,47 @@ class Comment extends React.Component {
                 parentId={parentId}
                 stopEditing={() => this.setState({isEditing: false})}
                 />
-            : <Content body={comment.body} />
+            : <div>
+                <Content body={comment.body} />
+                <Slot fill="commentContent" />
+              </div>
           }
-          
+
           <div className="commentActionsLeft comment__action-container">
-            <ActionButton>
-              {/* TODO implmement iPerformedThisAction for the like */}
-              <LikeButton
-                totalLikes={getTotalActionCount('LikeActionSummary', comment)}
-                like={likeSummary[0]}
-                id={comment.id}
-                postLike={postLike}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                currentUser={currentUser} />
-            </ActionButton>
-            {
-              !disableReply &&
+            <Slot
+              fill="commentReactions"
+              data={this.props.data}
+              root={this.props.root}
+              comment={comment}
+              commentId={comment.id}
+              inline
+            />
+            {!disableReply &&
               <ActionButton>
                 <ReplyButton
                   onClick={() => setActiveReplyBox(comment.id)}
                   parentCommentId={parentId || comment.id}
                   currentUserId={currentUser && currentUser.id}
-                  banned={false} />
-              </ActionButton>
-            }
+                  banned={false}
+                />
+              </ActionButton>}
             <ActionButton>
               <IfUserCanModifyBest user={currentUser}>
                 <BestButton
                   isBest={commentIsBest(comment)}
                   addBest={addBestTag}
-                  removeBest={removeBestTag} />
+                  removeBest={removeBestTag}
+                />
               </IfUserCanModifyBest>
             </ActionButton>
-            <Slot fill="commentDetail" comment={comment} commentId={comment.id} inline/>
+            <Slot
+              fill="commentActions"
+              data={this.props.data}
+              root={this.props.root}
+              comment={comment}
+              commentId={comment.id}
+              inline
+            />
           </div>
           <div className="commentActionsRight comment__action-container">
             <ActionButton>
@@ -315,12 +345,12 @@ class Comment extends React.Component {
                 postDontAgree={postDontAgree}
                 deleteAction={deleteAction}
                 showSignInDialog={showSignInDialog}
-                currentUser={currentUser} />
+                currentUser={currentUser}
+              />
             </ActionButton>
           </div>
         </div>
-        {
-          activeReplyBox === comment.id
+        {activeReplyBox === comment.id
           ? <ReplyBox
               commentPostedHandler={() => {
                 setActiveReplyBox('');
@@ -332,15 +362,16 @@ class Comment extends React.Component {
               addNotification={addNotification}
               authorId={currentUser.id}
               postItem={postItem}
-              assetId={asset.id} />
-          : null
-        }
-        {
-          comment.replies &&
+              assetId={asset.id}
+            />
+          : null}
+        {comment.replies &&
           comment.replies.map(reply => {
             return commentIsIgnored(reply)
               ? <IgnoredCommentTombstone key={reply.id} />
               : <Comment
+                  data={this.props.data}
+                  root={this.props.root}
                   setActiveReplyBox={setActiveReplyBox}
                   disableReply={disableReply}
                   activeReplyBox={activeReplyBox}
@@ -352,7 +383,6 @@ class Comment extends React.Component {
                   asset={asset}
                   highlighted={highlighted}
                   currentUser={currentUser}
-                  postLike={postLike}
                   postFlag={postFlag}
                   deleteAction={deleteAction}
                   addCommentTag={addCommentTag}
@@ -363,12 +393,11 @@ class Comment extends React.Component {
                   showSignInDialog={showSignInDialog}
                   reactKey={reply.id}
                   key={reply.id}
-                  comment={reply} />;
-          })
-        }
-        {
-          comment.replies &&
-          <div className='coral-load-more-replies'>
+                  comment={reply}
+                />;
+          })}
+        {comment.replies &&
+          <div className="coral-load-more-replies">
             <LoadMore
               assetId={asset.id}
               comments={comment.replies}
@@ -376,9 +405,9 @@ class Comment extends React.Component {
               topLevel={false}
               replyCount={comment.replyCount}
               moreComments={comment.replyCount > comment.replies.length}
-              loadMore={loadMore}/>
-          </div>
-        }
+              loadMore={loadMore}
+            />
+          </div>}
       </div>
     );
   }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,177 @@
+import React from 'react';
+import {compose, gql, graphql} from 'react-apollo';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import isEqual from 'lodash/isEqual';
+import branch from 'recompose/branch';
+import renderComponent from 'recompose/renderComponent';
+import update from 'immutability-helper';
+
+import {Spinner} from 'coral-ui';
+import {authActions, assetActions, pym} from 'coral-framework';
+import {getDefinitionName, separateDataAndRoot} from 'coral-framework/utils';
+import Embed from '../components/Embed';
+import {setCommentCountCache, viewAllComments} from '../actions/stream';
+import {setActiveTab} from '../actions/embed';
+import Stream from './Stream';
+
+const {logout, checkLogin} = authActions;
+const {fetchAssetSuccess} = assetActions;
+
+class EmbedContainer extends React.Component {
+
+  componentDidMount() {
+    pym.sendMessage('childReady');
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if(this.props.root.me && !nextProps.root.me) {
+
+      // Refetch because on logout `excludeIgnored` becomes `false`.
+      // TODO: logout via mutation and obsolete this?
+      this.props.data.refetch();
+    }
+
+    const {fetchAssetSuccess} = this.props;
+    if(!isEqual(nextProps.root.asset, this.props.root.asset)) {
+
+      // TODO: remove asset data from redux store.
+      fetchAssetSuccess(nextProps.root.asset);
+
+      const {setCommentCountCache, commentCountCache} = this.props;
+      const {asset} = nextProps.root;
+
+      if (commentCountCache === -1) {
+        setCommentCountCache(asset.commentCount);
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if(!isEqual(prevProps.root.comment, this.props.root.comment)) {
+
+      // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
+      setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0);
+    }
+  }
+
+  render() {
+    if (!this.props.root.asset) {
+      return <Spinner />;
+    }
+    return <Embed {...this.props} />;
+  }
+}
+
+const EMBED_QUERY = gql`
+  query EmbedQuery($assetId: ID, $assetUrl: String, $commentId: ID!, $hasComment: Boolean!, $excludeIgnored: Boolean) {
+    asset(id: $assetId, url: $assetUrl) {
+      totalCommentCount(excludeIgnored: $excludeIgnored)
+    }
+    me {
+      status
+    }
+    ...${getDefinitionName(Stream.fragments.root)}
+  }
+  ${Stream.fragments.root}
+`;
+
+export const withQuery = graphql(EMBED_QUERY, {
+  options: ({auth, commentId, assetId, assetUrl}) => ({
+    variables: {
+      assetId,
+      assetUrl,
+      commentId,
+      hasComment: commentId !== '',
+      excludeIgnored: Boolean(auth && auth.user && auth.user.id),
+    },
+    reducer: (previousResult, action, variables) => {
+      return reduceEditCommentActionsToUpdateStreamQuery(previousResult, action, variables);
+    },
+  }),
+  props: ({data}) => separateDataAndRoot(data),
+});
+
+const mapStateToProps = state => ({
+  auth: state.auth.toJS(),
+  commentCountCache: state.stream.commentCountCache,
+  commentId: state.stream.commentId,
+  assetId: state.stream.assetId,
+  assetUrl: state.stream.assetUrl,
+  activeTab: state.embed.activeTab,
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({
+    fetchAssetSuccess,
+    checkLogin,
+    setCommentCountCache,
+    viewAllComments,
+    logout,
+    setActiveTab,
+  }, dispatch);
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  branch(
+    props => !props.auth.checkedInitialLogin,
+    renderComponent(Spinner),
+  ),
+  withQuery,
+)(EmbedContainer);
+
+/**
+ * Reduce editComment mutation actions
+ * producing a new queryStream result where asset.comments reflects the edit
+ */
+function reduceEditCommentActionsToUpdateStreamQuery(previousResult, action) {
+  if ( ! (action.type === 'APOLLO_MUTATION_RESULT' && action.operationName === 'editComment')) {
+    return previousResult;
+  }
+  const resultHasErrors = (result) => {
+    try {
+      return result.data.editComment.errors.length > 0;
+    } catch (error) {
+
+      // expected if no errors;
+      return false;
+    }
+  };
+  if (resultHasErrors(action.result)) {
+    return previousResult;
+  }
+  const {variables: {id, edit}} = action;
+  const updateCommentWithEdit = (comment, edit) => {
+    const {body} = edit;
+    const editedComment = update(comment, {
+      $merge: {
+        body
+      },
+      editing: {$merge:{edited:true}}
+    });
+    return editedComment;
+  };
+  const resultReflectingEdit = update(previousResult, {
+    asset: {
+      comments: {
+        $apply: comments => comments.map(comment => {
+          if (comment.id === id) {
+            return updateCommentWithEdit(comment, edit);
+          }
+          return update(comment, {
+            replies: {
+              $apply: (comments) => comments.map(comment => {
+                if (comment.id === id) {
+                  return updateCommentWithEdit(comment, edit);                          
+                }
+                return comment;
+              })
+            },
+          });
+        })
+      }
+    }
+  });
+  return resultReflectingEdit;
+}
+

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

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

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

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

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

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

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

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

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

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

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

@@ -351,17 +351,6 @@ button.comment__action-button[disabled],
 
 /* Flag Styles */
 
-.coral-plugin-flags-container {
-  position: relative;
-}
-
-.coral-plugin-flags-popup span {
-  min-width: 280px;
-  bottom: 36px;
-  position: absolute;
-  right: 10px;
-}
-
 .coral-plugin-flags-popup-form {
   margin-bottom: 10px;
 }
@@ -398,6 +387,7 @@ button.comment__action-button[disabled],
   margin-top: 5px;
   width: 75%;
   font-size: 16px;
+  border: 1px solid #ccc;
 }
 
 /* Close comments */

client/coral-framework/actions/asset.js

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

client/coral-framework/actions/auth.js

@@ -39,10 +39,21 @@ export const showSignInDialog = () => dispatch => {
     'menubar=0,resizable=0,width=500,height=550,top=200,left=500'
   );
 
-  signInPopUp.onbeforeunload = () => {
-    dispatch(checkLogin());
-    fetchMe();
+  // Workaround odd behavior in older WebKit versions, where
+  // onunload is called twice. (Encountered in IOS 8.3)
+  let loaded = false;
+  signInPopUp.onload = () => {
+    loaded = true;
   };
+
+  // Use `onunload` instead of `onbeforeunload` which is not supported in IOS Safari.
+  signInPopUp.onunload = () => {
+    if (loaded) {
+      dispatch(checkLogin());
+      fetchMe();
+    }
+  };
+
   dispatch({type: actions.SHOW_SIGNIN_DIALOG});
 };
 export const hideSignInDialog = () => dispatch => {
@@ -177,7 +188,13 @@ export const fetchSignUp = (formData, redirectUri) => (dispatch) => {
       dispatch(signUpSuccess(user));
     })
     .catch(error => {
-      dispatch(signUpFailure(lang.t(`error.${error.message}`)));
+      let errorMessage = lang.t(`error.${error.message}`);
+
+      // if there is no translation defined, just show the error string
+      if (errorMessage === `error.${error.message}`) {
+        errorMessage = error.message;
+      }
+      dispatch(signUpFailure(errorMessage));
     });
 };
 

client/coral-framework/components/Slot.js

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

client/coral-framework/constants/asset.js

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

client/coral-framework/constants/comments.js

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

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

@@ -1,7 +1,6 @@
 import {graphql} from 'react-apollo';
 import POST_COMMENT from './postComment.graphql';
 import POST_FLAG from './postFlag.graphql';
-import POST_LIKE from './postLike.graphql';
 import POST_DONT_AGREE from './postDontAgree.graphql';
 import DELETE_ACTION from './deleteAction.graphql';
 import ADD_COMMENT_TAG from './addCommentTag.graphql';
@@ -10,10 +9,6 @@ import IGNORE_USER from './ignoreUser.graphql';
 import STOP_IGNORING_USER from './stopIgnoringUser.graphql';
 import EDIT_COMMENT from './editComment.graphql';
 
-import MY_IGNORED_USERS from '../queries/myIgnoredUsers.graphql';
-import STREAM_QUERY from '../queries/streamQuery.graphql';
-import {variablesForStreamQuery} from '../queries';
-
 import commentView from '../fragments/commentView.graphql';
 
 export const postComment = graphql(POST_COMMENT, {
@@ -46,7 +41,7 @@ export const postComment = graphql(POST_COMMENT, {
           }
         },
         updateQueries: {
-          AssetQuery: (oldData, {mutationResult: {data: {createComment: {comment}}}}) => {
+          EmbedQuery: (oldData, {mutationResult: {data: {createComment: {comment}}}}) => {
 
             if (oldData.asset.settings.moderation === 'PRE' || comment.status === 'PREMOD' || comment.status === 'REJECTED') {
               return oldData;
@@ -62,7 +57,7 @@ export const postComment = graphql(POST_COMMENT, {
                   ...oldData.asset,
                   comments: oldData.asset.comments.map((oldComment) => {
                     return oldComment.id === parent_id
-                      ? {...oldComment, replies: [...oldComment.replies, comment]}
+                      ? {...oldComment, replies: [...oldComment.replies, comment], replyCount: oldComment.replyCount + 1}
                       : oldComment;
                   })
                 }
@@ -88,17 +83,6 @@ export const postComment = graphql(POST_COMMENT, {
   }),
 });
 
-export const postLike = graphql(POST_LIKE, {
-  props: ({mutate}) => ({
-    postLike: (like) => {
-      return mutate({
-        variables: {
-          like
-        }
-      });
-    }}),
-});
-
 export const postFlag = graphql(POST_FLAG, {
   props: ({mutate}) => ({
     postFlag: (flag) => {
@@ -156,6 +140,7 @@ export const removeCommentTag = graphql(REMOVE_COMMENT_TAG, {
     }}),
 });
 
+// TODO: don't rely on refetching.
 export const ignoreUser = graphql(IGNORE_USER, {
   props: ({mutate}) => ({
     ignoreUser: ({id}) => {
@@ -163,15 +148,16 @@ export const ignoreUser = graphql(IGNORE_USER, {
         variables: {
           id,
         },
-        refetchQueries: [{
-          query: MY_IGNORED_USERS,
-        }]
+        refetchQueries: [
+          'EmbedQuery', 'myIgnoredUsers',
+        ]
       });
     }}),
 });
 
+// TODO: don't rely on refetching.
 export const stopIgnoringUser = graphql(STOP_IGNORING_USER, {
-  props: ({mutate, ownProps}) => {
+  props: ({mutate}) => {
     return {
       stopIgnoringUser: ({id}) => {
         return mutate({
@@ -179,13 +165,7 @@ export const stopIgnoringUser = graphql(STOP_IGNORING_USER, {
             id,
           },
           refetchQueries: [
-            {
-              query: MY_IGNORED_USERS,
-            },
-            {
-              query: STREAM_QUERY,
-              variables: variablesForStreamQuery(ownProps),
-            }
+            'EmbedQuery', 'myIgnoredUsers',
           ]
         });
       }
@@ -194,7 +174,7 @@ export const stopIgnoringUser = graphql(STOP_IGNORING_USER, {
 });
 
 export const editComment = graphql(EDIT_COMMENT, {
-  props: ({mutate, ownProps}) => {
+  props: ({mutate}) => {
     return {
       editComment: (id, edit) => {
         return mutate({
@@ -203,10 +183,7 @@ export const editComment = graphql(EDIT_COMMENT, {
             edit,
           },
           refetchQueries: [
-            {
-              query: STREAM_QUERY,
-              variables: variablesForStreamQuery(ownProps),
-            }
+            'EmbedQuery'
           ]
         });
       }

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

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

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

@@ -1,13 +0,0 @@
-#import "../fragments/commentView.graphql"
-
-query commentQuery($id: ID!) {
-  comment(id: $id) {
-    ...commentView
-    parent {
-      ...commentView
-      replies {
-        ...commentView
-      }
-    }
-  }
-}

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

@@ -1,10 +0,0 @@
-query LoadCommentCounts($asset_id: ID, $limit: Int = 5, $sort: SORT_ORDER) {
-  asset(id: $asset_id) {
-    id
-    commentCount
-    comments(sort: $sort, limit: $limit) {
-      id
-      replyCount
-    }
-  }
-}

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

@@ -1,212 +1,6 @@
 import {graphql} from 'react-apollo';
-import update from 'immutability-helper';
-import STREAM_QUERY from './streamQuery.graphql';
-import LOAD_MORE from './loadMore.graphql';
-import GET_COUNTS from './getCounts.graphql';
 import MY_COMMENT_HISTORY from './myCommentHistory.graphql';
 import MY_IGNORED_USERS from './myIgnoredUsers.graphql';
-import uniqBy from 'lodash/uniqBy';
-import sortBy from 'lodash/sortBy';
-import isNil from 'lodash/isNil';
-
-function getQueryVariable(variable) {
-  let query = window.location.search.substring(1);
-  let vars = query.split('&');
-  for (let i = 0; i < vars.length; i++) {
-    let pair = vars[i].split('=');
-    if (decodeURIComponent(pair[0]) === variable) {
-      return decodeURIComponent(pair[1]);
-    }
-  }
-
-  // If not found, return null.
-  return null;
-}
-
-// get the counts of the top-level comments
-export const getCounts = (data) => ({asset_id, limit, sort}) => {
-  return data.fetchMore({
-    query: GET_COUNTS,
-    variables: {
-      asset_id,
-      limit,
-      sort,
-      excludeIgnored: data.variables.excludeIgnored,
-    },
-    updateQuery: (oldData, {fetchMoreResult:{asset}}) => {
-      return {
-        ...oldData,
-        asset: {
-          ...oldData.asset,
-          commentCount: asset.commentCount
-        }
-      };
-    }
-  });
-};
-
-// handle paginated requests for more Comments pertaining to the Asset
-export const loadMore = (data) => ({limit, cursor, parent_id = null, asset_id, sort}, newComments) => {
-  return data.fetchMore({
-    query: LOAD_MORE,
-    variables: {
-      limit, // how many comments are we returning
-      cursor, // the date of the first/last comment depending on the sort order
-      parent_id, // if null, we're loading more top-level comments, if not, we're loading more replies to a comment
-      asset_id, // the id of the asset we're currently on
-      sort, // CHRONOLOGICAL or REVERSE_CHRONOLOGICAL
-      excludeIgnored: data.variables.excludeIgnored,
-    },
-    updateQuery: (oldData, {fetchMoreResult:{new_top_level_comments}}) => {
-      let updatedAsset;
-
-      if (!isNil(oldData.comment)) { // loaded replies on a highlighted (permalinked) comment
-
-        let comment = {};
-        if (oldData.comment && oldData.comment.parent) {
-
-          // put comments (replies) onto the oldData.comment.parent object
-          // the initial comment permalinked was a reply
-          const uniqReplies = uniqBy([...new_top_level_comments, ...oldData.comment.parent.replies], 'id');
-          comment.parent = {...oldData.comment.parent, replies: sortBy(uniqReplies, 'created_at')};
-        } else if (oldData.comment) {
-
-          // put the comments (replies) directly onto oldData.comment
-          // the initial comment permalinked was a top-level comment
-          const uniqReplies = uniqBy([...new_top_level_comments, ...oldData.comment.replies], 'id');
-          comment.replies = sortBy(uniqReplies, 'created_at');
-        }
-
-        updatedAsset = {
-          ...oldData,
-          comment: {
-            ...oldData.comment,
-            ...comment
-          }
-        };
-
-      } else if (parent_id) { // If loading more replies
-
-        updatedAsset = {
-          ...oldData,
-          asset: {
-            ...oldData.asset,
-            comments: oldData.asset.comments.map(comment => {
-
-              // since the dipslayed replies and the returned replies can overlap,
-              // pull out the unique ones.
-              const uniqueReplies = uniqBy([...new_top_level_comments, ...comment.replies], 'id');
-
-              // since we just gave the returned replies precedence, they're now out of order.
-              // resort according to date.
-              return comment.id === parent_id
-                ? {...comment, replies: sortBy(uniqueReplies, 'created_at')}
-                : comment;
-            })
-          }
-        };
-      } else { // If loading more top-level comments
-
-        updatedAsset = {
-          ...oldData,
-          asset: {
-            ...oldData.asset,
-            comments: newComments ? [...new_top_level_comments.reverse(), ...oldData.asset.comments]
-              : [...oldData.asset.comments, ...new_top_level_comments]
-          }
-        };
-      }
-
-      return updatedAsset;
-    }
-  });
-};
-
-export const variablesForStreamQuery = ({auth}) => {
-
-  // where the query string is from the embeded iframe url
-  let comment_id = getQueryVariable('comment_id');
-  let has_comment = comment_id != null;
-  return {
-    asset_id: getQueryVariable('asset_id'),
-    asset_url: getQueryVariable('asset_url'),
-    comment_id: has_comment ? comment_id : 'no-comment',
-    has_comment,
-    excludeIgnored: Boolean(auth && auth.user && auth.user.id),
-  };
-};
-
-// load the comment stream.
-export const queryStream = graphql(STREAM_QUERY, {
-  options: (props) => {
-    return {
-      variables: variablesForStreamQuery(props),
-      reducer: (previousResult, action, variables) => {
-        return reduceEditCommentActionsToUpdateStreamQuery(previousResult, action, variables);
-      },
-    };
-  },
-  props: ({data}) => ({
-    data,
-    loadMore: loadMore(data),
-    getCounts: getCounts(data),
-  })
-});
-
-/**
- * Reduce editComment mutation actions
- * producing a new queryStream result where asset.comments reflects the edit
- */
-function reduceEditCommentActionsToUpdateStreamQuery(previousResult, action) {
-  if ( ! (action.type === 'APOLLO_MUTATION_RESULT' && action.operationName === 'editComment')) {
-    return previousResult;
-  }
-  const resultHasErrors = (result) => {
-    try {
-      return result.data.editComment.errors.length > 0;
-    } catch (error) {
-
-      // expected if no errors;
-      return false;
-    }
-  };
-  if (resultHasErrors(action.result)) {
-    return previousResult;
-  }
-  const {variables: {id, edit}} = action;
-  const updateCommentWithEdit = (comment, edit) => {
-    const {body} = edit;
-    const editedComment = update(comment, {
-      $merge: {
-        body
-      },
-      editing: {$merge:{edited:true}}
-    });
-    return editedComment;
-  };
-  const resultReflectingEdit = update(previousResult, {
-    asset: {
-      comments: {
-        $apply: comments => comments.map(comment => {
-          if (comment.id === id) {
-            return updateCommentWithEdit(comment, edit);
-          }
-          return update(comment, {
-            replies: {
-              $apply: (comments) => comments.map(comment => {
-                if (comment.id === id) {
-                  return updateCommentWithEdit(comment, edit);                          
-                }
-                return comment;
-              })
-            },
-          });
-        })
-      }
-    }
-  });
-  return resultReflectingEdit;
-}
 
 export const myCommentHistory = graphql(MY_COMMENT_HISTORY, {});
 

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

@@ -1,11 +0,0 @@
-#import "../fragments/commentView.graphql"
-
-query LoadMoreComments($limit: Int = 5, $cursor: Date, $parent_id: ID, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) {
-  new_top_level_comments: comments(query: {limit: $limit, cursor: $cursor, parent_id: $parent_id, asset_id: $asset_id, sort: $sort, excludeIgnored: $excludeIgnored}) {
-    ...commentView
-    replyCount(excludeIgnored: $excludeIgnored)
-    replies(limit: 3) {
-        ...commentView
-    }
-  }
-}

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

@@ -1,53 +0,0 @@
-#import "../fragments/commentView.graphql"
-
-query AssetQuery($asset_id: ID, $asset_url: String, $comment_id: ID!, $has_comment: Boolean!, $excludeIgnored: Boolean) {
-    # the comment here is for loading one comment and it's children, probably after following a permalink
-    # $has_comment is derived from the comment_id query param in the iframe url,
-    # which is in turn pulled from the host page url
-    comment(id: $comment_id) @include(if: $has_comment) {
-      ...commentView
-      replyCount(excludeIgnored: $excludeIgnored)
-      replies {
-        ...commentView
-      }
-      parent {
-        ...commentView
-        replyCount(excludeIgnored: $excludeIgnored)
-        replies {
-          ...commentView
-        }
-      }
-    }
-    asset(id: $asset_id, url: $asset_url) {
-        id
-        title
-        url
-        closedAt
-        created_at
-        settings {
-            moderation
-            infoBoxEnable
-            infoBoxContent
-            premodLinksEnable
-            questionBoxEnable
-            questionBoxContent
-            closeTimeout
-            closedMessage
-            charCountEnable
-            charCount
-            requireEmailConfirmation
-        }
-        lastComment {
-          id
-        }
-        commentCount(excludeIgnored: $excludeIgnored)
-        totalCommentCount(excludeIgnored: $excludeIgnored)
-        comments(limit: 10, excludeIgnored: $excludeIgnored) {
-            ...commentView
-            replyCount(excludeIgnored: $excludeIgnored)
-            replies(limit: 3, excludeIgnored: $excludeIgnored) {
-                ...commentView
-            }
-        }
-    }
-}

client/coral-framework/helpers/plugins.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import merge from 'lodash/merge';
 import flatten from 'lodash/flatten';
+import flattenDeep from 'lodash/flattenDeep';
+import uniq from 'lodash/uniq';
 import plugins from 'pluginsConfig';
+import {gql} from 'react-apollo';
+import {getDefinitionName} from 'coral-framework/utils';
 
 export const pluginReducers = merge(
   ...plugins
@@ -19,3 +23,53 @@ export function getSlotElements(slot, props = {}) {
   return components
     .map((component, i) => React.createElement(component, {...props, key: i}));
 }
+
+function getComponentFragments(components) {
+  return components
+    .map(c => c.fragments)
+    .filter(fragments => fragments)
+    .reduce((res, fragments) => {
+      Object.keys(fragments).forEach(key => {
+        if (!(key in res)) {
+          res[key] = {spreads: '', definitions: ''};
+        }
+        res[key].spreads += `...${getDefinitionName(fragments[key])}\n`;
+        res[key].definitions = gql`${res[key].definitions}${fragments[key]}`;
+      });
+      return res;
+    }, {});
+}
+
+/**
+ * Returns an object that can be used to compose fragments or queries.
+ *
+ * Example:
+ * const pluginFragments = getSlotsFragments(['commentInfoBar', 'commentActions']);
+ * const rootFragment = gql`
+ *   fragment Comment_root on RootQuery {
+ +     ${pluginFragments.spreads('root')}
+ *   }
+ *   ${pluginFragments.definitions('root')}
+ * `;
+ */
+export function getSlotsFragments(slots) {
+  if (!Array.isArray(slots)) {
+    slots = [slots];
+  }
+  const components = uniq(flattenDeep(slots.map(slot => {
+    return plugins
+    .filter(o => o.module.slots[slot])
+    .map(o => o.module.slots[slot]);
+  })));
+
+  const fragments = getComponentFragments(components);
+  return {
+    spreads(key) {
+      return (fragments[key] && fragments[key].spreads) || '';
+    },
+    definitions(key) {
+      return (fragments[key] && fragments[key].definitions) || '';
+    },
+  };
+}
+

client/coral-framework/hocs/withFragments.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+// TODO: revisit `filtering` after https://github.com/apollographql/graphql-anywhere/issues/38.
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+export default fragments => WrappedComponent => {
+  class WithFragments extends React.Component {
+    render() {
+      return <WrappedComponent {...this.props} />;
+    }
+  }
+  WithFragments.fragments = fragments;
+  WithFragments.displayName = `WithFragments(${getDisplayName(WrappedComponent)})`;
+  return WithFragments;
+};

client/coral-framework/reducers/asset.js

@@ -19,9 +19,6 @@ export default function asset (state = initialState, action) {
   case actions.UPDATE_ASSET_SETTINGS_SUCCESS:
     return state
       .setIn(['settings'], action.settings);
-  case actions.UPDATE_COUNT_CACHE:
-    return state
-      .setIn(['countCache', action.id], action.count);
   default:
     return state;
   }

client/coral-framework/reducers/auth.js

@@ -8,6 +8,7 @@ const initialState = Map({
   user: null,
   showSignInDialog: false,
   showCreateUsernameDialog: false,
+  checkedInitialLogin: false,
   view: 'SIGNIN',
   error: '',
   passwordRequestSuccess: null,
@@ -71,10 +72,12 @@ export default function auth (state = initialState, action) {
       .set('isLoading', true);
   case actions.CHECK_LOGIN_FAILURE:
     return state
+      .set('checkedInitialLogin', true)
       .set('loggedIn', false)
       .set('user', null);
   case actions.CHECK_LOGIN_SUCCESS:
     return state
+      .set('checkedInitialLogin', true)
       .set('loggedIn', true)
       .set('isAdmin', action.isAdmin)
       .set('user', purge(action.user));
@@ -114,7 +117,11 @@ export default function auth (state = initialState, action) {
       .set('isLoading', false)
       .set('successSignUp', true);
   case actions.LOGOUT_SUCCESS:
-    return initialState;
+    return state
+      .set('user', null)
+      .set('isLoading', false)
+      .set('loggedIn', false)
+      .set('isAdmin', false);
   case actions.INVALID_FORM:
     return state
       .set('error', action.error);

client/coral-framework/services/client.js

@@ -1,6 +1,18 @@
 import ApolloClient, {addTypename} from 'apollo-client';
 import getNetworkInterface from './transport';
 
+// import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';
+
+// TODO: replace absolute reference with something loaded from the store/page.
+// const wsClient = new SubscriptionClient('ws://localhost:3000/api/v1/live', {
+//   reconnect: true
+// });
+// const networkInterface = addGraphQLSubscriptions(
+//   getNetworkInterface(),
+//   wsClient,
+// );
+const networkInterface = getNetworkInterface();
+
 export const client = new ApolloClient({
   connectToDevTools: true,
   queryTransformer: addTypename,
@@ -10,7 +22,7 @@ export const client = new ApolloClient({
     }
     return null;
   },
-  networkInterface: getNetworkInterface()
+  networkInterface
 });
 
 export default client;

client/coral-framework/services/store.js

@@ -24,14 +24,22 @@ if (window.devToolsExtension) {
   middlewares.push(window.devToolsExtension());
 }
 
-const store = createStore(
-  combineReducers({
-    ...mainReducer,
-    apollo: client.reducer()
-  }),
+let storeReducers = {
+  ...mainReducer,
+  apollo: client.reducer()
+};
+
+export const store = createStore(
+  combineReducers(storeReducers),
   {},
   compose(...middlewares)
 );
 
 export default store;
+
+export function injectReducers(reducers) {
+  storeReducers = {...storeReducers, ...reducers};
+  store.replaceReducer(combineReducers(storeReducers));
+}
+
 window.coralStore = store;

client/coral-framework/utils/index.js

@@ -29,3 +29,35 @@ export const getMyActionSummary = (type, comment) => {
 export const getActionSummary = (type, comment) => {
   return comment.action_summaries.filter(a => a.__typename === type);
 };
+
+/**
+ * Get name of first (or $pos-th) definition
+ */
+export function getDefinitionName(doc, pos = 0) {
+  return doc.definitions[pos].name.value;
+}
+
+/**
+ * Separate apollo `data` props into `data` and `root`.
+ * `data` will contain props like `loading`, `fetchMore`...
+ * while `root` contains the actual query data.
+ */
+export function separateDataAndRoot(
+  {
+    fetchMore,
+    loading,
+    networkStatus,
+    refetch,
+    startPolling,
+    stopPolling,
+    subscribeToMore,
+    updateQuery,
+    variables,
+    ...root,
+  }) {
+  return {
+    data: {fetchMore, loading, networkStatus, refetch, startPolling,
+      stopPolling, subscribeToMore, updateQuery, variables},
+    root,
+  };
+}

client/coral-plugin-commentbox/CommentBox.js

@@ -1,7 +1,7 @@
-import React, {Component, PropTypes} from 'react';
+import React, {PropTypes} from 'react';
+import {Button} from 'coral-ui';
 import {I18n} from '../coral-framework';
 import translations from './translations.json';
-import {Button} from 'coral-ui';
 import Slot from 'coral-framework/components/Slot';
 import {connect} from 'react-redux';
 import classnames from 'classnames';
@@ -21,7 +21,7 @@ export const notifyForNewCommentStatus = (addNotification, status) => {
 /**
  * Common UI for Creating or Editing a Comment
  */
-export class CommentForm extends Component {
+export class CommentForm extends React.Component {
   static propTypes = {
 
     // Initial value for underlying comment body textarea
@@ -113,6 +113,7 @@ export class CommentForm extends Component {
           id={this.props.bodyInputId}
           onChange={this.onBodyChange}
           rows={3}/>
+        <Slot fill='commentInputArea' />
       </div>
       { 
         this.props.charCountEnable && 
@@ -147,8 +148,7 @@ export class CommentForm extends Component {
 /**
  * Container for posting a new Comment
  */
-class CommentBox extends Component {
-
+class CommentBox extends React.Component {
   constructor(props) {
     super(props);
 
@@ -165,19 +165,19 @@ class CommentBox extends Component {
   }
   static get defaultProps() {
     return {
-      updateCountCache: () => {}
+      setCommentCountCache: () => {}
     };
   }
   postComment = ({body}) => {
     const {
+      commentPostedHandler,
+      postItem,
+      setCommentCountCache,
+      commentCountCache,
       isReply,
       assetId,
       parentId,
-      postItem,
-      countCache,
       addNotification,
-      updateCountCache,
-      commentPostedHandler
     } = this.props;
 
     let comment = {
@@ -187,7 +187,7 @@ class CommentBox extends Component {
       ...this.props.commentBox
     };
 
-    !isReply && updateCountCache(assetId, countCache + 1);
+    !isReply && setCommentCountCache(commentCountCache + 1);
 
     // Execute preSubmit Hooks
     this.state.hooks.preSubmit.forEach(hook => hook());
@@ -202,16 +202,19 @@ class CommentBox extends Component {
         notifyForNewCommentStatus(addNotification, postedComment.status);
 
         if (postedComment.status === 'REJECTED') {
-          !isReply && updateCountCache(assetId, countCache);
+          !isReply && setCommentCountCache(assetId, commentCountCache);
         } else if (postedComment.status === 'PREMOD') {
-          !isReply && updateCountCache(assetId, countCache);
+          !isReply && setCommentCountCache(assetId, commentCountCache);
         }
 
         if (commentPostedHandler) {
           commentPostedHandler();
         }
       })
-      .catch((err) => console.error(err));
+      .catch((err) => {
+        console.error(err);
+        !isReply && setCommentCountCache(commentCountCache);
+      });
 
     this.setState({postedCount: this.state.postedCount + 1});
   }
@@ -288,7 +291,7 @@ class CommentBox extends Component {
         bodyInputId={isReply ? 'replyText' : 'commentText'}
         saveComment={authorId && this.postComment}
         buttonContainerStart={<Slot
-          fill="commentBoxDetail"
+          fill="commentInputDetailArea"
           registerHook={this.registerHook}
           unregisterHook={this.unregisterHook}
           inline
@@ -313,8 +316,7 @@ CommentBox.propTypes = {
   authorId: PropTypes.string.isRequired,
   isReply: PropTypes.bool.isRequired,
   canPost: PropTypes.bool,
-  currentUser: PropTypes.object,
-  updateCountCache: PropTypes.func,
+  setCommentCountCache: PropTypes.func,
 };
 
 const mapStateToProps = ({commentBox}) => ({commentBox});

client/coral-plugin-commentbox/translations.json

@@ -3,7 +3,7 @@
     "post": "Post",
     "cancel": "Cancel",
     "reply": "Reply",
-    "comment": "Post a Comment",
+    "comment": "Post a comment",
     "name": "Name",
     "comment-post-notif": "Your comment has been posted.",
     "comment-post-notif-premod": "Thank you for posting. Our moderation team will review your comment shortly.",
@@ -14,7 +14,7 @@
     "post": "Publicar",
     "cancel": "Cancelar",
     "reply": "Responder",
-    "comment": "Publicar un Comentario",
+    "comment": "Publicar un comentario",
     "name": "Nombre",
     "comment-post-notif": "Tu comentario ha sido publicado.",
     "comment-post-notif-premod": "Gracias por el comentario. Nuestro equipo de moderación va a revisarlo muy pronto.",

client/coral-plugin-flags/FlagButton.js

@@ -19,6 +19,12 @@ class FlagButton extends Component {
     localDelete: false
   }
 
+  componentDidUpdate () {
+    if (this.popup) { // this will be defined when the reporting popup is opened
+      this.popup.firstChild.style.top = `${this.flagButton.offsetTop - this.popup.firstChild.clientHeight - 15}px`;
+    }
+  }
+
   // When the "report" button is clicked expand the menu
   onReportClick = () => {
     const {currentUser, deleteAction, flaggedByCurrentUser, flag} = this.props;
@@ -135,7 +141,10 @@ class FlagButton extends Component {
     const popupMenu = getPopupMenu[this.state.step](this.state.itemType);
 
     return <div className={`${name}-container`}>
-      <button onClick={!this.props.banned ? this.onReportClick : null} className={`${name}-button`}>
+      <button
+        ref={ref => this.flagButton = ref}
+        onClick={!this.props.banned ? this.onReportClick : null}
+        className={`${name}-button`}>
         {
           flagged
           ? <span className={`${name}-button-text`}>{lang.t('reported')}</span>
@@ -147,7 +156,7 @@ class FlagButton extends Component {
       </button>
       {
         this.state.showMenu &&
-        <div className={`${name}-popup`}>
+        <div className={`${name}-popup`} ref={ref => this.popup = ref}>
           <PopupMenu>
             <div className={`${name}-popup-header`}>{popupMenu.header}</div>
             {

client/coral-plugin-likes/LikeButton.js

@@ -1,71 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import {I18n} from '../coral-framework';
-import translations from './translations.json';
-
-const name = 'coral-plugin-likes';
-
-class LikeButton extends Component {
-
-  static propTypes = {
-    like: PropTypes.shape({
-      current: PropTypes.object,
-      count: PropTypes.number
-    }),
-    id: PropTypes.string,
-    postLike: PropTypes.func.isRequired,
-    deleteAction: PropTypes.func.isRequired,
-    showSignInDialog: PropTypes.func.isRequired,
-    currentUser: PropTypes.shape({
-      banned: PropTypes.boolean
-    }),
-  }
-
-  state = {
-    localPost: null, // Set to the ID of an action if one is posted
-    localDelete: false // Set to true is the user deletes an action, unless localPost is already set.
-  }
-
-  render() {
-    const {like, id, postLike, deleteAction, showSignInDialog, currentUser} = this.props;
-    let {totalLikes: count} = this.props;
-    const {localPost, localDelete} = this.state;
-    const liked = (like && like.current_user && !localDelete) || localPost;
-    if (localPost) {count += 1;}
-    if (localDelete) {count -= 1;}
-
-    const onLikeClick = () => {
-      if (!currentUser) {
-        showSignInDialog();
-        return;
-      }
-      if (currentUser.banned) {
-        return;
-      }
-      if (!liked) { // this comment has not yet been liked by this user.
-        this.setState({localPost: 'temp'});
-        postLike({
-          item_id: id,
-          item_type: 'COMMENTS'
-        }).then(({data}) => {
-          this.setState({localPost: data.createLike.like.id});
-        });
-      } else {
-        this.setState((prev) => prev.localPost ? {...prev, localPost: null} : {...prev, localDelete: true});
-        deleteAction(localPost || like.current_user.id);
-      }
-    };
-
-    return <div className={`${name}-container`}>
-      <button onClick={onLikeClick} className={`${name}-button ${liked ? 'likedButton' : ''}`}>
-        <span className={`${name}-button-text`}>{lang.t(liked ? 'liked' : 'like')}</span>
-        <i className={`${name}-icon material-icons`}
-          aria-hidden={true}>thumb_up</i>
-        <span className={`${name}-like-count`}>{count > 0 && count}</span>
-      </button>
-    </div>;
-  }
-}
-
-export default LikeButton;
-
-const lang = new I18n(translations);

client/coral-plugin-questionbox/QuestionBox.js

@@ -1,5 +1,6 @@
 import React from 'react';
 const packagename = 'coral-plugin-questionbox';
+import Slot from 'coral-framework/components/Slot';
 
 const QuestionBox = ({enable, content}) =>
 <div className={`${packagename}-info ${enable ? null : 'hidden'}` }>
@@ -10,6 +11,7 @@ const QuestionBox = ({enable, content}) =>
   <div className={`${packagename}-content`}>
     {content}
   </div>
+  <Slot fill="streamQuestionArea" />
 </div>;
 
 export default QuestionBox;

client/coral-settings/containers/ProfileContainer.js

@@ -12,7 +12,6 @@ import NotLoggedIn from '../components/NotLoggedIn';
 import IgnoredUsers from '../components/IgnoredUsers';
 import {Spinner} from 'coral-ui';
 import CommentHistory from 'coral-plugin-history/CommentHistory';
-
 import {showSignInDialog, checkLogin} from 'coral-framework/actions/auth';
 
 import translations from '../translations';
@@ -35,14 +34,14 @@ class ProfileContainer extends Component {
   }
 
   render() {
-    const {loggedIn, asset, data, showSignInDialog, myIgnoredUsersData, stopIgnoringUser} = this.props;
+    const {asset, data, showSignInDialog, myIgnoredUsersData, stopIgnoringUser} = this.props;
     const {me} = this.props.data;
 
     if (data.loading) {
       return <Spinner/>;
     }
 
-    if (!loggedIn || !me) {
+    if (!me) {
       return <NotLoggedIn showSignInDialog={showSignInDialog} />;
     }
 
@@ -51,7 +50,7 @@ class ProfileContainer extends Component {
 
     return (
       <div>
-        <h2>{this.props.userData.username}</h2>
+        <h2>{this.props.user.username}</h2>
         { emailAddress
           ? <p>{ emailAddress }</p>
           : null

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from 'coral-embed-stream/src/Comment.css';
+import styles from 'coral-embed-stream/src/components/Comment.css';
 
 import AuthorName from 'coral-plugin-author-name/AuthorName';
 import Content from 'coral-plugin-commentcontent/CommentContent';

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

@@ -4,11 +4,11 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-const UserBox = ({className, user, logout, changeTab}) => (
+const UserBox = ({className, user, onLogout, onShowProfile}) => (
   <div className={`${styles.userBox} ${className ? className : ''}`}>
     {lang.t('signIn.loggedInAs')}
-    <a onClick={() => changeTab(1)}>{user.username}</a>. {lang.t('signIn.notYou')}
-    <a className={styles.logout} onClick={logout} id='logout'>{lang.t('signIn.logout')}</a>
+    <a onClick={onShowProfile}>{user.username}</a>. {lang.t('signIn.notYou')}
+    <a className={styles.logout} onClick={onLogout} id='logout'>{lang.t('signIn.logout')}</a>
   </div>
 );
 

client/coral-ui/components/PopupMenu.css

@@ -1,13 +1,17 @@
 .popupMenu {
-  display: inline-block;
-  width: inherit;
+  white-space: normal;
+  display: block;
+  position: absolute;
+  max-width: 98%;
+  min-width: 50%;
   border: solid 1px #999;
   box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
   background: white;
   border-radius: 3px;
   padding: 20px 10px;
-  z-index: 3;
+  z-index: 300;
+  right: 1%;
 }
 
 .popupMenu:before{

client/coral-ui/components/PopupMenu.js

@@ -2,5 +2,5 @@ import React from 'react';
 import styles from './PopupMenu.css';
 
 export default ({children}) => (
-  <span className={styles.popupMenu}>{children}</span>
+  <div className={styles.popupMenu}>{children}</div>
 );

errors.js

@@ -106,7 +106,7 @@ class ErrAuthentication extends APIError {
 
 // ErrContainsProfanity is returned in the event that the middleware detects
 // profanity/wordlisted words in the payload.
-const ErrContainsProfanity = new APIError('Suspected profanity. If you think this in error, please let us know!', {
+const ErrContainsProfanity = new APIError('This username contains elements which are not permitted in our community. If you think this is in error, please contact us or try again.', {
   translation_key: 'PROFANITY_ERROR',
   status: 400
 });

graph/context.js

@@ -1,5 +1,6 @@
 const loaders = require('./loaders');
 const mutators = require('./mutators');
+const uuid = require('uuid');
 
 const plugins = require('../services/plugins');
 const debug = require('debug')('talk:graph:context');
@@ -31,7 +32,10 @@ const decorateContextPlugins = (context, contextPlugins) => contextPlugins.reduc
  * Stores the request context.
  */
 class Context {
-  constructor({user = null}) {
+  constructor({user = null}, pubsub) {
+
+    // Generate a new context id for the request.
+    this.id = uuid.v4();
 
     // Load the current logged in user to `user`, otherwise this'll be null.
     if (user) {
@@ -46,6 +50,9 @@ class Context {
 
     // Decorate the plugin context.
     this.plugins = decorateContextPlugins(this, contextPlugins);
+
+    // Bind the publish/subscribe to the context.
+    this.pubsub = pubsub;
   }
 }
 

graph/index.js

@@ -1,5 +1,7 @@
 const schema = require('./schema');
 const Context = require('./context');
+const pubsub = require('./pubsub');
+const {createSubscriptionManager} = require('./subscriptions');
 
 module.exports = {
   createGraphOptions: (req) => ({
@@ -9,6 +11,7 @@ module.exports = {
 
     // Load in the new context here, this'll create the loaders + mutators for
     // the lifespan of this request.
-    context: new Context(req)
-  })
+    context: new Context(req, pubsub)
+  }),
+  createSubscriptionManager
 };

graph/mutators/comment.js

@@ -16,7 +16,7 @@ const Wordlist = require('../../services/wordlist');
  * @param  {String} [status='NONE'] the status of the new comment
  * @return {Promise}              resolves to the created comment
  */
-const createComment = ({user, loaders: {Comments}}, {body, asset_id, parent_id = null, tags = []}, status = 'NONE') => {
+const createComment = ({user, loaders: {Comments}, pubsub}, {body, asset_id, parent_id = null, tags = []}, status = 'NONE') => {
 
   // Building array of tags
   tags = tags.map(tag => ({name: tag}));
@@ -47,6 +47,12 @@ const createComment = ({user, loaders: {Comments}}, {body, asset_id, parent_id =
         Comments.parentCountByAssetID.incr(asset_id);
       }
       Comments.countByAssetID.incr(asset_id);
+
+      if (pubsub) {
+
+        // Publish the newly added comment via the subscription.
+        pubsub.publish('commentAdded', comment);
+      }
     }
 
     return comment;

graph/pubsub.js

@@ -0,0 +1,5 @@
+const {RedisPubSub} = require('graphql-redis-subscriptions');
+
+const {connectionOptions} = require('../services/redis');
+
+module.exports = new RedisPubSub(connectionOptions);

graph/resolvers/action.js

@@ -5,8 +5,6 @@ const Action = {
       return 'DontAgreeAction';
     case 'FLAG':
       return 'FlagAction';
-    case 'LIKE':
-      return 'LikeAction';
     }
   },
 

graph/resolvers/action_summary.js

@@ -3,8 +3,6 @@ const ActionSummary = {
     switch (action_type) {
     case 'FLAG':
       return 'FlagActionSummary';
-    case 'LIKE':
-      return 'LikeActionSummary';
     case 'DONTAGREE':
       return 'DontAgreeActionSummary';
     }

graph/resolvers/date.js

@@ -5,6 +5,10 @@ module.exports = new GraphQLScalarType({
   name: 'Date',
   description: 'Date represented as an ISO8601 string',
   serialize(value) {
+    if (typeof value === 'string') {
+      return value;
+    }
+
     return value.toISOString();
   },
   parseValue(value) {

graph/resolvers/index.js

@@ -12,10 +12,10 @@ const FlagAction = require('./flag_action');
 const DontAgreeAction = require('./dont_agree_action');
 const DontAgreeActionSummary = require('./dont_agree_action_summary');
 const GenericUserError = require('./generic_user_error');
-const LikeAction = require('./like_action');
 const RootMutation = require('./root_mutation');
 const RootQuery = require('./root_query');
 const Settings = require('./settings');
+const Subscription = require('./subscription');
 const UserError = require('./user_error');
 const User = require('./user');
 const ValidationUserError = require('./validation_user_error');
@@ -35,10 +35,10 @@ let resolvers = {
   DontAgreeAction,
   DontAgreeActionSummary,
   GenericUserError,
-  LikeAction,
   RootMutation,
   RootQuery,
   Settings,
+  Subscription,
   UserError,
   User,
   ValidationUserError,

graph/resolvers/like_action.js

@@ -1,5 +0,0 @@
-const LikeAction = {
-
-};
-
-module.exports = LikeAction;

graph/resolvers/root_mutation.js

@@ -8,9 +8,6 @@ const RootMutation = {
   editComment(_, args, {mutators: {Comment}}) {
     return wrapResponse('comment')(Comment.editComment(args));
   },
-  createLike(_, {like: {item_id, item_type}}, {mutators: {Action}}) {
-    return wrapResponse('like')(Action.create({item_id, item_type, action_type: 'LIKE'}));
-  },
   createFlag(_, {flag: {item_id, item_type, reason, message}}, {mutators: {Action}}) {
     return wrapResponse('flag')(Action.create({item_id, item_type, action_type: 'FLAG', group_id: reason, metadata: {message}}));
   },

graph/resolvers/subscription.js

@@ -0,0 +1,7 @@
+const Subscription = {
+  commentAdded(comment) {
+    return comment;
+  }
+};
+
+module.exports = Subscription;

graph/subscriptions.js

@@ -0,0 +1,60 @@
+const {SubscriptionManager} = require('graphql-subscriptions');
+const {SubscriptionServer} = require('subscriptions-transport-ws');
+const _ = require('lodash');
+
+const pubsub = require('./pubsub');
+const schema = require('./schema');
+const Context = require('./context');
+const plugins = require('../services/plugins');
+
+const {deserializeUser} = require('../services/subscriptions');
+
+// Core setup functions
+let setupFunctions = {
+  commentAdded: (options, args) => ({
+    commentAdded: {
+      filter: (comment) => comment.asset_id === args.asset_id
+    },
+  }),
+};
+
+/**
+ * Plugin support requires that we merge in existing setupFunctions with our new
+ * plugin based ones. This allows plugins to extend existing setupFunctions as well
+ * as provide new ones.
+ */
+setupFunctions = plugins.get('server', 'setupFunctions').reduce((acc, {setupFunctions}) => {
+
+  return _.merge(acc, setupFunctions);
+}, setupFunctions);
+
+/**
+ * This creates a new subscription manager.
+ */
+const createSubscriptionManager = (server) => new SubscriptionServer({
+  subscriptionManager: new SubscriptionManager({
+    schema,
+    pubsub,
+    setupFunctions,
+  }),
+  onSubscribe: (parsedMessage, baseParams, connection) => {
+
+    // Attach the context per request.
+    baseParams.context = () => deserializeUser(connection.upgradeReq)
+      .then((req) => new Context(req, pubsub))
+      .catch((err) => {
+        console.error(err);
+
+        return new Context({}, pubsub);
+      });
+
+    return baseParams;
+  }
+}, {
+  server,
+  path: '/api/v1/live'
+});
+
+module.exports = {
+  createSubscriptionManager
+};

graph/typeDefs.graphql

@@ -103,9 +103,6 @@ enum COMMENT_STATUS {
 # The types of action there are as enum's.
 enum ACTION_TYPE {
 
-  # Represents a LikeAction.
-  LIKE
-
   # Represents a FlagAction.
   FLAG
 
@@ -303,41 +300,6 @@ type FlagAssetActionSummary implements AssetActionSummary {
   actionableItemCount: Int
 }
 
-# A summary of counts related to all the Likes on an Asset.
-type LikeAssetActionSummary implements AssetActionSummary {
-
-  # Number of likes associated with actionable types on this this Asset.
-  actionCount: Int
-
-  # Number of unique actionable types that are referenced by the likes.
-  actionableItemCount: Int
-}
-
-# LikeAction is used by users who "like" a specific entity.
-type LikeAction implements Action {
-
-  # The ID of the action.
-  id: ID!
-
-  # The author of the action.
-  user: User
-
-  # The time when the Action was updated.
-  updated_at: Date
-
-  # The time when the Action was created.
-  created_at: Date
-}
-
-# LikeActionSummary is counts the amount of "likes" that a specific entity has.
-type LikeActionSummary implements ActionSummary {
-
-  # The count of likes against the parent entity.
-  count: Int!
-
-  current_user: LikeAction
-}
-
 # A FLAG action that contains flag metadata.
 type FlagAction implements Action {
 
@@ -549,9 +511,6 @@ enum USER_STATUS {
 # Metrics for the assets.
 enum ASSET_METRICS_SORT {
 
-  # Represents a LikeAction.
-  LIKE
-
   # Represents a FlagAction.
   FLAG
 
@@ -637,15 +596,6 @@ enum ACTION_ITEM_TYPE {
   USERS
 }
 
-input CreateLikeInput {
-
-  # The item's id for which we are to create a like.
-  item_id: ID!
-
-  # The type of the item for which we are to create the like.
-  item_type: ACTION_ITEM_TYPE!
-}
-
 enum TAG_TYPE {
   STAFF
 }
@@ -666,15 +616,6 @@ input CreateCommentInput {
 
 }
 
-type CreateLikeResponse implements Response {
-
-  # The like that was created.
-  like: LikeAction
-
-  # An array of errors relating to the mutation that occurred.
-  errors: [UserError]
-}
-
 input CreateFlagInput {
 
   # The item's id for which we are to create a flag.
@@ -811,9 +752,6 @@ type RootMutation {
   # Creates a comment on the asset.
   createComment(comment: CreateCommentInput!): CreateCommentResponse
 
-  # Creates a like on an entity.
-  createLike(like: CreateLikeInput!): CreateLikeResponse
-
   # Creates a flag on an entity.
   createFlag(flag: CreateFlagInput!): CreateFlagResponse
 
@@ -848,6 +786,14 @@ type RootMutation {
   stopIgnoringUser(id: ID!): StopIgnoringUserResponse
 }
 
+################################################################################
+## Subscriptions
+################################################################################
+
+type Subscription {
+  commentAdded(asset_id: ID!): Comment
+}
+
 ################################################################################
 ## Schema
 ################################################################################
@@ -855,4 +801,5 @@ type RootMutation {
 schema {
   query: RootQuery
   mutation: RootMutation
+  subscription: Subscription
 }

models/user.js

@@ -123,7 +123,13 @@ const UserSchema = new mongoose.Schema({
 
     // user id of another user
     type: String,
-  }]
+  }],
+
+  // Additional metadata stored on the field.
+  metadata: {
+    default: {},
+    type: Object
+  }
 }, {
 
   // This will ensure that we have proper timestamps available on this model.

package.json

@@ -1,12 +1,12 @@
 {
   "name": "talk",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "scripts": {
     "postinstall": "./bin/cli plugins reconcile --skip-remote",
-    "start": "./bin/cli serve --jobs",
-    "dev-start": "nodemon --config .nodemon.json --exec \"./bin/cli -c .env serve --jobs\"",
+    "start": "./bin/cli serve -j -w",
+    "dev-start": "nodemon -w . -w bin/cli -w bin/cli-serve --config .nodemon.json --exec \"./bin/cli -c .env serve -j -w\"",
     "build": "NODE_ENV=production webpack -p --config webpack.config.js --bail",
     "build-watch": "NODE_ENV=development webpack --progress --config webpack.config.js --watch",
     "lint": "eslint bin/* .",
@@ -68,10 +68,12 @@
     "express-session": "^1.15.1",
     "form-data": "^2.1.2",
     "gql-merge": "^0.0.4",
-    "graphql": "^0.8.2",
+    "graphql": "^0.9.1",
     "graphql-errors": "^2.1.0",
-    "graphql-server-express": "^0.5.0",
-    "graphql-tools": "^0.9.0",
+    "graphql-redis-subscriptions": "^1.1.5",
+    "graphql-server-express": "^0.6.0",
+    "graphql-subscriptions": "^0.3.1",
+    "graphql-tools": "^0.10.1",
     "helmet": "^3.5.0",
     "immutability-helper": "^2.2.0",
     "inquirer": "^3.0.6",
@@ -85,24 +87,29 @@
     "minimist": "^1.2.0",
     "mongoose": "^4.9.1",
     "morgan": "^1.8.1",
-    "natural": "^0.4.0",
+    "natural": "^0.5.0",
     "node-emoji": "^1.5.1",
     "node-fetch": "^1.6.3",
     "nodemailer": "^2.6.4",
     "parse-duration": "^0.1.1",
     "passport": "^0.3.2",
     "passport-local": "^1.0.0",
-    "react-apollo": "^1.0.0",
+    "prop-types": "^15.5.8",
+    "react-apollo": "^1.1.0",
     "react-recaptcha": "^2.2.6",
+    "recompose": "^0.23.1",
     "redis": "^2.7.1",
+    "uuid": "^3.0.1",
+    "simplemde": "^1.11.2",
+    "subscriptions-transport-ws": "^0.5.5-alpha.0",
     "resolve": "^1.3.2",
     "semver": "^5.3.0",
     "simplemde": "^1.11.2",
     "timekeeper": "^1.0.0",
-    "uuid": "^2.0.3"
+    "uuid": "^3.0.1"
   },
   "devDependencies": {
-    "apollo-client": "^1.0.0",
+    "apollo-client": "^1.0.4",
     "autoprefixer": "^6.5.2",
     "babel-cli": "^6.24.0",
     "babel-core": "^6.24.0",
@@ -179,6 +186,7 @@
     "regenerator": "^0.8.46",
     "selenium-standalone": "^5.11.2",
     "style-loader": "^0.16.0",
+    "subscriptions-transport-ws": "^0.5.5-alpha.0",
     "supertest": "^2.0.1",
     "timeago.js": "^2.0.3",
     "webpack": "^2.3.1"