[C-4387] Add new responsive search page

packages/common/src/services/remote-config/feature-flags.ts

@@ -62,7 +62,8 @@ export enum FeatureFlags {
   USE_SDK_REWARDS = 'use_sdk_rewards',
   DISCOVERY_TIP_REACTIONS = 'discovery_tip_reactions',
   USE_ADDRESS_LOOKUPS = 'use_address_lookups',
-  MANAGER_MODE = 'manager_mode'
+  MANAGER_MODE = 'manager_mode',
+  SEARCH_V2 = 'search_v2'
 }
 
 type FlagDefaults = Record<FeatureFlags, boolean>
@@ -140,5 +141,6 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.USE_SDK_REWARDS]: false,
   [FeatureFlags.DISCOVERY_TIP_REACTIONS]: false,
   [FeatureFlags.USE_ADDRESS_LOOKUPS]: false,
-  [FeatureFlags.MANAGER_MODE]: false
+  [FeatureFlags.MANAGER_MODE]: false,
+  [FeatureFlags.SEARCH_V2]: false
 }

packages/harmony/src/components/index.ts

@@ -19,3 +19,4 @@ export * from './progress-bar'
 export * from './scrubber'
 export * from './skeleton'
 export * from './artwork'
+export { default as LoadingSpinner } from './loading-spinner/LoadingSpinner'

packages/web/src/app/AppProviders.tsx

@@ -6,7 +6,7 @@ import { LastLocationProvider } from 'react-router-last-location'
 
 import { RouterContextProvider } from 'components/animated-switch/RouterContextProvider'
 import { HeaderContextProvider } from 'components/header/mobile/HeaderContextProvider'
-import { NavProvider } from 'components/nav/store/context'
+import { NavProvider } from 'components/nav/mobile/NavContext'
 import { ScrollProvider } from 'components/scroll-provider/ScrollProvider'
 import { ToastContextProvider } from 'components/toast/ToastContext'
 import { getSystemAppearance, getTheme } from 'utils/theme/theme'

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

@@ -81,6 +81,7 @@ import RepostsPage from 'pages/reposts-page/RepostsPage'
 import { RequiresUpdate } from 'pages/requires-update/RequiresUpdate'
 import SavedPage from 'pages/saved-page/SavedPage'
 import SearchPage from 'pages/search-page/SearchPage'
+import { SearchPageV2 } from 'pages/search-page-v2/SearchPageV2'
 import SettingsPage from 'pages/settings-page/SettingsPage'
 import { SubPage } from 'pages/settings-page/components/mobile/SettingsPage'
 import SmartCollectionPage from 'pages/smart-collection/SmartCollectionPage'
