Retrieving counts and displaying new comments to user.

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

@@ -177,7 +177,7 @@ class Comment extends React.Component {
           comment.replies &&
           <div className='coral-load-more-replies'>
             <LoadMore
-              id={asset.id}
+              assetId={asset.id}
               comments={comment.replies}
               parentId={comment.id}
               moreComments={comment.replyCount > comment.replies.length}

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

@@ -12,6 +12,7 @@ const {fetchAssetSuccess} = assetActions;
 import {queryStream} from 'coral-framework/graphql/queries';
 import {postComment, postFlag, postLike, deleteAction} from 'coral-framework/graphql/mutations';
 import {editName} from 'coral-framework/actions/user';
+import {updateCountCache} from 'coral-framework/actions/asset';
 import {Notification, notificationActions, authActions, assetActions, pym} from 'coral-framework';
 
 import Stream from './Stream';
@@ -28,6 +29,7 @@ import SettingsContainer from 'coral-settings/containers/SettingsContainer';
 import RestrictedContent from 'coral-framework/components/RestrictedContent';
 import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
 import LoadMore from './LoadMore';
+import NewCount from './NewCount';
 
 class Embed extends Component {
 
@@ -82,7 +84,7 @@ class Embed extends Component {
 
   render () {
     const {activeTab} = this.state;
-    const {closedAt} = this.props.asset;
+    const {closedAt, countCache = {}} = this.props.asset;
     const {loading, asset, refetch} = this.props.data;
     const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth;
 
@@ -147,6 +149,7 @@ class Embed extends Component {
             }
             {!loggedIn && <SignInContainer requireEmailConfirmation={asset.settings.requireEmailConfirmation} offset={signInOffset}/>}
             {loggedIn &&  user && <ChangeUsernameContainer loggedIn={loggedIn} offset={signInOffset} user={user} />}
+            <NewCount commentCount={asset.commentCount} countCache={countCache[asset.id]}/>
             <Stream
               refetch={refetch}
               addNotification={this.props.addNotification}
@@ -155,6 +158,8 @@ class Embed extends Component {
               currentUser={user}
               postLike={this.props.postLike}
               postFlag={this.props.postFlag}
+              getCounts={this.props.getCounts}
+              updateCountCache={this.props.updateCountCache}
               loadMore={this.props.loadMore}
               deleteAction={this.props.deleteAction}
               showSignInDialog={this.props.showSignInDialog}
@@ -216,6 +221,7 @@ const mapDispatchToProps = dispatch => ({
   clearNotification: () => dispatch(clearNotification()),
   editName: (username) => dispatch(editName(username)),
   showSignInDialog: (offset) => dispatch(showSignInDialog(offset)),
+  updateCountCache: (id, count) => dispatch(updateCountCache(id, count)),
   logout: () => dispatch(logout()),
   dispatch: d => dispatch(d)
 });

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

@@ -0,0 +1,18 @@
+import React, {PropTypes} from 'react';
+
+const NewCount = ({commentCount, countCache}) =>
+ <div>
+  {
+    countCache && commentCount - countCache > 0 &&
+    <div>
+      Load {commentCount - countCache} More Comments
+    </div>
+  }
+</div>;
+
+NewCount.propTypes = {
+  commentCount: PropTypes.number.isRequired,
+  countCache: PropTypes.number
+};
+
+export default NewCount;

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

@@ -17,10 +17,30 @@ class Stream extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {activeReplyBox: ''};
+    this.state = {activeReplyBox: '', countPoll: null};
     this.setActiveReplyBox = this.setActiveReplyBox.bind(this);
   }
 
+  componentDidMount() {
+    const {asset, getCounts, updateCountCache} = this.props;
+
+    updateCountCache(asset.id, asset.comments.length);
+
+    // Note: Apollo's built-in polling doesn't work with fetchMore queries, so a
+    // setInterval is being used instead.
+    this.setState({
+      countPoll: setInterval(() => getCounts({
+        asset_id: asset.id,
+        limit: asset.comments.length,
+        sort: 'REVERSE_CHRONOLOGICAL'
+      }), 5000),
+    });
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.state.countPoll);
+  }
+
   setActiveReplyBox (reactKey) {
     if (!this.props.currentUser) {
       const offset = document.getElementById(`c_${reactKey}`).getBoundingClientRect().top - 75;