Add pagination handling

7 files changed, 36 insertions, 9 deletions

diff --git a/src/controllers/comments_controller.py b/src/controllers/comments_controller.py
index c9bab0d..61b32c6 100644
--- a/src/controllers/comments_controller.py
+++ b/src/controllers/comments_controller.py
@@ -30,7 +30,7 @@ def new():
 @comments_blueprint.get('/api/comments')
 def index():
     post = request.args.get('path')
-    page = query.comments_of_post(post)
+    page = query.comments_of_post(post, page=request.args.get('page'))
 
     if page.total == 0:
         abort(404)
diff --git a/src/queries/comments_query.py b/src/queries/comments_query.py
index e343667..5312cca 100644
--- a/src/queries/comments_query.py
+++ b/src/queries/comments_query.py
@@ -10,9 +10,16 @@ class CommentsQuery(BaseQuery):
     def all_comments(self):
         return db.paginate(db.select(Comment))
 
-    def comments_of_post(self, post):
+    def comments_of_post(self, post, page=1):
+        try:
+            if page is not None and isinstance(page, str):
+                page = int(page)
+        except ValueError:
+            page = 1
+
         return db.paginate(
-            db.select(Comment).where(Comment.post == post).order_by(Comment.created_at.desc())
+            db.select(Comment).where(Comment.post == post).order_by(Comment.created_at.desc()),
+            page=page, max_per_page=5
         )
 
     def replies_of(self, comment_id):
diff --git a/static/js/controllers/base_controller.js b/static/js/controllers/base_controller.js
index 6caa9dd..2ef359c 100644
--- a/static/js/controllers/base_controller.js
+++ b/static/js/controllers/base_controller.js
@@ -9,9 +9,8 @@ export class BaseController {
 		this.parser = new DOMParser();
   }
 
-  async submit(event, route) {
+  async submit(event, route, form = new FormData(event.target)) {
 		event.preventDefault();
-		const form = new FormData(event.target);
 
 		try {
 	    const response = await fetch(route, { method: "POST", body: form });
diff --git a/static/js/controllers/comments_controller.js b/static/js/controllers/comments_controller.js
index a21bd05..683f5ca 100644
--- a/static/js/controllers/comments_controller.js
+++ b/static/js/controllers/comments_controller.js
@@ -1,10 +1,12 @@
 import { BaseController } from "./base_controller.js";
+import { Paginator } from "../paginator.js";
 
 export class CommentsController extends BaseController {
   constructor(replies_controller) {
 		super();
 		this.replies_controller = replies_controller;
 		this.comments_node = document.getElementById("comments-thread");
+		this.paginator = new Paginator(this.comments_server_host, "/api/comments", this.post);
 		this.renderForm();
 		this.renderComments();
   }
@@ -28,6 +30,7 @@ export class CommentsController extends BaseController {
 	  	if(comments != null) {
 				this.comments_node.appendChild(comments);
 				this.replies_controller.init();
+				this.paginator.populatePageAnchors();
 	  	}
 		});
   }
@@ -39,7 +42,10 @@ export class CommentsController extends BaseController {
   }
 
   async submit(event) {
-		super.submit(event, `${this.comments_server_host}/api/comments?path=${this.post}`);
+		var form = new FormData(event.target);
+		form.append("domain", `${window.location.protocol}//${window.location.host}`);
+
+		super.submit(event, `${this.comments_server_host}/api/comments?path=${this.post}`, form);
   }
  }
 
diff --git a/static/js/paginator.js b/static/js/paginator.js
new file mode 100644
index 0000000..9a7ed65
--- /dev/null
+++ b/static/js/paginator.js
@@ -0,0 +1,15 @@
+export class Paginator {
+  constructor(host, context, path) {
+    this.endpoint = `${host}${context}?path=${path}`;
+  }
+
+  populatePageAnchors() {
+    const pagination_widget = document.querySelector(".pagination");
+    var anchors = pagination_widget.querySelectorAll('a');
+
+    for(let anchor of anchors) {
+      var page = /\d/.exec(anchor.id)[0];
+      anchor.setAttribute("href", `${this.endpoint}&page=${page}`);
+    }
+  }
+}
\ No newline at end of file
diff --git a/templates/comments/index.jinja b/templates/comments/index.jinja
index 217ddb3..ebf1e4e 100644
--- a/templates/comments/index.jinja
+++ b/templates/comments/index.jinja
@@ -28,5 +28,5 @@
 	    </section>
 	</div>
     {% endfor %}
-	{{ pagination.render_pagination(page, 'comments.index') }}
+	{{ pagination.render_pagination(page) }}
 </div>
diff --git a/templates/macros/pagination.jinja b/templates/macros/pagination.jinja
index fdd8993..b53c0eb 100644
--- a/templates/macros/pagination.jinja
+++ b/templates/macros/pagination.jinja
@@ -1,4 +1,4 @@
-{% macro render_pagination(pagination, endpoint) %}
+{% macro render_pagination(pagination) %}
   <div class=page-items>
     {{ pagination.first }} - {{ pagination.last }} of {{ pagination.total }}
   </div>
@@ -6,7 +6,7 @@
     {% for page in pagination.iter_pages() %}
       {% if page %}
         {% if page != pagination.page %}
-          <a href="{{ url_for(endpoint, page=page) }}">{{ page }}</a>
+          <a id="page-{{ page }}" href="/">{{ page }}</a>
         {% else %}
           <strong>{{ page }}</strong>
         {% endif %}