feat: enhance GitHub notifications fetching and rendering logic

Author: 0x4007

src/home/fetch-github/fetch-notifications.ts

@@ -2,10 +2,29 @@ import { Octokit } from "@octokit/rest";
 import { GitHubNotification } from "../github-types";
 
 export async function fetchNotifications(octokit: Octokit): Promise<GitHubNotification[]> {
-  const { data: notifications } = await octokit.activity.listNotificationsForAuthenticatedUser({
-    all: true,
-    per_page: 100,
-  });
+  const allNotifications: GitHubNotification[] = [];
+  let page = 1;
+  const perPage = 100; // Maximum allowed by GitHub API
+  const maxPages = 5; // Limit to 5 pages
 
-  return notifications;
+  while (page <= maxPages) {
+    const { data: notifications, headers } = await octokit.activity.listNotificationsForAuthenticatedUser({
+      all: true,
+      per_page: perPage,
+      page,
+    });
+
+    allNotifications.push(...notifications);
+
+    // Check if there are more pages
+    const linkHeader = headers.link;
+    if (!linkHeader || !linkHeader.includes('rel="next"')) {
+      break; // No more pages
+    }
+
+    page++; // Move to the next page
+  }
+
+  console.trace({ allNotifications });
+  return allNotifications;
 }

src/home/rendering/github-notifications/create-new-notification.ts

@@ -1,15 +1,18 @@
-import { GitHubNotification } from "../../github-types";
 import { setUpNotificationElement } from "./set-up-notification-element";
+import { EnrichedGitHubNotification } from "./render-github-notifications";
 
