Remove search explore flag

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

@@ -30,7 +30,6 @@ export enum FeatureFlags {
   DOWNLOAD_ALL_TRACK_FILES = 'download_all_track_files',
   REMIX_CONTEST = 'remix_contest',
   WALLET_UI_UPDATE = 'wallet_ui_update',
-  SEARCH_EXPLORE = 'search_explore',
   EXPLORE_REMIX_SECTION = 'explore_remix_section',
   WALLET_UI_BUY_SELL = 'wallet_ui_buy_sell',
   REMIX_CONTEST_WINNERS_MILESTONE = 'remix_contest_winners_milestone',
@@ -83,7 +82,6 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.DOWNLOAD_ALL_TRACK_FILES]: false,
   [FeatureFlags.REMIX_CONTEST]: false,
   [FeatureFlags.WALLET_UI_UPDATE]: false,
-  [FeatureFlags.SEARCH_EXPLORE]: false,
   [FeatureFlags.EXPLORE_REMIX_SECTION]: false,
   [FeatureFlags.WALLET_UI_BUY_SELL]: false,
   [FeatureFlags.REMIX_CONTEST_WINNERS_MILESTONE]: false,

packages/common/src/store/sagas.ts

@@ -87,8 +87,8 @@ export const sagas = (_ctx: CommonStoreContext) => ({
   // pages/user-list/mutuals/sagas.ts
   // pages/user-list/supporting/sagas.ts
   // pages/user-list/top-supporters/sagas.ts
-  // pages/explore-page/store/sagas.ts
-  // pages/explore-page/store/exploreCollections/sagas.ts
+  // pages/search-explore-page/store/sagas.ts
+  // pages/search-explore-page/store/exploreCollections/sagas.ts
   // store/solana/sagas.ts
   // pages/trending-page/store/sagas.ts
   // pages/trending-page/store/lineups/trending/sagas.ts

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

@@ -14,9 +14,8 @@ import {
   useCurrentAccountUser,
   useHasAccount
 } from '@audius/common/api'
-import { useFeatureFlag } from '@audius/common/hooks'
 import { Client, Status } from '@audius/common/models'
-import { FeatureFlags, StringKeys } from '@audius/common/services'
+import { StringKeys } from '@audius/common/services'
 import { guestRoutes } from '@audius/common/src/utils/route'
 import { UploadType } from '@audius/common/store'
 import { route } from '@audius/common/utils'
@@ -69,7 +68,6 @@ import UserIdParserPage from 'pages/dev-tools/UserIdParserPage'
 import { EditCoinDetailsPage } from 'pages/edit-coin-details-page/EditCoinDetailsPage'
 import { EditCollectionPage } from 'pages/edit-collection-page'
 import EmptyPage from 'pages/empty-page/EmptyPage'
-import { ExplorePage } from 'pages/explore-page/ExplorePage'
 import FavoritesPage from 'pages/favorites-page/FavoritesPage'
 import { FbSharePage } from 'pages/fb-share-page/FbSharePage'
 import FeedPage from 'pages/feed-page/FeedPage'
@@ -88,6 +86,7 @@ import RemixesPage from 'pages/remixes-page/RemixesPage'
 import RepostsPage from 'pages/reposts-page/RepostsPage'
 import { RequiresUpdate } from 'pages/requires-update/RequiresUpdate'
 import { RewardsPage } from 'pages/rewards-page/RewardsPage'
+import { ExplorePage } from 'pages/search-explore-page/ExplorePage'
 import SettingsPage from 'pages/settings-page/SettingsPage'
 import { SubPage } from 'pages/settings-page/components/mobile/SettingsPage'
 import SupportingPage from 'pages/supporting-page/SupportingPage'
@@ -1020,18 +1019,9 @@ const RouterWebPlayer = withRouter(WebPlayer)
 
 // Taking this approach because the class component cannot use hooks
 const FeatureFlaggedWebPlayer = (props) => {
-  const { isEnabled: isSearchExploreEnabled } = useFeatureFlag(
-    FeatureFlags.SEARCH_EXPLORE
-  )
   const { isProduction } = useEnvironment()
 
-  return (
-    <RouterWebPlayer
-      {...props}
-      isSearchExploreEnabled={isSearchExploreEnabled}
-      isProduction={isProduction}
-    />
-  )
+  return <RouterWebPlayer {...props} isProduction={isProduction} />
 }
 
 const MainContentRouterWebPlayer = () => {

packages/web/src/pages/explore-page/ExplorePage.tsx → packages/web/src/pages/search-explore-page/ExplorePage.tsx

@@ -1,11 +1,8 @@
-import { useFeatureFlag } from '@audius/common/hooks'
-import { FeatureFlags } from '@audius/common/services'
-
 import { useIsMobile } from 'hooks/useIsMobile'
 import { createSeoDescription } from 'utils/seo'
 
-import NewDesktopExplorePage from './components/desktop/NewExplorePage'
-import SearchExplorePage from './components/mobile/SearchExplorePage'
+import DesktopSearchExplorePage from './components/desktop/SearchExplorePage'
+import MobileSearchExplorePage from './components/mobile/SearchExplorePage'
 
 const messages = {
   title: 'Explore',
@@ -16,18 +13,14 @@ const messages = {
 export const ExplorePage = () => {
   const isMobile = useIsMobile()
 
-  const { isLoaded } = useFeatureFlag(FeatureFlags.SEARCH_EXPLORE)
-  if (!isLoaded) {
-    // prevent flicker while loading feature flag
-    return null
-  }
-
   const props = {
     title: messages.title,
     pageTitle: messages.pageTitle,
     description: messages.description
   }
 
-  const Component = isMobile ? SearchExplorePage : NewDesktopExplorePage
+  const Component = isMobile
+    ? MobileSearchExplorePage
+    : DesktopSearchExplorePage
   return <Component {...props} />
 }

packages/web/src/pages/explore-page/components/desktop/NewExplorePage.tsx → packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx

@@ -59,7 +59,7 @@ import { RecommendedTracksSection } from './RecommendedTracksSection'
 import { TrendingPlaylistsSection } from './TrendingPlaylistsSection'
 import { UndergroundTrendingTracksSection } from './UndergroundTrendingTracksSection'
 
-export type ExplorePageProps = {
+export type SearchExplorePageProps = {
   title: string
   pageTitle: string
   description: string
@@ -104,7 +104,11 @@ const DEBOUNCE_MS = 200
 const MIN_WIDTH = 840
 const NORMAL_WIDTH = 1200
 
-const ExplorePage = ({ title, pageTitle, description }: ExplorePageProps) => {
+const SearchExplorePage = ({
+  title,
+  pageTitle,
+  description
+}: SearchExplorePageProps) => {
   const [categoryKey, setCategory] = useSearchCategory()
   const [searchParams, setSearchParams] = useSearchParams()
   const [inputValue, setInputValue] = useState(searchParams.get('query') || '')
@@ -350,4 +354,4 @@ const ExplorePage = ({ title, pageTitle, description }: ExplorePageProps) => {
   )
 }
 
-export default ExplorePage
+export default SearchExplorePage

packages/web/src/pages/explore-page/components/mobile/SearchExplorePage.tsx → packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx

@@ -56,7 +56,7 @@ import { RecommendedTracksSection } from '../desktop/RecommendedTracksSection'
 import { TrendingPlaylistsSection } from '../desktop/TrendingPlaylistsSection'
 import { UndergroundTrendingTracksSection } from '../desktop/UndergroundTrendingTracksSection'
 
-export type ExplorePageProps = {
+export type SearchExplorePageProps = {
   title: string
   pageTitle: string
   description: string
@@ -71,7 +71,11 @@ export enum SearchTabs {
 
 const DEBOUNCE_MS = 200
 
-const ExplorePage = () => {
+const SearchExplorePage = ({
+  title,
+  pageTitle,
+  description
+}: SearchExplorePageProps) => {
   const [categoryKey, setCategory] = useSearchCategory()
   const [searchParams, setSearchParams] = useSearchParams()
   const [inputValue, setInputValue] = useState(searchParams.get('query') || '')
@@ -277,4 +281,4 @@ const ExplorePage = () => {
   )
 }
 
-export default ExplorePage
+export default SearchExplorePage

packages/web/src/pages/search-page/search-results/AlbumResults.tsx

@@ -2,29 +2,22 @@ import { useCallback } from 'react'
 
 import { useSearchAlbumResults } from '@audius/common/api'
 import { Kind, Name, UserCollectionMetadata } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import { searchActions } from '@audius/common/store'
-import { Box, Flex, Text, useTheme } from '@audius/harmony'
+import { Box, Flex, useTheme } from '@audius/harmony'
 import { range } from 'lodash'
 import InfiniteScroll from 'react-infinite-scroller'
 import { useDispatch } from 'react-redux'
 
 import { make } from 'common/store/analytics/actions'
 import { CollectionCard } from 'components/collection'
 import { useIsMobile } from 'hooks/useIsMobile'
-import { useFlag } from 'hooks/useRemoteConfig'
 import { useMainContentRef } from 'pages/MainContentContext'
 
 import { NoResultsTile } from '../NoResultsTile'
-import { SortMethodFilterButton } from '../SortMethodFilterButton'
 import { useSearchParams } from '../hooks'
 
 const { addItem: addRecentSearch } = searchActions
 
-const messages = {
-  albums: 'Albums'
-}
-
 type AlbumResultsProps = {
   data: UserCollectionMetadata[]
   isFetching: boolean
@@ -141,9 +134,6 @@ export const AlbumResultsPage = () => {
   const searchParams = useSearchParams()
   const queryData = useSearchAlbumResults(searchParams)
   const { data, isFetching, hasNextPage, loadNextPage, isPending } = queryData
-  const { isEnabled: isSearchExploreEnabled } = useFlag(
-    FeatureFlags.SEARCH_EXPLORE
-  )
 
   const isResultsEmpty = data?.length === 0
   const showNoResultsTile = !isFetching && isResultsEmpty
@@ -162,14 +152,6 @@ export const AlbumResultsPage = () => {
         gap='xl'
         css={isMobile ? { backgroundColor: color.background.default } : {}}
       >
-        {!isMobile && isSearchExploreEnabled === false ? (
-          <Flex justifyContent='space-between' alignItems='center'>
-            <Text variant='heading' textAlign='left'>
-              {messages.albums}
-            </Text>
-            <SortMethodFilterButton />
-          </Flex>
-        ) : null}
         {showNoResultsTile ? (
           <NoResultsTile />
         ) : (

packages/web/src/pages/search-page/search-results/AllResults.tsx

@@ -22,7 +22,7 @@ import { CollectionImage } from 'components/collection/CollectionImage'
 import { TrackArtwork } from 'components/track/TrackArtwork'
 import { UserCard, UserCardSkeleton } from 'components/user-card'
 import { useIsMobile } from 'hooks/useIsMobile'
-import { Carousel } from 'pages/explore-page/components/desktop/Carousel'
+import { Carousel } from 'pages/search-explore-page/components/desktop/Carousel'
 
 import { NoResultsTile } from '../NoResultsTile'
 import { useSearchParams } from '../hooks'

packages/web/src/pages/search-page/search-results/PlaylistResults.tsx

@@ -2,30 +2,22 @@ import { useCallback } from 'react'
 
 import { useSearchPlaylistResults } from '@audius/common/api'
 import { Kind, Name, UserCollectionMetadata } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import { searchActions } from '@audius/common/store'
-import { Box, Flex, Text, useTheme } from '@audius/harmony'
+import { Box, Flex, useTheme } from '@audius/harmony'
 import { range } from 'lodash'
 import InfiniteScroll from 'react-infinite-scroller'
 import { useDispatch } from 'react-redux'
 
 import { make } from 'common/store/analytics/actions'
 import { CollectionCard } from 'components/collection'
 import { useIsMobile } from 'hooks/useIsMobile'
-import { useFlag } from 'hooks/useRemoteConfig'
 import { useMainContentRef } from 'pages/MainContentContext'
 
 import { NoResultsTile } from '../NoResultsTile'
-import { SortMethodFilterButton } from '../SortMethodFilterButton'
 import { useSearchParams } from '../hooks'
 
 const { addItem: addRecentSearch } = searchActions
 
-const messages = {
-  playlists: 'Playlists',
-  sortOptionsLabel: 'Sort By'
-}
-
 type PlaylistResultsProps = {
   limit?: number
   skeletonCount?: number
@@ -132,9 +124,6 @@ export const PlaylistResultsPage = () => {
   const isMobile = useIsMobile()
   const { color } = useTheme()
   const mainContentRef = useMainContentRef()
-  const { isEnabled: isSearchExploreEnabled } = useFlag(
-    FeatureFlags.SEARCH_EXPLORE
-  )
 
   const getMainContentRef = useCallback(() => {
     if (isMobile) {
@@ -170,14 +159,6 @@ export const PlaylistResultsPage = () => {
         gap='xl'
         css={isMobile ? { backgroundColor: color.background.default } : {}}
       >
-        {!isMobile && isSearchExploreEnabled === false ? (
-          <Flex justifyContent='space-between' alignItems='center'>
-            <Text variant='heading' textAlign='left'>
-              {messages.playlists}
-            </Text>
-            <SortMethodFilterButton />
-          </Flex>
-        ) : null}
         {showNoResultsTile ? (
           <NoResultsTile />
         ) : (

packages/web/src/pages/search-page/search-results/ProfileResults.tsx

@@ -2,30 +2,22 @@ import { useCallback } from 'react'
 
 import { useSearchUserResults } from '@audius/common/api'
 import { Kind, Name, UserMetadata } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import { searchActions } from '@audius/common/store'
-import { Box, Flex, Text, useTheme } from '@audius/harmony'
+import { Box, Flex, useTheme } from '@audius/harmony'
 import { range } from 'lodash'
 import InfiniteScroll from 'react-infinite-scroller'
 import { useDispatch } from 'react-redux'
 
 import { make } from 'common/store/analytics/actions'
 import { UserCard } from 'components/user-card'
 import { useIsMobile } from 'hooks/useIsMobile'
-import { useFlag } from 'hooks/useRemoteConfig'
 import { useMainContentRef } from 'pages/MainContentContext'
 
 import { NoResultsTile } from '../NoResultsTile'
-import { SortMethodFilterButton } from '../SortMethodFilterButton'
 import { useSearchParams } from '../hooks'
 
 const { addItem: addRecentSearch } = searchActions
 
-const messages = {
-  profiles: 'Profiles',
-  sortOptionsLabel: 'Sort By'
-}
-
 type ProfileResultsProps = {
   isFetching: boolean
   isPending: boolean
@@ -130,9 +122,6 @@ export const ProfileResultsPage = () => {
   const isMobile = useIsMobile()
   const { color } = useTheme()
   const mainContentRef = useMainContentRef()
-  const { isEnabled: isSearchExploreEnabled } = useFlag(
-    FeatureFlags.SEARCH_EXPLORE
-  )
 
   const getMainContentRef = useCallback(() => {
     if (isMobile) {
@@ -167,14 +156,6 @@ export const ProfileResultsPage = () => {
         gap='xl'
         css={isMobile ? { backgroundColor: color.background.default } : {}}
       >
-        {!isMobile && isSearchExploreEnabled === false ? (
-          <Flex justifyContent='space-between' alignItems='center'>
-            <Text variant='heading' textAlign='left'>
-              {messages.profiles}
-            </Text>
-            <SortMethodFilterButton />
-          </Flex>
-        ) : null}
         {showNoResultsTile ? (
           <NoResultsTile />
         ) : (