addComment()

in static/src/javascripts/projects/common/modules/discussion/comments.js [317:381]


    addComment(comment, parent) {
        const commentElem = bonzo.create(this.postedCommentEl)[0];
        const $commentElem = bonzo(commentElem);
        const replyButton =
            commentElem &&
            commentElem.getElementsByClassName(
                this.getClass('commentReply', true)
            )[0];
        const map = {
            username: 'd-comment__author',
            timestamp: 'js-timestamp',
            body: 'd-comment__body',
            report: 'd-comment__action--report',
            avatar: 'd-comment__avatar',
        };
        const vals = {
            username: this.user && this.user.displayName,
            timestamp: 'Just now',
            body: `<p>${comment.body.replace(/\n+/g, '</p><p>')}</p>`,
            report: {
                href: `http://discussion.theguardian.com/components/report-abuse/${
                    comment.id
                }`,
            },
            avatar: {
                src: this.user && this.user.avatar,
            },
        };

        $commentElem.addClass('d-comment--new');

        Object.keys(map).forEach(key => {
            const selector = map[key];
            const val = vals[key];
            const elem = qwery(`.${selector}`, commentElem)[0];

            if (typeof val === 'string') {
                elem.innerHTML = val;
            } else if (typeof val === 'object') {
                Object.keys(val).forEach(attr => {
                    elem.setAttribute(attr, val[attr]);
                });
            }
        });

        commentElem.id = `comment-${comment.id}`;

        if (this.user && !this.user.isStaff) {
            $commentElem.addClass(this.getClass('commentStaff', true));
        }

        if (replyButton) {
            replyButton.setAttribute('data-comment-id', comment.id);
        }

        if (!parent) {
            $(this.getClass('newComments'), this.elem).prepend(commentElem);
        } else {
            $commentElem.removeClass(this.getClass('topLevelComment', true));
            $commentElem.addClass(this.getClass('reply', true));
            bonzo(parent).append($commentElem);
        }

        window.location.replace(`#comment-${comment.id}`);
    }