Merge pull request #7 from gitcoindev/feat/inifite-scroll

feat: infinite scroll

scripts/helpers/utils.ts

@@ -8,7 +8,7 @@ export enum Level {
   SILLY = "silly",
 }
 
-export const createGitHubCommentURL = (orgName: string, repoName: string, issueNumber: number, commentId: number) => {
+export const createGitHubCommentURL = (orgName: string | null, repoName: string | null, issueNumber: number | null, commentId: number | null) => {
   return `https://github.com/${orgName}/${repoName}/issues/${issueNumber}#issuecomment-${commentId}`;
 };
 
@@ -21,21 +21,21 @@ export const isValidJson = (jsonString: string): boolean => {
   }
 };
 
-export const generateRandomId = (length: Number) => {
+export const generateRandomId = (length: number) => {
   return [...Array(length)].map(() => Math.random().toString(36)[2]).join("");
 };
 
-export const containsValidJson = (message: string): [boolean, string, string] => {
-  const jsonMatches = message.match(/\{.*\}/g); // Find JSON-like substrings
+export const containsValidJson = (message: string | null): [boolean, string, string | undefined] => {
+  const jsonMatches = message?.match(/\{.*\}/g); // Find JSON-like substrings
   if (!jsonMatches) {
     return [false, "", ""];
   }
 
   for (const match of jsonMatches) {
     if (isValidJson(match)) {
-      const braceIndex = message.indexOf("{");
+      const braceIndex = message?.indexOf("{");
       if (braceIndex !== -1) {
-        return [true, match, message.substring(0, braceIndex)];
+        return [true, match, message?.substring(0, braceIndex)];
       }
       return [true, match, ""];
     }
@@ -44,7 +44,7 @@ export const containsValidJson = (message: string): [boolean, string, string] =>
   return [false, "", ""];
 };
 
-export const getLevelString = (level: number) => {
+export const getLevelString = (level: number | null) => {
   switch (level) {
     case 0:
       return Level.ERROR;

scripts/index.ts

@@ -1,5 +1,6 @@
 import { containsValidJson, createGitHubCommentURL, generateRandomId, getLevelString } from "./helpers/utils";
 import { Logs } from "./types/log";
+import { Database } from "../types/supabase";
 import { createClient } from "@supabase/supabase-js";
 import { SUPABASE_URL, SUPABASE_KEY } from "./constants/index";
 
@@ -11,6 +12,8 @@ const jsonModal = document.getElementById("json-modal") as HTMLDivElement;
 const closeModalButton = document.getElementById("close-modal") as HTMLButtonElement;
 const jsonContent = document.getElementById("json-content") as HTMLDivElement;
 
+let isLoading = false;
+
 const openJsonModal = (validJson: string) => {
   jsonContent.textContent = validJson;
 
@@ -48,14 +51,49 @@ const updateLogTable = () => {
         }
       });
     }
-    // scroll to last added data
-    logCell[logCell.length - 1].scrollIntoView();
   });
 };
 
 let logs: Logs[] = [];
 
-const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);
+const supabaseClient = createClient<Database>(SUPABASE_URL, SUPABASE_KEY);
+
+const fetchData = async () => {
+  isLoading = true;
+
+  if (logs.length > 0) {
+    const firstAvailableTimestamp = logs.at(logs.length-1)?.timestamp;
+    const { data, error } = await supabaseClient
+      .from("logs")
+      .select()
+      .lt("timestamp", firstAvailableTimestamp)
+      .order("timestamp", { ascending: false })
+      .limit(25);
+    if (data && data.length > 0) {
+      logs.push(...data);
+      updateLogTable();
+    } else console.log(error);
+  } else {
+    const { data, error } = await supabaseClient.from("logs").select().order("timestamp", { ascending: false }).limit(30);
+    if (data && data.length > 0) {
+      logs.push(...data);
+      updateLogTable();
+    } else console.log(error);
+  }
+
+  isLoading = false;
+};
+
+const handleScroll = async () => {
+  const bottom = document.documentElement.scrollHeight - document.documentElement.scrollTop === document.documentElement.clientHeight;
+
+  if (!bottom || isLoading) {
+    return;
+  }
+  await fetchData();
+};
+
+window.addEventListener("scroll", handleScroll);
 
 supabaseClient
   .channel("table-db-changes")
@@ -72,7 +110,7 @@ supabaseClient
 
 const handlePayload = (logEntry: any) => {
   if (logEntry?.eventType !== "INSERT") return;
-  logs.push(logEntry.new);
+  logs.unshift(logEntry.new);
   updateLogTable();
 };
 
@@ -93,7 +131,9 @@ window.addEventListener("click", (event) => {
   if (event.target === jsonModal) {
     jsonModal.style.display = "none";
   }
+  isLoading = !isLoading;
 });
 
 // Initial update
+fetchData();
 updateLogTable();

scripts/types/log.ts

@@ -1,9 +1,10 @@
 export type Logs = {
-  timestamp: string;
-  log_message: string;
-  level: number;
-  repo_name: string;
-  org_name: string;
-  comment_id: number;
-  issue_number: number;
+  comment_id: number | null;
+  id: number;
+  issue_number: number | null;
+  level: number | null;
+  log_message: string | null;
+  org_name: string | null;
+  repo_name: string | null;
+  timestamp: string | null;
 };