1 files changed, 52 insertions, 0 deletions
diff --git a/static/js/controllers/pagination_controller.js b/static/js/controllers/pagination_controller.js
new file mode 100644
index 0000000..bfb1a48
--- /dev/null
+++ b/static/js/controllers/pagination_controller.js
@@ -0,0 +1,52 @@
+import { BaseController } from "./base_controller.js";
+
+export class PaginationController extends BaseController {
+  constructor(host, context, path, replies_controller) {
+    super();
+    this.replies_controller = replies_controller;
+    this.endpoint = `${host}${context}?path=${path}`;
+    this.comments_node = document.getElementById("comments-thread");
+  }
+
+  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}`);
+    }
+
+    this.listenForPageChange(anchors);
+  }
+
+  listenForPageChange(page_selectors) {
+    for (let anchor of page_selectors) {
+      anchor.addEventListener("click", this.changeCommentsPage.bind(this))
+    }
+  }
+
+  changeCommentsPage(event) {
+    event.preventDefault();
+
+    fetch(event.target.getAttribute("href"))
+      .then((response) => {
+        return response.text();
+      })
+      .then((data) => {
+        this.loadComments(this.htmlFromResponse(data));
+      });
+  }
+
+  loadComments(body) {
+    const previous_comments = document.getElementById("comment-section");
+    const comments = body?.getElementById("comment-section");
+
+    if(comments) {
+      previous_comments.remove();
+      this.comments_node.appendChild(comments);
+      this.replies_controller.init();
+      this.populatePageAnchors();
+    }
+  }
+}
+\ No newline at end of file