From d5d73505832bb39cf8e7fa5a49ff8e3d56690d71 Mon Sep 17 00:00:00 2001
From: HombreLaser <sebastian-440@live.com>
Date: Wed, 21 Feb 2024 12:12:52 -0600
Subject: Add reply form rendering

---
 static/js/client.js                          |  4 ++-
 static/js/controllers/comments_controller.js |  9 ++++--
 static/js/controllers/replies_controller.js  | 46 ++++++++++++++++++++++------
 3 files changed, 45 insertions(+), 14 deletions(-)

(limited to 'static')

diff --git a/static/js/client.js b/static/js/client.js
index 997d50d..ae11fe1 100644
--- a/static/js/client.js
+++ b/static/js/client.js
@@ -1,4 +1,6 @@
 import { CommentsController } from "./controllers/comments_controller.js";
+import { RepliesController } from "./controllers/replies_controller.js";
 
 
-new CommentsController();
+const replies_controller = new RepliesController();
+new CommentsController(replies_controller);
diff --git a/static/js/controllers/comments_controller.js b/static/js/controllers/comments_controller.js
index 5e725ce..08f9548 100644
--- a/static/js/controllers/comments_controller.js
+++ b/static/js/controllers/comments_controller.js
@@ -1,8 +1,9 @@
 import { BaseController } from "./base_controller.js";
 
 export class CommentsController extends BaseController {
-    constructor(domain) {
-	super(domain);
+    constructor(replies_controller) {
+	super();
+	this.replies_controller = replies_controller;
 	this.comments_node = document.getElementById("comments-thread");
 	this.renderForm();
 	this.renderComments();
@@ -24,8 +25,10 @@ export class CommentsController extends BaseController {
 	this.get(`/api/comments?path=${this.post}`).then((value) => {
 	    const comments = value?.getElementById("comment-section");
 
-	    if(comments != null)
+	    if(comments != null) {
 		this.comments_node.appendChild(comments);
+		this.replies_controller.init();
+	    }
 	});
     }
 
diff --git a/static/js/controllers/replies_controller.js b/static/js/controllers/replies_controller.js
index 3bdf831..af0f2ec 100644
--- a/static/js/controllers/replies_controller.js
+++ b/static/js/controllers/replies_controller.js
@@ -1,18 +1,44 @@
 import { BaseController } from "./base_controller.js";
 
 export class RepliesController extends BaseController {
-    constructor(domain) {
-	super(domain);
-	this.reply_form = this.getReplyForm();
+    constructor() {
+	super();
     }
 
-    getReplyForm() {
-	var form;
-	
-	this.get("/api/replies/new").then((response) => {
-	    form = value?.getElementById("reply-form");
-	});
+    async init() {
+	this.reply_form = await this.getReplyForm();
+	this.listenButtons("replies-button", this.showReplies.bind(this));
+	this.listenButtons("new-reply-button", this.showReplyForm.bind(this));
+    }
+
+    listenButtons(class_name, func) {
+	const buttons = document.getElementsByClassName(class_name);
+
+	if(buttons) {
+	    for(let button of buttons)
+		button.addEventListener("click", func);
+	}
+    }
+
+    showReplyForm(event) {
+	const replies_section = event.target.parentElement.parentElement.childNodes[3];
+
+	if(replies_section.querySelector(".reply-form") == null) 
+	    replies_section.appendChild(this.reply_form);
+	/*else hide*/
+    }
+
+    showReplies(event) {
+	/* The div to contain the comment's replies. From the element id
+	   we can get the comment's id. */
+	const replies_section = event.target.parentElement.parentElement.childNodes[3];
+	const comment_id = /\d/.exec(replies_section.id)[0]
+	console.log("You're in showReplies()");
+    }
+
+    async getReplyForm() {
+	var form = await this.get("/api/replies/new");
 
-	return form;
+	return form.getElementsByClassName("reply-form")[0];
     }
 }
-- 
cgit v1.2.3