[C-4923] Persist verified filter & general cleanup

packages/web/src/pages/search-page-v2/BpmFilter.tsx

@@ -19,7 +19,7 @@ import { useSearchParams } from 'react-router-dom-v5-compat'
 
 import { useBpmMaskedInput } from 'hooks/useBpmMaskedInput'
 
-import { useUpdateSearchParams } from './utils'
+import { useUpdateSearchParams } from './hooks'
 
 const MIN_BPM = 1
 const MAX_BPM = 999

packages/web/src/pages/search-page-v2/SearchFilters.tsx

@@ -16,8 +16,9 @@ import { Mood } from '@audius/sdk'
 import { useSearchParams } from 'react-router-dom-v5-compat'
 
 import { BpmFilter } from './BpmFilter'
+import { useUpdateSearchParams } from './hooks'
+import { MOODS } from './moods'
 import { Filter } from './types'
-import { MOODS, useUpdateSearchParams } from './utils'
 
 const messages = {
   genre: 'Genre',

packages/web/src/pages/search-page-v2/SearchHeader.tsx

@@ -1,59 +1,20 @@
 import { ChangeEvent, useCallback } from 'react'
 
-import { Maybe } from '@audius/common/utils'
-import {
-  Flex,
-  IconAlbum,
-  IconNote,
-  IconPlaylists,
-  IconUser,
-  RadioGroup,
-  SelectablePill,
-  Text
-} from '@audius/harmony'
+import { Flex, RadioGroup, SelectablePill, Text } from '@audius/harmony'
 import { CSSObject, useTheme } from '@emotion/react'
 import { capitalize } from 'lodash'
 
 import Header from 'components/header/desktop/Header'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 import { filters } from './SearchFilters'
-import { Category } from './types'
-
-export const categories = {
-  all: { filters: [] },
-  profiles: { icon: IconUser, filters: ['genre', 'isVerified'] },
-  tracks: {
-    icon: IconNote,
-    filters: [
-      'genre',
-      'mood',
-      'key',
-      'bpm',
-      'isPremium',
-      'hasDownloads',
-      'isVerified'
-    ]
-  },
-  albums: {
-    icon: IconAlbum,
-    filters: ['genre', 'mood', 'isPremium', 'hasDownloads', 'isVerified']
-  },
-  playlists: { icon: IconPlaylists, filters: ['genre', 'mood', 'isVerified'] }
-} satisfies Record<string, Category>
-
-export type CategoryKey = keyof typeof categories
-
-type SearchHeaderProps = {
-  category?: CategoryKey
-  setCategory: (category: CategoryKey) => void
-  title: string
-  query: Maybe<string>
-}
-
-export const SearchHeader = (props: SearchHeaderProps) => {
-  const { category: categoryKey = 'all', setCategory, query, title } = props
+import { categories } from './categories'
+import { useSearchCategory, useSearchParams } from './hooks'
+import { Category, CategoryKey } from './types'
 
+export const SearchHeader = () => {
+  const { query } = useSearchParams()
+  const [categoryKey, setCategory] = useSearchCategory()
   const isMobile = useIsMobile()
   const { color } = useTheme()
 
@@ -113,8 +74,7 @@ export const SearchHeader = (props: SearchHeaderProps) => {
     </Flex>
   ) : (
     <Header
-      {...props}
-      primary={title}
+      primary='Search'
       secondary={
         query ? (
           <Flex ml='l' css={{ maxWidth: 200 }}>

packages/web/src/pages/search-page-v2/SearchPageV2.tsx

@@ -1,13 +1,9 @@
-import { useCallback, useContext, useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 
 import { SearchCategory } from '@audius/common/src/api/search'
 import { Flex, useTheme } from '@audius/harmony'
-import { intersection, isEmpty } from 'lodash'
-import { generatePath } from 'react-router-dom'
 import { useSearchParams } from 'react-router-dom-v5-compat'
 
-import { useHistoryContext } from 'app/HistoryProvider'
-import { RouterContext } from 'components/animated-switch/RouterContextProvider'
 import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
 import NavContext, {
   CenterPreset,
@@ -16,53 +12,20 @@ import NavContext, {
 } from 'components/nav/mobile/NavContext'
 import Page from 'components/page/Page'
 import { useIsMobile } from 'hooks/useIsMobile'
-import {
-  SEARCH_BASE_ROUTE,
-  SEARCH_PAGE,
-  fullSearchResultsPageV2
-} from 'utils/route'
+import { fullSearchResultsPageV2 } from 'utils/route'
 
 import { RecentSearches } from './RecentSearches'
 import { SearchCatalogTile } from './SearchCatalogTile'
-import { CategoryKey, SearchHeader, categories } from './SearchHeader'
+import { SearchHeader } from './SearchHeader'
 import { SearchResults } from './SearchResults'
-import { useSearchCategory } from './utils'
-
-const useShowSearchResults = () => {
-  const [urlSearchParams] = useSearchParams()
-  const query = urlSearchParams.get('query')
-  const genre = urlSearchParams.get('genre')
-  const mood = urlSearchParams.get('mood')
-  const bpm = urlSearchParams.get('bpm')
-  const key = urlSearchParams.get('key')
-  const isVerified = urlSearchParams.get('isVerified')
-  const hasDownloads = urlSearchParams.get('hasDownloads')
-  const isPremium = urlSearchParams.get('isPremium')
-
-  return (
-    query ||
-    genre ||
-    mood ||
-    isVerified ||
-    hasDownloads ||
-    bpm ||
-    key ||
-    isPremium
-  )
-}
+import { useSearchCategory, useShowSearchResults } from './hooks'
 
 export const SearchPageV2 = () => {
   const isMobile = useIsMobile()
-  const category = useSearchCategory()
-  const { history } = useHistoryContext()
+  const [category] = useSearchCategory()
   const [urlSearchParams] = useSearchParams()
   const query = urlSearchParams.get('query')
-  const genre = urlSearchParams.get('genre')
-  const mood = urlSearchParams.get('mood')
-  const isPremium = urlSearchParams.get('isPremium')
-  const hasDownloads = urlSearchParams.get('hasDownloads')
   const showSearchResults = useShowSearchResults()
-  const { setStackReset } = useContext(RouterContext)
   const { color } = useTheme()
 
   // Set nav header
@@ -73,57 +36,7 @@ export const SearchPageV2 = () => {
     setRight(RightPreset.SEARCH)
   }, [setLeft, setCenter, setRight])
 
-  const setCategory = useCallback(
-    (newCategory: CategoryKey) => {
-      // Do not animate on mobile
-      setStackReset(true)
-
-      const commonFilters = intersection(
-        categories[category]?.filters ?? [],
-        categories[newCategory]?.filters ?? []
-      )
-      const commonFilterParams = {
-        ...(query && { query }),
-        ...(genre && commonFilters.includes('genre') && { genre }),
-        ...(mood && commonFilters.includes('mood') && { mood }),
-        ...(isPremium && commonFilters.includes('isPremium') && { isPremium }),
-        ...(hasDownloads &&
-          commonFilters.includes('hasDownloads') && { hasDownloads })
-      }
-
-      const pathname =
-        newCategory === 'all'
-          ? generatePath(SEARCH_BASE_ROUTE)
-          : generatePath(SEARCH_PAGE, { category: newCategory })
-
-      history.push({
-        pathname,
-        search: !isEmpty(commonFilterParams)
-          ? new URLSearchParams(commonFilterParams).toString()
-          : undefined,
-        state: {}
-      })
-    },
-    [
-      category,
-      genre,
-      hasDownloads,
-      history,
-      isPremium,
-      mood,
-      query,
-      setStackReset
-    ]
-  )
-
-  const header = (
-    <SearchHeader
-      query={query ?? undefined}
-      title={'Search'}
-      category={category as CategoryKey}
-      setCategory={setCategory}
-    />
-  )
+  const header = <SearchHeader />
 
   const PageComponent = isMobile ? MobilePageContainer : Page
 

packages/web/src/pages/search-page-v2/SearchResults.tsx

@@ -1,12 +1,12 @@
+import { useSearchCategory } from './hooks'
 import { AlbumResultsPage } from './search-results/AlbumResults'
 import { AllResults } from './search-results/AllResults'
 import { PlaylistResultsPage } from './search-results/PlaylistResults'
 import { ProfileResultsPage } from './search-results/ProfileResults'
 import { TrackResultsPage } from './search-results/TrackResults'
-import { useSearchCategory } from './utils'
 
 export const SearchResults = () => {
-  const category = useSearchCategory()
+  const [category] = useSearchCategory()
 
   switch (category) {
     case 'profiles':

packages/web/src/pages/search-page-v2/SortMethodFilterButton.tsx

@@ -1,6 +1,6 @@
 import { FilterButton } from '@audius/harmony'
 
-import { useSearchParams, useUpdateSearchParams } from './utils'
+import { useSearchParams, useUpdateSearchParams } from './hooks'
 
 const messages = {
   sortOptionsLabel: 'Sort By'

packages/web/src/pages/search-page-v2/categories.ts

@@ -0,0 +1,25 @@
+import { IconAlbum, IconNote, IconPlaylists, IconUser } from '@audius/harmony'
+
+import { Category } from './types'
+
+export const categories = {
+  all: { filters: [] },
+  profiles: { icon: IconUser, filters: ['genre', 'isVerified'] },
+  tracks: {
+    icon: IconNote,
+    filters: [
+      'genre',
+      'mood',
+      'key',
+      'bpm',
+      'isPremium',
+      'hasDownloads',
+      'isVerified'
+    ]
+  },
+  albums: {
+    icon: IconAlbum,
+    filters: ['genre', 'mood', 'isPremium', 'hasDownloads', 'isVerified']
+  },
+  playlists: { icon: IconPlaylists, filters: ['genre', 'mood', 'isVerified'] }
+} satisfies Record<string, Category>