From 1c61b58a4ac4e9477ee47c310f71a2077c7ccddc Mon Sep 17 00:00:00 2001
From: Kyler Mintah <kylermintah@gmail.com>
Date: Mon, 15 Mar 2021 03:26:31 -0400
Subject: [PATCH] Added hyperlink support

Purpose of this commit is to add hyperlink support to Seven JSON Viewer.
Please review for style and implementation.
---
 app/Components/JSONView/JBlock/index.tsx  |  2 +-
 app/Components/JSONView/JString/index.tsx | 18 +++++++++++++++---
 package.json                              |  2 +-
 styles/styles.scss                        |  9 +++++++++
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/app/Components/JSONView/JBlock/index.tsx b/app/Components/JSONView/JBlock/index.tsx
index bac8aaa..a1329d5 100644
--- a/app/Components/JSONView/JBlock/index.tsx
+++ b/app/Components/JSONView/JBlock/index.tsx
@@ -10,7 +10,7 @@ const JBlock = ({ children, collapsible, onArrowClick, active, copyData }) => {
   const events = React.useContext(EventContext);
 
   const handleSectionClick = (e: MouseEvent) => {
-    e.preventDefault();
+    // e.preventDefault();
     e.stopPropagation();
 
     setSelected(!selected);
diff --git a/app/Components/JSONView/JString/index.tsx b/app/Components/JSONView/JString/index.tsx
index 97e7b23..479d186 100644
--- a/app/Components/JSONView/JString/index.tsx
+++ b/app/Components/JSONView/JString/index.tsx
@@ -11,12 +11,24 @@ const JString = ({ label, value, isLast }) => {
       )}
       {value === null ? (
         <span className="null">null</span>
-      ) : (
-        <span className="string">"{value}"</span>
-      )}
+      ) : isValidHttpUrl(value) ? (
+        <span className="hyperlink">"<a href={String(value)} target='_blank'>{value}</a>"</span>
+      ) : <span className="string">"{value}"</span>}
       {!isLast && ','}
     </section>
   );
 };
 
+function isValidHttpUrl(string) {
+  let url;
+  
+  try {
+    url = new URL(string);
+  } catch (_) {
+    return false;  
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
+}
+
 export { JString };
diff --git a/package.json b/package.json
index b3be589..c257c29 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,6 @@
     "@types/chrome": "^0.0.96",
     "jsonpath": "^1.0.2",
     "jsonpath-plus": "^3.0.0",
-    "parcel-bundler": "^1.12.4",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-icons": "^3.9.0",
@@ -24,6 +23,7 @@
     "typescript": "^3.7.5"
   },
   "devDependencies": {
+    "parcel-bundler": "^1.12.3",
     "sass": "^1.25.0"
   }
 }
diff --git a/styles/styles.scss b/styles/styles.scss
index 8e13e54..3c4bb3b 100644
--- a/styles/styles.scss
+++ b/styles/styles.scss
@@ -3,6 +3,7 @@
   --accent-color: #00cc7d;
   --accent-color-light: #00cc7e69;
   --string-color: #d69d85;
+  --hyperlink-color: #43beee;
   --number-color: #b5cea8;
   --boolean-color: #4ec9b0;
   --label-color: #569cd6;
@@ -79,6 +80,14 @@ body {
     color: var(--string-color);
   }
 
+  .hyperlink {
+    color: var(--hyperlink-color);
+  }
+
+  .hyperlink a{ 
+    color: var(--hyperlink-color);
+ }
+
   .boolean {
     color: var(--boolean-color);
   }