feat: cache issues and handle post load fetch

Author: zugdev

src/home/fetch-github/fetch-issues-full.ts

@@ -1,4 +1,7 @@
+import { saveIssuesToCache } from "../getters/get-indexed-db";
 import { GitHubIssue } from "../github-types";
+import { taskManager } from "../home";
+import { displayGitHubIssues } from "./fetch-and-display-previews";
 export const organizationImageCache = new Map<string, Blob | null>(); // this should be declared in image related script
 
 // Fetches the issues from `devpool-issues.json` file in the `__STORAGE__` branch of the `devpool-directory` repo
@@ -9,3 +12,40 @@ export async function fetchIssues(): Promise<GitHubIssue[]> {
   const jsonData = await response.json();
   return jsonData;
 }
+
+export async function postLoadUpdateIssues() {
+  try {
+    const cachedIssues = taskManager.getTasks();
+    const fetchedIssues = await fetchIssues();
+
+    if(issuesAreDifferent(cachedIssues, fetchedIssues)) {
+      console.log("Issues are different, updating cache");
+      await saveIssuesToCache(fetchedIssues);
+      await taskManager.syncTasks();
+      void displayGitHubIssues();
+    } else {
+      console.log("Issues are the same, not updating cache");
+    }
+  } catch (error) {
+    console.error("Error updating issues cache", error);
+  }
+}
+
+// Sort issues by ID
+function sortIssues(issues: GitHubIssue[]): GitHubIssue[] {
+  return issues.slice().sort((a, b) => a.id - b.id);
+}
+
+function issuesAreDifferent(cached: GitHubIssue[], fetched: GitHubIssue[]): boolean {
+  cached = sortIssues(cached);
+  fetched = sortIssues(fetched);
+
+  if (cached.length !== fetched.length) return true;
+
+  for (let i = 0; i < cached.length; i++) {
+    if (cached[i].id !== fetched[i].id) {
+      return true;
+    }
+  }
+  return false;
+}

src/home/getters/get-indexed-db.ts

@@ -1,4 +1,6 @@
-// this file contains functions to save and retrieve images from IndexedDB which is client-side in-browser storage
+import { GitHubIssue } from "../github-types";
+
+// this file contains functions to save and retrieve issues/images from IndexedDB which is client-side in-browser storage
 export async function saveImageToCache({
   dbName,
   storeName,
@@ -69,3 +71,49 @@ export function getImageFromCache({ dbName, storeName, orgName }: { dbName: stri
     };
   });
 }
+
+async function openIssuesDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open("IssuesDB", 2);
+
+    request.onupgradeneeded = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      if (!db.objectStoreNames.contains("issues")) {
+        db.createObjectStore("issues", { keyPath: "id" });
+      }
+    };
+
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+// Saves fetched issues into IndexedDB
+export async function saveIssuesToCache(issues: GitHubIssue[]): Promise<void> {
+  const db = await openIssuesDB();
+  const transaction = db.transaction("issues", "readwrite");
+  const store = transaction.objectStore("issues");
+
+  for (const issue of issues) {
+    store.put(issue); // Add or update issue
+  }
+
+  return new Promise((resolve, reject) => {
+    transaction.oncomplete = () => resolve();
+    transaction.onerror = () => reject(transaction.error);
+  });
+}
+
+// Retrieves issues from IndexedDB
+export async function getIssuesFromCache(): Promise<GitHubIssue[]> {
+  const db = await openIssuesDB();
+  const transaction = db.transaction("issues", "readonly");
+  const store = transaction.objectStore("issues");
+
+  return new Promise((resolve, reject) => {
+    const request = store.getAll();
+
+    request.onsuccess = () => resolve(request.result || []);
+    request.onerror = () => reject(request.error);
+  });
+}

src/home/home.ts

@@ -2,6 +2,7 @@ import { grid } from "../the-grid";
 import { authentication } from "./authentication";
 import { initiateDevRelTracking } from "./devrel-tracker";
 import { displayGitHubIssues } from "./fetch-github/fetch-and-display-previews";
+import { postLoadUpdateIssues } from "./fetch-github/fetch-issues-full";
 import { readyToolbar } from "./ready-toolbar";
 import { registerServiceWorker } from "./register-service-worker";
 import { renderServiceMessage } from "./render-service-message";
@@ -36,7 +37,8 @@ export const taskManager = new TaskManager(container);
 void (async function home() {
   void authentication();
   void readyToolbar();
-  await taskManager.syncTasks(); // Sync tasks on load
+  await taskManager.syncTasks(); // Sync tasks from cache on load
+  await postLoadUpdateIssues(); // Update cache and issues if cache is outdated
   void displayGitHubIssues();
   if ("serviceWorker" in navigator) {
     registerServiceWorker();

src/home/task-manager.ts

@@ -1,6 +1,6 @@
 import { fetchAvatars } from "./fetch-github/fetch-avatar";
-import { fetchIssues } from "./fetch-github/fetch-issues-full";
 import { getGitHubAccessToken } from "./getters/get-github-access-token";
+import { getIssuesFromCache } from "./getters/get-indexed-db";
 import { setLocalStore } from "./getters/get-local-store";
 import { GITHUB_TASKS_STORAGE_KEY, GitHubIssue } from "./github-types";
 
@@ -11,9 +11,9 @@ export class TaskManager {
     this._container = container;
   }
 
-  // Syncs tasks by fetching issues, writing them to storage and then fetching avatars
+  // Syncs tasks by getting issues from cache, writing them to storage and then fetching avatars
   public async syncTasks() {
-    const issues = await fetchIssues();
+    const issues = await getIssuesFromCache();
 
     this._tasks = issues;
     void this._writeToStorage(issues);