Intercept external links (#37)

* handle markdown links * handle all links * remove comment
trendscenter · Nov 12, 2024 · e7e38c6 · e7e38c6
1 parent d39e2a7
commit e7e38c6
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 16 deletions.
diff --git a/desktopApp/reactApp/src/index.tsx b/desktopApp/reactApp/src/index.tsx
@@ -13,10 +13,14 @@ import { electronApi } from './apis/electronApi/electronApi';
 import ApolloClientsProvider from './contexts/ApolloClientsProvider';
 import { HashRouter as Router } from 'react-router-dom';
 import { UserStateProvider } from './contexts/UserStateContext';
+import interceptExternalLinks from './utils/interceptExternalLinks';
 
 const startApp = async () => {
   console.log("Starting app...");
 
+
+  interceptExternalLinks();
+
   // Attempt to get the configuration
   const config = await electronApi.getConfig();
   console.log("Config loaded:", config);

diff --git a/desktopApp/reactApp/src/pages/ConsortiumDetails/ComputationDisplay/ComputationDisplay.tsx b/desktopApp/reactApp/src/pages/ConsortiumDetails/ComputationDisplay/ComputationDisplay.tsx
@@ -3,6 +3,7 @@ import { Box, Chip, Typography, Card, CardContent } from "@mui/material";
 import { Maybe } from "graphql/jsutils/Maybe";
 import ReactMarkdown from 'react-markdown';
 
+
 interface ComputationDisplayProps {
     computation: Maybe<Computation> | undefined;
 }
@@ -12,7 +13,7 @@ export default function ComputationDisplay({ computation }: ComputationDisplayPr
         return (
             <Card>
                 <CardContent>
-                <Typography fontSize="11px">Computation Notes:</Typography>
+                    <Typography fontSize="11px">Computation Notes:</Typography>
                 </CardContent>
             </Card>
         );
@@ -21,32 +22,32 @@ export default function ComputationDisplay({ computation }: ComputationDisplayPr
     const { title, notes, imageName, imageDownloadUrl } = computation;
 
     return (
-        <Box 
+        <Box
             className="computation-notes"
-            
-            borderRadius={2} 
-             
-            marginBottom={2} 
-            bgcolor={'white'} 
+
+            borderRadius={2}
+
+            marginBottom={2}
+            bgcolor={'white'}
         >
             <div id="compnotes" />{/* For Notes anchor placement at 800px wide */}
             <CardContent>
-            <Typography fontSize="11px">Computation Notes:</Typography>
+                <Typography fontSize="11px">Computation Notes:</Typography>
                 <Typography variant="h5" fontWeight="600" color="black">{title}</Typography>
                 <Typography variant="h6">{imageName}</Typography>
                 <div className="computation-links">
-                    <Chip 
-                        label="Download URL" 
-                        component="a" 
-                        href={imageDownloadUrl} 
+                    <Chip
+                        label="Download URL"
+                        component="a"
+                        href={imageDownloadUrl}
                         target="_blank"
-                        size="small" 
-                        variant="outlined" 
-                        clickable 
+                        size="small"
+                        variant="outlined"
+                        clickable
                     />
                 </div>
                 <Box>
-                    <ReactMarkdown>{notes}</ReactMarkdown>   
+                    <ReactMarkdown>{notes}</ReactMarkdown>
                 </Box>
             </CardContent>
         </Box>

diff --git a/desktopApp/reactApp/src/utils/interceptExternalLinks.ts b/desktopApp/reactApp/src/utils/interceptExternalLinks.ts
@@ -0,0 +1,33 @@
+const interceptExternalLinks = () => {
+    const handleLinkClick = (event: MouseEvent) => {
+      const target = event.target as HTMLAnchorElement;
+
+      // Check if the clicked element is a link
+      if (target.tagName === 'A' && target.href) {
+        const isExternalLink = !target.href.startsWith(window.location.origin);
+
+        if (isExternalLink) {
+          event.preventDefault();
+          console.log("External link clicked:", target.href);
+
+          // Open external link in a new window with specified position and size
+          window.open(
+            target.href,
+            '_blank',
+            'noopener,noreferrer,width=800,height=600,left=100,top=100'
+          );
+        }
+      }
+    };
+
+    // Add event listener to capture all clicks on links
+    document.addEventListener('click', handleLinkClick);
+
+    // Return a cleanup function to remove the event listener when needed
+    return () => {
+      document.removeEventListener('click', handleLinkClick);
+    };
+  };
+
+  export default interceptExternalLinks;
+