From 210d2555f3dbd15d6cb59c627f2c932694961fff Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Thu, 14 Apr 2022 18:38:48 +0100
Subject: [PATCH] Linkify comments

---
 components/discussion/discussion.tsx                |  5 ++++-
 .../{truncated-link.tsx => truncated-linkify.tsx}   | 13 ++++++++++++-
 pages/poll.tsx                                      | 10 ++++------
 3 files changed, 20 insertions(+), 8 deletions(-)
 rename components/poll/{truncated-link.tsx => truncated-linkify.tsx} (67%)

diff --git a/components/discussion/discussion.tsx b/components/discussion/discussion.tsx
index d85af79fd..a7089edb0 100644
--- a/components/discussion/discussion.tsx
+++ b/components/discussion/discussion.tsx
@@ -18,6 +18,7 @@ import Dropdown, { DropdownItem } from "../dropdown";
 import DotsHorizontal from "../icons/dots-horizontal.svg";
 import Trash from "../icons/trash.svg";
 import NameInput from "../name-input";
+import TruncatedLinkify from "../poll/truncated-linkify";
 import UserAvater from "../poll/user-avatar";
 import { useUserName } from "../user-name-context";
 
@@ -82,7 +83,9 @@ const Comments: React.VoidFunctionComponent<{
                   </Dropdown>
                 ) : null}
               </div>
-              <div className="w-fit whitespace-pre-wrap">{comment.content}</div>
+              <div className="w-fit whitespace-pre-wrap">
+                <TruncatedLinkify>{comment.content}</TruncatedLinkify>
+              </div>
             </Transition>
           </div>
         );
diff --git a/components/poll/truncated-link.tsx b/components/poll/truncated-linkify.tsx
similarity index 67%
rename from components/poll/truncated-link.tsx
rename to components/poll/truncated-linkify.tsx
index 038a9e235..bfe63ecba 100644
--- a/components/poll/truncated-link.tsx
+++ b/components/poll/truncated-linkify.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
+import ReactLinkify from "react-linkify";
 import Tooltip from "../tooltip";
 
-export const truncatedLink = (href: string, text: string, key: number) => {
+export const truncateLink = (href: string, text: string, key: number) => {
   const textWithoutProtocol = text.replace(/^https?:\/\//i, "");
   const beginningOfPath = textWithoutProtocol.indexOf("/");
   let finalText = textWithoutProtocol;
@@ -28,3 +29,13 @@ export const truncatedLink = (href: string, text: string, key: number) => {
     );
   }
 };
+
+const TruncatedLinkify: React.VoidFunctionComponent<{
+  children?: React.ReactNode;
+}> = ({ children }) => {
+  return (
+    <ReactLinkify componentDecorator={truncateLink}>{children}</ReactLinkify>
+  );
+};
+
+export default TruncatedLinkify;
diff --git a/pages/poll.tsx b/pages/poll.tsx
index c17bc724f..830e2ab26 100644
--- a/pages/poll.tsx
+++ b/pages/poll.tsx
@@ -31,7 +31,7 @@ import { GetPollResponse } from "../api-client/get-poll";
 import { getBrowserTimeZone } from "../utils/date-time-utils";
 import Custom404 from "./404";
 import Linkify from "react-linkify";
-import { truncatedLink } from "@/components/poll/truncated-link";
+import TruncatedLinkify from "@/components/poll/truncated-linkify";
 
 const Discussion = React.lazy(() => import("@/components/discussion"));
 
@@ -262,9 +262,9 @@ const PollPage: NextPage = () => {
               </div>
               {poll.description ? (
                 <div className="text-lg leading-relaxed max-w-2xl mb-4 whitespace-pre-line w-fit shadow-sm bg-white text-slate-600 rounded-xl px-4 py-3">
-                  <Linkify componentDecorator={truncatedLink}>
+                  <TruncatedLinkify>
                     {preventWidows(poll.description)}
-                  </Linkify>
+                  </TruncatedLinkify>
                 </div>
               ) : null}
               {poll.location ? (
@@ -275,9 +275,7 @@ const PollPage: NextPage = () => {
                       className="text-slate-400 mr-2"
                     />
                   </div>
-                  <Linkify componentDecorator={truncatedLink}>
-                    {poll.location}
-                  </Linkify>
+                  <TruncatedLinkify>{poll.location}</TruncatedLinkify>
                 </div>
               ) : null}
             </div>