1 files changed, 48 insertions, 36 deletions

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];
     }
 }