Fix comments rendering

4 files changed, 59 insertions, 24 deletions

diff --git a/src/controllers/replies_controller.py b/src/controllers/replies_controller.py
index d7be3d0..324c825 100644
--- a/src/controllers/replies_controller.py
+++ b/src/controllers/replies_controller.py
@@ -6,10 +6,14 @@ replies_blueprint = Blueprint('replies_controller',
                               '__replies_controller__')
 
 
+@replies_blueprint.get('/api/replies/new')
+def new():
+    return render_template('replies/form.jinja')
+
+
 @replies_blueprint.post('/api/comments/<int:comment_id>/replies')
 def create(comment_id):
-    breakpoint()
-    service = CreateReplyService(request.get_json(), comment_id)
+    service = CreateReplyService(request.form, comment_id)
     status_code = service.call()
 
     if status_code != 200:
diff --git a/src/queries/comments_query.py b/src/queries/comments_query.py
index 6873df0..dca4694 100644
--- a/src/queries/comments_query.py
+++ b/src/queries/comments_query.py
@@ -12,5 +12,5 @@ class CommentsQuery(BaseQuery):
 
     def comments_of_post(self, post):
         return db.paginate(
-            db.select(Comment).where(Comment.post == post),
+            db.select(Comment).where(Comment.post == post).order_by(Comment.created_at.desc()),
         )
diff --git a/static/js/controllers/comments_controller.js b/static/js/controllers/comments_controller.js
index 5abaec1..5e725ce 100644
--- a/static/js/controllers/comments_controller.js
+++ b/static/js/controllers/comments_controller.js
@@ -8,21 +8,31 @@ export class CommentsController extends BaseController {
 	this.renderComments();
     }
 
-    async renderForm() {
-	const form = (await this.get("/api/comments/new"))?.getElementById("comment-form");
-
-	if(form != null) {
-	    this.comments_node.appendChild(form);
-	    this.form_element = document.getElementById("comment-form");
-	    this.form_element.addEventListener("submit", this.submit.bind(this));
-	}
+    renderForm() {
+	this.get("/api/comments/new").then((value) => {
+	    const form = value?.getElementById("comment-form");
+
+	    if(form != null) {
+		this.comments_node.appendChild(form);
+		this.form_element = document.getElementById("comment-form");
+		this.form_element.addEventListener("submit", this.submit.bind(this));
+	    }
+	});
     }
 
-    async renderComments() {
-	const comments = (await this.get(`/api/comments?path=${this.post}`))?.getElementById("comment-section");
+    renderComments() {
+	this.get(`/api/comments?path=${this.post}`).then((value) => {
+	    const comments = value?.getElementById("comment-section");
 
-	if(comments != null)
-	    this.comments_node.appendChild(comments_document.getElementById("comment-section"));
+	    if(comments != null)
+		this.comments_node.appendChild(comments);
+	});
+    }
+
+    renderSubmitResponse(response_document) {
+	const new_comments = this.htmlFromResponse(response_document).getElementById("comment-section");
+	const comments = document.getElementById("comment-section");
+	comments.replaceWith(new_comments);
     }
 
     async submit(event) {
@@ -31,10 +41,12 @@ export class CommentsController extends BaseController {
 	form.append("domain", `${window.location.protocol}//${window.location.host}`);
 
 	try {
-	    const response = await fetch(`${this.server}/api/comments?path=${this.post}`,
+	    const response = await fetch(`${this.comments_server_host}/api/comments?path=${this.post}`,
 					 { method: "POST", body: form });
 	    
-	    return response.text().then(this.htmlFromResponse.bind(this));
+	    response.text().then((response_document) => {
+		this.renderSubmitResponse(response_document);
+	    });
 	} catch(error) {}
     }
  }
diff --git a/templates/comments/index.jinja b/templates/comments/index.jinja
index 08f8cfb..daaf5ea 100644
--- a/templates/comments/index.jinja
+++ b/templates/comments/index.jinja
@@ -1,9 +1,28 @@
 <div id="comment-section" class="comment-section">
-  {% for comment in page.items %}
-      <div id="{{comment.id}}" class="comment">
-	  <textarea rows="4" cols="50" disabled="true">
-	      {{ comment.content }}
-	  </textarea>
-    </div>
-  {% endfor %}
+    {% for comment in page.items %}
+	<div id="comment-{{comment.id}}" class="comment">
+	    <section class="comment-meta">
+		<div class="author">
+		{% if comment.author is eq('') %}
+		    Anonymous said:
+		{% else %}
+		    {{ comment.author }} said:
+		{% endif %}
+		</div>
+		<div class="date">
+		    {{ comment.created_at.date().isoformat() }}
+		</div>
+	    </section>
+	    <textarea rows="4" cols="50" disabled="true">
+		{{ comment.content }}
+	    </textarea>
+	    <section class="replies-thread">
+		<div class="reply-tag">
+		    <input class="replies-button" type="button" value="Replies" />
+		</div>
+		<div id="comment-replies-{{ comment.id }}" class="date">
+		</div>
+	    </section>
+	</div>
+    {% endfor %}
 </div>