Add search functionality in new explore page

packages/web/src/app/web-player/ServerWebPlayer.tsx

@@ -1,5 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react'
 
+import { FeatureFlags } from '@audius/common/services'
 import imageProfilePicEmpty from '@audius/common/src/assets/img/imageProfilePicEmpty2X.png'
 import '@audius/harmony/dist/harmony.css'
 import IconAudiusLogoHorizontal from '@audius/harmony/src/assets/icons/AudiusLogoHorizontal.svg'
@@ -20,6 +21,7 @@ import { ThemeProvider } from '@audius/harmony/src/foundations/theme/ThemeProvid
 import { Link, StaticRouter } from 'react-router-dom'
 import { PartialDeep } from 'type-fest'
 
+import { useFlag } from 'hooks/useRemoteConfig'
 import { SsrContextProvider } from 'ssr/SsrContext'
 import { AppState } from 'store/types'
 
@@ -51,6 +53,9 @@ type WebPlayerContentProps = {
 
 const WebPlayerContent = (props: WebPlayerContentProps) => {
   const { isMobile, children } = props
+  const { isEnabled: isSearchExploreEnabled } = useFlag(
+    FeatureFlags.SEARCH_EXPLORE
+  )
 
   if (isMobile) {
     return (
@@ -107,7 +112,7 @@ const WebPlayerContent = (props: WebPlayerContentProps) => {
               </Link>
             </Flex>
             <Flex as='li' w='100%' justifyContent='center'>
-              <Link to='/explore'>
+              <Link to={isSearchExploreEnabled ? '/search' : '/explore'}>
                 <IconExplore color='default' height={28} width={28} />
               </Link>
             </Flex>
@@ -195,7 +200,10 @@ const WebPlayerContent = (props: WebPlayerContentProps) => {
               <TextLink size='s' href='/trending'>
                 Trending
               </TextLink>
-              <TextLink size='s' href='/explore'>
+              <TextLink
+                size='s'
+                href={isSearchExploreEnabled ? '/search' : '/explore'}
+              >
                 Explore
               </TextLink>
             </Flex>

packages/web/src/app/web-player/WebPlayer.jsx

@@ -444,6 +444,7 @@ class WebPlayer extends Component {
       decrementScroll,
       userHandle,
       isWalletUIUpdateEnabled,
+      isSearchExploreEnabled,
       isDevOrStaging
     } = this.props
 
@@ -720,6 +721,8 @@ class WebPlayer extends Component {
                           }).toString()
                         }}
                       />
+                    ) : isSearchExploreEnabled ? (
+                      <ExplorePage />
                     ) : (
                       <SearchPage />
                     )
@@ -1139,12 +1142,16 @@ const FeatureFlaggedWebPlayer = (props) => {
   const { isEnabled: isWalletUIUpdateEnabled } = useFeatureFlag(
     FeatureFlags.WALLET_UI_UPDATE
   )
+  const { isEnabled: isSearchExploreEnabled } = useFeatureFlag(
+    FeatureFlags.SEARCH_EXPLORE
+  )
   const isDevOrStaging = useIsDevOrStaging()
 
   return (
     <RouterWebPlayer
       {...props}
       isWalletUIUpdateEnabled={isWalletUIUpdateEnabled}
+      isSearchExploreEnabled={isSearchExploreEnabled}
       isDevOrStaging={isDevOrStaging}
     />
   )