fix(i18n): use withPrefix for custom paths (#40591)

client/src/__mocks__/gatsby.js

@@ -4,6 +4,8 @@ const React = require('react');
 
 const gatsby = jest.requireActual('gatsby');
 
+const { clientLocale } = require('../../config/env');
+
 module.exports = {
   ...gatsby,
   navigate: jest.fn(),
@@ -26,6 +28,13 @@ module.exports = {
         href: to
       })
   ),
+  withPrefix: jest.fn().mockImplementation(path => {
+    const pathPrefix =
+      clientLocale === 'english' || clientLocale === 'chinese'
+        ? ''
+        : '/' + clientLocale;
+    return pathPrefix + path;
+  }),
   StaticQuery: jest.fn(),
   useStaticQuery: jest.fn()
 };

client/src/components/RedirectHome.js

@@ -1,3 +1,4 @@
 import createRedirect from './createRedirect';
+import { withPrefix } from 'gatsby';
 
-export default createRedirect('/');
+export default createRedirect(withPrefix('/'));

client/src/pages/404.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Router } from '@reach/router';
+import { withPrefix } from 'gatsby';
 
 import FourOhFour from '../components/FourOhFour';
 /* eslint-disable max-len */
@@ -9,7 +10,7 @@ import ShowProfileOrFourOhFour from '../client-only-routes/ShowProfileOrFourOhFo
 function FourOhFourPage() {
   return (
     <Router>
-      <ShowProfileOrFourOhFour path='/:maybeUser' />
+      <ShowProfileOrFourOhFour path={withPrefix('/:maybeUser')} />
       <FourOhFour default={true} />
     </Router>
   );

client/src/pages/certification.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Router } from '@reach/router';
+import { withPrefix } from 'gatsby';
 
 import RedirectHome from '../components/RedirectHome';
 import ShowCertification from '../client-only-routes/ShowCertification';
@@ -10,7 +11,9 @@ class Certification extends Component {
   render() {
     return (
       <Router>
-        <ShowCertification path='/certification/:username/:certName' />
+        <ShowCertification
+          path={withPrefix('/certification/:username/:certName')}
+        />
         <RedirectHome default={true} />
       </Router>
     );

client/src/pages/challenges.js

@@ -1,11 +1,7 @@
 // this exists purely to redirect legacy challenge paths to /learn
 import React from 'react';
 import { Router } from '@reach/router';
-import { navigate } from 'gatsby';
-
-import createRedirect from '../components/createRedirect';
-
-const RedirectToLearn = createRedirect('/learn');
+import { navigate, withPrefix } from 'gatsby';
 
 const Redirect = props => {
   if (typeof window !== 'undefined') {
@@ -15,18 +11,18 @@ const Redirect = props => {
 };
 
 const Challenges = () => (
-  <Router basepath='/challenges'>
+  <Router basepath={withPrefix('/challenges')}>
     <Redirect path='/:superBlock/' />
     <Redirect path='/:superBlock/:block/' />
     <Redirect path='/:superBlock/:block/:challenge' />
-    <RedirectToLearn default={true} />
+    <Redirect default={true} />
   </Router>
 );
 
 Challenges.displayName = 'Challenges';
 
 export function toLearnPath({ superBlock, block, challenge }) {
-  let path = '/learn';
+  let path = withPrefix('/learn');
   if (superBlock) path += `/${superBlock}`;
   if (block) path += `/${block}`;
   if (challenge) path += `/${challenge}`;

client/src/pages/challenges.test.js

@@ -1,19 +1,22 @@
 /* global expect */
 import { toLearnPath } from './challenges';
+import { withPrefix } from 'gatsby';
 
 describe('toLearnPath', () => {
   it('should return a string', () => {
     expect(typeof toLearnPath({})).toBe('string');
   });
   it('should include /learn', () => {
-    expect(toLearnPath({})).toMatch(/\/learn/);
+    expect(toLearnPath({})).toMatch(withPrefix('/learn'));
   });
   it('should include superBlock after learn', () => {
-    expect(toLearnPath({ superBlock: 'testSuper' })).toBe('/learn/testSuper');
+    expect(toLearnPath({ superBlock: 'testSuper' })).toBe(
+      withPrefix('/learn/testSuper')
+    );
   });
   it('should include superBlock, then block after learn', () => {
     expect(toLearnPath({ superBlock: 'testSuper', block: 'testBlock' })).toBe(
-      '/learn/testSuper/testBlock'
+      withPrefix('/learn/testSuper/testBlock')
     );
   });
   it('should include superBlock, block, then challenge after learn', () => {
@@ -23,6 +26,6 @@ describe('toLearnPath', () => {
         block: 'testBlock',
         challenge: 'testChallenge'
       })
-    ).toBe('/learn/testSuper/testBlock/testChallenge');
+    ).toBe(withPrefix('/learn/testSuper/testBlock/testChallenge'));
   });
 });

client/src/pages/settings.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Router } from '@reach/router';
+import { withPrefix } from 'gatsby';
 
 import RedirectHome from '../components/RedirectHome';
 import ShowSettings from '../client-only-routes/ShowSettings';
@@ -7,7 +8,7 @@ import ShowSettings from '../client-only-routes/ShowSettings';
 function Settings() {
   return (
     <Router>
-      <ShowSettings path='/settings' />
+      <ShowSettings path={withPrefix('/settings')} />
       <RedirectHome default={true} />
     </Router>
   );

client/src/pages/unsubscribed.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Router } from '@reach/router';
+import { withPrefix } from 'gatsby';
 
 import RedirectHome from '../components/RedirectHome';
 import ShowUnsubscribed from '../client-only-routes/ShowUnsubscribed';
@@ -7,8 +8,8 @@ import ShowUnsubscribed from '../client-only-routes/ShowUnsubscribed';
 function Unsubscribed() {
   return (
     <Router>
-      <ShowUnsubscribed path='/unsubscribed/:unsubscribeId' />
-      <ShowUnsubscribed path='/unsubscribed' />
+      <ShowUnsubscribed path={withPrefix('/unsubscribed/:unsubscribeId')} />
+      <ShowUnsubscribed path={withPrefix('/unsubscribed')} />
       <RedirectHome default={true} />
     </Router>
   );

client/src/pages/user.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Router } from '@reach/router';
+import { withPrefix } from 'gatsby';
 
 import RedirectHome from '../components/RedirectHome';
 import ShowUser from '../client-only-routes/ShowUser';
@@ -7,7 +8,7 @@ import ShowUser from '../client-only-routes/ShowUser';
 function User() {
   return (
     <Router>
-      <ShowUser path='/user/:username/report-user' />
+      <ShowUser path={withPrefix('/user/:username/report-user')} />
       <RedirectHome default={true} />
     </Router>
   );