diff --git a/client/src/components/layouts/tc-integration.tsx b/client/src/components/layouts/tc-integration.tsx index 6f1703ac4d299b..9d9a39c48cf3e0 100755 --- a/client/src/components/layouts/tc-integration.tsx +++ b/client/src/components/layouts/tc-integration.tsx @@ -97,6 +97,7 @@ class TcIntegrationLayout extends Component { 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 { 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 =