[C-916] Native Profile Screen (#1834)

* [C-858] Add track page sagas to native, Refactor TrackScreen (#1768)

* Search results screen (#1782)

* search results screen

* remove comments

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

* [C-902] Move collection page to native (#1798)

* [C-903] Migrate feed to native store (#1799)

* [React Native Reloaded] Make mobile search fully native (#1808)

* search -> native

* pr review

* clean up after migrating search (#1809)

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

* [C-872] Play audio in native (#1807)

* [C-778] Native notifications (#1810)

* Remove /macro usage for typed-redux-saga (#1751)

* Make resetting of badge count native

* Split sagas between web and mobile

* Update dispatch and selectors in notifs

* [C-858] Add track page sagas to native, Refactor TrackScreen (#1768)

* Search results screen (#1782)

* search results screen

* remove comments

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

* Get notifications loading

* [C-858] Add track page sagas to native, Refactor TrackScreen (#1768)

* Search results screen (#1782)

* search results screen

* remove comments

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

* [C-902] Move collection page to native (#1798)

* [C-903] Migrate feed to native store (#1799)

* Delete unused mobileSagas

* Remove uneeded notifications slice

* Clean up notif message passing

* [React Native Reloaded] Make mobile search fully native (#1808)

* search -> native

* pr review

* clean up after migrating search (#1809)

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

* Fix type issues

* Lint fix

Co-authored-by: Dylan Jeffers <dylan@audius.co>
Co-authored-by: Raymond Jacobson <ray@audius.co>
Co-authored-by: Nikki Kang <kangaroo233@gmail.com>
Co-authored-by: nicoback2 <36916764+nicoback2@users.noreply.github.com>

* Update selectors and dispatches

* [C-858] Add track page sagas to native, Refactor TrackScreen (#1768)

* Search results screen (#1782)

* [C-902] Move collection page to native (#1798)

* [C-903] Migrate feed to native store (#1799)

* [React Native Reloaded] Make mobile search fully native (#1808)

* [C-872] Play audio in native (#1807)

* [C-778] Native notifications (#1810)

* Remove /macro usage for typed-redux-saga (#1751)

* Make resetting of badge count native

* Split sagas between web and mobile

* Update dispatch and selectors in notifs

* [C-858] Add track page sagas to native, Refactor TrackScreen (#1768)

* Search results screen (#1782)

* search results screen

* remove comments

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

* Get notifications loading

* [C-858] Add track page sagas to native, Refactor TrackScreen (#1768)

* Search results screen (#1782)

* search results screen

* remove comments

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

* [C-902] Move collection page to native (#1798)

* [C-903] Migrate feed to native store (#1799)

* Delete unused mobileSagas

* Remove uneeded notifications slice

* Clean up notif message passing

* [React Native Reloaded] Make mobile search fully native (#1808)

* search -> native

* pr review

* clean up after migrating search (#1809)

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

* Fix type issues

* Lint fix

Co-authored-by: Dylan Jeffers <dylan@audius.co>
Co-authored-by: Raymond Jacobson <ray@audius.co>
Co-authored-by: Nikki Kang <kangaroo233@gmail.com>
Co-authored-by: nicoback2 <36916764+nicoback2@users.noreply.github.com>

* [C-917] Add native trending screen (#1816)

* [C-924] Add fully native explore screen (#1819)

* [C-931] Fully native favorites screen (#1823)

* [C-929] Add fully native drawers (#1824)

* Fix blob error

* Add profile sagas and fetch profile

* Put useSelectProfile deps back for now

* Get profile lineups working

* Fix type

* Revert tracks sagas

* Fix path

Co-authored-by: Dylan Jeffers <dylan@audius.co>
Co-authored-by: Nikki Kang <kangaroo233@gmail.com>
Co-authored-by: Raymond Jacobson <ray@audius.co>
Co-authored-by: nicoback2 <36916764+nicoback2@users.noreply.github.com>

packages/common/src/services/audius-api-client/AudiusAPIClient.ts

@@ -969,8 +969,7 @@ export class AudiusAPIClient {
 
     let headers = {}
     if (encodedCurrentUserId && getUnlisted) {
-      const { data, signature } =
-        await this.audiusBackendInstance.signDiscoveryNodeRequest()
+      const { data, signature } = await this.audiusBackendInstance.signData()
       headers = {
         [AuthHeaders.Message]: data,
         [AuthHeaders.Signature]: signature

packages/common/src/services/audius-backend/AudiusBackend.ts

@@ -431,7 +431,9 @@ export const audiusBackend = ({
         trackId
       )
       if (asUrl) {
-        const url = URL.createObjectURL(res.data)
+        const url = nativeMobile
+          ? res.config.url
+          : URL.createObjectURL(res.data)
         if (cache) CIDCache.add(cid, url)
         return url
       }

packages/common/src/services/opensea-client/OpenSeaClient.ts

@@ -1,4 +1,4 @@
-import * as allPromisesSettled from 'promise.allsettled'
+import allPromisesSettled from 'promise.allsettled'
 
 import {
   Collectible,

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

@@ -1,13 +1,13 @@
 import { profilePageSelectors } from '@audius/common'
+import { useSelector } from 'react-redux'
 
 import { CollectionList } from 'app/components/collection-list/CollectionList'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import { useEmptyProfileText } from './EmptyProfileTile'
 const { getProfileAlbums } = profilePageSelectors
 
 export const AlbumsTab = () => {
-  const albums = useSelectorWeb(getProfileAlbums)
+  const albums = useSelector(getProfileAlbums)
 
   const emptyListText = useEmptyProfileText('albums')
 

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

@@ -7,17 +7,15 @@ import {
   artistRecommendationsUIActions
 } from '@audius/common'
 import { TouchableOpacity, View } from 'react-native'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useEffectOnce } from 'react-use'
 
 import IconFollow from 'app/assets/images/iconFollow.svg'
 import IconFollowing from 'app/assets/images/iconFollowing.svg'
 import IconClose from 'app/assets/images/iconRemove.svg'
 import { Button, IconButton, Text } from 'app/components/core'
 import { ProfilePicture } from 'app/components/user'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { track, make } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 import { EventNames } from 'app/types/analytics'
@@ -91,10 +89,9 @@ export const ArtistRecommendations = (props: ArtistRecommendationsProps) => {
   const { user_id, name } = useSelectProfile(['user_id', 'name'])
 
   const dispatch = useDispatch()
-  const dispatchWeb = useDispatchWeb()
 
   useEffectOnce(() => {
-    dispatchWeb(fetchRelatedArtists({ userId: user_id }))
+    dispatch(fetchRelatedArtists({ userId: user_id }))
 
     track(
       make({
@@ -104,7 +101,7 @@ export const ArtistRecommendations = (props: ArtistRecommendationsProps) => {
     )
   })
 
-  const suggestedArtists = useSelectorWeb(
+  const suggestedArtists = useSelector(
     (state) => getRelatedArtistIds(state, { id: user_id }),
     (a, b) => a.length === b.length
   )

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

@@ -8,13 +8,12 @@ import {
 } from '@audius/common'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { ImageBackground, Text, View } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
 
 import LogoEth from 'app/assets/images/logoEth.svg'
 import LogoSol from 'app/assets/images/logoSol.svg'
 import IconPlay from 'app/assets/images/pbIconPlay.svg'
 import { Tile } from 'app/components/core'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { makeStyles, shadow } from 'app/styles'
 const { setVisibility } = modalsActions
 const { setCollectible } = collectibleDetailsUIActions
@@ -80,19 +79,19 @@ export const CollectiblesCard = (props: CollectiblesCardProps) => {
   const stylesConfig = useMemo(() => ({ isOwned }), [isOwned])
   const styles = useStyles(stylesConfig)
 
-  const dispatchWeb = useDispatchWeb()
-  const accountId = useSelectorWeb(getUserId)
+  const dispatch = useDispatch()
+  const accountId = useSelector(getUserId)
 
   const handlePress = useCallback(() => {
-    dispatchWeb(
+    dispatch(
       setCollectible({
         collectible,
         ownerId,
         isUserOnTheirProfile: accountId === ownerId
       })
     )
-    dispatchWeb(setVisibility({ modal: 'CollectibleDetails', visible: true }))
-  }, [dispatchWeb, collectible, accountId, ownerId])
+    dispatch(setVisibility({ modal: 'CollectibleDetails', visible: true }))
+  }, [dispatch, collectible, accountId, ownerId])
 
   const url = frameUrl ?? gifUrl
 

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

@@ -4,13 +4,13 @@ import { accountSelectors } from '@audius/common'
 import Clipboard from '@react-native-clipboard/clipboard'
 import type { FlatList as RNFlatList } from 'react-native'
 import { View, Text } from 'react-native'
+import { useSelector } from 'react-redux'
 
 import IconShare from 'app/assets/images/iconShare.svg'
 import { Tile, GradientText, FlatList, Button } from 'app/components/core'
 import { ToastContext } from 'app/components/toast/ToastContext'
 import UserBadges from 'app/components/user-badges'
 import { useScrollToTop } from 'app/hooks/useScrollToTop'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { makeStyles } from 'app/styles'
 import { getCollectiblesRoute } from 'app/utils/routes'
 
@@ -69,8 +69,8 @@ const useStyles = makeStyles(({ typography, palette, spacing }) => ({
 
 export const CollectiblesTab = () => {
   const styles = useStyles()
-  const { profile } = useSelectorWeb(getProfile)
-  const accountId = useSelectorWeb(getUserId)
+  const { profile } = useSelector(getProfile)
+  const accountId = useSelector(getUserId)
   const isOwner = profile?.user_id === accountId
   const { toast } = useContext(ToastContext)
   const ref = useRef<RNFlatList>(null)

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

@@ -1,7 +1,7 @@
 import { accountSelectors } from '@audius/common'
+import { useSelector } from 'react-redux'
 
 import { EmptyTile } from 'app/components/core'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import { useSelectProfile } from './selectors'
 const getUserId = accountSelectors.getUserId
@@ -20,7 +20,7 @@ type Tab = 'tracks' | 'albums' | 'playlists' | 'reposts'
 
 export const useEmptyProfileText = (tab: Tab) => {
   const { user_id, name } = useSelectProfile(['user_id', 'name'])
-  const accountId = useSelectorWeb(getUserId)
+  const accountId = useSelector(getUserId)
 
   const isOwner = user_id === accountId
 

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

@@ -1,13 +1,13 @@
 import { profilePageSelectors } from '@audius/common'
+import { useSelector } from 'react-redux'
 
 import { CollectionList } from 'app/components/collection-list'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import { useEmptyProfileText } from './EmptyProfileTile'
 const { getProfilePlaylists } = profilePageSelectors
 
 export const PlaylistsTab = () => {
-  const playlists = useSelectorWeb(getProfilePlaylists)
+  const playlists = useSelector(getProfilePlaylists)
 
   const emptyListText = useEmptyProfileText('playlists')
 

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

@@ -1,9 +1,9 @@
 import { accountSelectors } from '@audius/common'
 import { View } from 'react-native'
+import { useSelector } from 'react-redux'
 
 import IconTip from 'app/assets/images/iconTip.svg'
 import { Divider, Text } from 'app/components/core'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
@@ -63,7 +63,7 @@ export const ExpandedSection = () => {
       'user_id',
       'current_user_followee_follow_count'
     ])
-  const accountId = useSelectorWeb(getUserId)
+  const accountId = useSelector(getUserId)
   const isOwner = user_id === accountId
 
   return (

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

@@ -3,11 +3,11 @@ import { useCallback, useEffect, useState } from 'react'
 import { accountSelectors } 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 { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { makeStyles } from 'app/styles'
 
 import { ArtistRecommendations } from '../ArtistRecommendations'
@@ -48,7 +48,7 @@ type ProfileHeaderProps = {
 export const ProfileHeader = (props: ProfileHeaderProps) => {
   const { scrollY } = props
   const styles = useStyles()
-  const accountId = useSelectorWeb(getUserId)
+  const accountId = useSelector(getUserId)
   const [hasUserFollowed, setHasUserFollowed] = useToggle(false)
   const [isExpanded, setIsExpanded] = useToggle(false)
   const [isExpansible, setIsExpansible] = useState(false)

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

@@ -1,14 +1,14 @@
 import { useMemo } from 'react'
 
-import type { ID, Supporting } from '@audius/common'
+import type { CommonState, ID, Supporting } from '@audius/common'
 import {
   stringWeiToBN,
   tippingSelectors,
   MAX_PROFILE_SUPPORTING_TILES
 } from '@audius/common'
 import { FlatList } from 'react-native'
+import { useSelector } from 'react-redux'
 
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 
@@ -33,7 +33,7 @@ const useStyles = makeStyles(() => ({
 export const SupportingList = () => {
   const styles = useStyles()
   const { user_id, supporting_count } = useSelectProfile(['user_id'])
-  const supportingForUser = useSelectorWeb((state) =>
+  const supportingForUser = useSelector((state: CommonState) =>
     getOptimisticSupportingForUser(state, user_id)
   )
   const supportingIdsSorted = useMemo(() => {

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

@@ -7,13 +7,13 @@ import { profilePage } from 'audius-client/src/utils/route'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { ImageBackground, View } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
+import { useSelector } from 'react-redux'
 
 import IconTrophy from 'app/assets/images/iconTrophy.svg'
 import { Text, Tile } from 'app/components/core'
 import { ProfilePicture } from 'app/components/user'
 import UserBadges from 'app/components/user-badges'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { useUserCoverPhoto } from 'app/hooks/useUserCoverPhoto'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
@@ -88,7 +88,7 @@ export const SupportingTile = (props: SupportingTileProps) => {
   const styles = useStyles()
   const navigation = useNavigation()
   const { secondary } = useThemeColors()
-  const user = useSelectorWeb((state) => {
+  const user = useSelector((state) => {
     return getUser(state, { id: supporting.receiver_id })
   })
   const { user_id, handle, name, _cover_photo_sizes } = user || {}

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

@@ -1,14 +1,14 @@
 import { useCallback, useRef, useLayoutEffect } from 'react'
 
 import { cacheUsersSelectors, tippingSelectors } from '@audius/common'
-import type { ID, SupportersMapForUser } from '@audius/common'
+import type { ID, SupportersMapForUser, CommonState } from '@audius/common'
 import { LayoutAnimation, Text, View } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
+import { useSelector } from 'react-redux'
 
 import IconCaretRight from 'app/assets/images/iconCaretRight.svg'
 import IconTrophy from 'app/assets/images/iconTrophy.svg'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { ProfilePictureList } from 'app/screens/notifications-screen/Notification'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
@@ -82,8 +82,9 @@ export const TopSupporters = () => {
     'supporter_count'
   ])
   const supportersForProfile: SupportersMapForUser =
-    useSelectorWeb((state) => getOptimisticSupportersForUser(state, user_id)) ||
-    {}
+    useSelector((state: CommonState) =>
+      getOptimisticSupportersForUser(state, user_id)
+    ) || {}
 
   const rankedSupporterIds = Object.keys(supportersForProfile)
     .sort((k1, k2) => {
@@ -95,7 +96,7 @@ export const TopSupporters = () => {
     .map((k) => supportersForProfile[k as unknown as ID])
     .map((s) => s.sender_id)
 
-  const rankedSupporters = useSelectorWeb((state) => {
+  const rankedSupporters = useSelector((state) => {
     const usersMap = getUsers(state, { ids: rankedSupporterIds })
     return rankedSupporterIds.map((id) => usersMap[id]).filter(Boolean)
   })

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

@@ -6,12 +6,12 @@ import {
   tippingSelectors,
   MAX_PROFILE_SUPPORTING_TILES
 } from '@audius/common'
-import type { ID, SupportingMapForUser } from '@audius/common'
+import type { ID, SupportingMapForUser, CommonState } from '@audius/common'
+import { useSelector } from 'react-redux'
 
 import IconArrow from 'app/assets/images/iconArrow.svg'
 import { Tile, TextButton } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { ProfilePictureList } from 'app/screens/notifications-screen/Notification'
 import { makeStyles } from 'app/styles'
 
@@ -52,8 +52,9 @@ export const ViewAllSupportingTile = () => {
     'supporting_count'
   ])
   const supportingForProfile: SupportingMapForUser =
-    useSelectorWeb((state) => getOptimisticSupportingForUser(state, user_id)) ||
-    {}
+    useSelector((state: CommonState) =>
+      getOptimisticSupportingForUser(state, user_id)
+    ) || {}
   const rankedSupportingIds = Object.keys(supportingForProfile)
     .sort((k1, k2) => {
       const amount1BN = stringWeiToBN(
@@ -66,7 +67,7 @@ export const ViewAllSupportingTile = () => {
     })
     .map((k) => supportingForProfile[k as unknown as ID])
     .map((s) => s.receiver_id)
-  const rankedSupporting = useSelectorWeb((state) => {
+  const rankedSupporting = useSelector((state) => {
     const usersMap = getUsers(state, { ids: rankedSupportingIds })
     return rankedSupportingIds.map((id) => usersMap[id]).filter(Boolean)
   })

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

@@ -1,9 +1,9 @@
 import { FollowSource } from '@audius/common'
 import { View, Text } from 'react-native'
+import { useSelector } from 'react-redux'
 
 import { FollowButton, FollowsYouChip } from 'app/components/user'
 import UserBadges from 'app/components/user-badges'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { flexRowCentered, makeStyles } from 'app/styles'
 
 import { EditProfileButton } from './EditProfileButton'
@@ -91,7 +91,7 @@ export const ProfileInfo = (props: ProfileInfoProps) => {
   const { name, handle, does_current_user_follow, does_follow_current_user } =
     profile
 
-  const isOwner = useSelectorWeb(getIsOwner)
+  const isOwner = useSelector(getIsOwner)
   const profileButton = isOwner ? (
     <EditProfileButton style={styles.followButton} />
   ) : (