Merge pull request #308 from cmu15122/azhang45_announcementLinks

announcements automatically hyperlink URLs

Author: jacksontromero

.env.local

@@ -0,0 +1,4 @@
+# Deployment used by `npx convex dev`
+CONVEX_DEPLOYMENT=local:local-jackson_romero-q_prime # team: jackson-romero, project: q-prime
+
+CONVEX_URL=http://127.0.0.1:3210

.gitignore

@@ -71,6 +71,7 @@ web_modules/
 # dotenv environment variables file
 .env
 .env.test
+.env.local
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache

client/package-lock.json

@@ -23,6 +23,9 @@
     "chart.js": "^4.4.1",
     "chat.js": "^1.0.2",
     "downloadjs": "^1.4.7",
+    "linkify-html": "^4.3.2",
+    "linkify-react": "^4.3.2",
+    "linkifyjs": "^4.3.2",
     "luxon": "^2.4.0",
     "material-react-toastify": "^1.0.1",
     "number-to-words": "^1.2.4",

client/package.json

@@ -7,6 +7,8 @@ import {
   Edit, Delete,
 } from '@mui/icons-material';
 
+import Linkify from 'linkify-react';
+
 import AnnouncementDialogBody from './dialogs/AnnouncementDialogBody';
 import AddDialog from '../../common/dialogs/AddDialog';
 import EditDialog from '../../common/dialogs/EditDialog';
@@ -130,8 +132,17 @@ export default function Announcements(props) {
               {rows.slice().reverse().map((row, index) => (
                 <ItemRow key={row.id} index={index} rowKey={row.id}>
                   <TableCell component='th' scope='row' sx={{pl: 3.25}}>
-                    <Typography sx={{fontWeight: 'bold', whiteSpace: 'pre-line'}}>
-                      {row.content}
+                    <Typography
+                      sx={{
+                        'fontWeight': 'bold',
+                        'whiteSpace': 'pre-line',
+                        '& a': {
+                          color: 'primary.main',
+                          cursor: 'pointer',
+                        },
+                      }}
+                    >
+                      <Linkify options={{target: '_blank'}}>{row.content}</Linkify>
                     </Typography>
                   </TableCell>
                   <TableCell>