Add comments rendering

3 files changed, 68 insertions, 26 deletions

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");
-    }
  }