fix: return the loader after redirect (#37432)

Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>

client/src/client-only-routes/ShowSettings.js

@@ -162,14 +162,13 @@ export function ShowSettings(props) {
   }
 
   if (!showLoading && !isSignedIn) {
-    return navigate(`${apiLocation}/signin?returnTo=settings`);
+    navigate(`${apiLocation}/signin?returnTo=settings`);
+    return <Loader fullScreen={true} />;
   }
 
   return (
     <Fragment>
-      <Helmet>
+      <Helmet title='Settings | freeCodeCamp.org'></Helmet>
-        <title>Settings | freeCodeCamp.org</title>
-      </Helmet>
       <Grid>
         <main>
           <Spacer size={2} />

client/src/client-only-routes/ShowSettings.test.js

@@ -7,22 +7,36 @@ import { apiLocation } from '../../config/env.json';
 import { ShowSettings } from './ShowSettings';
 
 describe('<ShowSettings />', () => {
-  it('redirects to signin page when user not logged in', () => {
+  it('renders to the DOM when user is logged in', () => {
+    const shallow = new ShallowRenderer();
+    shallow.render(<ShowSettings {...loggedInProps} />);
+    expect(navigate).toHaveBeenCalledTimes(0);
+    const result = shallow.getRenderOutput();
+    expect(result.type.toString()).toBe('Symbol(react.fragment)');
+    // Renders Helmet component rather than Loader
+    expect(result.props.children[0].props.title).toEqual(
+      'Settings | freeCodeCamp.org'
+    );
+  });
+
+  it('redirects to sign in page when user is not logged in', () => {
     const shallow = new ShallowRenderer();
     shallow.render(<ShowSettings {...loggedOutProps} />);
     expect(navigate).toHaveBeenCalledTimes(1);
     expect(navigate).toHaveBeenCalledWith(
       `${apiLocation}/signin?returnTo=settings`
     );
-    expect(true).toBeTruthy();
+    const result = shallow.getRenderOutput();
+    // Renders Loader rather than ShowSettings
+    expect(result.type.displayName).toBe('Loader');
   });
 });
 
 const navigate = jest.fn();
-const loggedOutProps = {
+const loggedInProps = {
   createFlashMessage: jest.fn(),
   hardGoTo: jest.fn(),
-  isSignedIn: false,
+  isSignedIn: true,
   navigate: navigate,
   showLoading: false,
   submitNewAbout: jest.fn(),
@@ -37,3 +51,5 @@ const loggedOutProps = {
   },
   verifyCert: jest.fn()
 };
+const loggedOutProps = { ...loggedInProps };
+loggedOutProps.isSignedIn = false;

client/src/pages/donate.js

@@ -91,7 +91,8 @@ export class DonatePage extends Component {
     }
 
     if (!showLoading && !isSignedIn) {
-      return navigate(`${apiLocation}/signin?returnTo=donate`);
+      navigate(`${apiLocation}/signin?returnTo=donate`);
+      return <Loader fullScreen={true} />;
     }
 
     return (

client/src/pages/donate.test.js

@@ -6,22 +6,38 @@ import { apiLocation } from '../../config/env.json';
 
 import { DonatePage } from './donate';
 
-describe('<ShowSettings />', () => {
+describe('<DonatePage />', () => {
-  it('redirects to signin page when user not logged in', () => {
+  it('renders to the DOM when user is logged in', () => {
+    const shallow = new ShallowRenderer();
+    shallow.render(<DonatePage {...loggedInProps} />);
+    expect(navigate).toHaveBeenCalledTimes(0);
+    const result = shallow.getRenderOutput();
+    expect(result.type.toString()).toBe('Symbol(react.fragment)');
+    // Renders Helmet component rather than Loader
+    expect(result.props.children[0].props.title).toEqual(
+      'Support our nonprofit | freeCodeCamp.org'
+    );
+  });
+
+  it('redirects to sign in page when user is not logged in', () => {
     const shallow = new ShallowRenderer();
     shallow.render(<DonatePage {...loggedOutProps} />);
     expect(navigate).toHaveBeenCalledTimes(1);
     expect(navigate).toHaveBeenCalledWith(
       `${apiLocation}/signin?returnTo=donate`
     );
-    expect(true).toBeTruthy();
+    const result = shallow.getRenderOutput();
+    // Renders Loader rather than DonatePage
+    expect(result.type.displayName).toBe('Loader');
   });
 });
 
 const navigate = jest.fn();
-const loggedOutProps = {
+const loggedInProps = {
   createFlashMessage: () => {},
-  isSignedIn: false,
+  isSignedIn: true,
   showLoading: false,
   navigate: navigate
 };
+const loggedOutProps = { ...loggedInProps };
+loggedOutProps.isSignedIn = false;

client/src/pages/portfolio.js

@@ -50,7 +50,8 @@ function ProfilePage(props) {
     return <Loader fullScreen={true} />;
   }
   if (!showLoading && !isSignedIn) {
-    return navigate(`${apiLocation}/signin?returnTo=portfolio`);
+    navigate(`${apiLocation}/signin?returnTo=portfolio`);
+    return <Loader fullScreen={true} />;
   }
   const RedirecUser = createRedirect('/' + username);
   return <RedirecUser />;