fix: show profile link when user signed in on landing page (#39983)

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

@@ -23,14 +23,9 @@ describe('<UniversalNav />', () => {
 });
 
 describe('<NavLinks />', () => {
-  it('shows Curriculum and Sign In buttons on landing page', () => {
+  it('shows Curriculum and Sign In buttons when not signed in', () => {
     const landingPageProps = {
-      user: {
+      pending: false
-        username: 'test-user',
-        picture: 'https://freecodecamp.org/image.png'
-      },
-      pending: false,
-      pathName: '/'
     };
     const shallow = new ShallowRenderer();
     shallow.render(<AuthOrProfile {...landingPageProps} />);
@@ -48,11 +43,9 @@ describe('<NavLinks />', () => {
     const defaultUserProps = {
       user: {
         username: 'test-user',
-        picture: 'https://freecodecamp.org/image.png',
+        picture: 'https://freecodecamp.org/image.png'
-        isDonating: true
       },
-      pending: false,
+      pending: false
-      pathName: '/learn'
     };
     const shallow = new ShallowRenderer();
     shallow.render(<AuthOrProfile {...defaultUserProps} />);
@@ -68,8 +61,7 @@ describe('<NavLinks />', () => {
         username: 'test-user',
         picture: 'https://freecodecamp.org/image.png'
       },
-      pending: false,
+      pending: false
-      pathName: '/learn'
     };
 
     const componentTree = renderer
@@ -86,8 +78,7 @@ describe('<NavLinks />', () => {
         picture: 'https://freecodecamp.org/image.png',
         isDonating: true
       },
-      pending: false,
+      pending: false
-      pathName: '/learn'
     };
     const componentTree = renderer
       .create(<AuthOrProfile {...donatingUserProps} />)
@@ -103,8 +94,7 @@ describe('<NavLinks />', () => {
         picture: 'https://freecodecamp.org/image.png',
         yearsTopContributor: [2020]
       },
-      pending: false,
+      pending: false
-      pathName: '/learn'
     };
 
     const componentTree = renderer
@@ -121,8 +111,7 @@ describe('<NavLinks />', () => {
         isDonating: true,
         yearsTopContributor: [2020]
       },
-      pending: false,
+      pending: false
-      pathName: '/learn'
     };
     const componentTree = renderer
       .create(<AuthOrProfile {...topDonatingContributorUserProps} />)

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

@@ -6,23 +6,22 @@ import Login from '../components/Login';
 const propTypes = {
   displayMenu: PropTypes.bool,
   fetchState: PropTypes.shape({ pending: PropTypes.bool }),
-  pathName: PropTypes.string.isRequired,
   user: PropTypes.object
 };
 
-export function AuthOrProfile({ user, pathName, pending }) {
+export function AuthOrProfile({ user, pending }) {
   const isUserDonating = user && user.isDonating;
   const isUserSignedIn = user && user.username;
   const isTopContributor =
     user && user.yearsTopContributor && user.yearsTopContributor.length > 0;
 
-  if (pending && pathName !== '/') {
+  if (pending) {
     return (
       <div className='nav-skeleton'>
         <SkeletonSprite />
       </div>
     );
-  } else if (pathName === '/' || !isUserSignedIn) {
+  } else if (!isUserSignedIn) {
     return (
       <>
         <li>
@@ -57,12 +56,12 @@ export function AuthOrProfile({ user, pathName, pending }) {
   }
 }
 
-export function NavLinks({ displayMenu, pathName, user, fetchState }) {
+export function NavLinks({ displayMenu, user, fetchState }) {
   const { pending } = fetchState;
   return (
     <div className='main-nav-group'>
       <ul className={'nav-list' + (displayMenu ? ' display-flex' : '')}>
-        <AuthOrProfile pathName={pathName} pending={pending} user={user} />
+        <AuthOrProfile pending={pending} user={user} />
       </ul>
     </div>
   );

client/src/components/Header/components/UniversalNav.js

@@ -13,7 +13,6 @@ export const UniversalNav = ({
   toggleDisplayMenu,
   menuButtonRef,
   searchBarRef,
-  pathName,
   user,
   fetchState
 }) => (
@@ -33,12 +32,7 @@ export const UniversalNav = ({
       </Link>
     </div>
     <div className='universal-nav-right main-nav'>
-      <NavLinks
+      <NavLinks displayMenu={displayMenu} fetchState={fetchState} user={user} />
-        displayMenu={displayMenu}
-        fetchState={fetchState}
-        pathName={pathName}
-        user={user}
-      />
     </div>
     <MenuButton
       displayMenu={displayMenu}
@@ -55,7 +49,6 @@ UniversalNav.propTypes = {
   displayMenu: PropTypes.bool,
   fetchState: PropTypes.shape({ pending: PropTypes.bool }),
   menuButtonRef: PropTypes.object,
-  pathName: PropTypes.string.isRequired,
   searchBarRef: PropTypes.object,
   toggleDisplayMenu: PropTypes.func,
   user: PropTypes.object

client/src/components/Header/index.js

@@ -9,7 +9,6 @@ import './header.css';
 
 const propTypes = {
   fetchState: PropTypes.shape({ pending: PropTypes.bool }),
-  pathName: PropTypes.string.isRequired,
   user: PropTypes.object
 };
 
@@ -54,7 +53,7 @@ export class Header extends React.Component {
   }
   render() {
     const { displayMenu } = this.state;
-    const { fetchState, pathName, user } = this.props;
+    const { fetchState, user } = this.props;
     return (
       <>
         <Helmet>
@@ -65,7 +64,6 @@ export class Header extends React.Component {
             displayMenu={displayMenu}
             fetchState={fetchState}
             menuButtonRef={this.menuButtonRef}
-            pathName={pathName}
             searchBarRef={this.searchBarRef}
             toggleDisplayMenu={this.toggleDisplayMenu}
             user={user}

client/src/components/layouts/Default.js

@@ -159,8 +159,7 @@ class DefaultLayout extends Component {
       showFooter = true,
       theme = 'default',
       user,
-      useTheme = true,
+      useTheme = true
-      pathname
     } = this.props;
 
     return (
@@ -226,7 +225,7 @@ class DefaultLayout extends Component {
           <style>{fontawesome.dom.css()}</style>
         </Helmet>
         <WithInstantSearch>
-          <Header fetchState={fetchState} pathName={pathname} user={user} />
+          <Header fetchState={fetchState} user={user} />
           <div className={`default-layout`}>
             <OfflineWarning isOnline={isOnline} isSignedIn={isSignedIn} />
             {hasMessage && flashMessage ? (