fix: search conditional rendering (freeCodeCamp#57200)

Author: Sembauke

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

@@ -23,6 +23,7 @@ type UniversalNavProps = Omit<
 > & {
   fetchState: { pending: boolean };
   searchBarRef?: React.RefObject<HTMLDivElement>;
+  pathname: string;
 };
 const UniversalNav = ({
   displayMenu,
@@ -31,21 +32,20 @@ const UniversalNav = ({
   menuButtonRef,
   searchBarRef,
   user,
-  fetchState
+  fetchState,
+  pathname
 }: UniversalNavProps): JSX.Element => {
   const { pending } = fetchState;
   const { t } = useTranslation();
   const isSearchExposedWidth = useMediaQuery({
     query: `(min-width: ${SEARCH_EXPOSED_WIDTH}px)`
   });
 
-  const search =
-    typeof window !== `undefined` && isLanding(window.location.pathname) ? (
-      <SearchBarOptimized innerRef={searchBarRef} />
-    ) : (
-      <SearchBar innerRef={searchBarRef} />
-    );
-
+  const search = isLanding(pathname) ? (
+    <SearchBarOptimized innerRef={searchBarRef} />
+  ) : (
+    <SearchBar innerRef={searchBarRef} />
+  );
   return (
     <nav
       aria-label={t('aria.primary-nav')}

client/src/components/Header/index.tsx

@@ -28,6 +28,7 @@ type Props = PropsFromRedux & {
   fetchState: { pending: boolean };
   user: User;
   skipButtonText: string;
+  pathname: string;
 };
 
 class Header extends React.Component<Props, { displayMenu: boolean }> {
@@ -79,7 +80,8 @@ class Header extends React.Component<Props, { displayMenu: boolean }> {
 
   render(): JSX.Element {
     const { displayMenu } = this.state;
-    const { examInProgress, fetchState, user, skipButtonText } = this.props;
+    const { examInProgress, fetchState, user, skipButtonText, pathname } =
+      this.props;
     return (
       <header className='site-header'>
         <a
@@ -96,6 +98,7 @@ class Header extends React.Component<Props, { displayMenu: boolean }> {
             displayMenu={displayMenu}
             fetchState={fetchState}
             hideMenu={this.hideMenu}
+            pathname={pathname}
             menuButtonRef={this.menuButtonRef}
             searchBarRef={this.searchBarRef}
             showMenu={this.showMenu}

client/src/components/layouts/default.tsx

@@ -136,6 +136,7 @@ function DefaultLayout({
   superBlock,
   theme,
   user,
+  pathname,
   fetchUser
 }: DefaultLayoutProps): JSX.Element {
   const { t } = useTranslation();
@@ -269,6 +270,7 @@ function DefaultLayout({
           <Header
             fetchState={fetchState}
             user={user}
+            pathname={pathname}
             skipButtonText={t('learn.skip-to-content')}
           />
           <OfflineWarning

e2e/search-bar-optimized.spec.ts

@@ -92,4 +92,20 @@ test.describe('Search bar optimized', () => {
 
     await expect(searchInput).toHaveValue('');
   });
+
+  test('The optimized searchbar component should not render when not on the landing page', async ({
+    page,
+    isMobile
+  }) => {
+    // This means that the default search bar should be rendered ^.
+    await page.getByTestId('curriculum-map-button').nth(0).click();
+
+    if (isMobile) {
+      const menuButton = page.getByTestId('header-menu-button');
+      await expect(menuButton).toBeVisible();
+      await menuButton.click();
+    }
+
+    await expect(page.getByTestId('header-search')).toBeVisible();
+  });
 });