freeCodeCamp/views/stories/comments.jade

.text-left
    div#comment-list

        script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js")
        script(src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js")
        script.
            var sentinel = 0;
            var renderComments = function renderComments(comments, containerSelector, level) {
                var commentDetails;
                R.forEach(function displayComments(comment) {

                    $.ajax({
                        type: 'GET',
                        url: '/stories/comments/' + comment,
                        error: function (xhr, textStatus, errorThrown) {
                            commentDetails = {
                                error: true,
                                body: 'There seems to be a problem fetching this comment.'
                            }
                        },
                        success: function (data, textStatus, xhr) {
                            commentDetails = data;
                            var div = document.createElement('div');

                            $(div)
                                    .html(
                                        '<div class="media media-news">' +
                                            '<div class="media-left">' +
                                                "<a href='/" + commentDetails.author.username + "'>" +
                                                    '<img class="media-object img-news" src="' + commentDetails.author.picture +'" alt="' + commentDetails.author.username + '">' +
                                                '</a>' +
                                            '</div>' +
                                            '<div class="media-body comment_' + commentDetails._id + '">' +
                                                '<div class="media-body-wrapper">' +
                                                    '<p>' + commentDetails.body + '</p>' +
                                                        '<h6>' +
                                                            '<div class="clearfix comment-a-comment negative-15">' +
                                                                "<a class='btn btn-no-shadow btn-primary btn-xs btn-primary-ghost' id='" + commentDetails._id + "'>Reply</a> · " +
                                                                "commented " + moment(commentDetails.commentOn).fromNow() + " by " +
                                                                "<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a>" +
                                                            '</div>' +
                                                        '</h6>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>'
                                    )
                                    .addClass('comment-wrapper positive-10')
                                    .appendTo($(containerSelector));

                            sentinel += commentDetails.comments.length;

                            renderComments(commentDetails.comments, '.comment_' + commentDetails._id, ++level);

                        },
                        complete: function () {
                            sentinel--;
                            if (!sentinel) {
                                $('.comment-a-comment').on('click', 'a', function () {
                                    if (typeof user == "undefined" || !user) {
                                        window.location.href = '/signin';
                                        return;
                                    }
                                    $(this).unbind('click');
                                    $('.comment-to-comment-formgroup').empty();
                                    $('#initial-comment-submit').addClass('hidden-element');
                                    var div = document.createElement('div');
                                    var commentId = $(this).attr('id');
                                    $(div).html(
                                        "<div class='formgroup comment-to-comment-formgroup control-label-story-submission'>" +
                                            '<div class="col-xs-12">' +
                                                "<div class='input-group'>" +
                                                    "<input class='form-control big-text-field field-responsive' id='comment-to-comment-textinput' type='text' maxlength='140' autofocus />" +
                                                    "<span class='input-group-btn'>" +
                                                        "<button id='submit-comment-to-comment' class='btn btn-big btn-primary btn-responsive'>Send</button>" +
                                                    "</span>" +
                                                "</div>" +
                                            "</div>" +
                                            "<div id='textarea-comment-feedback'></div>" +
                                        "</div>"
                                    )
                                            .addClass('row')
                                            .appendTo($(this).closest('.media-body-wrapper'));
                                    var text_max = 140;
                                    $('#textarea-comment-feedback').html(text_max + ' characters remaining');
                                    $('#comment-to-comment-textinput').keyup(function (e) {
                                        if (e.which === 13 || e === 13) {
                                            $('#submit-comment-to-comment').click();
                                        }
                                        var text_length = $('#comment-to-comment-textinput').val().length;
                                        var text_remaining = text_max - text_length;
                                        $('#textarea-comment-feedback').html(text_remaining + ' characters remaining');
                                    });
                                    var submitCommentToCommentHandler = function submitCommentToCommentHandler() {
                                        $('#submit-comment-to-comment').unbind('click');
                                        $.post('/stories/comment/' + commentId + '/comment',
                                        {
                                            data: {
                                                associatedPost: commentId,
                                                body: $('#comment-to-comment-textinput').val(),
                                                author: {
                                                    picture: user.profile.picture,
                                                    userId: user._id,
                                                    username: user.profile.username
                                                }
                                            }
                                        })
                                        .fail(function (xhr, textStatus, errorThrown) {
                                            $('#submit-comment-to-comment').bind('click', submitCommentToCommentHandler);
                                        })
                                        .done(function (data, textStatus, xhr) {
                                            window.location.reload();
                                        });

                                    };

                                    $('#submit-comment-to-comment').on('click', submitCommentToCommentHandler);
                                });//
                            }
                        }
                    })


                }, comments);
            }
            sentinel += comments.length;


            renderComments(comments, $('#comment-list'), 0);