Clean up some more instances of useSelectorWeb/useDispatchWeb (#1900)

* Clean up some more instance of useSelectorWeb

* Clean up more instance of useDispatchWeb

packages/common/src/hooks/index.ts

@@ -7,3 +7,4 @@ export * from './useLocalStorage'
 export * from './useTikTokAuth'
 export * from './useTwitterButtonStatus'
 export * from './useUIAudio'
+export * from './useSelectTierInfo'

packages/common/src/hooks/useSelectTierInfo.ts

@@ -0,0 +1,18 @@
+import { useSelector } from 'react-redux'
+
+import { ID } from 'models'
+
+import { CommonState, makeGetTierAndVerifiedForUser } from '../store'
+
+const getTierAndVerifiedForUser = makeGetTierAndVerifiedForUser()
+
+/**
+ * Wraps our reselect tier selector in useMemo and useSelector
+ * to be safe for use in multiple components
+ * @param userId
+ */
+export const useSelectTierInfo = (userId: ID) => {
+  return useSelector((state: CommonState) => {
+    return getTierAndVerifiedForUser(state, { userId })
+  })
+}

packages/mobile/src/components/audio-rewards/TiersExplainerDrawer.tsx

@@ -1,9 +1,12 @@
-import { profilePageSelectors, badgeTiers } from '@audius/common'
+import {
+  profilePageSelectors,
+  badgeTiers,
+  useSelectTierInfo
+} from '@audius/common'
 import type { BadgeTierInfo } from '@audius/common'
 import { Text, View } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { useSelectTierInfo } from 'app/hooks/useSelectTierInfo'
 import { makeStyles } from 'app/styles'
 
 import { AppDrawer } from '../drawer/AppDrawer'

packages/mobile/src/components/enable-push-notifications-drawer/EnablePushNotificationsDrawer.tsx

@@ -16,7 +16,6 @@ import IconRepost from 'app/assets/images/iconRepost.svg'
 import { Button, GradientText } from 'app/components/core'
 import { NativeDrawer } from 'app/components/drawer'
 import Text from 'app/components/text'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useDrawer } from 'app/hooks/useDrawer'
 import type { ThemeColors } from 'app/hooks/useThemedStyles'
 import { useThemedStyles } from 'app/hooks/useThemedStyles'
