diff options
Diffstat (limited to 'static/js/controllers')
-rw-r--r-- | static/js/controllers/base_controller.js | 33 | ||||
-rw-r--r-- | static/js/controllers/comments_controller.js | 54 |
2 files changed, 65 insertions, 22 deletions
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"); - } } |