@@ -398,7 +399,8 @@ class WebPlayer extends Component {
   }
 
   render() {
-    const { incrementScroll, decrementScroll, userHandle } = this.props
+    const { incrementScroll, decrementScroll, userHandle, isSearchV2Enabled } =
+      this.props
 
     const {
       showWebUpdateBanner,
@@ -647,23 +649,31 @@ class WebPlayer extends Component {
 
                 <Route
                   path={SEARCH_CATEGORY_PAGE}
-                  render={(props) => (
-                    <SearchPage
-                      {...props}
-                      scrollToTop={this.scrollToTop}
-                      containerRef={this.props.mainContentRef.current}
-                    />
-                  )}
+                  render={(props) =>
+                    isSearchV2Enabled ? (
+                      <SearchPageV2 />
+                    ) : (
+                      <SearchPage
+                        {...props}
+                        scrollToTop={this.scrollToTop}
+                        containerRef={this.props.mainContentRef.current}
+                      />
+                    )
+                  }
                 />
                 <Route
                   path={SEARCH_PAGE}
-                  render={(props) => (
-                    <SearchPage
-                      {...props}
-                      scrollToTop={this.scrollToTop}
-                      containerRef={this.props.mainContentRef.current}
-                    />
-                  )}
+                  render={(props) =>
+                    isSearchV2Enabled ? (
+                      <SearchPageV2 />
+                    ) : (
+                      <SearchPage
+                        {...props}
+                        scrollToTop={this.scrollToTop}
+                        containerRef={this.props.mainContentRef.current}
+                      />
+                    )
+                  }
                 />
 
                 <DesktopRoute
@@ -990,7 +1000,8 @@ const mapStateToProps = (state) => ({
   accountStatus: getAccountStatus(state),
   signOnStatus: getSignOnStatus(state),
   showCookieBanner: getShowCookieBanner(state),
-  isChatEnabled: getFeatureEnabled(FeatureFlags.CHAT_ENABLED)
+  isChatEnabled: getFeatureEnabled(FeatureFlags.CHAT_ENABLED),
+  isSearchV2Enabled: getFeatureEnabled(FeatureFlags.SEARCH_V2)
 })
 
 const mapDispatchToProps = (dispatch) => ({

packages/web/src/components/add-to-collection/mobile/AddToCollection.tsx

@@ -14,8 +14,8 @@ import { Dispatch } from 'redux'
 import { CollectionCard } from 'components/collection'
 import CardLineup from 'components/lineup/CardLineup'
 import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
+import { useTemporaryNavContext } from 'components/nav/mobile/NavContext'
 import TextElement, { Type } from 'components/nav/mobile/TextElement'
-import { useTemporaryNavContext } from 'components/nav/store/context'
 import { ToastContext } from 'components/toast/ToastContext'
 import useHasChangedRoute from 'hooks/useHasChangedRoute'
 import NewPlaylistButton from 'pages/saved-page/components/mobile/NewPlaylistButton'

packages/web/src/components/edit-playlist/mobile/EditPlaylistPage.tsx

@@ -23,8 +23,8 @@ import DynamicImage from 'components/dynamic-image/DynamicImage'
 import EditableRow, { Format } from 'components/groupable-list/EditableRow'
 import GroupableList from 'components/groupable-list/GroupableList'
 import Grouping from 'components/groupable-list/Grouping'
+import { useTemporaryNavContext } from 'components/nav/mobile/NavContext'
 import TextElement, { Type } from 'components/nav/mobile/TextElement'
-import { useTemporaryNavContext } from 'components/nav/store/context'
 import TrackList from 'components/track/mobile/TrackList'
 import { useCollectionCoverArt } from 'hooks/useCollectionCoverArt'
 import useHasChangedRoute from 'hooks/useHasChangedRoute'

packages/web/src/components/header/desktop/Header.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 
 import { BackButton } from 'components/back-button/BackButton'
 import { HeaderGutter } from 'components/header/desktop/HeaderGutter'
+import { useMedia } from 'hooks/useMedia'
 
 import styles from './Header.module.css'
 
@@ -32,6 +33,8 @@ const Header = (props) => {
     [styles.page]: variant === 'page'
   }
 
+  const { isMobile } = useMedia()
+
   return (
     <>
       <HeaderGutter
@@ -40,12 +43,16 @@ const Header = (props) => {
         scrollBarWidth={scrollBarWidth}
       />
       <div
-        className={cn(
-          styles.container,
-          variantStyle,
-          { [containerStyles]: !!containerStyles },
-          { [styles.containerWithBar]: !!bottomBar }
-        )}
+        className={
+          !isMobile
+            ? cn(
+                styles.container,
+                variantStyle,
+                { [containerStyles]: !!containerStyles },
+                { [styles.containerWithBar]: !!bottomBar }
+              )
+            : undefined
+        }
       >
         <div
           className={cn(styles.maxWidthWrapper, {

packages/web/src/components/nav/mobile/NavBar.tsx

@@ -1,5 +1,6 @@
 import { useState, useContext, useCallback, useEffect } from 'react'
 
+import { useFeatureFlag } from '@audius/common/hooks'
 import { Status } from '@audius/common/models'
 import { FeatureFlags } from '@audius/common/services'
 import { formatCount } from '@audius/common/utils'
@@ -18,6 +19,7 @@ import { Link } from 'react-router-dom'
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
 import { useTransition, animated } from 'react-spring'
 
+import { useHistoryContext } from 'app/HistoryProvider'
 import {
   RouterContext,
   SlideDirection
@@ -26,7 +28,7 @@ import NavContext, {
   LeftPreset,
   CenterPreset,
   RightPreset
-} from 'components/nav/store/context'
+} from 'components/nav/mobile/NavContext'
 import SearchBar from 'components/search-bar/SearchBar'
 import { useFlag } from 'hooks/useRemoteConfig'
 import { getIsIOS } from 'utils/browser'
@@ -52,6 +54,7 @@ interface NavBarProps {
 const messages = {
   signUp: 'Sign Up',
   searchPlaceholder: 'Search Audius',
+  searchPlaceholderV2: 'What do you want to listen to?',
   earlyAccess: 'Early Access'
 }
 
@@ -70,7 +73,11 @@ const NavBar = ({
     location: { pathname }
   }
 }: NavBarProps) => {
+  const { history } = useHistoryContext()
   const { leftElement, centerElement, rightElement } = useContext(NavContext)!
+  const { isEnabled: isSearchV2Enabled } = useFeatureFlag(
+    FeatureFlags.SEARCH_V2
+  )
 
   const [isSearching, setIsSearching] = useState(false)
   const [searchValue, setSearchValue] = useState('')
@@ -84,11 +91,17 @@ const NavBar = ({
   useEffect(() => {
     const splitPath = pathname.split('/')
     const isSearch = splitPath.length > 1 && splitPath[1] === 'search'
-    if (!isSearch) {
-      setIsSearching(false)
-    }
+    setIsSearching(isSearch)
   }, [pathname])
 
+  const handleOpenSearch = useCallback(() => {
+    if (isSearchV2Enabled) {
+      history.push(`/search`)
+    } else {
+      setIsSearching(true)
+    }
+  }, [history, isSearchV2Enabled])
+
   const onCloseSearch = () => {
     setIsSearching(false)
     setSearchValue('')
@@ -243,13 +256,15 @@ const NavBar = ({
         {rightElement === RightPreset.SEARCH ? (
           <SearchBar
             open={isSearching}
-            onOpen={() => {
-              setIsSearching(true)
-            }}
+            onOpen={handleOpenSearch}
             onClose={onCloseSearch}
             value={searchValue}
             onSearch={setSearchValue}
-            placeholder={messages.searchPlaceholder}
+            placeholder={
+              isSearchV2Enabled
+                ? messages.searchPlaceholderV2
+                : messages.searchPlaceholder
+            }
             showHeader={false}
             className={cn(
               styles.searchBar,

packages/web/src/components/notification/NotificationPage.tsx

@@ -12,7 +12,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import loadingSpinner from 'assets/animations/loadingSpinner.json'
 import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
-import NavContext, { LeftPreset } from 'components/nav/store/context'
+import NavContext, { LeftPreset } from 'components/nav/mobile/NavContext'
 
 import { EmptyNotifications } from './EmptyNotifications'
 import { Notification } from './Notification'

packages/web/src/components/search-bar/ConnectedSearchBar.jsx

@@ -5,6 +5,7 @@ import {
   imageProfilePicEmpty as profilePicEmpty
 } from '@audius/common/assets'
 import { Name, SquareSizes } from '@audius/common/models'
+import { FeatureFlags } from '@audius/common/services'
 import { getTierForUser } from '@audius/common/store'
 import { push as pushRoute } from 'connected-react-router'
 import { has } from 'lodash'
@@ -20,7 +21,9 @@ import {
   clearSearch
 } from 'common/store/search-bar/actions'
 import { getSearch } from 'common/store/search-bar/selectors'
-import Bar from 'components/search/SearchBar'
+import SearchBar from 'components/search/SearchBar'
+import SearchBarV2 from 'components/search/SearchBarV2'
+import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
 import { collectionPage, profilePage, getPathname } from 'utils/route'
 
 import styles from './ConnectedSearchBar.module.css'
@@ -256,9 +259,12 @@ class ConnectedSearchBar extends Component {
       0
     )
     const { status, searchText } = this.props.search
+    const SearchBarComponent = this.props.isSearchV2Enabled
+      ? SearchBarV2
+      : SearchBar
     return (
       <div className={styles.search}>
-        <Bar
+        <SearchBarComponent
           value={this.state.value}
           isTagSearch={this.isTagSearch()}
           status={status}
@@ -277,7 +283,8 @@ class ConnectedSearchBar extends Component {
 }
 
 const mapStateToProps = (state, props) => ({
-  search: getSearch(state, props)
+  search: getSearch(state, props),
+  isSearchV2Enabled: getFeatureEnabled(FeatureFlags.SEARCH_V2)
 })
 const mapDispatchToProps = (dispatch) => ({
   fetchSearch: (value) => dispatch(fetchSearch(value)),