postcomments.js

import React from 'react';
import PostComment from 'shared/components/PostComment';
import copy from 'shared/constants/copy';
import randomColor from 'shared/util/random_color';
import FluxComponent from 'flummox/component';
import Ad from 'shared/components/Ad';

export default class PostComments extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.comments === this.props.comments) {
            return false;
        }

        return true;
    }

    render() {
        const className = this.props.topLevel ?
            'PostComments-replyContainer' :
            'PostComments-replyContainer PostComments-replyContainer--child';

        const level = this.props.topLevel ? 0 : this.props.level;
        const commentCount = this.props.comments.size;

        const nestingColors = {
            1: 'green',
            2: 'purple',
            3: 'red',
            4: 'yellow',
            5: 'blue',
            6: 'orange',
            defaultColor: 'green'
        };

        const nestingColor = nestingColors[this.props.level] || nestingColors.defaultColor;

        const comments = this.props.comments.map((comment, i) => {
            // show ad after 3rd comment if on level 0
            // show ad if on level > 0 and there are more than 6 comments
            // in thread (so two ads won't show on screen at same time)
            const commentAd = (i === 2 && (level === 0 || commentCount >= 6)) ?
                <Ad adNumber={comment.get('id')}/> :
                '';

            return (
                /**
                 * Wrapping every <Comment/> in a <FluxComponent/>
                 * so they can subscribe to the PostStore and get
                 * updates when one comment is made "active", ie having
                 * its controls visible. Only one set of controls visible
                 * at a time, so the currently-active comment is stored
                 * in PostStore.
                 */
                <div key={comment.get('id')}>
                    <FluxComponent
                        connectToStores={{
                            post: (store) => ({
                                activeComment: store.getActiveComment()
                            })
                        }}>
                        <PostComment
                            key={comment.get('id')}
                            nestingColor={nestingColor}
                            commentId={comment.get('id')}
                            postId={this.props.postId}
                            parentLevel={level}
                            comment={comment.get('comment')}
                            points={comment.get('points')}
                            author={comment.get('author')}
                            replies={comment.get('children')}
                            vote={comment.get('vote')}/>
                    </FluxComponent>
                    {commentAd}
                </div>
            );
        });

        return (
            <div
                className={className}
                style={{ borderColor: nestingColor }}>
                {comments}
            </div>
        );
    }
}

PostComments.propTypes = {
    comments: React.PropTypes.object, // Immutable list
    topLevel: React.PropTypes.bool,
    level: React.PropTypes.number,
    postId: React.PropTypes.string
};

PostComments.contextTypes = {
    flux: React.PropTypes.object
};