@@ -118,7 +117,7 @@ const createStyles = (themeColors: ThemeColors) =>
   })
 
 export const EnablePushNotificationsDrawer = () => {
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const { onClose } = useDrawer('EnablePushNotifications')
   const styles = useThemedStyles(createStyles)
   const {
@@ -129,11 +128,11 @@ export const EnablePushNotificationsDrawer = () => {
   } = useThemeColors()
 
   const enablePushNotifications = useCallback(() => {
-    dispatchWeb(
+    dispatch(
       togglePushNotificationSetting(PushNotificationSetting.MobilePush, true)
     )
     onClose()
-  }, [dispatchWeb, onClose])
+  }, [dispatch, onClose])
 
   return (
     <NativeDrawer drawerName='EnablePushNotifications'>

packages/mobile/src/components/feed-tip-tile/SendTipButton.tsx

@@ -3,10 +3,10 @@ import { useCallback, useState } from 'react'
 import type { User } from '@audius/common'
 import { tippingActions } from '@audius/common'
 import { View } from 'react-native'
+import { useDispatch } from 'react-redux'
 
 import { Text, Button } from 'app/components/core'
 import UserBadges from 'app/components/user-badges'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { makeStyles } from 'app/styles'
 const { beginTip } = tippingActions
@@ -48,13 +48,13 @@ type SendTipButtonProps = {
 export const SendTipButton = ({ receiver }: SendTipButtonProps) => {
   const styles = useStyles()
   const navigation = useNavigation()
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const [isActive, setIsActive] = useState(false)
 
   const handlePress = useCallback(() => {
-    dispatchWeb(beginTip({ user: receiver, source: 'feed' }))
+    dispatch(beginTip({ user: receiver, source: 'feed' }))
     navigation.navigate({ native: { screen: 'TipArtist' } })
-  }, [dispatchWeb, receiver, navigation])
+  }, [dispatch, receiver, navigation])
 
   const handlePressIn = useCallback(() => {
     setIsActive(true)

packages/mobile/src/components/lineup-tile/LineupTileStats.tsx

@@ -11,11 +11,11 @@ import {
   REPOSTING_USERS_ROUTE
 } from 'audius-client/src/utils/route'
 import { View, Pressable, StyleSheet } from 'react-native'
+import { useDispatch } from 'react-redux'
 
 import IconHeart from 'app/assets/images/iconHeart.svg'
 import IconRepost from 'app/assets/images/iconRepost.svg'
 import Text from 'app/components/text'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useThemedStyles } from 'app/hooks/useThemedStyles'
 import { flexRowCentered } from 'app/styles'
@@ -99,29 +99,29 @@ export const LineupTileStats = ({
   const styles = useThemedStyles(createStyles)
   const trackTileStyles = useThemedStyles(createTrackTileStyles)
   const { neutralLight4 } = useThemeColors()
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const navigation = useNavigation()
 
   const hasEngagement = Boolean(repostCount || saveCount)
 
   const handlePressFavorites = useCallback(() => {
-    dispatchWeb(setFavorite(id, favoriteType))
+    dispatch(setFavorite(id, favoriteType))
     navigation.push({
       native: { screen: 'Favorited', params: { id, favoriteType } },
       web: { route: FAVORITING_USERS_ROUTE }
     })
-  }, [dispatchWeb, id, navigation, favoriteType])
+  }, [dispatch, id, navigation, favoriteType])
 
   const handlePressReposts = useCallback(() => {
-    dispatchWeb(setRepost(id, repostType))
+    dispatch(setRepost(id, repostType))
     navigation.push({
       native: {
         screen: 'Reposts',
         params: { id, repostType }
       },
       web: { route: REPOSTING_USERS_ROUTE }
     })
-  }, [dispatchWeb, id, navigation, repostType])
+  }, [dispatch, id, navigation, repostType])
 
   return (
     <View style={styles.stats}>

packages/mobile/src/components/lineup/Lineup.tsx

@@ -11,7 +11,7 @@ import {
 import { range } from 'lodash'
 import type { SectionList as RNSectionList } from 'react-native'
 import { Dimensions, StyleSheet, View } from 'react-native'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { SectionList } from 'app/components/core'
 import {
@@ -20,7 +20,6 @@ import {
   LineupTileSkeleton
 } from 'app/components/lineup-tile'
 import { useScrollToTop } from 'app/hooks/useScrollToTop'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { make, track } from 'app/services/analytics'
 
 import { FeedTipTile } from '../feed-tip-tile/FeedTipTile'
@@ -148,7 +147,7 @@ export const Lineup = ({
   limit = Infinity,
   ...listProps
 }: LineupProps) => {
-  const showTip = useSelectorWeb(getShowTip)
+  const showTip = useSelector(getShowTip)
   const dispatch = useDispatch()
   const ref = useRef<RNSectionList>(null)
   const [isPastLoadThreshold, setIsPastLoadThreshold] = useState(false)

packages/mobile/src/components/now-playing-drawer/AudioControls.tsx

@@ -2,14 +2,13 @@ import { useCallback } from 'react'
 
 import { queueActions, queueSelectors, RepeatMode } from '@audius/common'
 import { Animated, View, StyleSheet } from 'react-native'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import IconNext from 'app/assets/images/iconNext.svg'
 import IconPodcastBack from 'app/assets/images/iconPodcastBack.svg'
 import IconPodcastForward from 'app/assets/images/iconPodcastForward.svg'
 import IconPrev from 'app/assets/images/iconPrev.svg'
 import { IconButton } from 'app/components/core'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { usePressScaleAnimation } from 'app/hooks/usePressScaleAnimation'
 import { useThemedStyles } from 'app/hooks/useThemedStyles'
 
@@ -58,7 +57,7 @@ export const AudioControls = ({
   onPrevious,
   isPodcast = false
 }: AudioControlsProps) => {
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
 
   const styles = useThemedStyles(createStyles)
 
@@ -78,8 +77,8 @@ export const AudioControls = ({
     } else {
       enable = true
     }
-    dispatchWeb(shuffle({ enable }))
-  }, [dispatchWeb, shuffleEnabled])
+    dispatch(shuffle({ enable }))
+  }, [dispatch, shuffleEnabled])
 
   const onPressRepeat = useCallback(() => {
     let mode: RepeatMode
@@ -97,8 +96,8 @@ export const AudioControls = ({
         // To appease ts - shouldn't actually hit this.
         mode = RepeatMode.ALL
     }
-    dispatchWeb(repeat({ mode }))
-  }, [dispatchWeb, repeatMode])
+    dispatch(repeat({ mode }))
+  }, [dispatch, repeatMode])
 
   const renderRepeatButton = () => {
     return (

packages/mobile/src/components/user-badges/UserBadges.tsx

@@ -1,10 +1,10 @@
+import { useSelectTierInfo } from '@audius/common'
 import type { User } from '@audius/common'
 import type { ViewStyle, StyleProp, TextStyle } from 'react-native'
 import { StyleSheet, View, Text } from 'react-native'
 
 import IconVerified from 'app/assets/images/iconVerified.svg'
 import { IconAudioBadge } from 'app/components/audio-rewards'
-import { useSelectTierInfo } from 'app/hooks/useSelectTierInfo'
 
 type UserBadgesProps = {
   user: Pick<User, 'user_id' | 'name' | 'is_verified'>

packages/mobile/src/screens/notifications-screen/Notifications/SupporterDethronedNotification.tsx

@@ -9,10 +9,9 @@ import type {
   Nullable,
   SupporterDethronedNotification as SupporterDethroned
 } from '@audius/common'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import IconCrownSource from 'app/assets/images/crown2x.png'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { make } from 'app/services/analytics'
 import { EventNames } from 'app/types/analytics'
@@ -49,7 +48,7 @@ export const SupporterDethronedNotification = (
 ) => {
   const { notification } = props
   const { supportedUserId } = notification
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const navigation = useNavigation()
   const usurpingUser = useSelector((state) =>
     getNotificationUser(state, notification)
@@ -60,9 +59,9 @@ export const SupporterDethronedNotification = (
   )
 
   const handlePress = useCallback(() => {
-    dispatchWeb(beginTip({ user: supportedUser, source: 'dethroned' }))
+    dispatch(beginTip({ user: supportedUser, source: 'dethroned' }))
     navigation.navigate({ native: { screen: 'TipArtist' } })
-  }, [dispatchWeb, supportedUser, navigation])
+  }, [dispatch, supportedUser, navigation])
 
   const handleShare = useCallback(
     (usurpingHandle: string, supportingHandle?: Nullable<string>) => {

packages/mobile/src/screens/notifications-screen/Notifications/useSocialActionHandler.ts

@@ -9,8 +9,8 @@ import type {
 } from '@audius/common'
 import { notificationsUserListActions } from '@audius/common'
 import { NOTIFICATION_PAGE } from 'audius-client/src/utils/route'
+import { useDispatch } from 'react-redux'
 
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { getUserRoute } from 'app/utils/routes'
 
 import { useDrawerNavigation } from '../useDrawerNavigation'
@@ -27,12 +27,12 @@ export const useSocialActionHandler = (
   const { id, type, userIds } = notification
   const firstUser = users?.[0]
   const isMultiUser = userIds.length > 1
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const navigation = useDrawerNavigation()
 
   return useCallback(() => {
     if (isMultiUser) {
-      dispatchWeb(setNotificationId(id))
+      dispatch(setNotificationId(id))
       navigation.navigate({
         native: {
           screen: 'NotificationUsers',
@@ -57,5 +57,5 @@ export const useSocialActionHandler = (
         web: { route: getUserRoute(firstUser), fromPage: NOTIFICATION_PAGE }
       })
     }
-  }, [isMultiUser, id, type, userIds, dispatchWeb, navigation, firstUser])
+  }, [isMultiUser, id, type, userIds, dispatch, navigation, firstUser])
 }

packages/mobile/src/screens/profile-screen/ProfileHeader/ProfileHeader.tsx

@@ -1,13 +1,12 @@
 import { useCallback, useEffect, useState } from 'react'
 
-import { accountSelectors } from '@audius/common'
+import { accountSelectors, useSelectTierInfo } from '@audius/common'
 import type { Animated } from 'react-native'
 import { LayoutAnimation, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import { useToggle } from 'react-use'
 
 import { Divider } from 'app/components/core'
-import { useSelectTierInfo } from 'app/hooks/useSelectTierInfo'
 import { makeStyles } from 'app/styles'
 
 import { ArtistRecommendations } from '../ArtistRecommendations'

packages/mobile/src/screens/profile-screen/ProfileHeader/ProfileSocials.tsx

@@ -1,10 +1,10 @@
 import type { ComponentType } from 'react'
 import { Fragment, useMemo } from 'react'
 
+import { useSelectTierInfo } from '@audius/common'
 import { View } from 'react-native'
 
 import { Divider } from 'app/components/core'
-import { useSelectTierInfo } from 'app/hooks/useSelectTierInfo'
 import { makeStyles } from 'app/styles/makeStyles'
 
 import { useSelectProfile } from '../selectors'

packages/mobile/src/screens/profile-screen/ProfileHeader/ProfileTierTile.tsx

@@ -1,13 +1,12 @@
 import { useCallback } from 'react'
 
-import { modalsActions } from '@audius/common'
+import { modalsActions, useSelectTierInfo } from '@audius/common'
 import { View } from 'react-native'
 import { useDispatch } from 'react-redux'
 
 import { IconAudioBadge, TierText } from 'app/components/audio-rewards'
 import { MODAL_NAME } from 'app/components/audio-rewards/TiersExplainerDrawer'
 import { Tile, Text } from 'app/components/core'
-import { useSelectTierInfo } from 'app/hooks/useSelectTierInfo'
 import { makeStyles } from 'app/styles/makeStyles'
 
 import { useSelectProfile } from '../selectors'

packages/mobile/src/screens/profile-screen/utils.ts

@@ -1,8 +1,6 @@
-import { badgeTiers } from '@audius/common'
+import { badgeTiers, useSelectTierInfo } from '@audius/common'
 import { useSelector } from 'react-redux'
 
-import { useSelectTierInfo } from 'app/hooks/useSelectTierInfo'
-
 import { MIN_COLLECTIBLES_TIER } from './constants'
 import { getIsOwner, useSelectProfile } from './selectors'
 

packages/mobile/src/screens/settings-screen/AppearanceSettingsRow.tsx

@@ -4,14 +4,14 @@ import {
   accountSelectors,
   Name,
   themeActions,
-  themeSelectors
+  themeSelectors,
+  useSelectTierInfo
 } from '@audius/common'
 import Config from 'react-native-config'
 import { useDispatch, useSelector } from 'react-redux'
 
 import Appearance from 'app/assets/images/emojis/waning-crescent-moon.png'
 import { SegmentedControl } from 'app/components/core'
-import { useSelectTierInfo } from 'app/hooks/useSelectTierInfo'
 import { make, track } from 'app/services/analytics'
 import { Theme } from 'app/utils/theme'