Improve comments rendering

3 files changed, 117 insertions, 105 deletions

diff --git a/static/js/controllers/base_controller.js b/static/js/controllers/base_controller.js
index fc05e29..6caa9dd 100644
--- a/static/js/controllers/base_controller.js
+++ b/static/js/controllers/base_controller.js
@@ -1,46 +1,46 @@
 export class BaseController {
-    constructor() {
-	this.comments_server_url = document.getElementById('comments-client').src;
-	this.origin = window.location.origin;
-	this.protocol = this.getProtocol();
-	this.domain = this.getDomain();
-	this.post = window.location.pathname;
-	this.comments_server_host = `${this.protocol}//${this.domain}`;
-	this.parser = new DOMParser();
-    }
-
-    async submit(event, route) {
-	event.preventDefault();
-	const form = new FormData(event.target);
-
-	try {
+  constructor() {
+		this.comments_server_url = document.getElementById('comments-client').src;
+		this.origin = window.location.origin;
+		this.protocol = this.getProtocol();
+		this.domain = this.getDomain();
+		this.post = window.location.pathname;
+		this.comments_server_host = `${this.protocol}//${this.domain}`;
+		this.parser = new DOMParser();
+  }
+
+  async submit(event, route) {
+		event.preventDefault();
+		const form = new FormData(event.target);
+
+		try {
 	    const response = await fetch(route, { method: "POST", body: form });
 
 	    response.text().then((response_document) => {
-		this.renderSubmitResponse(response_document);
+				this.renderSubmitResponse(response_document);
 	    });
-	} catch(error) {}
-    }
+		} catch(error) {}
+  }
 
-    getDomain() {
-	return this.comments_server_url.split('/')[2];
-    }
+  getDomain() {
+		return this.comments_server_url.split('/')[2];
+  }
 
-    getProtocol() {
-	return this.comments_server_url.split('/')[0];
-    }
+  getProtocol() {
+		return this.comments_server_url.split('/')[0];
+  }
 
-    htmlFromResponse(body) {
-	return this.parser.parseFromString(body, "text/html");
-    }
+  htmlFromResponse(body) {
+		return this.parser.parseFromString(body, "text/html");
+  }
 
-    async get(route) {
-	try {
+  async get(route) {
+		try {
 	    const response = await fetch(`${this.comments_server_host}${route}`);
 
 	    return response.text().then(this.htmlFromResponse.bind(this));
-	} catch(error) {
-	    return null;
-	}
-    }
+		} catch(error) {
+	  	return null;
+		}
+  }
 }
diff --git a/static/js/controllers/comments_controller.js b/static/js/controllers/comments_controller.js
index 8989c5a..a21bd05 100644
--- a/static/js/controllers/comments_controller.js
+++ b/static/js/controllers/comments_controller.js
@@ -1,45 +1,45 @@
 import { BaseController } from "./base_controller.js";
 
 export class CommentsController extends BaseController {
-    constructor(replies_controller) {
-	super();
-	this.replies_controller = replies_controller;
-	this.comments_node = document.getElementById("comments-thread");
-	this.renderForm();
-	this.renderComments();
-    }
-
-    renderForm() {
-	this.get("/api/comments/new").then((value) => {
+  constructor(replies_controller) {
+		super();
+		this.replies_controller = replies_controller;
+		this.comments_node = document.getElementById("comments-thread");
+		this.renderForm();
+		this.renderComments();
+  }
+
+  renderForm() {
+		this.get("/api/comments/new").then((value) => {
 	    const form = value?.getElementById("comment-form");
 
 	    if(form != null) {
-		this.comments_node.appendChild(form);
-		this.form_element = document.getElementById("comment-form");
-		this.form_element.addEventListener("submit", this.submit.bind(this));
+				this.comments_node.appendChild(form);
+				this.form_element = document.getElementById("comment-form");
+				this.form_element.addEventListener("submit", this.submit.bind(this));
 	    }
-	});
-    }
-
-    renderComments() {
-	this.get(`/api/comments?path=${this.post}`).then((value) => {
-	    const comments = value?.getElementById("comment-section");
-
-	    if(comments != null) {
-		this.comments_node.appendChild(comments);
-		this.replies_controller.init();
-	    }
-	});
-    }
-
-    renderSubmitResponse(response_document) {
-	const new_comments = this.htmlFromResponse(response_document).getElementById("comment-section");
-	const comments = document.getElementById("comment-section");
-	comments.replaceWith(new_comments);
-    }
-
-    async submit(event) {
-	super.submit(event, `${this.comments_server_host}/api/comments?path=${this.post}`);
-    }
+		});
+  }
+
+  renderComments() {
+		this.get(`/api/comments?path=${this.post}`).then((value) => {
+	  	const comments = value?.getElementById("comment-section");
+
+	  	if(comments != null) {
+				this.comments_node.appendChild(comments);
+				this.replies_controller.init();
+	  	}
+		});
+  }
+
+  renderSubmitResponse(response_document) {
+		const new_comments = this.htmlFromResponse(response_document).getElementById("comment-section");
+		const comments = document.getElementById("comment-section");
+		comments.replaceWith(new_comments);
+  }
+
+  async submit(event) {
+		super.submit(event, `${this.comments_server_host}/api/comments?path=${this.post}`);
+  }
  }
 
