Convert existing comments to be statically rendered.

[miketaylr]

Follow up to #3281

This may or may not be desirable, since it will require us to block on another request. Perhaps dynamic is the way to go here. 🤔

But if we want to create an archive, we will at least need a method that allows for static comment rendering, so it could be optional.

[miketaylr]

Here's how comments currently work:

For an issue, initialize the CommentsCollection here:

webcompat.com/webcompat/static/js/lib/issues.js

Line 290 in 357e053

this.comments = new issues.CommentsCollection({ pageNumber: 1 });

If there are any comments on the issue, here is where we fetch them:

webcompat.com/webcompat/static/js/lib/issues.js

Lines 368 to 396 in 357e053

	// If there are any comments, go fetch the model data
	if (this.issue.get("commentNumber") > 0) {
	this.comments
	.fetch({ headers: { Accept: "application/json" } })
	.done(
	_.bind(function (response) {
	this.addExistingComments();
	this.comments.bind("add", _.bind(this.addComment, this));
	// If there's a #hash pointing to a comment (or elsewhere)
	// scrollTo it.
	if (location.hash !== "") {
	var _id = $(location.hash);
	window.scrollTo(0, _id.offset().top);
	}
	if (response[0].lastPageNumber > 1) {
	this.getRemainingComments(++response[0].lastPageNumber);
	}
	}, this)
	)
	.fail(function () {
	var msg =
	"There was an error retrieving issue comments. Please reload to try again.";
	wcEvents.trigger("flash:error", {
	message: msg,
	timeout: 4000,
	});
	});
	}
	},

Then if there's more than 30 comments (super rare, I would imagine), grab the rest:

webcompat.com/webcompat/static/js/lib/issues.js

Lines 398 to 415 in 357e053

	getRemainingComments: function (count) {
	//The first 30 comments for page 1 has already been loaded.
	//If more than 30 comments are there the remaining comments are rendered in sets of 30
	//in consecutive pages
	_.each(
	_.bind(
	_.range(2, count),
	function (i) {
	this.comments.fetchPage({
	pageNumber: i,
	headers: { Accept: "application/json" },
	});
	},
	this
	)
	);
	},

This is where we render an individual comment (this gets called for each existing comment, and for new comments):

webcompat.com/webcompat/static/js/lib/issues.js

Lines 417 to 430 in 357e053

	addComment: function (comment) {
	// if there's a nsfw label, add the relevant class.
	var view = new issues.CommentView({ model: comment });
	var commentElm = view.render().$el;
	$(".js-Issue-commentList").append(commentElm);
	_.each(commentElm.find("code"), function (elm) {
	Prism.highlightElement(elm);
	});
	if (this._isNSFW) {
	_.each(commentElm.find("img"), function (elm) {
	$(elm).closest("p").addClass("issue-details-nsfw");
	});
	}
	},

[miketaylr]

Maybe a place to start here is to create the ability to fetch 30 pre-rendered comments at a time, returned as HTML we can add to the page after the initial load.

I'd like to avoid building 2 entirely different comment loading solutions, where possible (because they're likely to fall out of sync). I don't think it's entirely unavoidable, but something to aim for.