fix(client): refactor dynamic URLs based on lang (#40824)

client/src/components/Header/components/NavLinks.js

@@ -2,9 +2,11 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+
 import { Link, SkeletonSprite } from '../../helpers';
 import { updateUserFlag } from '../../../redux/settings';
 import {
+  clientLocale,
   forumLocation,
   radioLocation,
   newsLocation
@@ -132,7 +134,12 @@ export class NavLinks extends Component {
             <li key={'lang-' + lang}>
               <Link
                 className='nav-link sub-link'
-                to={createLanguageRedirect(lang)}
+                // Todo: should treat other lang client application links as external??
+                external={true}
+                to={createLanguageRedirect({
+                  clientLocale,
+                  lang
+                })}
               >
                 {langDisplayNames[lang]}
                 {i18n.language === i18nextCodes[lang] ? ' ✓' : ''}

client/src/components/createLanguageRedirect.js

@@ -1,10 +1,23 @@
-import { homeLocation, chineseHome } from '../../../config/env.json';
+const createLanguageRedirect = ({ clientLocale, lang }) => {
+  // return early if requesting the same page
+  if (clientLocale === lang) return `${window?.location}`;
 
-const createLanguageRedirect = lang => {
-  const path = window.location.pathname;
-  if (lang === 'chinese') return `${chineseHome}${path}`;
-  if (lang === 'english') return `${homeLocation}${path}`;
-  return `${homeLocation}/${lang}${path}`;
+  let path = window?.location?.pathname?.split('/');
+  path = path
+    .filter(item => (item !== clientLocale && item !== lang ? item : ''))
+    .join('/');
+
+  const domain = window?.location?.host
+    .split('.')
+    .slice(1)
+    .join('.');
+  const nextClient = lang !== 'chinese' ? 'www' : 'chinese';
+  const nextLocation = `${window?.location?.protocol}//${nextClient}.${domain}`;
+
+  if (lang === 'english' || lang === 'chinese')
+    return `${nextLocation}/${path}`;
+
+  return `${nextLocation}/${lang}/${path}`;
 };
 
 export default createLanguageRedirect;

client/src/components/createLanguageRedirect.test.js

@@ -0,0 +1,223 @@
+/* global expect */
+
+import createLanguageRedirect from './createLanguageRedirect';
+
+describe('createLanguageRedirect for clientLocale === english', () => {
+  const envVars = {
+    clientLocale: 'english'
+  };
+
+  describe('challenge page', () => {
+    const currentPageURL =
+      'https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element';
+    const chinesePageURL =
+      'https://chinese.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element';
+    const espanolPageURL =
+      'https://www.freecodecamp.org/espanol/learn/responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element';
+    const francaisPageURL =
+      'https://www.freecodecamp.org/francais/learn/responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element';
+
+    const originalLocation = window.location;
+
+    beforeEach(() => {
+      delete window.location;
+      window.location = new URL(currentPageURL);
+    });
+
+    afterEach(() => {
+      window.location = originalLocation;
+    });
+
+    it('should redirect to same version of page for lang == english', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'english'
+      });
+      expect(receivedPageURL).toBe(currentPageURL);
+    });
+
+    it('should redirect to chinese version of page', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'chinese'
+      });
+      expect(receivedPageURL).toBe(chinesePageURL);
+    });
+
+    it('should redirect to espanol version of page', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'espanol'
+      });
+      expect(receivedPageURL).toBe(espanolPageURL);
+    });
+
+    it('should redirect to francais version of page', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'francais'
+      });
+      expect(receivedPageURL).toBe(francaisPageURL);
+    });
+  });
+
+  describe('settings page', () => {
+    const currentPageURL = 'https://www.freecodecamp.org/settings';
+    const chinesePageURL = 'https://chinese.freecodecamp.org/settings';
+    const espanolPageURL = 'https://www.freecodecamp.org/espanol/settings';
+    const francaisPageURL = 'https://www.freecodecamp.org/francais/settings';
+
+    const originalLocation = window.location;
+
+    beforeEach(() => {
+      delete window.location;
+      window.location = new URL(currentPageURL);
+    });
+
+    afterEach(() => {
+      window.location = originalLocation;
+    });
+
+    it('should redirect to same version of page for lang == english', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'english'
+      });
+      expect(receivedPageURL).toBe(currentPageURL);
+    });
+
+    it('should redirect to chinese version of page', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'chinese'
+      });
+      expect(receivedPageURL).toBe(chinesePageURL);
+    });
+
+    it('should redirect to espanol version of page', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'espanol'
+      });
+      expect(receivedPageURL).toBe(espanolPageURL);
+    });
+
+    it('should redirect to francais version of page', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'francais'
+      });
+      expect(receivedPageURL).toBe(francaisPageURL);
+    });
+  });
+});
+
+describe('createLanguageRedirect for clientLocale === chinese', () => {
+  const envVars = {
+    clientLocale: 'chinese'
+  };
+
+  describe('challenge page', () => {
+    const currentPageURL =
+      'https://chinese.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element';
+    const englishPageURL =
+      'https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element';
+    const espanolPageURL =
+      'https://www.freecodecamp.org/espanol/learn/responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element';
+    const francaisPageURL =
+      'https://www.freecodecamp.org/francais/learn/responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element';
+
+    const originalLocation = window.location;
+
+    beforeEach(() => {
+      delete window.location;
+      window.location = new URL(currentPageURL);
+    });
+
+    afterEach(() => {
+      window.location = originalLocation;
+    });
+
+    it('should redirect to same version of page for lang == chinese', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'chinese'
+      });
+      expect(receivedPageURL).toBe(currentPageURL);
+    });
+
+    it('should redirect to english version of page', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'english'
+      });
+      expect(receivedPageURL).toBe(englishPageURL);
+    });
+
+    it('should redirect to espanol version of page', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'espanol'
+      });
+      expect(receivedPageURL).toBe(espanolPageURL);
+    });
+
+    it('should redirect to francais version of page', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'francais'
+      });
+      expect(receivedPageURL).toBe(francaisPageURL);
+    });
+  });
+
+  describe('settings page', () => {
+    const currentPageURL = 'https://chinese.freecodecamp.org/settings';
+    const englishPageURL = 'https://www.freecodecamp.org/settings';
+    const espanolPageURL = 'https://www.freecodecamp.org/espanol/settings';
+    const francaisPageURL = 'https://www.freecodecamp.org/francais/settings';
+
+    const originalLocation = window.location;
+
+    beforeEach(() => {
+      delete window.location;
+      window.location = new URL(currentPageURL);
+    });
+
+    afterEach(() => {
+      window.location = originalLocation;
+    });
+
+    it('should redirect to same version of page for lang == chinese', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'chinese'
+      });
+      expect(receivedPageURL).toBe(currentPageURL);
+    });
+
+    it('should redirect to english version of page', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'english'
+      });
+      expect(receivedPageURL).toBe(englishPageURL);
+    });
+
+    it('should redirect to espanol version of page', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'espanol'
+      });
+      expect(receivedPageURL).toBe(espanolPageURL);
+    });
+
+    it('should redirect to francais version of page', () => {
+      const receivedPageURL = createLanguageRedirect({
+        ...envVars,
+        lang: 'francais'
+      });
+      expect(receivedPageURL).toBe(francaisPageURL);
+    });
+  });
+});

