Add comments rendering

7 files changed, 76 insertions, 32 deletions

diff --git a/config/__init__.py b/config/__init__.py
index 6a623cf..8037060 100644
--- a/config/__init__.py
+++ b/config/__init__.py
@@ -15,8 +15,8 @@ def initialize(app):
     init_db(app)
     # Check the config file for any blog domains.
     initialize_blogs(app)
-    initialize_blueprints(app)
     initialize_cors_policies(app)
+    initialize_blueprints(app)
 
 
 def database_connection_string(app):
diff --git a/src/controllers/comments_controller.py b/src/controllers/comments_controller.py
index 706c213..c9bab0d 100644
--- a/src/controllers/comments_controller.py
+++ b/src/controllers/comments_controller.py
@@ -10,7 +10,7 @@ query = CommentsQuery()
 
 @comments_blueprint.post('/api/comments')
 def create():
-    service = CreateCommentService(request.args | request.get_json())
+    service = CreateCommentService(request.args | request.form)
     status_code = service.call()
 
     if status_code == 404:
diff --git a/src/queries/comments_query.py b/src/queries/comments_query.py
index 4bdf31f..6873df0 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 == self._post),
+            db.select(Comment).where(Comment.post == post),
         )
diff --git a/static/js/client.js b/static/js/client.js
index d782871..997d50d 100644
--- a/static/js/client.js
+++ b/static/js/client.js
@@ -1,5 +1,4 @@
-import { CommentsController} from "./comments/comments_controller.js";
+import { CommentsController } from "./controllers/comments_controller.js";
 
-const post = window.location.pathname;
-const domain = window.location.hostname;
-new CommentForm(domain, post);
+
+new CommentsController();
diff --git a/static/js/controllers/base_controller.js b/static/js/controllers/base_controller.js
new file mode 100644
index 0000000..c5b562f
--- /dev/null
+++ b/static/js/controllers/base_controller.js
@@ -0,0 +1,33 @@
+export class BaseController {
+    constructor() {
+	this.comments_server_url = document.getElementById('comments-client').src;
+	this.origin = window.location.origin;
+	this.protocol = this.getProtocol();
+	this.domain = this.getDomain();
+	this.post = window.location.pathname;
+	this.comments_server_host = `${this.protocol}//${this.domain}`;
+	this.parser = new DOMParser();
+    }
+
+    getDomain() {
+	return this.comments_server_url.split('/')[2];
+    }
+
+    getProtocol() {
+	return this.comments_server_url.split('/')[0];
+    }
+
+    htmlFromResponse(body) {
+	return this.parser.parseFromString(body, "text/html");
+    }
+
+    async get(route) {
+	try {
+	    const response = await fetch(`${this.comments_server_host}${route}`);
+
+	    return response.text().then(this.htmlFromResponse.bind(this));
+	} catch(error) {
+	    return null;
+	}
+    }
+}
diff --git a/static/js/controllers/comments_controller.js b/static/js/controllers/comments_controller.js
index 611b2ee..5abaec1 100644
--- a/static/js/controllers/comments_controller.js
+++ b/static/js/controllers/comments_controller.js
@@ -1,31 +1,41 @@
-export class CommentsController {
-    constructor(domain, post) {
-	this.domain = domain;
-	this.post = post;
-	this.parser = new DOMParser();
-	this.form_element = document.getElementById("comment-form");
-	this.form_element.addEventListener("submit", this.submit.bind(this));
+import { BaseController } from "./base_controller.js";
+
+export class CommentsController extends BaseController {
+    constructor(domain) {
+	super(domain);
+	this.comments_node = document.getElementById("comments-thread");
+	this.renderForm();
+	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));
+	}
+    }
+
+    async renderComments() {
+	const comments = (await this.get(`/api/comments?path=${this.post}`))?.getElementById("comment-section");
+
+	if(comments != null)
+	    this.comments_node.appendChild(comments_document.getElementById("comment-section"));
     }
 
     async submit(event) {
-	const form = new FormData(event.target);
-	form.append("domain", window.location.hostname);
+	event.preventDefault();
+	var form = new FormData(event.target);
+	form.append("domain", `${window.location.protocol}//${window.location.host}`);
 
 	try {
-	    const response = await fetch(`https://${this.domain}/${this.post}/comments`,
-		{
-		    method: "POST",
-		    headers: {
-			"Content-Type": "application/json",
-		    },
-		    body: form
-		});
-	    const response_page = this.htmlFromResponse(response.body);
+	    const response = await fetch(`${this.server}/api/comments?path=${this.post}`,
+					 { method: "POST", body: form });
+	    
+	    return response.text().then(this.htmlFromResponse.bind(this));
 	} catch(error) {}
     }
-
-    htmlFromResponse(body) {
-	return this.parser.parseFromString(body, "text/html");
-    }
  }
 
diff --git a/templates/comments/index.jinja b/templates/comments/index.jinja
index fea6edd..08f8cfb 100644
--- a/templates/comments/index.jinja
+++ b/templates/comments/index.jinja
@@ -1,7 +1,9 @@
-<div class="comment-section">
+<div id="comment-section" class="comment-section">
   {% for comment in page.items %}
-    <div class="comment">
-      {{ comment.content }}
+      <div id="{{comment.id}}" class="comment">
+	  <textarea rows="4" cols="50" disabled="true">
+	      {{ comment.content }}
+	  </textarea>
     </div>
   {% endfor %}
 </div>