diff options
-rw-r--r-- | src/controllers/replies_controller.py | 12 | ||||
-rw-r--r-- | src/queries/comments_query.py | 9 | ||||
-rw-r--r-- | static/js/client.js | 4 | ||||
-rw-r--r-- | static/js/controllers/comments_controller.js | 9 | ||||
-rw-r--r-- | static/js/controllers/replies_controller.js | 46 | ||||
-rw-r--r-- | templates/comments/index.jinja | 1 | ||||
-rw-r--r-- | 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/<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> |