diff --git a/static/js/controllers/replies_controller.js b/static/js/controllers/replies_controller.js
index 5d638a5..5f767be 100644
--- a/static/js/controllers/replies_controller.js
+++ b/static/js/controllers/replies_controller.js
@@ -1,58 +1,70 @@
 import { BaseController } from "./base_controller.js";
 
 export class RepliesController extends BaseController {
-    constructor() {
-	super();
-    }
+  constructor() {
+		super();
+  }
 
-    async init() {
-	this.comment_id = 0;
-	this.reply_form = await this.getReplyForm();
-	this.listenButtons("replies-button", this.showReplies.bind(this));
-	this.listenButtons("new-reply-button", this.showReplyForm.bind(this));
-    }
+  async init() {
+		this.comment_id = 0;
+		this.reply_form = await this.getReplyForm();
+		this.listenButtons("replies-button", this.renderReplies.bind(this));
+		this.listenButtons("new-reply-button", this.showReplyForm.bind(this));
+  }
 
-    async submit(event) {
-	await super.submit(event, `${this.comments_server_host}/api/comments/${this.comment_id}/replies`);
-    }
+  async submit(event) {
+		await super.submit(event, `${this.comments_server_host}/api/comments/${this.comment_id}/replies`);
+  }
 
-    listenButtons(class_name, func) {
-	const buttons = document.getElementsByClassName(class_name);
+  listenButtons(class_name, func) {
+		const buttons = document.getElementsByClassName(class_name);
 
-	if(buttons) {
+		if(buttons) {
 	    for(let button of buttons)
-		button.addEventListener("click", func);
-	}
-    }
+				button.addEventListener("click", func);
+		}
+  }
 
-    showReplyForm(event) {
-	const replies_section = event.target.parentElement.parentElement.childNodes[3];
-	const form = replies_section.querySelector(".reply-form");
+  showReplyForm(event) {
+		const replies_section = event.target.parentElement.parentElement.childNodes[3];
+		const form = replies_section.querySelector(".reply-form");
 
-	if(form == null) {
+		if(form == null) {
 	    replies_section.appendChild(this.reply_form);
 	    this.setCommentId(replies_section);
 	    this.reply_form.addEventListener("submit", this.submit.bind(this));
-	} else
-	    form.remove();
-    }
+		} else
+	  	form.remove();
+  }
 
-    showReplies(event) {
-	/* The div to contain the comment's replies. From the element id
-	   we can get the comment's id. */
-	this.setCommentId(event.target);
-	console.log("You're in showReplies()");
-    }
+    renderReplies(event) {
+			/* The div to contain the comment's replies. From the element id
+	   	   we can get the comment's id. */
+			const comment_replies_section = event.target.parentElement.parentElement.parentElement;
+			const replies = comment_replies_section.querySelector(".replies-section");
+			this.setCommentId(comment_replies_section);
+
+			if( replies != null) {
+				replies.remove();
 
-    setCommentId(parent) {
-	const replies_section = parent.parentElement.parentElement.childNodes[3];
+				return;
+			}
+
+			this.get(`/api/comments/${this.comment_id}/replies`).then((value) => {
+				const replies = value?.getElementById(`replies-section-${this.comment_id}`);
+	
+				if(replies != null)
+					comment_replies_section.appendChild(replies);
+			});
+    }
 
-	this.comment_id = /\d/.exec(replies_section.id)[0];
+    setCommentId(replies_section) {
+			this.comment_id = /\d/.exec(replies_section.id)[0];
     }
 
     async getReplyForm() {
-	var form = await this.get("/api/replies/new");
+			var form = await this.get("/api/replies/new");
 
-	return form.getElementsByClassName("reply-form")[0];
+			return form.getElementsByClassName("reply-form")[0];
     }
 }