From 36ae6859f00571e1a18b56a525088ddf896d7769 Mon Sep 17 00:00:00 2001
From: SnowyNate <nmoy70@stuy.edu>
Date: Sun, 13 Oct 2024 21:18:08 -0400
Subject: [PATCH] Created TextLinks to replace DisplayLinks and added to
 announcements

TextLinks component has been created to replace the previous function DisplayLinks, which did not support newlines. TextLinks functionality has been added to announcements in Catalog page and AlertDisplay.
---
 src/comps/ui/AlertDisplay.tsx |  4 +--
 src/comps/ui/DisplayLinks.tsx | 36 --------------------------
 src/comps/ui/TextLinks.tsx    | 48 +++++++++++++++++++++++++++++++++++
 src/constants.ts              |  2 +-
 src/pages/Catalog.tsx         | 11 ++------
 5 files changed, 53 insertions(+), 48 deletions(-)
 delete mode 100644 src/comps/ui/DisplayLinks.tsx
 create mode 100644 src/comps/ui/TextLinks.tsx

diff --git a/src/comps/ui/AlertDisplay.tsx b/src/comps/ui/AlertDisplay.tsx
index 155a2a1..d897aaa 100644
--- a/src/comps/ui/AlertDisplay.tsx
+++ b/src/comps/ui/AlertDisplay.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import Alert from "@mui/material/Alert";
-import DisplayLinks from "./DisplayLinks";
+import TextLinks from "./TextLinks";
 
 type AlertInfo = {
     message: string;
@@ -50,7 +50,7 @@ const AlertDisplay = () => {
                 data.severity === "error" ? undefined : () => setOpen(false)
             }
         >
-            <DisplayLinks text={data.message} />
+            <TextLinks content={data.message} />
         </Alert>
     );
 };
diff --git a/src/comps/ui/DisplayLinks.tsx b/src/comps/ui/DisplayLinks.tsx
deleted file mode 100644
index 3e8bed1..0000000
--- a/src/comps/ui/DisplayLinks.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Link from "@mui/material/Link";
-
-const DisplayLinks = ({ text }: { text: string }) => {
-    if (text)
-        return (
-            <>
-                {text.split(" ").map((word, i, a) => {
-                    if (!word.startsWith("http")) {
-                        let outText = word;
-
-                        if (i !== a.length - 1) {
-                            outText += " ";
-                        }
-
-                        return outText;
-                    }
-
-                    return (
-                        <Link
-                            key={i}
-                            href={word}
-                            color="inherit"
-                            target="_blank"
-                            rel="noreferrer"
-                            style={{ textAlign: "center" }}
-                        >
-                            {word}
-                        </Link>
-                    );
-                })}
-            </>
-        );
-    else return <></>;
-};
-
-export default DisplayLinks;
diff --git a/src/comps/ui/TextLinks.tsx b/src/comps/ui/TextLinks.tsx
new file mode 100644
index 0000000..aa069df
--- /dev/null
+++ b/src/comps/ui/TextLinks.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { Typography } from "@mui/material"; // Assuming you're using MUI for styling
+
+interface TextLinksProps {
+    content: string;
+}
+
+const TextLinks: React.FC<TextLinksProps> = ({ content }) => {
+    const formatTextWithLinks = (text: string) => {
+        const urlRegex = /(https?:\/\/[^\s]+)/g;
+        const parts = text.split(urlRegex);
+
+        return (
+            <>
+                {parts.map((part, index) => {
+                    if (urlRegex.test(part)) {
+                        return (
+                            <a
+                                href={part}
+                                key={index}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                {part}
+                            </a>
+                        );
+                    } else {
+                        return <span key={index}>{part}</span>;
+                    }
+                })}
+            </>
+        );
+    };
+
+    return (
+        <Typography
+            variant="body1"
+            sx={{
+                width: "100%",
+                whiteSpace: "pre-line",
+            }}
+        >
+            {formatTextWithLinks(content)}
+        </Typography>
+    );
+};
+
+export default TextLinks;
diff --git a/src/constants.ts b/src/constants.ts
index 9d51f54..de739dc 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,7 +1,7 @@
 export const PUBLIC_URL =
     process.env.REACT_APP_PUBLIC_URL || "http://localhost:3000";
 export const SUPABASE_URL =
-    process.env.REACT_APP_SUPABASE_URL || "https://base.stuysu.org/";
+    process.env.REACT_APP_SUPABASE_URL || "http://localhost:8000";
 export const SUPABASE_ANON_KEY =
     process.env.REACT_APP_SUPABASE_ANON_KEY ||
     "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE";
diff --git a/src/pages/Catalog.tsx b/src/pages/Catalog.tsx
index 24a6a4d..bb41669 100644
--- a/src/pages/Catalog.tsx
+++ b/src/pages/Catalog.tsx
@@ -10,6 +10,7 @@ import { useSnackbar } from "notistack";
 import Loading from "../comps/ui/Loading";
 import SearchFilter from "../comps/pages/catalog/SearchFilter";
 import AsyncButton from "../comps/ui/AsyncButton";
+import TextLinks from "../comps/ui/TextLinks";
 
 /*
 function getUnique(arr : Partial<Organization>[]) {
@@ -250,15 +251,7 @@ const Catalog = () => {
                                         padding: "20px",
                                     }}
                                 >
-                                    <Typography
-                                        variant="body1"
-                                        sx={{
-                                            width: "100%",
-                                            whiteSpace: "pre-line",
-                                        }}
-                                    >
-                                        {announcement.content}
-                                    </Typography>
+                                    <TextLinks content={announcement.content} />
                                 </Card>
                             );
                         })}