TCA-355 Open External Links in New Window -> dev

client/src/components/layouts/tc-integration.tsx

@@ -97,6 +97,7 @@ class TcIntegrationLayout extends Component<TcIntegrationLayoutProps> {
 
     window.addEventListener('online', this.updateOnlineStatus);
     window.addEventListener('offline', this.updateOnlineStatus);
+    window.addEventListener('click', this.externalLinkHandler);
   }
 
   componentDidUpdate(prevProps: TcIntegrationLayoutProps) {
@@ -112,6 +113,41 @@ class TcIntegrationLayout extends Component<TcIntegrationLayoutProps> {
     window.removeEventListener('offline', this.updateOnlineStatus);
   }
 
+  externalLinkHandler = (event: MouseEvent) => {
+    // prettier is the worst
+
+    // if we're not clicking an anchor tag, there's nothing to do
+    const eventTarget = event.target as HTMLElement;
+    if (eventTarget?.localName !== 'a') {
+      return;
+    }
+
+    // if the target of the click isn't external, there's nothing to do
+    const target = eventTarget as HTMLAnchorElement;
+    const url = new URL(target.href);
+    if (url.host === window.location.host) {
+      return;
+    }
+
+    // stop the click so we can alter it
+    event.stopPropagation();
+    event.preventDefault();
+
+    // if this is a freecodecamp lesson, change its domain and path
+    if (url.host === 'learn.freecodecamp.org') {
+      url.host = window.location.host;
+      // TODO: it would be nice to not require that the FCC
+      // app knows about the paths in the platform UI, but
+      // creating a way to share this info would be complex and
+      // time consuming, so we can handle it when we get another
+      // provider.
+      url.pathname = `learn/freecodecamp/${url.pathname}`;
+    }
+
+    // now open the url in a new tab
+    window.open(url, '_blank');
+  };
+
   updateOnlineStatus = () => {
     const { onlineStatusChange } = this.props;
     const isOnline =