Reader Conversations: Caterpillars + Comment Expansion

client/blocks/comments/comment-actions.jsx

@@ -23,7 +23,7 @@ const CommentActions = ( {
 	showModerationTools,
 	translate,
 	activeEditCommentId,
-	activeReplyCommentID,
+	activeReplyCommentId,
 	commentId,
 	handleReply,
 	onReplyCancel,
@@ -35,7 +35,7 @@ const CommentActions = ( {
 	editCommentCancel,
 } ) => {
 	const showReplyButton = post && post.discussion && post.discussion.comments_open === true;
-	const showCancelReplyButton = activeReplyCommentID === commentId;
+	const showCancelReplyButton = activeReplyCommentId === commentId;
 	const showCancelEditButton = activeEditCommentId === commentId;
 	const isApproved = status === 'approved';
 

client/blocks/comments/form.jsx

@@ -42,7 +42,7 @@ class PostCommentForm extends React.Component {
 
 	componentDidMount() {
 		// If it's a reply, give the input focus if commentText exists ( can not exist if comments are closed )
-		if ( this.props.parentCommentID && this._textareaNode ) {
+		if ( this.props.parentCommentId && this._textareaNode ) {
 			this._textareaNode.focus();
 		}
 	}
@@ -129,16 +129,16 @@ class PostCommentForm extends React.Component {
 			this.props.deleteComment( post.site_ID, post.ID, this.props.placeholderId );
 		}
 
-		if ( this.props.parentCommentID ) {
-			this.props.replyComment( commentText, post.site_ID, post.ID, this.props.parentCommentID );
+		if ( this.props.parentCommentId ) {
+			this.props.replyComment( commentText, post.site_ID, post.ID, this.props.parentCommentId );
 		} else {
 			this.props.writeComment( commentText, post.site_ID, post.ID );
 		}
 
 		recordAction( 'posted_comment' );
 		recordGaEvent( 'Clicked Post Comment Button' );
 		recordTrackForPost( 'calypso_reader_article_commented_on', post, {
-			parent_post_id: this.props.parentCommentID ? this.props.parentCommentID : undefined,
+			parent_post_id: this.props.parentCommentId ? this.props.parentCommentId : undefined,
 		} );
 
 		this.resetCommentText();
@@ -256,7 +256,7 @@ class PostCommentForm extends React.Component {
 
 PostCommentForm.propTypes = {
 	post: React.PropTypes.object.isRequired,
-	parentCommentID: React.PropTypes.number,
+	parentCommentId: React.PropTypes.number,
 	placeholderId: React.PropTypes.string, // can only be 'placeholder-123'
 	commentText: React.PropTypes.string,
 	onUpdateCommentText: React.PropTypes.func.isRequired,

client/blocks/comments/post-comment-list.jsx

@@ -69,7 +69,7 @@ class PostCommentList extends React.Component {
 	};
 
 	state = {
-		activeReplyCommentID: null,
+		activeReplyCommentId: null,
 		amountOfCommentsToTake: this.props.initialSize,
 		commentsFilter: 'all',
 		activeEditCommentId: null,
@@ -199,7 +199,7 @@ class PostCommentList extends React.Component {
 				key={ commentId }
 				showModerationTools={ this.props.showModerationTools }
 				activeEditCommentId={ this.state.activeEditCommentId }
-				activeReplyCommentID={ this.state.activeReplyCommentID }
+				activeReplyCommentId={ this.state.activeReplyCommentId }
 				onEditCommentClick={ onEditCommentClick }
 				onEditCommentCancel={ this.onEditCommentCancel }
 				onReplyClick={ this.onReplyClick }
@@ -221,7 +221,7 @@ class PostCommentList extends React.Component {
 	onEditCommentCancel = () => this.setState( { activeEditCommentId: null } );
 
 	onReplyClick = commentID => {
-		this.setState( { activeReplyCommentID: commentID } );
+		this.setState( { activeReplyCommentId: commentID } );
 		recordAction( 'comment_reply_click' );
 		recordGaEvent( 'Clicked Reply to Comment' );
 		recordTrack( 'calypso_reader_comment_reply_click', {
@@ -235,7 +235,7 @@ class PostCommentList extends React.Component {
 		recordGaEvent( 'Clicked Cancel Reply to Comment' );
 		recordTrack( 'calypso_reader_comment_reply_cancel_click', {
 			blog_id: this.props.post.site_ID,
-			comment_id: this.state.activeReplyCommentID,
+			comment_id: this.state.activeReplyCommentId,
 		} );
 		this.resetActiveReplyComment();
 	};
@@ -245,7 +245,7 @@ class PostCommentList extends React.Component {
 	};
 
 	resetActiveReplyComment = () => {
-		this.setState( { activeReplyCommentID: null } );
+		this.setState( { activeReplyCommentId: null } );
 	};
 
 	renderCommentsList = commentIds => {
@@ -261,7 +261,7 @@ class PostCommentList extends React.Component {
 		const commentText = this.state.commentText;
 
 		// Are we displaying the comment form at the top-level?
-		if ( this.state.activeReplyCommentID && ! this.state.errors ) {
+		if ( this.state.activeReplyCommentId && ! this.state.errors ) {
 			return null;
 		}
 

client/blocks/comments/post-comment.jsx

@@ -22,18 +22,13 @@ import { getStreamUrl } from 'reader/route';
 import PostCommentContent from './post-comment-content';
 import PostCommentForm from './form';
 import CommentEditForm from './comment-edit-form';
-import { PLACEHOLDER_STATE } from 'state/comments/constants';
+import { PLACEHOLDER_STATE, POST_COMMENT_DISPLAY_TYPES } from 'state/comments/constants';
 import { decodeEntities } from 'lib/formatting';
 import PostCommentWithError from './post-comment-with-error';
 import PostTrackback from './post-trackback.jsx';
 import CommentActions from './comment-actions';
-
-// values conveniently also correspond to css classNames to apply
-export const POST_COMMENT_DISPLAY_TYPES = {
-	singleLine: 'is-single-line',
-	excerpt: 'is-excerpt',
-	full: 'is-full',
-};
+import ConversationCaterpillar from 'blocks/conversation-caterpillar';
+import { viewComment } from 'state/comments/actions';
 
 class PostComment extends Component {
 	static propTypes = {
@@ -63,14 +58,37 @@ class PostComment extends Component {
 		maxChildrenToShow: 5,
 		onCommentSubmit: noop,
 		showNestingReplyArrow: false,
-		displayType: POST_COMMENT_DISPLAY_TYPES.full,
+		displayType: POST_COMMENT_DISPLAY_TYPES.excerpt,
 	};
 
 	state = {
 		showReplies: false,
 		showFull: false,
 	};
 
+	reportCommentView = ( props = this.props ) => {
+		const { commentId, post, toShow } = props;
+		const { site_ID: siteId, ID: postId } = post;
+		const comment = get( this.props.commentsTree, [ commentId, 'data' ], {} );
+
+		if ( comment && toShow && toShow[ commentId ] ) {
+			props.viewComment( { commentId, siteId, postId, date: comment.date } );
+		}
+	};
+
+	componentDidMount() {
+		this.reportCommentView();
+	}
+	componentWillUpdate( nextProps ) {
+		if (
+			!! this.props.commentsTree[ this.props.commentId ] &&
+			( this.props.commentId !== nextProps.commentId ||
+				! this.props.commentsTree[ this.props.commentId ] )
+		) {
+			this.reportCommentView( nextProps );
+		}
+	}
+
 	handleReadMoreClicked = () => this.setState( { showFull: true } );
 
 	handleToggleRepliesClick = () => {
@@ -94,11 +112,13 @@ class PostComment extends Component {
 	};
 
 	renderRepliesList() {
+		const { toShow, depth, commentId } = this.props;
 		const commentChildrenIds = get( this.props.commentsTree, [ this.props.commentId, 'children' ] );
 		// Hide children if more than maxChildrenToShow, but not if replying
 		const exceedsMaxChildrenToShow =
 			commentChildrenIds && commentChildrenIds.length < this.props.maxChildrenToShow;
 		const showReplies = this.state.showReplies || exceedsMaxChildrenToShow;
+		const childDepth = ! toShow || ( toShow && toShow[ commentId ] ) ? depth + 1 : depth;
 
 		// No children to show
 		if ( ! commentChildrenIds || commentChildrenIds.length < 1 ) {
@@ -130,20 +150,20 @@ class PostComment extends Component {
 
 		return (
 			<div>
-				{ !! replyVisibilityText
+				{ !! replyVisibilityText && ! this.props.showCaterpillar
 					? <button
 							className="comments__view-replies-btn"
 							onClick={ this.handleToggleRepliesClick }
 						>
 							<Gridicon icon="reply" size={ 18 } /> { replyVisibilityText }
 						</button>
 					: null }
-				{ showReplies
+				{ showReplies || this.props.showCaterpillar
 					? <ol className="comments__list">
 							{ commentChildrenIds.map( childId =>
 								<PostComment
 									{ ...omit( this.props, 'displayType' ) }
-									depth={ this.props.depth + 1 }
+									depth={ childDepth }
 									key={ childId }
 									commentId={ childId }
 								/>
@@ -155,15 +175,15 @@ class PostComment extends Component {
 	}
 
 	renderCommentForm() {
-		if ( this.props.activeReplyCommentID !== this.props.commentId ) {
+		if ( this.props.activeReplyCommentId !== this.props.commentId ) {
 			return null;
 		}
 
 		return (
 			<PostCommentForm
 				ref="postCommentForm"
 				post={ this.props.post }
-				parentCommentID={ this.props.commentId }
+				parentCommentId={ this.props.commentId }
 				commentText={ this.props.commentText }
 				onUpdateCommentText={ this.props.onUpdateCommentText }
 				onCommentSubmit={ this.props.onCommentSubmit }
@@ -196,12 +216,48 @@ class PostComment extends Component {
 				</strong>;
 	};
 
+	renderCaterpillar = () => {
+		const { showCaterpillar, commentsTree, toShow, post, commentId } = this.props;
+		const childrenIds = get( commentsTree, [ this.props.commentId, 'children' ] );
+
+		const actuallyShowCaterpillar = showCaterpillar && some( childrenIds, id => ! toShow[ id ] );
+
+		if ( ! actuallyShowCaterpillar ) {
+			return null;
+		}
+		return (
+			<ConversationCaterpillar
+				blogId={ post.site_ID }
+				postId={ post.ID }
+				parentCommentId={ commentId }
+			/>
+		);
+	};
+
 	render() {
-		const { commentsTree, commentId, depth, maxDepth } = this.props;
+		const { commentsTree, commentId, depth, maxDepth, toShow } = this.props;
 		const comment = get( commentsTree, [ commentId, 'data' ] );
-		const displayType = this.state.showFull
-			? POST_COMMENT_DISPLAY_TYPES.full
-			: this.props.displayType;
+		const isPingbackOrTrackback = comment.type === 'trackback' || comment.type === 'pingback';
+
+		if ( this.props.hidePingbacksAndTrackbacks && isPingbackOrTrackback ) {
+			return null;
+		}
+
+		if ( ! comment ) {
+			return null;
+		}
+		if ( toShow && ! toShow[ commentId ] ) {
+			return (
+				<div>
+					{ this.renderRepliesList() }
+				</div>
+			);
+		}
+
+		const displayType =
+			this.state.showFull || ! this.props.showCaterpillar
+				? POST_COMMENT_DISPLAY_TYPES.full
+				: this.props.displayType;
 
 		// todo: connect this constants to the state (new selector)
 		const haveReplyWithError = some(
@@ -224,7 +280,7 @@ class PostComment extends Component {
 		}
 
 		// Trackback / Pingback
-		if ( comment.type === 'trackback' || comment.type === 'pingback' ) {
+		if ( isPingbackOrTrackback ) {
 			return <PostTrackback { ...this.props } />;
 		}
 
@@ -303,7 +359,7 @@ class PostComment extends Component {
 					comment={ comment }
 					showModerationTools={ this.props.showModerationTools }
 					activeEditCommentId={ this.props.activeEditCommentId }
-					activeReplyCommentID={ this.props.activeReplyCommentID }
+					activeReplyCommentId={ this.props.activeReplyCommentId }
 					commentId={ this.props.commentId }
 					editComment={ this.props.onEditCommentClick }
 					editCommentCancel={ this.props.onEditCommentCancel }
@@ -312,12 +368,16 @@ class PostComment extends Component {
 				/>
 
 				{ haveReplyWithError ? null : this.renderCommentForm() }
+				{ this.renderCaterpillar() }
 				{ this.renderRepliesList() }
 			</li>
 		);
 	}
 }
 
-export default connect( state => ( {
-	currentUser: getCurrentUser( state ),
-} ) )( PostComment );
+export default connect(
+	state => ( {
+		currentUser: getCurrentUser( state ),
+	} ),
+	{ viewComment }
+)( PostComment );