refactor: code deduplication

Abstract the avatar fetching, caching, and error handling into a single function.

Author: 0x4007

src/home/fetch-github/fetch-and-display-previews.ts

@@ -1,11 +1,10 @@
-import { Octokit } from "@octokit/rest";
-import { getGitHubAccessToken } from "../getters/get-github-access-token";
-import { getImageFromDB, saveImageToDB } from "../getters/get-indexed-db";
+import { getImageFromDB } from "../getters/get-indexed-db";
 import { getLocalStore } from "../getters/get-local-store";
 import { GitHubIssue } from "../github-types";
 import { renderGitHubIssues } from "../rendering/render-github-issues";
 import { Sorting } from "../sorting/generate-sorting-buttons";
 import { sortIssuesController } from "../sorting/sort-issues-controller";
+import { fetchAvatar } from "./fetch-avatar";
 import { organizationImageCache } from "./fetch-issues-full";
 import { fetchIssuePreviews } from "./fetch-issues-preview";
 
@@ -29,44 +28,7 @@ export async function fetchAndDisplayPreviews(sorting?: Sorting, options = { ord
     const match = issue.body.match(urlPattern);
     const orgName = match?.groups?.org;
     if (orgName) {
-      // Check local cache first
-      const cachedAvatar = organizationImageCache.find((entry) => entry[orgName] !== undefined);
-      if (cachedAvatar) {
-        return Promise.resolve();
-      }
-
-      // If not in local cache, check IndexedDB
-      const avatarBlob = await getImageFromDB({ dbName: "ImageDatabase", storeName: "ImageStore", orgName: `avatarUrl-${orgName}` });
-      if (avatarBlob) {
-        // If the avatar Blob is found in IndexedDB, add it to the cache
-        organizationImageCache.push({ [orgName]: avatarBlob });
-        return Promise.resolve();
-      }
-
-      // If not in IndexedDB, fetch from network
-      const octokit = new Octokit({ auth: getGitHubAccessToken() });
-      return octokit.rest.orgs
-        .get({ org: orgName })
-        .then(async ({ data: { avatar_url: avatarUrl } }) => {
-          if (avatarUrl) {
-            // Fetch the image as a Blob and save it to IndexedDB
-            await fetch(avatarUrl)
-              .then((response) => response.blob())
-              .then(async (blob) => {
-                await saveImageToDB({
-                  dbName: "ImageDatabase",
-                  storeName: "ImageStore",
-                  keyName: "name",
-                  orgName: `avatarUrl-${orgName}`,
-                  avatarBlob: blob,
-                });
-                organizationImageCache.push({ [orgName]: blob });
-              });
-          }
-        })
-        .catch((error) => {
-          console.error(`Failed to fetch avatar for organization ${orgName}: ${error}`);
-        });
+      return fetchAvatar(orgName);
     }
     return Promise.resolve();
   });

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

@@ -0,0 +1,45 @@
+import { Octokit } from "@octokit/rest";
+import { getGitHubAccessToken } from "../getters/get-github-access-token";
+import { getImageFromDB, saveImageToDB } from "../getters/get-indexed-db";
+import { organizationImageCache } from "./fetch-issues-full";
+
+export async function fetchAvatar(orgName: string) {
+  // Check local cache first
+  const cachedAvatar = organizationImageCache.find((entry) => entry[orgName] !== undefined);
+  if (cachedAvatar) {
+    return Promise.resolve();
+  }
+
+  // If not in local cache, check IndexedDB
+  const avatarBlob = await getImageFromDB({ dbName: "ImageDatabase", storeName: "ImageStore", orgName: `avatarUrl-${orgName}` });
+  if (avatarBlob) {
+    // If the avatar Blob is found in IndexedDB, add it to the cache
+    organizationImageCache.push({ [orgName]: avatarBlob });
+    return Promise.resolve();
+  }
+
+  // If not in IndexedDB, fetch from network
+  const octokit = new Octokit({ auth: getGitHubAccessToken() });
+  return octokit.rest.orgs
+    .get({ org: orgName })
+    .then(async ({ data: { avatar_url: avatarUrl } }) => {
+      if (avatarUrl) {
+        // Fetch the image as a Blob and save it to IndexedDB
+        await fetch(avatarUrl)
+          .then((response) => response.blob())
+          .then(async (blob) => {
+            await saveImageToDB({
+              dbName: "ImageDatabase",
+              storeName: "ImageStore",
+              keyName: "name",
+              orgName: `avatarUrl-${orgName}`,
+              avatarBlob: blob,
+            });
+            organizationImageCache.push({ [orgName]: blob });
+          });
+      }
+    })
+    .catch((error) => {
+      console.error(`Failed to fetch avatar for organization ${orgName}: ${error}`);
+    });
+}

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

@@ -1,8 +1,8 @@
 import { Octokit } from "@octokit/rest";
 import { getGitHubAccessToken } from "../getters/get-github-access-token";
-import { saveImageToDB } from "../getters/get-indexed-db";
 import { getLocalStore } from "../getters/get-local-store";
 import { GitHubIssue } from "../github-types";
+import { fetchAvatar } from "./fetch-avatar";
 import { PreviewToFullMapping } from "./preview-to-full-mapping";
 
 export const previewToFullMapping = new PreviewToFullMapping().getMapping();
@@ -40,34 +40,11 @@ export function fetchIssuesFull(previews: GitHubIssue[]) {
         localStorage.setItem("gitHubIssuesFull", JSON.stringify(Array.from(previewToFullMapping.entries())));
         return { full, issueElement };
       })
-      .then(({ full }) => {
+      .then(async ({ full }) => {
         const urlMatch = full.html_url.match(urlPattern);
         const orgName = urlMatch?.groups?.org;
-
         if (orgName) {
-          const orgCacheEntry = organizationImageCache.find((entry) => entry[orgName] !== undefined);
-          if (orgCacheEntry) {
-            return; // no redundant requests
-          } else {
-            organizationImageCache.push({ [orgName]: null });
-          }
-          return octokit.rest.orgs.get({ org: orgName }).then(({ data }) => {
-            const avatarUrl = data.avatar_url;
-            // Fetch the image as a Blob and save it to IndexedDB
-            return fetch(avatarUrl)
-              .then((response) => response.blob())
-              .then(async (blob) => {
-                await saveImageToDB({
-                  dbName: "ImageDatabase",
-                  storeName: "ImageStore",
-                  keyName: "name",
-                  orgName: `avatarUrl-${orgName}`,
-                  avatarBlob: blob,
-                });
-                organizationImageCache.push({ [orgName]: blob });
-                return full;
-              });
-          });
+          await fetchAvatar(orgName);
         }
         return full;
       });