changelog list loadMore option

bitrise-io · Feb 15, 2024 · 855b019 · 855b019
1 parent 7720f2d
commit 855b019
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 36 deletions.
diff --git a/src/js/changelog.js b/src/js/changelog.js
@@ -4,14 +4,6 @@ import { loadCss } from "./common";
 
 loadCss(require("../css/changelog.css"));
 
-/** @type {string} */
-const apiBase = document.location.hostname.match(/(localhost|127\.0\.0\.1)/) ? "" : "https://bitrise.io";
-const changelogService = new ChangelogService(apiBase);
-
-const changelogList = new ChangelogList(document.getElementById("changelog-list"));
-/** @type {HTMLAnchorElement} */
-const changelogLoadMoreButton = document.getElementById("changelog-load-more-button");
-
 const now = new Date();
 let lastVisitedDate = now;
 
@@ -26,19 +18,61 @@ expires.setMonth(expires.getMonth() + 12);
 document.cookie = `${cookieName}=${now};expires=${expires};`;
 
 const url = new URL(document.location.href);
-const queryLAstVisit = url.searchParams.get("lastVisit");
-if (queryLAstVisit) {
+const queryLastVisit = url.searchParams.get("lastVisit");
+if (queryLastVisit) {
   lastVisitedDate = new Date();
-  lastVisitedDate.setDate(lastVisitedDate.getDate() - parseInt(queryLAstVisit));
+  lastVisitedDate.setDate(lastVisitedDate.getDate() - parseInt(queryLastVisit));
+}
+const queryLoadMore = url.searchParams.get("loadMore");
+
+/** @type {string} */
+const apiBase = document.location.hostname.match(/(localhost|127\.0\.0\.1)/) ? "" : "https://bitrise.io";
+const changelogService = new ChangelogService(apiBase);
+
+const changelogList = new ChangelogList(document.getElementById("changelog-list"));
+/** @type {HTMLAnchorElement} */
+const changelogLoadMoreButton = document.getElementById("changelog-load-more-button");
+
+/**
+ * @param {string} fullUrl 
+ */
+function renderFullChangelog(fullUrl) {
+  changelogService.loadTopics(fullUrl).then(topics => {
+    changelogList.render(topics, lastVisitedDate);
+    changelogLoadMoreButton.remove();
+  });
 }
 
-/* -- TEST -- */
-// const testDate = new Date();
-// testDate.setMonth(testDate.getMonth() - 1);
-// lastVisitedDate = testDate;
-/* -- TEST -- */
+/**
+ * @param {string} latestUrl 
+ * @param {string} fullUrl 
+ * @param {boolean} autoLoad
+ */
+function renderLatestChangelog(latestUrl, fullUrl, autoLoad) {
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.dispatchEvent(new CustomEvent("click", { target: entry.target }));
+        observer.unobserve(entry.target);
+      }
+    })
+  });
+
+  changelogService.loadTopics(latestUrl).then(topics => {
+    changelogList.render(topics, lastVisitedDate);
+    if (autoLoad) observer.observe(changelogLoadMoreButton);
+  });
 
-changelogLoadMoreButton.remove();
-changelogService.loadTopics("/changelog.json").then(topics => {
-  changelogList.render(topics, lastVisitedDate);
-});});
+  changelogLoadMoreButton.addEventListener("click", (event) => {
+    event.preventDefault();
+    changelogLoadMoreButton.innerHTML = "Loading...";
+    changelogLoadMoreButton.disabled = true;
+    renderFullChangelog(fullUrl);
+  });
+}
+
+if (queryLoadMore) {
+  renderLatestChangelog("/changelog_latest.json", "/changelog.json", queryLoadMore === "auto");
+} else {
+  renderFullChangelog("/changelog.json");
+}
diff --git a/src/js/changelog/ChangelogList.js b/src/js/changelog/ChangelogList.js
@@ -6,9 +6,6 @@ class ChangelogList
     /** @type {HTMLUListElement} */
     this.list = list;
 
-    /** @type {HTMLLIElement[]} */
-    this.listItems = [];
-
     /** @type {HTMLLIElement} */
     this.unreadListItemTemplate = this.list.querySelector("#changelog-unread-template");
     this.unreadListItemTemplate.id = "";
@@ -67,20 +64,16 @@ class ChangelogList
     this.list.innerHTML = "";
     let timestamp = null;
     for (let topic of topics) {
-      if (!this.listItems[topic.id]) {
-
-        if (timestamp != topic.createdAt.toLocaleDateString()) {
-          timestamp = topic.createdAt.toLocaleDateString();
-          const timestampListItem = this.timestampListItemTemplate.cloneNode(true);
-          timestampListItem.innerHTML = timestamp;
-          this.list.append(timestampListItem);
-        }
-
-        const isUnread = topic.createdAt.getTime() > lastVisitedDate.getTime();
-        const listItem = this.renderListItem(topic, isUnread);
-        this.listItems[topic.id] = listItem;
-        this.list.append(listItem);
+      if (timestamp != topic.createdAt.toLocaleDateString()) {
+        timestamp = topic.createdAt.toLocaleDateString();
+        const timestampListItem = this.timestampListItemTemplate.cloneNode(true);
+        timestampListItem.innerHTML = timestamp;
+        this.list.append(timestampListItem);
       }
+
+      const isUnread = topic.createdAt.getTime() > lastVisitedDate.getTime();
+      const listItem = this.renderListItem(topic, isUnread);
+      this.list.append(listItem);
     }
   }
 }