fix(client): fix i18n external locations in nav (#42995)

client/i18n/locales/chinese-traditional/links.json

@@ -13,5 +13,9 @@
   },
   "donate": {
     "other-ways-url": "https://chinese.freecodecamp.org/news/how-to-donate-to-free-code-camp/"
+  },
+  "nav": {
+    "forum": "https://chinese.freecodecamp.org/forum/",
+    "news": "https://chinese.freecodecamp.org/news/"
   }
 }

client/i18n/locales/chinese/links.json

@@ -13,5 +13,9 @@
   },
   "donate": {
     "other-ways-url": "https://chinese.freecodecamp.org/news/how-to-donate-to-free-code-camp/"
+  },
+  "nav": {
+    "forum": "https://chinese.freecodecamp.org/forum/",
+    "news": "https://chinese.freecodecamp.org/news/"
   }
 }

client/i18n/locales/english/links.json

@@ -13,5 +13,9 @@
   },
   "donate": {
     "other-ways-url": "https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp"
+  },
+  "nav": {
+    "forum": "https://forum.freecodecamp.org/",
+    "news": "https://freecodecamp.org/news/"
   }
 }

client/i18n/locales/espanol/links.json

@@ -13,5 +13,9 @@
   },
   "donate": {
     "other-ways-url": "https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp"
+  },
+  "nav": {
+    "forum": "https://forum.freecodecamp.org/c/espanol/",
+    "news": "https://freecodecamp.org/espanol/news/"
   }
 }

client/i18n/locales/italian/links.json

@@ -13,5 +13,9 @@
   },
   "donate": {
     "other-ways-url": "https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp"
+  },
+  "nav": {
+    "forum": "https://forum.freecodecamp.org/c/italiano/",
+    "news": "https://freecodecamp.org/italian/news/"
   }
 }

client/i18n/locales/portuguese/links.json

@@ -13,5 +13,9 @@
   },
   "donate": {
     "other-ways-url": "https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp"
+  },
+  "nav": {
+    "forum": "https://forum.freecodecamp.org/c/portugues/",
+    "news": "https://freecodecamp.org/portuguese/news/"
   }
 }

client/src/components/Header/Header.test.js

@@ -7,8 +7,9 @@ import { NavLinks } from './components/nav-links';
 import AuthOrProfile from './components/auth-or-profile';
 
 import envData from '../../../../config/env.json';
+import { useTranslation } from 'react-i18next';
 
-const { apiLocation, clientLocale } = envData;
+const { apiLocation } = envData;
 
 jest.mock('../../analytics');
 
