TCA-355 #comment This PR handles clicks w/in the FCC app so that they are redirected to a new window. Also removing prettier bc it sucks. #time 4h

Author: brooketopcoder

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,39 @@ class TcIntegrationLayout extends Component<TcIntegrationLayoutProps> {
     window.removeEventListener('offline', this.updateOnlineStatus);
   }
 
+  externalLinkHandler = (event: MouseEvent) => {
+    // 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 =

package.json

@@ -81,7 +81,6 @@
     "lint:challenges": "cd ./curriculum && npm run lint",
     "lint:js": "eslint --max-warnings 0 .",
     "lint:ts": "tsc && tsc -p config && tsc -p tools/ui-components && tsc -p utils",
-    "lint:prettier": "prettier --list-different .",
     "seed": "cross-env DEBUG=fcc:* node ./tools/scripts/seed/seedAuthUser",
     "seed:certified-user": "cross-env DEBUG=fcc:* node ./tools/scripts/seed/seedAuthUser certUser",
     "serve:client": "cd ./client && npm run serve",