Merge branch 'master' into metadata

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

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

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

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

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

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React from 'react';
 import {compose} from 'react-apollo';
 import {connect} from 'react-redux';
 import isEqual from 'lodash/isEqual';
@@ -36,15 +36,22 @@ import HighlightedComment from './Comment';
 import LoadMore from './LoadMore';
 import NewCount from './NewCount';
 
-class Embed extends Component {
+class Embed extends React.Component {
 
-  state = {activeTab: 0, showSignInDialog: false, activeReplyBox: ''};
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeTab: 0,
+      showSignInDialog: false,
+      activeReplyBox: ''
+    };
+  }
 
   changeTab = (tab) => {
-    const {isAdmin} = this.props.auth;
 
     // Everytime the comes from another tab, the Stream needs to be updated.
-    if (tab === 0 && isAdmin) {
+    if (tab === 0) {
+      this.props.viewAllComments();
       this.props.data.refetch();
     }
 
@@ -79,10 +86,12 @@ class Embed extends Component {
     if(!isEqual(nextProps.data.asset, this.props.data.asset)) {
       loadAsset(nextProps.data.asset);
 
-      const {getCounts, updateCountCache} = this.props;
+      const {getCounts, updateCountCache, asset: {countCache}} = this.props;
       const {asset} = nextProps.data;
 
-      updateCountCache(asset.id, asset.commentCount);
+      if (!countCache) {
+        updateCountCache(asset.id, asset.commentCount);
+      }
 
       this.setState({
         countPoll: setInterval(() => {
@@ -127,6 +136,12 @@ class Embed extends Component {
 
     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
     } : {};
@@ -144,7 +159,8 @@ class Embed extends Component {
       <div style={expandForLogin}>
         <div className="commentStream">
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
-            <Tab><Count count={asset.totalCommentCount}/></Tab>
+            <Tab><Count count={asset.totalCommentCount}/>
+            </Tab>
             <Tab>{lang.t('MY_COMMENTS')}</Tab>
             <Tab restricted={!isAdmin}>Configure Stream</Tab>
           </TabBar>
@@ -259,7 +275,7 @@ class Embed extends Component {
                   topLevel={true}
                   assetId={asset.id}
                   comments={asset.comments}
-                  moreComments={countCache[asset.id] > asset.comments.length}
+                  moreComments={hasOlderComments}
                   loadMore={this.props.loadMore} />
               </div>
             }

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

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

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

@@ -38,6 +38,9 @@ query AssetQuery($asset_id: ID, $asset_url: String, $comment_id: ID!, $has_comme
         }
         commentCount
         totalCommentCount
+        lastComment {
+          id
+        }
         comments(limit: 10) {
             ...commentView
             replyCount

graph/resolvers/asset.js

@@ -1,4 +1,11 @@
 const Asset = {
+  lastComment({id}, _, {loaders: {Comments}}) {
+    return Comments.getByQuery({
+      asset_id: id,
+      limit: 1,
+      parent_id: null
+    }).then(data => data[0]);
+  },
   recentComments({id}, _, {loaders: {Comments}}) {
     return Comments.genRecentComments.load(id);
   },

graph/typeDefs.graphql

@@ -413,6 +413,9 @@ type Asset {
   # The URL that the asset is located on.
   url: String
 
+  # Returns last comment
+  lastComment: Comment
+
   # Returns recent comments
   recentComments: [Comment]