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

@@ -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>
     );
 };

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;

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";

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>
                             );
                         })}