[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>

packages/common/package.json

@@ -18,7 +18,6 @@
   },
   "scripts": {
     "build": "rollup -c",
-    "start": "rollup -c -w",
     "lint": "eslint --cache src",
     "lint:fix": "npm run lint -- --fix",
     "start": "rollup -c -w",

packages/common/src/services/native-mobile-interface/types.ts

@@ -38,14 +38,6 @@ export enum MessageType {
   ENABLE_PUSH_NOTIFICATIONS_REMINDER = 'action/enable-push-notifications-reminder',
   PROMPT_PUSH_NOTIFICATION_REMINDER = 'prompt-push-notifications-reminder',
 
-  OPEN_NOTIFICATIONS = 'open-notifications',
-  FETCH_NOTIFICATIONS = 'fetch-notifications',
-  FETCH_NOTIFICATIONS_SUCCESS = 'fetch-notifications-success',
-  FETCH_NOTIFICATIONS_REPLACE = 'fetch-notifications-replace',
-  FETCH_NOTIFICATIONS_FAILURE = 'fetch-notifications-failure',
-  REFRESH_NOTIFICATIONS = 'refresh-notifications',
-  MARK_ALL_NOTIFICATIONS_AS_VIEWED = 'mark-all-notifications-as-viewed',
-
   // Search
   OPEN_SEARCH = 'open-search',
   UPDATE_SEARCH_QUERY = 'update-search-query',

packages/common/src/store/notifications/actions.ts

@@ -27,6 +27,7 @@ export const SET_NOTIFICATION_USERS = 'NOTIFICATION/SET_NOTIFICATION_USERS'
 export const SET_TOTAL_UNVIEWED_TO_ZERO =
   'NOTIFICATION/SET_TOTAL_UNVIEWED_TO_ZERO'
 export const MARK_ALL_AS_VIEWED = 'NOTIFICATION/MARK_ALL_AS_VIEWED'
+export const MARKED_ALL_AS_VIEWED = 'NOTIFICATION/MARKED_ALL_AS_VIEWED'
 
 export const TOGGLE_NOTIFICATION_PANEL =
   'NOTIFICATION/TOGGLE_NOTIFICATION_PANEL'
@@ -113,6 +114,8 @@ export const setTotalUnviewedToZero = () => ({
 
 export const markAllAsViewed = () => ({ type: MARK_ALL_AS_VIEWED })
 
+export const markedAllAsViewed = () => ({ type: MARKED_ALL_AS_VIEWED })
+
 export const setNotificationModal = (
   open: boolean,
   notificationId?: string

packages/mobile/src/hooks/useAppState.ts

@@ -13,8 +13,8 @@ import { AppState } from 'react-native'
  * and during periods of inactivity such as entering the Multitasking view or in the event of an incoming call
  */
 
-type OnEnterForeground = () => void | null
-type OnEnterBackground = () => void | null
+type OnEnterForeground = () => any
+type OnEnterBackground = () => any
 
 const NotActive = /inactive|background/g
 

packages/mobile/src/message/handlers/notification.ts

@@ -25,9 +25,6 @@ export const messageHandlers: Partial<MessageHandlers> = {
       ...info
     })
   },
-  [MessageType.RESET_NOTIFICATIONS_BADGE_COUNT]: () => {
-    PushNotifications.setBadgeCount(0)
-  },
   [MessageType.PROMPT_PUSH_NOTIFICATION_REMINDER]: ({ dispatch }) => {
     remindUserToTurnOnNotifications(dispatch)
   }

packages/mobile/src/message/types.ts

@@ -36,18 +36,9 @@ export enum MessageType {
   // Notifications
   ENABLE_PUSH_NOTIFICATIONS = 'enable-push-notifications',
   DISABLE_PUSH_NOTIFICATIONS = 'disable-push-notifications',
-  RESET_NOTIFICATIONS_BADGE_COUNT = 'reset-notifications-badge-count',
   ENABLE_PUSH_NOTIFICATIONS_REMINDER = 'action/enable-push-notifications-reminder',
   PROMPT_PUSH_NOTIFICATION_REMINDER = 'prompt-push-notifications-reminder',
 
-  OPEN_NOTIFICATIONS = 'open-notifications',
-  FETCH_NOTIFICATIONS = 'fetch-notifications',
-  FETCH_NOTIFICATIONS_SUCCESS = 'fetch-notifications-success',
-  FETCH_NOTIFICATIONS_REPLACE = 'fetch-notifications-replace',
-  FETCH_NOTIFICATIONS_FAILURE = 'fetch-notifications-failure',
-  REFRESH_NOTIFICATIONS = 'refresh-notifications',
-  MARK_ALL_NOTIFICATIONS_AS_VIEWED = 'mark-all-notifications-as-viewed',
-
   // Search
   OPEN_SEARCH = 'open-search',
   UPDATE_SEARCH_QUERY = 'update-search-query',

packages/mobile/src/notifications.ts

@@ -1,15 +1,14 @@
 import type { RefObject } from 'react'
 
 import AsyncStorage from '@react-native-async-storage/async-storage'
+import type { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types'
 import type { PushNotificationPermissions } from 'react-native'
 import { Platform } from 'react-native'
 import Config from 'react-native-config'
 // https://dev.to/edmondso006/react-native-local-ios-and-android-notifications-2c58
 import PushNotification from 'react-native-push-notification'
 
 import { track, make } from 'app/services/analytics'
-import { dispatch } from 'app/store'
-import { open } from 'app/store/notifications/actions'
 import type { MessagePostingWebView } from 'app/types/MessagePostingWebView'
 import { EventNames } from 'app/types/analytics'
 
@@ -50,6 +49,7 @@ const getPlatformConfiguration = () => {
 class PushNotifications {
   lastId: number
   token: Token | null
+  drawerHelpers: DrawerNavigationHelpers | null
 
   // onNotification is a function passed in that is to be called when a
   // notification is to be emitted.
@@ -63,6 +63,10 @@ class PushNotifications {
     webRef = w
   }
 
+  setDrawerHelpers(helpers: DrawerNavigationHelpers) {
+    this.drawerHelpers = helpers
+  }
+
   onNotification(notification: any) {
     console.info(`Received notification ${JSON.stringify(notification)}`)
     if (notification.userInteraction || Platform.OS === 'android') {
@@ -80,7 +84,7 @@ class PushNotifications {
 
       if (!webRef || !webRef.current) return
 
-      dispatch(open())
+      this.drawerHelpers?.openDrawer()
     }
   }
 

packages/mobile/src/screens/notifications-screen/Notification/EntityLink.tsx

@@ -1,10 +1,8 @@
 import { useCallback } from 'react'
 
 import type { EntityType } from '@audius/common'
-import { useDispatch } from 'react-redux'
 
 import { Text } from 'app/components/core'
-import { close } from 'app/store/notifications/actions'
 import { getCollectionRoute, getTrackRoute } from 'app/utils/routes'
 
 import { useDrawerNavigation } from '../useDrawerNavigation'
@@ -15,7 +13,6 @@ type EntityLinkProps = {
 
 export const EntityLink = (props: EntityLinkProps) => {
   const { entity } = props
-  const dispatch = useDispatch()
   const navigation = useDrawerNavigation()
 
   const onPress = useCallback(() => {
@@ -38,8 +35,7 @@ export const EntityLink = (props: EntityLinkProps) => {
         web: { route: getCollectionRoute({ ...entity, user }) }
       })
     }
-    dispatch(close())
-  }, [entity, navigation, dispatch])
+  }, [entity, navigation])
 
   return (
     <Text fontSize='large' weight='medium' color='secondary' onPress={onPress}>

packages/mobile/src/screens/notifications-screen/Notification/ProfilePicture.tsx

@@ -2,11 +2,9 @@ import { useCallback } from 'react'
 
 import { NOTIFICATION_PAGE } from 'audius-client/src/utils/route'
 import { TouchableOpacity } from 'react-native'
-import { useDispatch } from 'react-redux'
 
 import type { ProfilePictureProps as ProfilePictureBaseProps } from 'app/components/user'
 import { ProfilePicture as ProfilePictureBase } from 'app/components/user'
-import { close } from 'app/store/notifications/actions'
 import { makeStyles } from 'app/styles'
 import { getUserRoute } from 'app/utils/routes'
 
@@ -39,7 +37,6 @@ export const ProfilePicture = (props: ProfilePictureProps) => {
     ...other
   } = props
   const styles = useStyles()
-  const dispatch = useDispatch()
   const navigation = useDrawerNavigation()
 
   const handlePress = useCallback(() => {
@@ -50,8 +47,7 @@ export const ProfilePicture = (props: ProfilePictureProps) => {
       },
       web: { route: getUserRoute(profile), fromPage: NOTIFICATION_PAGE }
     })
-    dispatch(close())
-  }, [navigation, navigationType, profile, dispatch])
+  }, [navigation, navigationType, profile])
 
   const profilePictureElement = (
     <ProfilePictureBase

packages/mobile/src/screens/notifications-screen/Notification/UserNameLink.tsx

@@ -2,13 +2,11 @@ import { useCallback, useContext } from 'react'
 
 import type { User as UserType } from '@audius/common'
 import { NOTIFICATION_PAGE } from 'audius-client/src/utils/route'
-import { useDispatch } from 'react-redux'
 
 import type { TextProps } from 'app/components/core'
 import { Text } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { NotificationsDrawerNavigationContext } from 'app/screens/notifications-screen/NotificationsDrawerNavigationContext'
-import { close } from 'app/store/notifications/actions'
 import { getUserRoute } from 'app/utils/routes'
 
 type UserNameLinkProps = TextProps & {
@@ -17,7 +15,6 @@ type UserNameLinkProps = TextProps & {
 
 export const UserNameLink = (props: UserNameLinkProps) => {
   const { user, ...other } = props
-  const dispatch = useDispatch()
   const { drawerHelpers } = useContext(NotificationsDrawerNavigationContext)
   const navigation = useNavigation({ customNativeNavigation: drawerHelpers })
 
@@ -29,8 +26,7 @@ export const UserNameLink = (props: UserNameLinkProps) => {
       },
       web: { route: getUserRoute(user), fromPage: NOTIFICATION_PAGE }
     })
-    dispatch(close())
-  }, [user, navigation, dispatch])
+  }, [user, navigation])
 
   return (
     <Text

packages/mobile/src/screens/notifications-screen/NotificationList.tsx

@@ -8,11 +8,10 @@ import {
 } from '@audius/common'
 import type { ViewToken } from 'react-native'
 import { View } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { FlatList } from 'app/components/core'
 import LoadingSpinner from 'app/components/loading-spinner'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { makeStyles } from 'app/styles'
 
 import { EmptyNotifications } from './EmptyNotifications'
@@ -102,18 +101,18 @@ const useIsViewable = () => {
 
 export const NotificationList = () => {
   const styles = useStyles()
-  const dispatchWeb = useDispatchWeb()
-  const notifications = useSelectorWeb(getNotifications, isEqual)
-  const status = useSelectorWeb(getNotificationStatus)
-  const hasMore = useSelectorWeb(getNotificationHasMore)
+  const dispatch = useDispatch()
+  const notifications = useSelector(getNotifications)
+  const status = useSelector(getNotificationStatus)
+  const hasMore = useSelector(getNotificationHasMore)
   const [isRefreshing, setIsRefreshing] = useState(false)
 
   const { gesturesDisabled } = useContext(NotificationsDrawerNavigationContext)
 
   const handleRefresh = useCallback(() => {
     setIsRefreshing(true)
-    dispatchWeb(refreshNotifications())
-  }, [dispatchWeb])
+    dispatch(refreshNotifications())
+  }, [dispatch])
 
   useEffect(() => {
     if (status !== Status.LOADING) {
@@ -123,9 +122,9 @@ export const NotificationList = () => {
 
   const handleEndReached = useCallback(() => {
     if (status !== Status.LOADING && hasMore) {
-      dispatchWeb(fetchNotifications(NOTIFICATION_PAGE_SIZE))
+      dispatch(fetchNotifications(NOTIFICATION_PAGE_SIZE))
     }
-  }, [status, dispatchWeb, hasMore])
+  }, [status, dispatch, hasMore])
 
   const [isVisible, visibilityCallback] = useIsViewable()
 

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

@@ -2,11 +2,10 @@ import { useCallback } from 'react'
 
 import type { AddTrackToPlaylistNotification as AddTrackToPlaylistNotificationType } from '@audius/common'
 import { notificationsSelectors } from '@audius/common'
-import { isEqual } from 'lodash'
 import { View } from 'react-native'
+import { useSelector } from 'react-redux'
 
 import IconPlaylists from 'app/assets/images/iconPlaylists.svg'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import {
   NotificationHeader,
@@ -34,9 +33,8 @@ export const AddTrackToPlaylistNotification = (
   props: AddTrackToPlaylistNotificationProps
 ) => {
   const { notification } = props
-  const entities = useSelectorWeb(
-    (state) => getNotificationEntities(state, notification),
-    isEqual
+  const entities = useSelector((state) =>
+    getNotificationEntities(state, notification)
   )
   const { track, playlist } = entities
   const playlistOwner = playlist.user

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

@@ -1,8 +1,8 @@
 import type { FavoriteNotification as FavoriteNotificationType } from '@audius/common'
 import { formatCount, notificationsSelectors } from '@audius/common'
+import { useSelector } from 'react-redux'
 
 import IconHeart from 'app/assets/images/iconHeart.svg'
-import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import {
   NotificationHeader,
@@ -30,16 +30,14 @@ type FavoriteNotificationProps = {
 export const FavoriteNotification = (props: FavoriteNotificationProps) => {
   const { notification } = props
   const { userIds, entityType } = notification
-  const users = useSelectorWeb(
-    (state) => getNotificationUsers(state, notification, USER_LENGTH_LIMIT),
-    isEqual
+  const users = useSelector((state) =>
+    getNotificationUsers(state, notification, USER_LENGTH_LIMIT)
   )
   const firstUser = users?.[0]
   const otherUsersCount = userIds.length - 1
 
-  const entity = useSelectorWeb(
-    (state) => getNotificationEntity(state, notification),
-    isEqual
+  const entity = useSelector((state) =>
+    getNotificationEntity(state, notification)
   )
 
   const handlePress = useSocialActionHandler(notification, users)

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

@@ -1,8 +1,8 @@
 import type { FollowNotification as FollowNotificationType } from '@audius/common'
 import { formatCount, notificationsSelectors } from '@audius/common'
+import { useSelector } from 'react-redux'
 
 import IconUser from 'app/assets/images/iconUser.svg'
-import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import {
   NotificationHeader,
@@ -29,9 +29,8 @@ type FollowNotificationProps = {
 export const FollowNotification = (props: FollowNotificationProps) => {
   const { notification } = props
   const { userIds } = notification
-  const users = useSelectorWeb(
-    (state) => getNotificationUsers(state, notification, USER_LENGTH_LIMIT),
-    isEqual
+  const users = useSelector((state) =>
+    getNotificationUsers(state, notification, USER_LENGTH_LIMIT)
   )
   const firstUser = users?.[0]
   const otherUsersCount = userIds.length - 1

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

@@ -11,9 +11,9 @@ import {
   fullProfilePage,
   NOTIFICATION_PAGE
 } from 'audius-client/src/utils/route'
+import { useSelector } from 'react-redux'
 
 import IconTrophy from 'app/assets/images/iconTrophy.svg'
-import { useSelectorWeb, isEqual } from 'app/hooks/useSelectorWeb'
 import { make } from 'app/services/analytics'
 import { EventNames } from 'app/types/analytics'
 import { formatCount } from 'app/utils/format'
@@ -95,13 +95,10 @@ type MilestoneNotificationProps = {
 export const MilestoneNotification = (props: MilestoneNotificationProps) => {
   const { notification } = props
   const { achievement } = notification
-  const entity = useSelectorWeb(
-    (state) => getNotificationEntity(state, notification),
-    isEqual
-  )
-  const user = useSelectorWeb((state) =>
-    getNotificationUser(state, notification)
+  const entity = useSelector((state) =>
+    getNotificationEntity(state, notification)
   )
+  const user = useSelector((state) => getNotificationUser(state, notification))
 
   const navigation = useDrawerNavigation()