Merge pull request #104 from ucladevx/maxwell/tinylinkhotfix

Fix invalid url by creating error handling wrapper

Author: tsaomaxwell

package-lock.json

@@ -0,0 +1,24 @@
+import React from "react";
+import { ReactTinyLink } from "react-tiny-link"; //uses https://cors-anywhere.herokuapp.com by default.
+
+const backendHost = "https://cors-anywhere-embark.herokuapp.com";
+
+const TinyLinkWrapper = ({ link }) => {
+  try {
+    new URL(link);
+    return (
+      <ReactTinyLink
+        proxyUrl={backendHost}
+        cardSize="small"
+        showGraphic={true}
+        maxLine={2}
+        minLine={1}
+        url={link}
+      />
+    );
+  } catch (e) {
+    return <></>;
+  }
+};
+
+export default TinyLinkWrapper;

src/components/TinyLinkWrapper.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-import { ReactTinyLink } from "react-tiny-link"; //uses https://cors-anywhere.herokuapp.com by default.
 import Linkify from "react-linkify";
 import linksFinder from "links-finder";
+import TinyLinkWrapper from "../../../components/TinyLinkWrapper";
 
 import {
   PreviousCommentItem,
@@ -52,13 +52,7 @@ const CommentBox = ({ comments }) => {
                       <PreviousCommentText>{c.body}</PreviousCommentText>
                     </Linkify>
                     {c.body !== undefined && getURL(c.body) !== "" ? (
-                      <ReactTinyLink
-                        cardSize="small"
-                        showGraphic={true}
-                        maxLine={2}
-                        minLine={1}
-                        url={getURL(c.body)}
-                      />
+                      <TinyLinkWrapper link={getURL(c.body)} />
                     ) : (
                       <></>
                     )}

src/pages/Home/Comment/CommentBox.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ImageIcon from "@material-ui/icons/Image";
 import LinkIcon from "@material-ui/icons/Link";
-import { ReactTinyLink } from "react-tiny-link"; //uses https://cors-anywhere.herokuapp.com by default.
+import TinyLinkWrapper from "../../components/TinyLinkWrapper";
 import Linkify from "react-linkify";
 import linksFinder from "links-finder";
 
@@ -112,7 +112,6 @@ const Posts = ({ setNewPost }) => {
   const getURL = (body) => {
     const urlSet = linksFinder.findLinks(body);
     if (urlSet.length <= 0) return "";
-    console.log(urlSet);
     return body.substring(urlSet[0].start, urlSet[0].end + 1);
   };
 
@@ -208,13 +207,8 @@ const Posts = ({ setNewPost }) => {
                     product development process!! https://ucladevx.com/
                   </PreviousCommentText>
                 </Linkify>
-                <ReactTinyLink
-                  cardSize="small"
-                  showGraphic={true}
-                  maxLine={2}
-                  minLine={1}
-                  proxyUrl={backendHost}
-                  url={getURL(
+                <TinyLinkWrapper
+                  link={getURL(
                     "Hey Christie! We have a slidedeck all about product thinking on our profile. You should totally apply to be on one of our teams this quarter to gain some more experience with the product development process!! https://ucladevx.com/"
                   )}
                 />
@@ -279,14 +273,7 @@ const Posts = ({ setNewPost }) => {
                   <PostContent>{p.body}</PostContent>
                 </Linkify>
                 {getURL(p.body) !== "" ? (
-                  <ReactTinyLink
-                    proxyUrl={backendHost}
-                    cardSize="small"
-                    showGraphic={true}
-                    maxLine={2}
-                    minLine={1}
-                    url={getURL(p.body)}
-                  />
+                  <TinyLinkWrapper link={getURL(p.body)} />
                 ) : (
                   <></>
                 )}

src/pages/Home/Posts.js

@@ -3457,9 +3457,9 @@
     "lodash.uniq" "^4.5.0"
 
 "caniuse-lite@^1.0.0", "caniuse-lite@^1.0.30000981", "caniuse-lite@^1.0.30001109", "caniuse-lite@^1.0.30001125", "caniuse-lite@^1.0.30001181":
-  "integrity" "sha512-JUdjWpcxfJ9IPamy2f5JaRDCaqJOxDzOSKtbdx4rH9VivMd1vIzoPumsJa9LoMIi4Fx2BV2KZOxWhNkBjaYivQ=="
-  "resolved" "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001204.tgz"
-  "version" "1.0.30001204"
+  "integrity" "sha512-YhF/hG6nqBEllymSIjLtR2iWDDnChvhnVJqp+vloyt2tEHFG1yBR+ac2B/rOw0qOK0m0lEXU2dv4E/sMk5P9Kg=="
+  "resolved" "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001282.tgz"
+  "version" "1.0.30001282"
 
 "capture-exit@^2.0.0":
   "integrity" "sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g=="