From d5d73505832bb39cf8e7fa5a49ff8e3d56690d71 Mon Sep 17 00:00:00 2001 From: HombreLaser Date: Wed, 21 Feb 2024 12:12:52 -0600 Subject: Add reply form rendering --- src/controllers/replies_controller.py | 12 +++++--- src/queries/comments_query.py | 9 ++++-- static/js/client.js | 4 ++- static/js/controllers/comments_controller.js | 9 ++++-- static/js/controllers/replies_controller.js | 46 ++++++++++++++++++++++------ templates/comments/index.jinja | 1 + templates/replies/form.jinja | 3 +- 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//replies') def index(comment_id): - pass + return render_template('replies/index.jinja', page=comments_query.replies_of(comment_id)) -@replies_blueprint.get('/api/replies//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//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 @@
+
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 @@ -
+
@@ -11,7 +11,6 @@
- -- cgit v1.2.3