-export function createNewNotification({ notification, container }: { notification: GitHubNotification; container: HTMLDivElement }) {
+export function createNewNotification({ notification, container }: { notification: EnrichedGitHubNotification; container: HTMLElement }) {
   const notificationWrapper = document.createElement("div");
   const notificationElement = document.createElement("div");
   notificationElement.setAttribute("data-notification-id", notification.id);
   notificationElement.classList.add("notification-element-inner");
 
-  setUpNotificationElement(notificationElement, notification);
-  notificationWrapper.appendChild(notificationElement);
+  const link = document.createElement("a");
+  link.href = notification.subject.url.replace("api.github.com/repos", "github.com").replace("/pulls/", "/pull/");
+  link.appendChild(notificationElement);
 
+  setUpNotificationElement(notificationElement, notification);
+  notificationWrapper.appendChild(link);
   container.appendChild(notificationWrapper);
   return notificationWrapper;
 }

src/home/rendering/github-notifications/is-associated-with-task.ts

@@ -16,19 +16,26 @@ type GraphQlTaskResponse = {
 
 export async function isAssociatedWithTask(notification: GitHubNotification, octokit: Octokit): Promise<boolean> {
   if (notification.subject.type === "Issue") {
-    // Have to load it because devpool-issues.json doesn't show assigned tasks.
-    // If they are working on it then they should be assigned.
-    // @TODO: load all issues, even if assigned, in the directory. This will save network requests from the client.
+    const owner = notification.repository.owner.login;
+    const repo = notification.repository.name;
+    const issueNumber = parseInt(notification.subject.url.split("/").pop() || "0", 10);
 
-    const issueLabels = await octokit.issues.listLabelsOnIssue({
-      owner: notification.repository.owner.login,
-      repo: notification.repository.name,
-      issue_number: parseInt(notification.subject.url.split("/").pop() || "0", 10),
-    });
+    try {
+      const issueLabels = await octokit.issues.listLabelsOnIssue({
+        owner,
+        repo,
+        issue_number: issueNumber,
+      });
 
-    const hasPriceLabel = issueLabels.data.some((label) => label.name.startsWith("Price: "));
-    if (hasPriceLabel) {
-      return true;
+      const hasPriceLabel = issueLabels.data.some((label) => label.name.startsWith("Price: "));
+      return hasPriceLabel;
+    } catch (error) {
+      console.error("Error fetching issue labels:", error);
+      if (error.status === 404) {
+        console.error("404 Not Found. This could mean the issue doesn't exist or the authenticated user doesn't have access.");
+      }
+      // If we can't fetch the labels, we'll assume it's not associated with a task
+      return false;
     }
   } else if (notification.subject.type === "PullRequest") {
     try {
@@ -77,16 +84,19 @@ export async function isAssociatedWithTask(notification: GitHubNotification, oct
 
       const response: GraphQlTaskResponse = await octokit.graphql(query, variables);
 
-      const linkedItems = response.repository.pullRequest.timelineItems.nodes;
+      const linkedItems = response.repository.pullRequest.timelineItems.nodes.filter(Boolean);
 
       for (const item of linkedItems) {
         const labels = item.subject?.labels?.nodes || item.source?.labels?.nodes;
-        if (labels && labels.some((label) => label.name.toLowerCase().startsWith("priority: "))) {
+        if (labels && labels.some((label) => label.name.startsWith("Price: "))) {
           return true;
         }
       }
     } catch (error) {
-      console.error("Error checking linked issues for priority labels:", error);
+      console.error("Error checking linked issues for price labels:", error);
+      if (error.status === 404) {
+        console.error("404 Not Found. This could mean the repository is private and the authenticated user doesn't have access.");
+      }
     }
   }
   return false;

src/home/rendering/github-notifications/render-github-notifications.ts

@@ -20,18 +20,21 @@ export async function renderGitHubNotifications() {
     container.innerHTML = "";
   }
 
-  const processedNotifications = await processNotifications(notifications, octokit);
+  // Filter for unread notifications
+  const unreadNotifications = notifications.filter(notification => !notification.unread);
 
-  console.trace({ processedNotifications });
+  const processedNotifications = await processNotifications(unreadNotifications, octokit);
+
+  // console.trace({ processedNotifications });
 
   const filteredNotifications = processedNotifications.filter(
     (notification): notification is EnrichedGitHubNotification => notification !== null && !notification.isDraft
   );
 
-  console.trace({ filteredNotifications });
+  // console.trace({ filteredNotifications });
 
   const finalNotifications = filteredNotifications.sort((a, b) => calculateNotificationScore(b) - calculateNotificationScore(a));
-  console.trace({ finalNotifications });
+  // console.trace({ finalNotifications });
 
   const existingNotificationIds = new Set(
     Array.from(container.querySelectorAll(".notification-element-inner")).map((element) => element.getAttribute("data-notification-id"))
@@ -59,7 +62,7 @@ export async function renderGitHubNotifications() {
 }
 
 async function processNotifications(notifications: GitHubNotification[], octokit: Octokit): Promise<(EnrichedGitHubNotification | null)[]> {
-  console.trace("processNotifications");
+  // console.trace("processNotifications");
   return Promise.all(
     notifications.map(async (notification) => {
       const isAssociated = await isAssociatedWithTask(notification, octokit);

src/home/rendering/github-notifications/set-up-notification-element.ts

@@ -19,7 +19,6 @@ export function setUpNotificationElement(notificationElement: HTMLDivElement, no
   }
 
   const formattedReason = notification.reason.replace(/_/g, " ");
-
   notificationElement.innerHTML = `
     <div class="info">
       <div class="title">
@@ -28,13 +27,13 @@ export function setUpNotificationElement(notificationElement: HTMLDivElement, no
       </div>
       <div class="details">
         <p class="repository-name">${notification.repository.full_name}</p>
-        <!-- <p class="notification-type">${notification.subject.type}</p> -->
         <p class="notification-reason">${formattedReason}</p>
       </div>
     </div>
     <div class="status">${notification.unread ? "🔵" : ""}</div>
   `;
 
+
   notificationElement.addEventListener("click", () => {
     try {
       const notificationWrapper = notificationElement.parentElement;

src/home/rendering/render-github-login-button.ts

@@ -55,7 +55,7 @@ export const authenticationElement = document.getElementById("authentication") a
 export function renderGitHubLoginButton() {
   gitHubLoginButton.id = "github-login-button";
   gitHubLoginButton.innerHTML = "<span>Login</span><span class='full'>&nbsp;With GitHub</span>";
-  gitHubLoginButton.addEventListener("click", () => gitHubLoginButtonHandler("public_repo read:org notifications"));
+  gitHubLoginButton.addEventListener("click", () => gitHubLoginButtonHandler("repo read:org notifications"));
   if (authenticationElement) {
     authenticationElement.appendChild(gitHubLoginButton);
     authenticationElement.classList.add("ready");