diff --git a/client/src/components/Header/components/NavLinks.js b/client/src/components/Header/components/NavLinks.js index 043a4ab885..879425a225 100644 --- a/client/src/components/Header/components/NavLinks.js +++ b/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 {
  • {langDisplayNames[lang]} {i18n.language === i18nextCodes[lang] ? ' ✓' : ''} diff --git a/client/src/components/createLanguageRedirect.js b/client/src/components/createLanguageRedirect.js index edef855bea..34444c68f8 100644 --- a/client/src/components/createLanguageRedirect.js +++ b/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; diff --git a/client/src/components/createLanguageRedirect.test.js b/client/src/components/createLanguageRedirect.test.js new file mode 100644 index 0000000000..74347d7144 --- /dev/null +++ b/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); + }); + }); +}); diff --git a/config/env.js b/config/env.js index 81887a5247..8c0918ecaf 100644 --- a/config/env.js +++ b/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, diff --git a/sample.env b/sample.env index bacf27e9b5..a93cc53c74 100644 --- a/sample.env +++ b/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 diff --git a/tools/scripts/build/ensure-env.js b/tools/scripts/build/ensure-env.js index 2f5fc87eb2..ad843e1c5b 100644 --- a/tools/scripts/build/ensure-env.js +++ b/tools/scripts/build/ensure-env.js @@ -32,7 +32,6 @@ function checkCurriculumLocale() { if (FREECODECAMP_NODE_ENV !== 'development') { const locationKeys = [ 'homeLocation', - 'chineseHome', 'apiLocation', 'forumLocation', 'newsLocation',