From 25e621372c4afc6cc2131a36e0a43c4e15038799 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 22 Sep 2023 04:25:16 -0700
Subject: [PATCH] Parse URLs from note field (#154)

---
 .../virtual-table/cells/note-cell.tsx         | 47 +++++++++++++++++++
 .../components/virtual-table/index.tsx        |  3 +-
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/components/virtual-table/cells/note-cell.tsx

diff --git a/src/renderer/components/virtual-table/cells/note-cell.tsx b/src/renderer/components/virtual-table/cells/note-cell.tsx
new file mode 100644
index 00000000..1191d597
--- /dev/null
+++ b/src/renderer/components/virtual-table/cells/note-cell.tsx
@@ -0,0 +1,47 @@
+import type { ICellRendererParams } from '@ag-grid-community/core';
+import { Skeleton } from '/@/renderer/components/skeleton';
+import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
+import { useMemo } from 'react';
+import { Text } from '/@/renderer/components/text';
+
+const URL_REGEX =
+    /((?:https?:\/\/)?(?:[\w-]{1,32}(?:\.[\w-]{1,32})+)(?:\/[\w\-./?%&=][^.|^\s]*)?)/g;
+
+const replaceURLWithHTMLLinks = (text: string) => {
+    const urlRegex = new RegExp(URL_REGEX, 'g');
+    return text.replaceAll(
+        urlRegex,
+        (url) => `<a href="${url}" target="_blank" rel="noreferrer">${url}</a>`,
+    );
+};
+
+export const NoteCell = ({ value }: ICellRendererParams) => {
+    const formattedValue = useMemo(() => {
+        if (!value) {
+            return '';
+        }
+
+        return replaceURLWithHTMLLinks(value);
+    }, [value]);
+
+    if (value === undefined) {
+        return (
+            <CellContainer $position="left">
+                <Skeleton
+                    height="1rem"
+                    width="80%"
+                />
+            </CellContainer>
+        );
+    }
+
+    return (
+        <CellContainer $position="left">
+            <Text
+                $secondary
+                dangerouslySetInnerHTML={{ __html: formattedValue }}
+                overflow="hidden"
+            />
+        </CellContainer>
+    );
+};
diff --git a/src/renderer/components/virtual-table/index.tsx b/src/renderer/components/virtual-table/index.tsx
index e343d521..f59ec520 100644
--- a/src/renderer/components/virtual-table/index.tsx
+++ b/src/renderer/components/virtual-table/index.tsx
@@ -36,6 +36,7 @@ import { TablePagination } from '/@/renderer/components/virtual-table/table-pagi
 import { ActionsCell } from '/@/renderer/components/virtual-table/cells/actions-cell';
 import { TitleCell } from '/@/renderer/components/virtual-table/cells/title-cell';
 import { useFixedTableHeader } from '/@/renderer/components/virtual-table/hooks/use-fixed-table-header';
+import { NoteCell } from '/@/renderer/components/virtual-table/cells/note-cell';
 
 export * from './table-config-dropdown';
 export * from './table-pagination';
@@ -150,7 +151,7 @@ const tableColumns: { [key: string]: ColDef } = {
         width: 100,
     },
     comment: {
-        cellRenderer: GenericCell,
+        cellRenderer: NoteCell,
         colId: TableColumn.COMMENT,
         headerName: 'Note',
         valueGetter: (params: ValueGetterParams) => (params.data ? params.data.comment : undefined),