config/env.js

@@ -24,13 +24,11 @@ const {
   ALGOLIA_API_KEY: algoliaAPIKey,
   PAYPAL_CLIENT_ID: paypalClientId,
   DEPLOYMENT_ENV: deploymentEnv,
-  SHOW_UPCOMING_CHANGES: showUpcomingChanges,
-  CHINESE_HOME: chineseHome
+  SHOW_UPCOMING_CHANGES: showUpcomingChanges
 } = process.env;
 
 const locations = {
   homeLocation,
-  chineseHome: !chineseHome ? 'https://chinese.freecodecamp.org' : chineseHome,
   apiLocation,
   forumLocation,
   newsLocation,

sample.env

@@ -65,7 +65,6 @@ API_LOCATION='http://localhost:3000'
 FORUM_LOCATION='https://forum.freecodecamp.org'
 NEWS_LOCATION='https://www.freecodecamp.org/news'
 RADIO_LOCATION='https://coderadio.freecodecamp.org'
-CHINESE_HOME='https://chinese.freecodecamp.org'
 
 # ---------------------
 # Debugging Mode Keys

tools/scripts/build/ensure-env.js

@@ -32,7 +32,6 @@ function checkCurriculumLocale() {
 if (FREECODECAMP_NODE_ENV !== 'development') {
   const locationKeys = [
     'homeLocation',
-    'chineseHome',
     'apiLocation',
     'forumLocation',
     'newsLocation',