Merge branch 'feat/sneak-peak' into development

package.json

@@ -28,7 +28,8 @@
     "@octokit/rest": "^20.0.2",
     "@supabase/supabase-js": "^2.39.0",
     "dotenv": "^16.3.1",
-    "esbuild-plugin-env": "^1.0.8"
+    "esbuild-plugin-env": "^1.0.8",
+    "marked": "^11.0.0"
   },
   "devDependencies": {
     "@cloudflare/wrangler": "^1.21.0",

src/home/fetch-github-issues.ts

@@ -13,7 +13,7 @@ export async function fetchGitHubIssues(sorting?: Sorting) {
   if (!container) {
     throw new Error("Could not find issues container");
   }
-  await fetchIssues(container, sorting);
+  return await fetchIssues(container, sorting);
 }
 
 export function sortIssuesBy(issues: GitHubIssue[], sortBy: string) {
@@ -73,16 +73,18 @@ function calculateLabelValue(label: string): number {
 async function fetchIssues(container: HTMLDivElement, sorting?: Sorting) {
   let issues;
   try {
-    issues = await fetchCachedIssues();
+    issues = fetchCachedIssues();
     if (issues) {
       await displayIssues(issues, container, sorting);
       issues = await fetchNewIssues();
     } else {
       issues = await fetchNewIssues();
       await displayIssues(issues, container, sorting);
     }
+    return issues;
   } catch (error) {
     console.error(error);
+    return null;
   }
 }
 
@@ -129,7 +131,7 @@ async function fetchNewIssues(): Promise<GitHubIssueWithNewFlag[]> {
   return freshIssuesWithNewFlag;
 }
 
-async function fetchCachedIssues(): Promise<GitHubIssue[] | null> {
+export function fetchCachedIssues(): GitHubIssue[] | null {
   const cachedIssues = localStorage.getItem("githubIssues");
   if (cachedIssues) {
     try {
@@ -140,3 +142,28 @@ async function fetchCachedIssues(): Promise<GitHubIssue[] | null> {
   }
   return null;
 }
+
+export async function fetchIssuesFull(cachedIssues: GitHubIssue[]) {
+  const authToken = getGitHubAccessToken();
+  if (!authToken) throw new Error("No auth token found");
+  console.trace(`fetching full issues`);
+  const octokit = new Octokit({ auth: getGitHubAccessToken() });
+  const downloaded: unknown[] = [];
+  for (const issue of cachedIssues) {
+    const urlPattern = /https:\/\/github\.com\/(?<org>[^/]+)\/(?<repo>[^/]+)\/issues\/(?<issue_number>\d+)/;
+    const match = issue.body.match(urlPattern);
+    if (!match || !match.groups) {
+      console.error("Invalid issue body URL format");
+      continue;
+    }
+    const { org, repo, issue_number } = match.groups;
+
+    const { data: issueData } = await octokit.request("GET /repos/{org}/{repo}/issues/{issue_number}", {
+      issue_number,
+      repo,
+      org,
+    });
+    downloaded.push(issueData);
+  }
+  return downloaded;
+}

src/home/home.ts

@@ -1,9 +1,39 @@
 import { grid } from "../the-grid";
 import { authentication } from "./authentication";
-import { fetchGitHubIssues } from "./fetch-github-issues";
+import { fetchCachedIssues, fetchGitHubIssues, fetchIssuesFull } from "./fetch-github-issues";
 import { sortingButtons } from "./sorting-buttons";
 
 fetchGitHubIssues().catch((error) => console.error(error));
 authentication();
 sortingButtons();
 grid(document.getElementById("grid") as HTMLElement);
+
+const cachedIssues = fetchCachedIssues();
+
+if (cachedIssues) {
+  const fullIssues = fetchCachedIssuesFull();
+
+  if (!fullIssues) {
+    fetchIssuesFull(cachedIssues)
+      .then((downloaded) => {
+        localStorage.setItem("githubIssuesFull", JSON.stringify(downloaded));
+        return downloaded;
+      })
+      .then((downloaded) => console.log(downloaded))
+      .catch((error) => console.error(error));
+  } else {
+    console.trace({ fullIssues });
+  }
+}
+
+export function fetchCachedIssuesFull() {
+  const cachedIssues = localStorage.getItem("githubIssuesFull");
+  if (cachedIssues) {
+    try {
+      return JSON.parse(cachedIssues);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  return null;
+}

src/home/render-github-issues.ts

@@ -1,5 +1,50 @@
+import { marked } from "marked";
+
 import { GitHubIssueWithNewFlag } from "./fetch-github-issues";
 
+// Create the preview elements outside of the previewIssue function
+const preview = document.createElement("div");
+preview.classList.add("preview");
+const previewContent = document.createElement("div");
+previewContent.classList.add("preview-content");
+const previewHeader = document.createElement("div");
+previewHeader.classList.add("preview-header");
+const title = document.createElement("h1");
+const closeButton = document.createElement("button");
+closeButton.classList.add("close-preview");
+closeButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m336-280-56-56 144-144-144-143 56-56 144 144 143-144 56 56-144 143 144 144-56 56-143-144-144 144Z"/></svg>`;
+const previewBody = document.createElement("div");
+previewBody.classList.add("preview-body");
+const previewBodyInner = document.createElement("div");
+previewBodyInner.classList.add("preview-body-inner");
+
+// Assemble the preview box
+previewHeader.appendChild(closeButton);
+previewHeader.appendChild(title);
+previewBody.appendChild(previewBodyInner);
+previewContent.appendChild(previewHeader);
+previewContent.appendChild(previewBody);
+preview.appendChild(previewContent);
+document.body.appendChild(preview);
+
+// Initially hide the preview
+// preview.classList.add("inactive"); //  = 'none';
+
+const issuesContainer = document.getElementById("issues-container");
+
+// Event listeners for closing the preview
+preview.addEventListener("click", (event) => {
+  if (event.target === preview) {
+    preview.classList.remove("active"); //  = 'none';
+    issuesContainer?.classList.remove("preview-active");
+  }
+});
+
+closeButton.addEventListener("click", () => {
+  preview.classList.remove("active"); //  = 'none';
+  issuesContainer?.classList.remove("preview-active");
+});
+
 export async function renderGitHubIssues(container: HTMLDivElement, issues: GitHubIssueWithNewFlag[]) {
   const avatarCache: Record<string, string> = JSON.parse(localStorage.getItem("avatarCache") || "{}");
   const fetchInProgress = new Set(); // Track in-progress fetches
@@ -68,7 +113,12 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH
 
       issueElement.addEventListener("click", () => {
         console.log(issue);
-        window.open(match?.input, "_blank");
+        const isLocal = issuesSynced();
+        if (isLocal) {
+          previewIssue(issue);
+        } else {
+          window.open(match?.input, "_blank");
+        }
       });
 
       issueWrapper.appendChild(issueElement);
@@ -105,3 +155,38 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH
   }
   container.classList.add("ready");
 }
+
+function issuesSynced() {
+  const gitHubIssuesFull = localStorage.getItem("githubIssuesFull");
+  if (!gitHubIssuesFull) return false;
+  const issuesFull = JSON.parse(gitHubIssuesFull);
+  if (!issuesFull) return false;
+  else return true;
+}
+
+// Function to update and show the preview
+function previewIssue(issuePreview: GitHubIssueWithNewFlag) {
+  const issuesFull = JSON.parse(localStorage.getItem("githubIssuesFull") || "[]");
+  console.trace({
+    issuesFull,
+    issue: issuePreview,
+  });
+  const issuePreviewUrl = issuePreview.body.match(/https:\/\/github\.com\/[^/]+\/[^/]+\/issues\/\d+/)?.[0];
+  if (!issuePreviewUrl) throw new Error("Issue preview URL not found");
+
+  const issueFull = findIssueByUrl(issuesFull, issuePreviewUrl);
+  if (!issueFull) throw new Error("Issue not found");
+
+  // Update the title and body for the new issue
+  title.textContent = issuePreview.title;
+  previewBodyInner.innerHTML = marked(issueFull.body) as string;
+
+  // Show the preview
+  preview.classList.add("active"); //  = 'block';
+  issuesContainer?.classList.add("preview-active");
+}
+
+// Function to find an issue by URL
+function findIssueByUrl(issues: GitHubIssueWithNewFlag[], url: string) {
+  return issues.find((issue) => issue.html_url === url);
+}