extracted notifications page to a class

index.html

···
   <script src="thread_page.js"></script>
   <script src="posting_stats_page.js"></script>
   <script src="like_stats_page.js"></script>
+  <script src="notifications_page.js"></script>
   <script src="embed_component.js"></script>
   <script src="post_component.js"></script>
   <script src="skythread.js"></script>

notifications_page.js

···
+class NotificationsPage {
+
+  constructor() {
+    this.pageElement = $id('thread');
+  }
+
+  show() {
+    document.title = `Notifications - Skythread`;
+    showLoader();
+
+    let isLoading = false;
+    let firstPageLoaded = false;
+    let finished = false;
+    let cursor;
+
+    loadInPages((next) => {
+      if (isLoading || finished) { return; }
+      isLoading = true;
+
+      accountAPI.loadMentions(cursor).then(data => {
+        let posts = data.posts.map(x => new Post(x));
+
+        if (posts.length > 0) {
+          if (!firstPageLoaded) {
+            hideLoader();
+            firstPageLoaded = true;
+
+            let header = $tag('header');
+            let h2 = $tag('h2', { text: "Replies & Mentions:" });
+            header.append(h2);
+
+            this.pageElement.appendChild(header);
+            this.pageElement.classList.add('notifications');
+          }
+
+          for (let post of posts) {
+            if (post.parentReference) {
+              let p = $tag('p.back');
+              p.innerHTML = `<i class="fa-solid fa-reply"></i> `;
+
+              let { repo, rkey } = atURI(post.parentReference.uri);
+              let url = linkToPostById(repo, rkey);
+              let parentLink = $tag('a', { href: url });
+              p.append(parentLink);
+
+              if (repo == accountAPI.user.did) {
+                parentLink.innerText = 'Reply to you';
+              } else {
+                parentLink.innerText = 'Reply';
+                api.fetchHandleForDid(repo).then(handle => {
+                  parentLink.innerText = `Reply to @${handle}`;
+                });
+              }
+
+              this.pageElement.appendChild(p);
+            }
+
+            let postView = new PostComponent(post, 'feed').buildElement();
+            this.pageElement.appendChild(postView);
+          }
+        }
+
+        isLoading = false;
+        cursor = data.cursor;
+
+        if (!cursor) {
+          finished = true;
+        } else if (posts.length == 0) {
+          next();
+        }
+      }).catch(error => {
+        hideLoader();
+        console.log(error);
+        isLoading = false;
+      });
+    });
+  }
+}

skythread.js

···
   window.threadPage = new ThreadPage();
   window.postingStatsPage = new PostingStatsPage();
   window.likeStatsPage = new LikeStatsPage();
+  window.notificationsPage = new NotificationsPage();
 
   $(document.querySelector('#search form')).addEventListener('submit', (e) => {
     e.preventDefault();
···
   }
 
   if (page == 'notif') {
-    showLoader();
-    showNotificationsPage();
+    window.notificationsPage.show();
   } else if (page == 'posting_stats') {
     window.postingStatsPage.show();
   } else if (page == 'like_stats') {
     window.likeStatsPage.show();
   }
-}
-
-function showNotificationsPage() {
-  document.title = `Notifications - Skythread`;
-
-  let isLoading = false;
-  let firstPageLoaded = false;
-  let finished = false;
-  let cursor;
-
-  loadInPages((next) => {
-    if (isLoading || finished) { return; }
-    isLoading = true;
-
-    accountAPI.loadMentions(cursor).then(data => {
-      let posts = data.posts.map(x => new Post(x));
-
-      if (posts.length > 0) {
-        if (!firstPageLoaded) {
-          hideLoader();
-          firstPageLoaded = true;
-
-          let header = $tag('header');
-          let h2 = $tag('h2', { text: "Replies & Mentions:" });
-          header.append(h2);
-          $id('thread').appendChild(header);
-          $id('thread').classList.add('notifications');
-        }
-
-        for (let post of posts) {
-          if (post.parentReference) {
-            let p = $tag('p.back');
-            p.innerHTML = `<i class="fa-solid fa-reply"></i> `;
-
-            let { repo, rkey } = atURI(post.parentReference.uri);
-            let url = linkToPostById(repo, rkey);
-            let parentLink = $tag('a', { href: url });
-            p.append(parentLink);
-
-            if (repo == accountAPI.user.did) {
-              parentLink.innerText = 'Reply to you';
-            } else {
-              parentLink.innerText = 'Reply';
-              api.fetchHandleForDid(repo).then(handle => {
-                parentLink.innerText = `Reply to @${handle}`;
-              });
-            }
-
-            $id('thread').appendChild(p);
-          }
-
-          let postView = new PostComponent(post, 'feed').buildElement();
-          $id('thread').appendChild(postView);
-        }
-      }
-
-      isLoading = false;
-      cursor = data.cursor;
-
-      if (!cursor) {
-        finished = true;
-      } else if (posts.length == 0) {
-        next();
-      }
-    }).catch(error => {
-      hideLoader();
-      console.log(error);
-      isLoading = false;
-    });
-  });
 }
 
 /** @param {Post} post */

types.d.ts

···
 declare var threadPage: ThreadPage;
 declare var postingStatsPage: PostingStatsPage;
 declare var likeStatsPage: LikeStatsPage;
+declare var notificationsPage: NotificationsPage;
 
 type json = Record<string, any>;