From f43e5df9eb45f684596d724b3a4d39e1521a70d9 Mon Sep 17 00:00:00 2001
From: Antal Orcsik <antal.orcsik@bitrise.io>
Date: Fri, 9 Feb 2024 11:18:15 +0100
Subject: [PATCH] tracking changelog last visit + grouping by date

---
 index.js                             |  2 +-
 src/js/changelog.js                  | 30 ++++++++++++++++++++++++++--
 src/js/changelog/ChangelogList.js    | 22 +++++++++++++++++---
 src/js/changelog/ChangelogService.js |  1 -
 4 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/index.js b/index.js
index 41d2db9..48c1271 100644
--- a/index.js
+++ b/index.js
@@ -2,7 +2,7 @@ const http = require('http');
 const fs = require('fs');
 const path = require('path');
 
-const hostname = '127.0.0.1';
+const hostname = process.argv[3] || '127.0.0.1';
 const port = 3000;
 
 const webflowDomain = process.argv[2] || 'webflow.bitrise.io';
diff --git a/src/js/changelog.js b/src/js/changelog.js
index 5f724ea..28fc777 100644
--- a/src/js/changelog.js
+++ b/src/js/changelog.js
@@ -13,7 +13,33 @@ 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;
+
+/** @type {string} */
+const cookieName = "changelogLastVisit";
+const cookiePattern = new RegExp(`${cookieName}=([^;]+);?`);
+const cookieMatch = document.cookie.match(cookiePattern);
+if (cookieMatch) lastVisitedDate = new Date(cookieMatch[1]);
+
+const expires = new Date();
+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) {
+  lastVisitedDate = new Date();
+  lastVisitedDate.setDate(lastVisitedDate.getDate() - parseInt(queryLAstVisit));
+}
+
+/* -- TEST -- */
+// const testDate = new Date();
+// testDate.setMonth(testDate.getMonth() - 1);
+// lastVisitedDate = testDate;
+/* -- TEST -- */
+
 changelogLoadMoreButton.remove();
 changelogService.loadTopics("/changelog.json").then(topics => {
-  changelogList.render(topics);
-});
+  changelogList.render(topics, lastVisitedDate);
+});
\ No newline at end of file
diff --git a/src/js/changelog/ChangelogList.js b/src/js/changelog/ChangelogList.js
index a27a55a..cfd11d1 100644
--- a/src/js/changelog/ChangelogList.js
+++ b/src/js/changelog/ChangelogList.js
@@ -19,6 +19,11 @@ class ChangelogList
     this.readListItemTemplate.id = "";
     this.readListItemTemplate.remove();
 
+    /** @type {HTMLLIElement} */
+    this.timestampListItemTemplate = this.list.querySelector("#changelog-group-timestamp-template");
+    this.timestampListItemTemplate.id = "";
+    this.timestampListItemTemplate.remove();
+
     this.list.append(this.renderLoadingListItem());
     this.list.append(this.renderLoadingListItem());
     this.list.append(this.renderLoadingListItem());
@@ -47,13 +52,24 @@ class ChangelogList
   }
 
   /**
-   * @param {ChangelogTopic[]} topics 
+   * @param {ChangelogTopic[]} topics
+   * @param {Date} lastVisitedDate
    */
-  render(topics) {
+  render(topics, lastVisitedDate) {
     this.list.innerHTML = "";
+    let timestamp = null;
     for (let topic of topics) {
       if (!this.listItems[topic.id]) {
-        const listItem = this.renderListItem(topic);
+
+        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);
       }
diff --git a/src/js/changelog/ChangelogService.js b/src/js/changelog/ChangelogService.js
index dfef76b..b4dad00 100644
--- a/src/js/changelog/ChangelogService.js
+++ b/src/js/changelog/ChangelogService.js
@@ -19,7 +19,6 @@ async loadTopics(changelogUrl) {
     const url = this.apiBase + changelogUrl + "?_=" + chacheBuster;
     const response = await fetch(url);
     const json = await response.json();
-    console.log(json);
     return json.topic_list.topics.map(data => new ChangelogTopic(data));
   }