From 0b7111ce7186e64f8f290d0a2d8af7f1c987850f Mon Sep 17 00:00:00 2001 From: HombreLaser Date: Thu, 8 Feb 2024 23:49:45 -0600 Subject: Add comments rendering --- config/__init__.py | 2 +- src/controllers/comments_controller.py | 2 +- src/queries/comments_query.py | 2 +- static/js/client.js | 7 ++-- static/js/controllers/base_controller.js | 33 +++++++++++++++++ static/js/controllers/comments_controller.js | 54 ++++++++++++++++------------ templates/comments/index.jinja | 8 +++-- 7 files changed, 76 insertions(+), 32 deletions(-) create mode 100644 static/js/controllers/base_controller.js 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 @@ -
+
{% for comment in page.items %} -
- {{ comment.content }} +
+
{% endfor %}
-- cgit v1.2.3