[C-5679] Migrate search autosuggest to tan-query

packages/common/src/api/tan-query/queryKeys.ts

@@ -53,5 +53,6 @@ export const QUERY_KEYS = {
  trackHistory: 'trackHistory',
  topTags: 'topTags',
  authorizedApps: 'authorizedApps',
- developerApps: 'developerApps'
+ developerApps: 'developerApps',
+ searchAutocomplete: 'searchAutocomplete'
 } as const

packages/common/src/api/tan-query/useSearchAutocomplete.ts

@@ -0,0 +1,68 @@
+import { OptionalId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { searchResultsFromSDK } from '~/adapters/search'
+import { useAudiusQueryContext } from '~/audius-query'
+import { useFeatureFlag } from '~/hooks/useFeatureFlag'
+import { UserCollectionMetadata } from '~/models/Collection'
+import { UserTrackMetadata } from '~/models/Track'
+import { User } from '~/models/User'
+import { FeatureFlags } from '~/services/remote-config'
+
+import { QUERY_KEYS } from './queryKeys'
+import { QueryOptions } from './types'
+import { useCurrentUserId } from './useCurrentUserId'
+
+const DEFAULT_LIMIT = 3
+
+type UseSearchAutocompleteArgs = {
+ query: string
+ limit?: number
+}
+
+type SearchResults = {
+ tracks: UserTrackMetadata[]
+ albums: UserCollectionMetadata[]
+ playlists: UserCollectionMetadata[]
+ users: User[]
+}
+
+const limitAutocompleteResults = (results: SearchResults): SearchResults => {
+ const { tracks, albums, playlists, users } = results
+ return {
+ tracks: tracks.slice(0, DEFAULT_LIMIT),
+ albums: albums.slice(0, DEFAULT_LIMIT),
+ playlists: playlists.slice(0, DEFAULT_LIMIT),
+ users: users.slice(0, DEFAULT_LIMIT)
+ }
+}
+
+export const useSearchAutocomplete = (
+ { query, limit = DEFAULT_LIMIT }: UseSearchAutocompleteArgs,
+ options?: QueryOptions
+) => {
+ const { audiusSdk } = useAudiusQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const { isEnabled: isUSDCEnabled } = useFeatureFlag(
+ FeatureFlags.USDC_PURCHASES
+ )
+
+ return useQuery({
+ queryKey: [QUERY_KEYS.search, query, limit],
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data } = await sdk.full.search.searchAutocomplete({
+ userId: OptionalId.parse(currentUserId),
+ query,
+ limit,
+ offset: 0,
+ includePurchaseable: isUSDCEnabled
+ })
+
+ return limitAutocompleteResults(searchResultsFromSDK(data))
+ },
+ staleTime: options?.staleTime,
+ enabled: options?.enabled !== false && query.length > 0,
+ placeholderData: (prev) => (query === '' ? undefined : prev)
+ })
+}

packages/harmony/src/components/loading-spinner/LoadingSpinner.tsx

@@ -1,23 +1,29 @@
-import cn from 'classnames'
 import Lottie from 'lottie-react'
 
 import loadingSpinner from '~harmony/assets/animations/loadingSpinner.json'
 
-import styles from './LoadingSpinner.module.css'
+import { IconProps } from '../icon'
+import { Flex, FlexProps } from '../layout/Flex'
 
-type LoadingSpinnerProps = { className?: string }
+type LoadingSpinnerProps = FlexProps & Pick<IconProps, 'size' | 'color'>
 
 const LoadingSpinner = (props: LoadingSpinnerProps) => {
- const { className } = props
-
+ const { size = 'l', color, ...rest } = props
  return (
- <div
- className={cn(styles.container, className)}
+ <Flex
  role='progressbar'
  data-chromatic='ignore'
+ css={(theme) => ({
+ height: size ? theme.iconSizes[size] : undefined,
+ width: size ? theme.iconSizes[size] : undefined,
+ g: {
+ path: { stroke: color ? theme.color.icon[color] : 'currentColor' }
+ }
+ })}
+ {...rest}
  >
  <Lottie loop autoplay animationData={loadingSpinner} />
- </div>
+ </Flex>
  )
 }
 

packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx

@@ -1,14 +1,12 @@
 import { useCallback, useContext } from 'react'
 
-import { clearSearch } from '@audius/web/src/common/store/search-bar/actions'
 import type { ParamListBase, RouteProp } from '@react-navigation/core'
 import type {
  NativeStackNavigationOptions,
  NativeStackNavigationProp
 } from '@react-navigation/native-stack'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 import { Text, View } from 'react-native'
