Add reply form rendering

7 files changed, 62 insertions, 22 deletions

diff --git a/src/controllers/replies_controller.py b/src/controllers/replies_controller.py
index 7972a27..bd47a44 100644
--- a/src/controllers/replies_controller.py
+++ b/src/controllers/replies_controller.py
@@ -1,19 +1,23 @@
 from flask import Blueprint, request, abort, render_template
 from src.services import CreateReplyService
+from src.queries import CommentsQuery
+from src.database.models import Comment
+from src.database import db
 
 
 replies_blueprint = Blueprint('replies_controller',
                               '__replies_controller__')
+comments_query = CommentsQuery()
 
 
 @replies_blueprint.get('/api/comments/<int:comment_id>/replies')
 def index(comment_id):
-    pass
+    return render_template('replies/index.jinja', page=comments_query.replies_of(comment_id))
 
 
-@replies_blueprint.get('/api/replies/<int:comment_id>/new')
-def new(comment_id):
-    return render_template('replies/form.jinja', comment_id=comment_id)
+@replies_blueprint.get('/api/replies/new')
+def new():
+    return render_template('replies/form.jinja')
 
 
 @replies_blueprint.post('/api/comments/<int:comment_id>/replies')
diff --git a/src/queries/comments_query.py b/src/queries/comments_query.py
index dca4694..e343667 100644
--- a/src/queries/comments_query.py
+++ b/src/queries/comments_query.py
@@ -1,5 +1,5 @@
 from src.database import db
-from src.database.models import Comment
+from src.database.models import Comment, Reply
 from src.queries.base_query import BaseQuery
 
 
@@ -12,5 +12,10 @@ class CommentsQuery(BaseQuery):
 
     def comments_of_post(self, post):
         return db.paginate(
-            db.select(Comment).where(Comment.post == post).order_by(Comment.created_at.desc()),
+            db.select(Comment).where(Comment.post == post).order_by(Comment.created_at.desc())
+        )
+
+    def replies_of(self, comment_id):
+        return db.paginate(
+            db.select(Reply).where(Reply.comment_id == comment_id).order_by(Reply.created_at.desc())
         )
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];
     }
 }
diff --git a/templates/comments/index.jinja b/templates/comments/index.jinja
index daaf5ea..bb310c5 100644
--- a/templates/comments/index.jinja
+++ b/templates/comments/index.jinja
@@ -19,6 +19,7 @@
 	    <section class="replies-thread">
 		<div class="reply-tag">
 		    <input class="replies-button" type="button" value="Replies" />
+		    <input class="new-reply-button" type="button" value="New Reply" />
 		</div>
 		<div id="comment-replies-{{ comment.id }}" class="date">
 		</div>
diff --git a/templates/replies/form.jinja b/templates/replies/form.jinja
index e7ae3ab..f585d4e 100644
--- a/templates/replies/form.jinja
+++ b/templates/replies/form.jinja
@@ -1,4 +1,4 @@
-<form action="" class="reply-form" id="reply-form-1" method="post">
+<form action="" class="reply-form"  method="post">
     <div>
 	<label for="author"> Name: </label>
 	<input type="text" name="author" id="author" />
@@ -11,7 +11,6 @@
 	<textarea rows="4" cols="40" form="reply-form" name="content" id="content" />
     </textarea>
     </div>
-    <input type="hidden" name="comment-id" value="{{comment_id}}"
     <div>
 	<input type="submit" value="Submit" />
     </div>