@@ -50,6 +51,7 @@ describe('<NavLinks />', () => {
     const shallow = new ShallowRenderer();
     shallow.render(<NavLinks {...landingPageProps} />);
     const view = shallow.getRenderOutput();
+
     expect(
       hasDonateNavItem(view) &&
         hasSignInNavItem(view) &&
@@ -73,6 +75,7 @@ describe('<NavLinks />', () => {
       i18n: {
         language: 'en'
       },
+      t: useTranslation.t,
       toggleNightMode: theme => theme
     };
     const shallow = new ShallowRenderer();
@@ -102,6 +105,7 @@ describe('<NavLinks />', () => {
       i18n: {
         language: 'en'
       },
+      t: useTranslation.t,
       toggleNightMode: theme => theme
     };
     const shallow = new ShallowRenderer();
@@ -234,31 +238,16 @@ const hasProfileAndSettingsNavItems = (component, username) => {
 
 const hasForumNavItem = component => {
   const { children, to } = navigationLinks(component, 'forum');
-  const localizedForums = {
+  // TODO: test compiled TFunction value
-    chinese: 'https://chinese.freecodecamp.org/forum',
-    'chinese-traditional': 'https://chinese.freecodecamp.org/forum',
-    espanol: 'https://forum.freecodecamp.org/c/espanol/',
-    english: 'https://forum.freecodecamp.org/',
-    italian: 'https://forum.freecodecamp.org/c/italian/'
-  };
   return (
-    children[0].props.children === 'buttons.forum' &&
+    children[0].props.children === 'buttons.forum' && to === 'links:nav.forum'
-    to === localizedForums[clientLocale]
   );
 };
 
 const hasNewsNavItem = component => {
   const { children, to } = navigationLinks(component, 'news');
-  const localizedNews = {
-    chinese: 'https://chinese.freecodecamp.org/news',
-    'chinese-traditional': 'https://chinese.freecodecamp.org/news',
-    espanol: 'https://www.freecodecamp.org/espanol/news',
-    english: 'https://www.freecodecamp.org/news',
-    italian: 'https://www.freecodecamp.org/italian/news'
-  };
   return (
-    children[0].props.children === 'buttons.news' &&
+    children[0].props.children === 'buttons.news' && to === 'links:nav.news'
-    to === localizedNews[clientLocale]
   );
 };
 

client/src/components/Header/components/nav-links.tsx

@@ -23,7 +23,6 @@ import { Link } from '../../helpers';
 import { updateUserFlag } from '../../../redux/settings';
 import envData from '../../../../../config/env.json';
 import createLanguageRedirect from '../../create-language-redirect';
-import createExternalRedirect from '../../create-external-redirects';
 import {
   availableLangs,
   i18nextCodes,
@@ -118,7 +117,7 @@ export class NavLinks extends Component<NavLinksProps, {}> {
           external={true}
           key='forum'
           sameTab={false}
-          to={createExternalRedirect('forum', { clientLocale })}
+          to={t('links:nav.forum')}
         >
           <span>{t('buttons.forum')}</span>
           <FontAwesomeIcon icon={faExternalLinkAlt} />
@@ -128,7 +127,7 @@ export class NavLinks extends Component<NavLinksProps, {}> {
           external={true}
           key='news'
           sameTab={false}
-          to={createExternalRedirect('news', { clientLocale })}
+          to={t('links:nav.news')}
         >
           <span>{t('buttons.news')}</span>
           <FontAwesomeIcon icon={faExternalLinkAlt} />

client/src/components/create-external-redirects.test.ts

@@ -1,98 +0,0 @@
-import createExternalRedirect from './create-external-redirects';
-
-describe('createExternalRedirects', () => {
-  describe('english redirects', () => {
-    const envVars = {
-      clientLocale: 'english'
-    };
-
-    const forumURL = 'https://forum.freecodecamp.org/';
-    const newsURL = 'https://www.freecodecamp.org/news';
-
-    it('should generate correct forum link', () => {
-      const receivedUrl = createExternalRedirect('forum', { ...envVars });
-      expect(receivedUrl).toBe(forumURL);
-    });
-
-    it('should generate correct news link', () => {
-      const receivedUrl = createExternalRedirect('news', { ...envVars });
-      expect(receivedUrl).toBe(newsURL);
-    });
-  });
-
-  describe('chinese redirects', () => {
-    const envVars = {
-      clientLocale: 'chinese'
-    };
-
-    const forumURL = 'https://chinese.freecodecamp.org/forum';
-    const newsURL = 'https://chinese.freecodecamp.org/news';
-
-    it('should generate correct forum link', () => {
-      const receivedUrl = createExternalRedirect('forum', { ...envVars });
-      expect(receivedUrl).toBe(forumURL);
-    });
-
-    it('should generate correct news link', () => {
-      const receivedUrl = createExternalRedirect('news', { ...envVars });
-      expect(receivedUrl).toBe(newsURL);
-    });
-  });
-
-  describe('spanish redirects', () => {
-    const envVars = {
-      clientLocale: 'espanol'
-    };
-
-    const forumURL = 'https://forum.freecodecamp.org/c/espanol/';
-    const newsURL = 'https://www.freecodecamp.org/espanol/news';
-
-    it('should generate correct forum link', () => {
-      const receivedUrl = createExternalRedirect('forum', { ...envVars });
-      expect(receivedUrl).toBe(forumURL);
-    });
-
-    it('should generate correct news link', () => {
-      const receivedUrl = createExternalRedirect('news', { ...envVars });
-      expect(receivedUrl).toBe(newsURL);
-    });
-  });
-
-  describe('french redirects', () => {
-    const envVars = {
-      clientLocale: 'francais'
-    };
-
-    const forumURL = 'https://forum.freecodecamp.org/c/francais/';
-    const newsURL = 'https://www.freecodecamp.org/francais/news';
-
-    it('should generate correct forum link', () => {
-      const receivedUrl = createExternalRedirect('forum', { ...envVars });
-      expect(receivedUrl).toBe(forumURL);
-    });
-
-    it('should generate correct news link', () => {
-      const receivedUrl = createExternalRedirect('news', { ...envVars });
-      expect(receivedUrl).toBe(newsURL);
-    });
-  });
-
-  describe('chinese-traditional redirects', () => {
-    const envVars = {
-      clientLocale: 'chinese-traditional'
-    };
-
-    const forumURL = 'https://chinese.freecodecamp.org/forum';
-    const newsURL = 'https://chinese.freecodecamp.org/news';
-
-    it('should generate correct forum link', () => {
-      const receivedUrl = createExternalRedirect('forum', { ...envVars });
-      expect(receivedUrl).toBe(forumURL);
-    });
-
-    it('should generate correct news link', () => {
-      const receivedUrl = createExternalRedirect('news', { ...envVars });
-      expect(receivedUrl).toBe(newsURL);
-    });
-  });
-});

client/src/components/create-external-redirects.ts

@@ -1,24 +0,0 @@
-import envData from '../../../config/env.json';
-
-const { forumLocation } = envData;
-
-const createExternalRedirect = (
-  page: string,
-  { clientLocale }: { clientLocale: string }
-): string => {
-  // Handle Chinese
-  if (clientLocale === 'chinese' || clientLocale === 'chinese-traditional') {
-    return `https://chinese.freecodecamp.org/${page}`;
-  }
-
-  // Handle Others
-  const isNotEnglish = clientLocale !== 'english';
-  if (page === 'forum') {
-    return `${forumLocation}/${isNotEnglish ? 'c/' + clientLocale + '/' : ''}`;
-  }
-  return `https://www.freecodecamp.org/${
-    isNotEnglish ? clientLocale + '/news' : 'news'
-  }`;
-};
-
-export default createExternalRedirect;