-import { useDispatch } from 'react-redux'
 
 import {
  IconAudiusLogoHorizontal,
@@ -58,16 +56,14 @@ export const useAppScreenOptions = (
  const styles = useStyles()
  const navigation = useNavigation()
  const { drawerHelpers } = useContext(AppDrawerContext)
- const dispatch = useDispatch()
 
  const handleOpenLeftNavDrawer = useCallback(() => {
  drawerHelpers?.openDrawer()
  }, [drawerHelpers])
 
  const handlePressSearch = useCallback(() => {
- dispatch(clearSearch())
  navigation.navigate('Search', { autoFocus: true })
- }, [dispatch, navigation])
+ }, [navigation])
 
  const screenOptions: (options: Options) => NativeStackNavigationOptions =
  useCallback(

packages/mobile/src/store/sagas.ts

@@ -49,7 +49,6 @@ import profileSagas from 'common/store/profile/sagas'
 import queueSagas from 'common/store/queue/sagas'
 import recoveryEmailSagas from 'common/store/recovery-email/sagas'
 import savedCollectionsSagas from 'common/store/saved-collections/sagas'
-import searchBarSagas from 'common/store/search-bar/sagas'
 import smartCollectionPageSagas from 'common/store/smart-collection/sagas'
 import socialSagas from 'common/store/social/sagas'
 import tippingSagas from 'common/store/tipping/sagas'
@@ -78,7 +77,6 @@ export default function* rootSaga() {
  ...backendSagas(),
  ...analyticsSagas(),
  ...confirmerSagas(),
- ...searchBarSagas(),
  ...searchResultsSagas(),
 
  // Account

packages/mobile/src/store/store.ts

@@ -8,8 +8,6 @@ import {
 } from '@audius/common/store'
 import backend from '@audius/web/src/common/store/backend/reducer'
 import type { BackendState } from '@audius/web/src/common/store/backend/types'
-import searchBar from '@audius/web/src/common/store/search-bar/reducer'
-import type { SearchBarState } from '@audius/web/src/common/store/search-bar/types'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import signOnReducer from 'common/store/pages/signon/reducer'
 import type {
@@ -52,7 +50,6 @@ export type AppState = CommonState & {
  // These also belong in CommonState but are here until we move them to the @audius/common package:
  signOn: SignOnPageState
  backend: BackendState
- searchBar: SearchBarState
 
  drawers: DrawersState
  keyboard: KeyboardState
@@ -111,7 +108,6 @@ const rootReducer = combineReducers({
  // These also belong in common store reducers but are here until we move them to the @audius/common package:
  backend,
  signOn: signOnReducer as SignOnPageReducer,
- searchBar,
 
  drawers,
  keyboard,

packages/common/src/api/tan-query/queryKeys.ts

@@ -53,5 +53,6 @@ export const QUERY_KEYS = {
  trackHistory: 'trackHistory',
  topTags: 'topTags',
  authorizedApps: 'authorizedApps',
- developerApps: 'developerApps'
+ developerApps: 'developerApps',
+ searchAutocomplete: 'searchAutocomplete'
 } as const

packages/common/src/api/tan-query/useSearchAutocomplete.ts

@@ -0,0 +1,68 @@
+import { OptionalId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { searchResultsFromSDK } from '~/adapters/search'
+import { useAudiusQueryContext } from '~/audius-query'
+import { useFeatureFlag } from '~/hooks/useFeatureFlag'
+import { UserCollectionMetadata } from '~/models/Collection'
+import { UserTrackMetadata } from '~/models/Track'
+import { User } from '~/models/User'
+import { FeatureFlags } from '~/services/remote-config'
+
+import { QUERY_KEYS } from './queryKeys'
+import { QueryOptions } from './types'
+import { useCurrentUserId } from './useCurrentUserId'
+
+const DEFAULT_LIMIT = 3
+
+type UseSearchAutocompleteArgs = {
+ query: string
+ limit?: number
+}
+
+type SearchResults = {
+ tracks: UserTrackMetadata[]
+ albums: UserCollectionMetadata[]
+ playlists: UserCollectionMetadata[]
+ users: User[]
+}
+
+const limitAutocompleteResults = (results: SearchResults): SearchResults => {
+ const { tracks, albums, playlists, users } = results
+ return {
+ tracks: tracks.slice(0, DEFAULT_LIMIT),
+ albums: albums.slice(0, DEFAULT_LIMIT),
+ playlists: playlists.slice(0, DEFAULT_LIMIT),
+ users: users.slice(0, DEFAULT_LIMIT)
+ }
+}
+
+export const useSearchAutocomplete = (
+ { query, limit = DEFAULT_LIMIT }: UseSearchAutocompleteArgs,
+ options?: QueryOptions
+) => {
+ const { audiusSdk } = useAudiusQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const { isEnabled: isUSDCEnabled } = useFeatureFlag(
+ FeatureFlags.USDC_PURCHASES
+ )
+
+ return useQuery({
+ queryKey: [QUERY_KEYS.search, query, limit],
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data } = await sdk.full.search.searchAutocomplete({
+ userId: OptionalId.parse(currentUserId),
+ query,
+ limit,
+ offset: 0,
+ includePurchaseable: isUSDCEnabled
+ })
+
+ return limitAutocompleteResults(searchResultsFromSDK(data))
+ },
+ staleTime: options?.staleTime,
+ enabled: options?.enabled !== false && query.length > 0,
+ placeholderData: (prev) => (query === '' ? undefined : prev)
+ })
+}

packages/harmony/src/components/loading-spinner/LoadingSpinner.tsx

@@ -1,23 +1,29 @@
-import cn from 'classnames'
 import Lottie from 'lottie-react'
 
 import loadingSpinner from '~harmony/assets/animations/loadingSpinner.json'
 
-import styles from './LoadingSpinner.module.css'
+import { IconProps } from '../icon'
+import { Flex, FlexProps } from '../layout/Flex'
 
-type LoadingSpinnerProps = { className?: string }
+type LoadingSpinnerProps = FlexProps & Pick<IconProps, 'size' | 'color'>
 
 const LoadingSpinner = (props: LoadingSpinnerProps) => {
- const { className } = props
-
+ const { size = 'l', color, ...rest } = props
  return (
- <div
- className={cn(styles.container, className)}
+ <Flex
  role='progressbar'
  data-chromatic='ignore'
+ css={(theme) => ({
+ height: size ? theme.iconSizes[size] : undefined,
+ width: size ? theme.iconSizes[size] : undefined,
+ g: {
+ path: { stroke: color ? theme.color.icon[color] : 'currentColor' }
+ }
+ })}
+ {...rest}
  >
  <Lottie loop autoplay animationData={loadingSpinner} />
- </div>
+ </Flex>
  )
 }
 

packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx

@@ -1,14 +1,12 @@
 import { useCallback, useContext } from 'react'
 
-import { clearSearch } from '@audius/web/src/common/store/search-bar/actions'
 import type { ParamListBase, RouteProp } from '@react-navigation/core'
 import type {
  NativeStackNavigationOptions,
  NativeStackNavigationProp
 } from '@react-navigation/native-stack'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 import { Text, View } from 'react-native'
-import { useDispatch } from 'react-redux'
 
 import {
  IconAudiusLogoHorizontal,
@@ -58,16 +56,14 @@ export const useAppScreenOptions = (
  const styles = useStyles()
  const navigation = useNavigation()
  const { drawerHelpers } = useContext(AppDrawerContext)
- const dispatch = useDispatch()
 
  const handleOpenLeftNavDrawer = useCallback(() => {
  drawerHelpers?.openDrawer()
  }, [drawerHelpers])
 
  const handlePressSearch = useCallback(() => {
- dispatch(clearSearch())
  navigation.navigate('Search', { autoFocus: true })
- }, [dispatch, navigation])
+ }, [navigation])
 
  const screenOptions: (options: Options) => NativeStackNavigationOptions =
  useCallback(

packages/mobile/src/store/sagas.ts

@@ -49,7 +49,6 @@ import profileSagas from 'common/store/profile/sagas'
 import queueSagas from 'common/store/queue/sagas'
 import recoveryEmailSagas from 'common/store/recovery-email/sagas'
 import savedCollectionsSagas from 'common/store/saved-collections/sagas'
-import searchBarSagas from 'common/store/search-bar/sagas'
 import smartCollectionPageSagas from 'common/store/smart-collection/sagas'
 import socialSagas from 'common/store/social/sagas'
 import tippingSagas from 'common/store/tipping/sagas'
@@ -78,7 +77,6 @@ export default function* rootSaga() {
  ...backendSagas(),
  ...analyticsSagas(),
  ...confirmerSagas(),
- ...searchBarSagas(),
  ...searchResultsSagas(),
 
  // Account

packages/mobile/src/store/store.ts

@@ -8,8 +8,6 @@ import {
 } from '@audius/common/store'
 import backend from '@audius/web/src/common/store/backend/reducer'
 import type { BackendState } from '@audius/web/src/common/store/backend/types'
-import searchBar from '@audius/web/src/common/store/search-bar/reducer'
-import type { SearchBarState } from '@audius/web/src/common/store/search-bar/types'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import signOnReducer from 'common/store/pages/signon/reducer'
 import type {
@@ -52,7 +50,6 @@ export type AppState = CommonState & {
  // These also belong in CommonState but are here until we move them to the @audius/common package:
  signOn: SignOnPageState
  backend: BackendState
- searchBar: SearchBarState
 
  drawers: DrawersState
  keyboard: KeyboardState
@@ -111,7 +108,6 @@ const rootReducer = combineReducers({
  // These also belong in common store reducers but are here until we move them to the @audius/common package:
  backend,
  signOn: signOnReducer as SignOnPageReducer,
- searchBar,
 
  drawers,
  keyboard,

packages/common/src/api/tan-query/queryKeys.ts

@@ -53,5 +53,6 @@ export const QUERY_KEYS = {
  trackHistory: 'trackHistory',
  topTags: 'topTags',
  authorizedApps: 'authorizedApps',
- developerApps: 'developerApps'
+ developerApps: 'developerApps',
+ searchAutocomplete: 'searchAutocomplete'
 } as const

packages/common/src/api/tan-query/useSearchAutocomplete.ts

@@ -0,0 +1,68 @@
+import { OptionalId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { searchResultsFromSDK } from '~/adapters/search'
+import { useAudiusQueryContext } from '~/audius-query'
+import { useFeatureFlag } from '~/hooks/useFeatureFlag'
+import { UserCollectionMetadata } from '~/models/Collection'
+import { UserTrackMetadata } from '~/models/Track'
+import { User } from '~/models/User'
+import { FeatureFlags } from '~/services/remote-config'
+
+import { QUERY_KEYS } from './queryKeys'
+import { QueryOptions } from './types'
+import { useCurrentUserId } from './useCurrentUserId'
+
+const DEFAULT_LIMIT = 3
+
+type UseSearchAutocompleteArgs = {
+ query: string
+ limit?: number
+}
+
+type SearchResults = {
+ tracks: UserTrackMetadata[]
+ albums: UserCollectionMetadata[]
+ playlists: UserCollectionMetadata[]
+ users: User[]
+}
+
+const limitAutocompleteResults = (results: SearchResults): SearchResults => {
+ const { tracks, albums, playlists, users } = results
+ return {
+ tracks: tracks.slice(0, DEFAULT_LIMIT),
+ albums: albums.slice(0, DEFAULT_LIMIT),
+ playlists: playlists.slice(0, DEFAULT_LIMIT),
+ users: users.slice(0, DEFAULT_LIMIT)
+ }
+}
+
+export const useSearchAutocomplete = (
+ { query, limit = DEFAULT_LIMIT }: UseSearchAutocompleteArgs,
+ options?: QueryOptions
+) => {
+ const { audiusSdk } = useAudiusQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const { isEnabled: isUSDCEnabled } = useFeatureFlag(
+ FeatureFlags.USDC_PURCHASES
+ )
+
+ return useQuery({
+ queryKey: [QUERY_KEYS.search, query, limit],
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data } = await sdk.full.search.searchAutocomplete({
+ userId: OptionalId.parse(currentUserId),
+ query,
+ limit,
+ offset: 0,
+ includePurchaseable: isUSDCEnabled
+ })
+
+ return limitAutocompleteResults(searchResultsFromSDK(data))
+ },
+ staleTime: options?.staleTime,
+ enabled: options?.enabled !== false && query.length > 0,
+ placeholderData: (prev) => (query === '' ? undefined : prev)
+ })
+}

packages/harmony/src/components/loading-spinner/LoadingSpinner.tsx

@@ -1,23 +1,29 @@
-import cn from 'classnames'
 import Lottie from 'lottie-react'
 
 import loadingSpinner from '~harmony/assets/animations/loadingSpinner.json'
 
-import styles from './LoadingSpinner.module.css'
+import { IconProps } from '../icon'
+import { Flex, FlexProps } from '../layout/Flex'
 
-type LoadingSpinnerProps = { className?: string }
+type LoadingSpinnerProps = FlexProps & Pick<IconProps, 'size' | 'color'>
 
 const LoadingSpinner = (props: LoadingSpinnerProps) => {
- const { className } = props
-
+ const { size = 'l', color, ...rest } = props
  return (
- <div
- className={cn(styles.container, className)}
+ <Flex
  role='progressbar'
  data-chromatic='ignore'
+ css={(theme) => ({
+ height: size ? theme.iconSizes[size] : undefined,
+ width: size ? theme.iconSizes[size] : undefined,
+ g: {
+ path: { stroke: color ? theme.color.icon[color] : 'currentColor' }
+ }
+ })}
+ {...rest}
  >
  <Lottie loop autoplay animationData={loadingSpinner} />
- </div>
+ </Flex>
  )
 }
 

packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx

@@ -1,14 +1,12 @@
 import { useCallback, useContext } from 'react'
 
-import { clearSearch } from '@audius/web/src/common/store/search-bar/actions'
 import type { ParamListBase, RouteProp } from '@react-navigation/core'
 import type {
  NativeStackNavigationOptions,
  NativeStackNavigationProp
 } from '@react-navigation/native-stack'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 import { Text, View } from 'react-native'
-import { useDispatch } from 'react-redux'
 
 import {
  IconAudiusLogoHorizontal,
@@ -58,16 +56,14 @@ export const useAppScreenOptions = (
  const styles = useStyles()
  const navigation = useNavigation()
  const { drawerHelpers } = useContext(AppDrawerContext)
- const dispatch = useDispatch()
 
  const handleOpenLeftNavDrawer = useCallback(() => {
  drawerHelpers?.openDrawer()
  }, [drawerHelpers])
 
  const handlePressSearch = useCallback(() => {
- dispatch(clearSearch())
  navigation.navigate('Search', { autoFocus: true })
- }, [dispatch, navigation])
+ }, [navigation])
 
  const screenOptions: (options: Options) => NativeStackNavigationOptions =
  useCallback(

packages/mobile/src/store/sagas.ts

@@ -49,7 +49,6 @@ import profileSagas from 'common/store/profile/sagas'
 import queueSagas from 'common/store/queue/sagas'
 import recoveryEmailSagas from 'common/store/recovery-email/sagas'
 import savedCollectionsSagas from 'common/store/saved-collections/sagas'
-import searchBarSagas from 'common/store/search-bar/sagas'
 import smartCollectionPageSagas from 'common/store/smart-collection/sagas'
 import socialSagas from 'common/store/social/sagas'
 import tippingSagas from 'common/store/tipping/sagas'
@@ -78,7 +77,6 @@ export default function* rootSaga() {
  ...backendSagas(),
  ...analyticsSagas(),
  ...confirmerSagas(),
- ...searchBarSagas(),
  ...searchResultsSagas(),
 
  // Account

packages/mobile/src/store/store.ts

@@ -8,8 +8,6 @@ import {
 } from '@audius/common/store'
 import backend from '@audius/web/src/common/store/backend/reducer'
 import type { BackendState } from '@audius/web/src/common/store/backend/types'
-import searchBar from '@audius/web/src/common/store/search-bar/reducer'
-import type { SearchBarState } from '@audius/web/src/common/store/search-bar/types'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import signOnReducer from 'common/store/pages/signon/reducer'
 import type {
@@ -52,7 +50,6 @@ export type AppState = CommonState & {
  // These also belong in CommonState but are here until we move them to the @audius/common package:
  signOn: SignOnPageState
  backend: BackendState
- searchBar: SearchBarState
 
  drawers: DrawersState
  keyboard: KeyboardState
@@ -111,7 +108,6 @@ const rootReducer = combineReducers({
  // These also belong in common store reducers but are here until we move them to the @audius/common package:
  backend,
  signOn: signOnReducer as SignOnPageReducer,
- searchBar,
 
  drawers,
  keyboard,

packages/common/src/api/tan-query/queryKeys.ts

@@ -53,5 +53,6 @@ export const QUERY_KEYS = {
  trackHistory: 'trackHistory',
  topTags: 'topTags',
  authorizedApps: 'authorizedApps',
- developerApps: 'developerApps'
+ developerApps: 'developerApps',
+ searchAutocomplete: 'searchAutocomplete'
 } as const

packages/common/src/api/tan-query/useSearchAutocomplete.ts

@@ -0,0 +1,68 @@
+import { OptionalId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { searchResultsFromSDK } from '~/adapters/search'
+import { useAudiusQueryContext } from '~/audius-query'
+import { useFeatureFlag } from '~/hooks/useFeatureFlag'
+import { UserCollectionMetadata } from '~/models/Collection'
+import { UserTrackMetadata } from '~/models/Track'
+import { User } from '~/models/User'
+import { FeatureFlags } from '~/services/remote-config'
+
+import { QUERY_KEYS } from './queryKeys'
+import { QueryOptions } from './types'
+import { useCurrentUserId } from './useCurrentUserId'
+
+const DEFAULT_LIMIT = 3
+
+type UseSearchAutocompleteArgs = {
+ query: string
+ limit?: number
+}
+
+type SearchResults = {
+ tracks: UserTrackMetadata[]
+ albums: UserCollectionMetadata[]
+ playlists: UserCollectionMetadata[]
+ users: User[]
+}
+
+const limitAutocompleteResults = (results: SearchResults): SearchResults => {
+ const { tracks, albums, playlists, users } = results
+ return {
+ tracks: tracks.slice(0, DEFAULT_LIMIT),
+ albums: albums.slice(0, DEFAULT_LIMIT),
+ playlists: playlists.slice(0, DEFAULT_LIMIT),
+ users: users.slice(0, DEFAULT_LIMIT)
+ }
+}
+
+export const useSearchAutocomplete = (
+ { query, limit = DEFAULT_LIMIT }: UseSearchAutocompleteArgs,
+ options?: QueryOptions
+) => {
+ const { audiusSdk } = useAudiusQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const { isEnabled: isUSDCEnabled } = useFeatureFlag(
+ FeatureFlags.USDC_PURCHASES
+ )
+
+ return useQuery({
+ queryKey: [QUERY_KEYS.search, query, limit],
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data } = await sdk.full.search.searchAutocomplete({
+ userId: OptionalId.parse(currentUserId),
+ query,
+ limit,
+ offset: 0,
+ includePurchaseable: isUSDCEnabled
+ })
+
+ return limitAutocompleteResults(searchResultsFromSDK(data))
+ },
+ staleTime: options?.staleTime,
+ enabled: options?.enabled !== false && query.length > 0,
+ placeholderData: (prev) => (query === '' ? undefined : prev)
+ })
+}

packages/harmony/src/components/loading-spinner/LoadingSpinner.tsx

@@ -1,23 +1,29 @@
-import cn from 'classnames'
 import Lottie from 'lottie-react'
 
 import loadingSpinner from '~harmony/assets/animations/loadingSpinner.json'
 
-import styles from './LoadingSpinner.module.css'
+import { IconProps } from '../icon'
+import { Flex, FlexProps } from '../layout/Flex'
 
-type LoadingSpinnerProps = { className?: string }
+type LoadingSpinnerProps = FlexProps & Pick<IconProps, 'size' | 'color'>
 
 const LoadingSpinner = (props: LoadingSpinnerProps) => {
- const { className } = props
-
+ const { size = 'l', color, ...rest } = props
  return (
- <div
- className={cn(styles.container, className)}
+ <Flex
  role='progressbar'
  data-chromatic='ignore'
+ css={(theme) => ({
+ height: size ? theme.iconSizes[size] : undefined,
+ width: size ? theme.iconSizes[size] : undefined,
+ g: {
+ path: { stroke: color ? theme.color.icon[color] : 'currentColor' }
+ }
+ })}
+ {...rest}
  >
  <Lottie loop autoplay animationData={loadingSpinner} />
- </div>
+ </Flex>
  )
 }
 

packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx

@@ -1,14 +1,12 @@
 import { useCallback, useContext } from 'react'
 
-import { clearSearch } from '@audius/web/src/common/store/search-bar/actions'
 import type { ParamListBase, RouteProp } from '@react-navigation/core'
 import type {
  NativeStackNavigationOptions,
  NativeStackNavigationProp
 } from '@react-navigation/native-stack'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 import { Text, View } from 'react-native'
-import { useDispatch } from 'react-redux'
 
 import {
  IconAudiusLogoHorizontal,
@@ -58,16 +56,14 @@ export const useAppScreenOptions = (
  const styles = useStyles()
  const navigation = useNavigation()
  const { drawerHelpers } = useContext(AppDrawerContext)
- const dispatch = useDispatch()
 
  const handleOpenLeftNavDrawer = useCallback(() => {
  drawerHelpers?.openDrawer()
  }, [drawerHelpers])
 
  const handlePressSearch = useCallback(() => {
- dispatch(clearSearch())
  navigation.navigate('Search', { autoFocus: true })
- }, [dispatch, navigation])
+ }, [navigation])
 
  const screenOptions: (options: Options) => NativeStackNavigationOptions =
  useCallback(

packages/mobile/src/store/sagas.ts

@@ -49,7 +49,6 @@ import profileSagas from 'common/store/profile/sagas'
 import queueSagas from 'common/store/queue/sagas'
 import recoveryEmailSagas from 'common/store/recovery-email/sagas'
 import savedCollectionsSagas from 'common/store/saved-collections/sagas'
-import searchBarSagas from 'common/store/search-bar/sagas'
 import smartCollectionPageSagas from 'common/store/smart-collection/sagas'
 import socialSagas from 'common/store/social/sagas'
 import tippingSagas from 'common/store/tipping/sagas'
@@ -78,7 +77,6 @@ export default function* rootSaga() {
  ...backendSagas(),
  ...analyticsSagas(),
  ...confirmerSagas(),
- ...searchBarSagas(),
  ...searchResultsSagas(),
 
  // Account

packages/mobile/src/store/store.ts

@@ -8,8 +8,6 @@ import {
 } from '@audius/common/store'
 import backend from '@audius/web/src/common/store/backend/reducer'
 import type { BackendState } from '@audius/web/src/common/store/backend/types'
-import searchBar from '@audius/web/src/common/store/search-bar/reducer'
-import type { SearchBarState } from '@audius/web/src/common/store/search-bar/types'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import signOnReducer from 'common/store/pages/signon/reducer'
 import type {
@@ -52,7 +50,6 @@ export type AppState = CommonState & {
  // These also belong in CommonState but are here until we move them to the @audius/common package:
  signOn: SignOnPageState
  backend: BackendState
- searchBar: SearchBarState
 
  drawers: DrawersState
  keyboard: KeyboardState
@@ -111,7 +108,6 @@ const rootReducer = combineReducers({
  // These also belong in common store reducers but are here until we move them to the @audius/common package:
  backend,
  signOn: signOnReducer as SignOnPageReducer,
- searchBar,
 
  drawers,
  keyboard,

packages/common/src/api/tan-query/queryKeys.ts

@@ -53,5 +53,6 @@ export const QUERY_KEYS = {
  trackHistory: 'trackHistory',
  topTags: 'topTags',
  authorizedApps: 'authorizedApps',
- developerApps: 'developerApps'
+ developerApps: 'developerApps',
+ searchAutocomplete: 'searchAutocomplete'
 } as const

packages/common/src/api/tan-query/useSearchAutocomplete.ts

@@ -0,0 +1,68 @@
+import { OptionalId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { searchResultsFromSDK } from '~/adapters/search'
+import { useAudiusQueryContext } from '~/audius-query'
+import { useFeatureFlag } from '~/hooks/useFeatureFlag'
+import { UserCollectionMetadata } from '~/models/Collection'
+import { UserTrackMetadata } from '~/models/Track'
+import { User } from '~/models/User'
+import { FeatureFlags } from '~/services/remote-config'
+
+import { QUERY_KEYS } from './queryKeys'
+import { QueryOptions } from './types'
+import { useCurrentUserId } from './useCurrentUserId'
+
+const DEFAULT_LIMIT = 3
+
+type UseSearchAutocompleteArgs = {
+ query: string
+ limit?: number
+}
+
+type SearchResults = {
+ tracks: UserTrackMetadata[]
+ albums: UserCollectionMetadata[]
+ playlists: UserCollectionMetadata[]
+ users: User[]
+}
+
+const limitAutocompleteResults = (results: SearchResults): SearchResults => {
+ const { tracks, albums, playlists, users } = results
+ return {
+ tracks: tracks.slice(0, DEFAULT_LIMIT),
+ albums: albums.slice(0, DEFAULT_LIMIT),
+ playlists: playlists.slice(0, DEFAULT_LIMIT),
+ users: users.slice(0, DEFAULT_LIMIT)
+ }
+}
+
+export const useSearchAutocomplete = (
+ { query, limit = DEFAULT_LIMIT }: UseSearchAutocompleteArgs,
+ options?: QueryOptions
+) => {
+ const { audiusSdk } = useAudiusQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const { isEnabled: isUSDCEnabled } = useFeatureFlag(
+ FeatureFlags.USDC_PURCHASES
+ )
+
+ return useQuery({
+ queryKey: [QUERY_KEYS.search, query, limit],
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data } = await sdk.full.search.searchAutocomplete({
+ userId: OptionalId.parse(currentUserId),
+ query,
+ limit,
+ offset: 0,
+ includePurchaseable: isUSDCEnabled
+ })
+
+ return limitAutocompleteResults(searchResultsFromSDK(data))
+ },
+ staleTime: options?.staleTime,
+ enabled: options?.enabled !== false && query.length > 0,
+ placeholderData: (prev) => (query === '' ? undefined : prev)
+ })
+}

packages/harmony/src/components/loading-spinner/LoadingSpinner.tsx

@@ -1,23 +1,29 @@
-import cn from 'classnames'
 import Lottie from 'lottie-react'
 
 import loadingSpinner from '~harmony/assets/animations/loadingSpinner.json'
 
-import styles from './LoadingSpinner.module.css'
+import { IconProps } from '../icon'
+import { Flex, FlexProps } from '../layout/Flex'
 
-type LoadingSpinnerProps = { className?: string }
+type LoadingSpinnerProps = FlexProps & Pick<IconProps, 'size' | 'color'>
 
 const LoadingSpinner = (props: LoadingSpinnerProps) => {
- const { className } = props
-
+ const { size = 'l', color, ...rest } = props
  return (
- <div
- className={cn(styles.container, className)}
+ <Flex
  role='progressbar'
  data-chromatic='ignore'
+ css={(theme) => ({
+ height: size ? theme.iconSizes[size] : undefined,
+ width: size ? theme.iconSizes[size] : undefined,
+ g: {
+ path: { stroke: color ? theme.color.icon[color] : 'currentColor' }
+ }
+ })}
+ {...rest}
  >
  <Lottie loop autoplay animationData={loadingSpinner} />
- </div>
+ </Flex>
  )
 }
 

packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx

@@ -1,14 +1,12 @@
 import { useCallback, useContext } from 'react'
 
-import { clearSearch } from '@audius/web/src/common/store/search-bar/actions'
 import type { ParamListBase, RouteProp } from '@react-navigation/core'
 import type {
  NativeStackNavigationOptions,
  NativeStackNavigationProp
 } from '@react-navigation/native-stack'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 import { Text, View } from 'react-native'
-import { useDispatch } from 'react-redux'
 
 import {
  IconAudiusLogoHorizontal,
@@ -58,16 +56,14 @@ export const useAppScreenOptions = (
  const styles = useStyles()
  const navigation = useNavigation()
  const { drawerHelpers } = useContext(AppDrawerContext)
- const dispatch = useDispatch()
 
  const handleOpenLeftNavDrawer = useCallback(() => {
  drawerHelpers?.openDrawer()
  }, [drawerHelpers])
 
  const handlePressSearch = useCallback(() => {
- dispatch(clearSearch())
  navigation.navigate('Search', { autoFocus: true })
- }, [dispatch, navigation])
+ }, [navigation])
 
  const screenOptions: (options: Options) => NativeStackNavigationOptions =
  useCallback(

packages/mobile/src/store/sagas.ts

@@ -49,7 +49,6 @@ import profileSagas from 'common/store/profile/sagas'
 import queueSagas from 'common/store/queue/sagas'
 import recoveryEmailSagas from 'common/store/recovery-email/sagas'
 import savedCollectionsSagas from 'common/store/saved-collections/sagas'
-import searchBarSagas from 'common/store/search-bar/sagas'
 import smartCollectionPageSagas from 'common/store/smart-collection/sagas'
 import socialSagas from 'common/store/social/sagas'
 import tippingSagas from 'common/store/tipping/sagas'
@@ -78,7 +77,6 @@ export default function* rootSaga() {
  ...backendSagas(),
  ...analyticsSagas(),
  ...confirmerSagas(),
- ...searchBarSagas(),
  ...searchResultsSagas(),
 
  // Account

packages/mobile/src/store/store.ts

@@ -8,8 +8,6 @@ import {
 } from '@audius/common/store'
 import backend from '@audius/web/src/common/store/backend/reducer'
 import type { BackendState } from '@audius/web/src/common/store/backend/types'
-import searchBar from '@audius/web/src/common/store/search-bar/reducer'
-import type { SearchBarState } from '@audius/web/src/common/store/search-bar/types'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import signOnReducer from 'common/store/pages/signon/reducer'
 import type {
@@ -52,7 +50,6 @@ export type AppState = CommonState & {
  // These also belong in CommonState but are here until we move them to the @audius/common package:
  signOn: SignOnPageState
  backend: BackendState
- searchBar: SearchBarState
 
  drawers: DrawersState
  keyboard: KeyboardState
@@ -111,7 +108,6 @@ const rootReducer = combineReducers({
  // These also belong in common store reducers but are here until we move them to the @audius/common package:
  backend,
  signOn: signOnReducer as SignOnPageReducer,
- searchBar,
 
  drawers,
  keyboard,

packages/common/src/api/tan-query/queryKeys.ts

@@ -53,5 +53,6 @@ export const QUERY_KEYS = {
  trackHistory: 'trackHistory',
  topTags: 'topTags',
  authorizedApps: 'authorizedApps',
- developerApps: 'developerApps'
+ developerApps: 'developerApps',
+ searchAutocomplete: 'searchAutocomplete'
 } as const

packages/common/src/api/tan-query/useSearchAutocomplete.ts

@@ -0,0 +1,68 @@
+import { OptionalId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { searchResultsFromSDK } from '~/adapters/search'
+import { useAudiusQueryContext } from '~/audius-query'
+import { useFeatureFlag } from '~/hooks/useFeatureFlag'
+import { UserCollectionMetadata } from '~/models/Collection'
+import { UserTrackMetadata } from '~/models/Track'
+import { User } from '~/models/User'
+import { FeatureFlags } from '~/services/remote-config'
+
+import { QUERY_KEYS } from './queryKeys'
+import { QueryOptions } from './types'
+import { useCurrentUserId } from './useCurrentUserId'
+
+const DEFAULT_LIMIT = 3
+
+type UseSearchAutocompleteArgs = {
+ query: string
+ limit?: number
+}
+
+type SearchResults = {
+ tracks: UserTrackMetadata[]
+ albums: UserCollectionMetadata[]
+ playlists: UserCollectionMetadata[]
+ users: User[]
+}
+
+const limitAutocompleteResults = (results: SearchResults): SearchResults => {
+ const { tracks, albums, playlists, users } = results
+ return {
+ tracks: tracks.slice(0, DEFAULT_LIMIT),
+ albums: albums.slice(0, DEFAULT_LIMIT),
+ playlists: playlists.slice(0, DEFAULT_LIMIT),
+ users: users.slice(0, DEFAULT_LIMIT)
+ }
+}
+
+export const useSearchAutocomplete = (
+ { query, limit = DEFAULT_LIMIT }: UseSearchAutocompleteArgs,
+ options?: QueryOptions
+) => {
+ const { audiusSdk } = useAudiusQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const { isEnabled: isUSDCEnabled } = useFeatureFlag(
+ FeatureFlags.USDC_PURCHASES
+ )
+
+ return useQuery({
+ queryKey: [QUERY_KEYS.search, query, limit],
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data } = await sdk.full.search.searchAutocomplete({
+ userId: OptionalId.parse(currentUserId),
+ query,
+ limit,
+ offset: 0,
+ includePurchaseable: isUSDCEnabled
+ })
+
+ return limitAutocompleteResults(searchResultsFromSDK(data))
+ },
+ staleTime: options?.staleTime,
+ enabled: options?.enabled !== false && query.length > 0,
+ placeholderData: (prev) => (query === '' ? undefined : prev)
+ })
+}

packages/harmony/src/components/loading-spinner/LoadingSpinner.tsx

@@ -1,23 +1,29 @@
-import cn from 'classnames'
 import Lottie from 'lottie-react'
 
 import loadingSpinner from '~harmony/assets/animations/loadingSpinner.json'
 
-import styles from './LoadingSpinner.module.css'
+import { IconProps } from '../icon'
+import { Flex, FlexProps } from '../layout/Flex'
 
-type LoadingSpinnerProps = { className?: string }
+type LoadingSpinnerProps = FlexProps & Pick<IconProps, 'size' | 'color'>
 
 const LoadingSpinner = (props: LoadingSpinnerProps) => {
- const { className } = props
-
+ const { size = 'l', color, ...rest } = props
  return (
- <div
- className={cn(styles.container, className)}
+ <Flex
  role='progressbar'
  data-chromatic='ignore'
+ css={(theme) => ({
+ height: size ? theme.iconSizes[size] : undefined,
+ width: size ? theme.iconSizes[size] : undefined,
+ g: {
+ path: { stroke: color ? theme.color.icon[color] : 'currentColor' }
+ }
+ })}
+ {...rest}
  >
  <Lottie loop autoplay animationData={loadingSpinner} />
- </div>
+ </Flex>
  )
 }
 

packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx

@@ -1,14 +1,12 @@
 import { useCallback, useContext } from 'react'
 
-import { clearSearch } from '@audius/web/src/common/store/search-bar/actions'
 import type { ParamListBase, RouteProp } from '@react-navigation/core'
 import type {
  NativeStackNavigationOptions,
  NativeStackNavigationProp
 } from '@react-navigation/native-stack'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 import { Text, View } from 'react-native'
-import { useDispatch } from 'react-redux'
 
 import {
  IconAudiusLogoHorizontal,
@@ -58,16 +56,14 @@ export const useAppScreenOptions = (
  const styles = useStyles()
  const navigation = useNavigation()
  const { drawerHelpers } = useContext(AppDrawerContext)
- const dispatch = useDispatch()
 
  const handleOpenLeftNavDrawer = useCallback(() => {
  drawerHelpers?.openDrawer()
  }, [drawerHelpers])
 
  const handlePressSearch = useCallback(() => {
- dispatch(clearSearch())
  navigation.navigate('Search', { autoFocus: true })
- }, [dispatch, navigation])
+ }, [navigation])
 
  const screenOptions: (options: Options) => NativeStackNavigationOptions =
  useCallback(

packages/mobile/src/store/sagas.ts

@@ -49,7 +49,6 @@ import profileSagas from 'common/store/profile/sagas'
 import queueSagas from 'common/store/queue/sagas'
 import recoveryEmailSagas from 'common/store/recovery-email/sagas'
 import savedCollectionsSagas from 'common/store/saved-collections/sagas'
-import searchBarSagas from 'common/store/search-bar/sagas'
 import smartCollectionPageSagas from 'common/store/smart-collection/sagas'
 import socialSagas from 'common/store/social/sagas'
 import tippingSagas from 'common/store/tipping/sagas'
@@ -78,7 +77,6 @@ export default function* rootSaga() {
  ...backendSagas(),
  ...analyticsSagas(),
  ...confirmerSagas(),
- ...searchBarSagas(),
  ...searchResultsSagas(),
 
  // Account

packages/mobile/src/store/store.ts

@@ -8,8 +8,6 @@ import {
 } from '@audius/common/store'
 import backend from '@audius/web/src/common/store/backend/reducer'
 import type { BackendState } from '@audius/web/src/common/store/backend/types'
-import searchBar from '@audius/web/src/common/store/search-bar/reducer'
-import type { SearchBarState } from '@audius/web/src/common/store/search-bar/types'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import signOnReducer from 'common/store/pages/signon/reducer'
 import type {
@@ -52,7 +50,6 @@ export type AppState = CommonState & {
  // These also belong in CommonState but are here until we move them to the @audius/common package:
  signOn: SignOnPageState
  backend: BackendState
- searchBar: SearchBarState
 
  drawers: DrawersState
  keyboard: KeyboardState
@@ -111,7 +108,6 @@ const rootReducer = combineReducers({
  // These also belong in common store reducers but are here until we move them to the @audius/common package:
  backend,
  signOn: signOnReducer as SignOnPageReducer,
- searchBar,
 
  drawers,
  keyboard,

packages/common/src/api/tan-query/queryKeys.ts

@@ -53,5 +53,6 @@ export const QUERY_KEYS = {
  trackHistory: 'trackHistory',
  topTags: 'topTags',
  authorizedApps: 'authorizedApps',
- developerApps: 'developerApps'
+ developerApps: 'developerApps',
+ searchAutocomplete: 'searchAutocomplete'
 } as const

packages/common/src/api/tan-query/useSearchAutocomplete.ts

@@ -0,0 +1,68 @@
+import { OptionalId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { searchResultsFromSDK } from '~/adapters/search'
+import { useAudiusQueryContext } from '~/audius-query'
+import { useFeatureFlag } from '~/hooks/useFeatureFlag'
+import { UserCollectionMetadata } from '~/models/Collection'
+import { UserTrackMetadata } from '~/models/Track'
+import { User } from '~/models/User'
+import { FeatureFlags } from '~/services/remote-config'
+
+import { QUERY_KEYS } from './queryKeys'
+import { QueryOptions } from './types'
+import { useCurrentUserId } from './useCurrentUserId'
+
+const DEFAULT_LIMIT = 3
+
+type UseSearchAutocompleteArgs = {
+ query: string
+ limit?: number
+}
+
+type SearchResults = {
+ tracks: UserTrackMetadata[]
+ albums: UserCollectionMetadata[]
+ playlists: UserCollectionMetadata[]
+ users: User[]
+}
+
+const limitAutocompleteResults = (results: SearchResults): SearchResults => {
+ const { tracks, albums, playlists, users } = results
+ return {
+ tracks: tracks.slice(0, DEFAULT_LIMIT),
+ albums: albums.slice(0, DEFAULT_LIMIT),
+ playlists: playlists.slice(0, DEFAULT_LIMIT),
+ users: users.slice(0, DEFAULT_LIMIT)
+ }
+}
+
+export const useSearchAutocomplete = (
+ { query, limit = DEFAULT_LIMIT }: UseSearchAutocompleteArgs,
+ options?: QueryOptions
+) => {
+ const { audiusSdk } = useAudiusQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const { isEnabled: isUSDCEnabled } = useFeatureFlag(
+ FeatureFlags.USDC_PURCHASES
+ )
+
+ return useQuery({
+ queryKey: [QUERY_KEYS.search, query, limit],
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data } = await sdk.full.search.searchAutocomplete({
+ userId: OptionalId.parse(currentUserId),
+ query,
+ limit,
+ offset: 0,
+ includePurchaseable: isUSDCEnabled
+ })
+
+ return limitAutocompleteResults(searchResultsFromSDK(data))
+ },
+ staleTime: options?.staleTime,
+ enabled: options?.enabled !== false && query.length > 0,
+ placeholderData: (prev) => (query === '' ? undefined : prev)
+ })
+}

packages/harmony/src/components/loading-spinner/LoadingSpinner.tsx

@@ -1,23 +1,29 @@
-import cn from 'classnames'
 import Lottie from 'lottie-react'
 
 import loadingSpinner from '~harmony/assets/animations/loadingSpinner.json'
 
-import styles from './LoadingSpinner.module.css'
+import { IconProps } from '../icon'
+import { Flex, FlexProps } from '../layout/Flex'
 
-type LoadingSpinnerProps = { className?: string }
+type LoadingSpinnerProps = FlexProps & Pick<IconProps, 'size' | 'color'>
 
 const LoadingSpinner = (props: LoadingSpinnerProps) => {
- const { className } = props
-
+ const { size = 'l', color, ...rest } = props
  return (
- <div
- className={cn(styles.container, className)}
+ <Flex
  role='progressbar'
  data-chromatic='ignore'
+ css={(theme) => ({
+ height: size ? theme.iconSizes[size] : undefined,
+ width: size ? theme.iconSizes[size] : undefined,
+ g: {
+ path: { stroke: color ? theme.color.icon[color] : 'currentColor' }
+ }
+ })}
+ {...rest}
  >
  <Lottie loop autoplay animationData={loadingSpinner} />
- </div>
+ </Flex>
  )
 }
 

packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx

@@ -1,14 +1,12 @@
 import { useCallback, useContext } from 'react'
 
-import { clearSearch } from '@audius/web/src/common/store/search-bar/actions'
 import type { ParamListBase, RouteProp } from '@react-navigation/core'
 import type {
  NativeStackNavigationOptions,
  NativeStackNavigationProp
 } from '@react-navigation/native-stack'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 import { Text, View } from 'react-native'
-import { useDispatch } from 'react-redux'
 
 import {
  IconAudiusLogoHorizontal,
@@ -58,16 +56,14 @@ export const useAppScreenOptions = (
  const styles = useStyles()
  const navigation = useNavigation()
  const { drawerHelpers } = useContext(AppDrawerContext)
- const dispatch = useDispatch()
 
  const handleOpenLeftNavDrawer = useCallback(() => {
  drawerHelpers?.openDrawer()
  }, [drawerHelpers])
 
  const handlePressSearch = useCallback(() => {
- dispatch(clearSearch())
  navigation.navigate('Search', { autoFocus: true })
- }, [dispatch, navigation])
+ }, [navigation])
 
  const screenOptions: (options: Options) => NativeStackNavigationOptions =
  useCallback(

packages/mobile/src/store/sagas.ts

@@ -49,7 +49,6 @@ import profileSagas from 'common/store/profile/sagas'
 import queueSagas from 'common/store/queue/sagas'
 import recoveryEmailSagas from 'common/store/recovery-email/sagas'
 import savedCollectionsSagas from 'common/store/saved-collections/sagas'
-import searchBarSagas from 'common/store/search-bar/sagas'
 import smartCollectionPageSagas from 'common/store/smart-collection/sagas'
 import socialSagas from 'common/store/social/sagas'
 import tippingSagas from 'common/store/tipping/sagas'
@@ -78,7 +77,6 @@ export default function* rootSaga() {
  ...backendSagas(),
  ...analyticsSagas(),
  ...confirmerSagas(),
- ...searchBarSagas(),
  ...searchResultsSagas(),
 
  // Account

packages/mobile/src/store/store.ts

@@ -8,8 +8,6 @@ import {
 } from '@audius/common/store'
 import backend from '@audius/web/src/common/store/backend/reducer'
 import type { BackendState } from '@audius/web/src/common/store/backend/types'
-import searchBar from '@audius/web/src/common/store/search-bar/reducer'
-import type { SearchBarState } from '@audius/web/src/common/store/search-bar/types'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import signOnReducer from 'common/store/pages/signon/reducer'
 import type {
@@ -52,7 +50,6 @@ export type AppState = CommonState & {
  // These also belong in CommonState but are here until we move them to the @audius/common package:
  signOn: SignOnPageState
  backend: BackendState
- searchBar: SearchBarState
 
  drawers: DrawersState
  keyboard: KeyboardState
@@ -111,7 +108,6 @@ const rootReducer = combineReducers({
  // These also belong in common store reducers but are here until we move them to the @audius/common package:
  backend,
  signOn: signOnReducer as SignOnPageReducer,
- searchBar,
 
  drawers,
  keyboard,

packages/common/src/api/tan-query/queryKeys.ts

@@ -53,5 +53,6 @@ export const QUERY_KEYS = {
  trackHistory: 'trackHistory',
  topTags: 'topTags',
  authorizedApps: 'authorizedApps',
- developerApps: 'developerApps'
+ developerApps: 'developerApps',
+ searchAutocomplete: 'searchAutocomplete'
 } as const

packages/common/src/api/tan-query/useSearchAutocomplete.ts

@@ -0,0 +1,68 @@
+import { OptionalId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { searchResultsFromSDK } from '~/adapters/search'
+import { useAudiusQueryContext } from '~/audius-query'
+import { useFeatureFlag } from '~/hooks/useFeatureFlag'
+import { UserCollectionMetadata } from '~/models/Collection'
+import { UserTrackMetadata } from '~/models/Track'
+import { User } from '~/models/User'
+import { FeatureFlags } from '~/services/remote-config'
+
+import { QUERY_KEYS } from './queryKeys'
+import { QueryOptions } from './types'
+import { useCurrentUserId } from './useCurrentUserId'
+
+const DEFAULT_LIMIT = 3
+
+type UseSearchAutocompleteArgs = {
+ query: string
+ limit?: number
+}
+
+type SearchResults = {
+ tracks: UserTrackMetadata[]
+ albums: UserCollectionMetadata[]
+ playlists: UserCollectionMetadata[]
+ users: User[]
+}
+
+const limitAutocompleteResults = (results: SearchResults): SearchResults => {
+ const { tracks, albums, playlists, users } = results
+ return {
+ tracks: tracks.slice(0, DEFAULT_LIMIT),
+ albums: albums.slice(0, DEFAULT_LIMIT),
+ playlists: playlists.slice(0, DEFAULT_LIMIT),
+ users: users.slice(0, DEFAULT_LIMIT)
+ }
+}
+
+export const useSearchAutocomplete = (
+ { query, limit = DEFAULT_LIMIT }: UseSearchAutocompleteArgs,
+ options?: QueryOptions
+) => {
+ const { audiusSdk } = useAudiusQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const { isEnabled: isUSDCEnabled } = useFeatureFlag(
+ FeatureFlags.USDC_PURCHASES
+ )
+
+ return useQuery({
+ queryKey: [QUERY_KEYS.search, query, limit],
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data } = await sdk.full.search.searchAutocomplete({
+ userId: OptionalId.parse(currentUserId),
+ query,
+ limit,
+ offset: 0,
+ includePurchaseable: isUSDCEnabled
+ })
+
+ return limitAutocompleteResults(searchResultsFromSDK(data))
+ },
+ staleTime: options?.staleTime,
+ enabled: options?.enabled !== false && query.length > 0,
+ placeholderData: (prev) => (query === '' ? undefined : prev)
+ })
+}

packages/harmony/src/components/loading-spinner/LoadingSpinner.tsx

@@ -1,23 +1,29 @@
-import cn from 'classnames'
 import Lottie from 'lottie-react'
 
 import loadingSpinner from '~harmony/assets/animations/loadingSpinner.json'
 
-import styles from './LoadingSpinner.module.css'
+import { IconProps } from '../icon'
+import { Flex, FlexProps } from '../layout/Flex'
 
-type LoadingSpinnerProps = { className?: string }
+type LoadingSpinnerProps = FlexProps & Pick<IconProps, 'size' | 'color'>
 
 const LoadingSpinner = (props: LoadingSpinnerProps) => {
- const { className } = props
-
+ const { size = 'l', color, ...rest } = props
  return (
- <div
- className={cn(styles.container, className)}
+ <Flex
  role='progressbar'
  data-chromatic='ignore'
+ css={(theme) => ({
+ height: size ? theme.iconSizes[size] : undefined,
+ width: size ? theme.iconSizes[size] : undefined,
+ g: {
+ path: { stroke: color ? theme.color.icon[color] : 'currentColor' }
+ }
+ })}
+ {...rest}
  >
  <Lottie loop autoplay animationData={loadingSpinner} />
- </div>
+ </Flex>
  )
 }
 

packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx

@@ -1,14 +1,12 @@
 import { useCallback, useContext } from 'react'
 
-import { clearSearch } from '@audius/web/src/common/store/search-bar/actions'
 import type { ParamListBase, RouteProp } from '@react-navigation/core'
 import type {
  NativeStackNavigationOptions,
  NativeStackNavigationProp
 } from '@react-navigation/native-stack'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 import { Text, View } from 'react-native'
-import { useDispatch } from 'react-redux'
 
 import {
  IconAudiusLogoHorizontal,
@@ -58,16 +56,14 @@ export const useAppScreenOptions = (
  const styles = useStyles()
  const navigation = useNavigation()
  const { drawerHelpers } = useContext(AppDrawerContext)
- const dispatch = useDispatch()
 
  const handleOpenLeftNavDrawer = useCallback(() => {
  drawerHelpers?.openDrawer()
  }, [drawerHelpers])
 
  const handlePressSearch = useCallback(() => {
- dispatch(clearSearch())
  navigation.navigate('Search', { autoFocus: true })
- }, [dispatch, navigation])
+ }, [navigation])
 
  const screenOptions: (options: Options) => NativeStackNavigationOptions =
  useCallback(

packages/mobile/src/store/sagas.ts

@@ -49,7 +49,6 @@ import profileSagas from 'common/store/profile/sagas'
 import queueSagas from 'common/store/queue/sagas'
 import recoveryEmailSagas from 'common/store/recovery-email/sagas'
 import savedCollectionsSagas from 'common/store/saved-collections/sagas'
-import searchBarSagas from 'common/store/search-bar/sagas'
 import smartCollectionPageSagas from 'common/store/smart-collection/sagas'
 import socialSagas from 'common/store/social/sagas'
 import tippingSagas from 'common/store/tipping/sagas'
@@ -78,7 +77,6 @@ export default function* rootSaga() {
  ...backendSagas(),
  ...analyticsSagas(),
  ...confirmerSagas(),
- ...searchBarSagas(),
  ...searchResultsSagas(),
 
  // Account

packages/mobile/src/store/store.ts

@@ -8,8 +8,6 @@ import {
 } from '@audius/common/store'
 import backend from '@audius/web/src/common/store/backend/reducer'
 import type { BackendState } from '@audius/web/src/common/store/backend/types'
-import searchBar from '@audius/web/src/common/store/search-bar/reducer'
-import type { SearchBarState } from '@audius/web/src/common/store/search-bar/types'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import signOnReducer from 'common/store/pages/signon/reducer'
 import type {
@@ -52,7 +50,6 @@ export type AppState = CommonState & {
  // These also belong in CommonState but are here until we move them to the @audius/common package:
  signOn: SignOnPageState
  backend: BackendState
- searchBar: SearchBarState
 
  drawers: DrawersState
  keyboard: KeyboardState
@@ -111,7 +108,6 @@ const rootReducer = combineReducers({
  // These also belong in common store reducers but are here until we move them to the @audius/common package:
  backend,
  signOn: signOnReducer as SignOnPageReducer,
- searchBar,
 
  drawers,
  keyboard,