[C-960] Add native push/email settings (#1854)

packages/mobile/src/components/sign-out-confirmation-drawer/SignOutConfirmationDrawer.tsx

@@ -6,7 +6,6 @@ import { useDispatch } from 'react-redux'
 
 import { Button, Text } from 'app/components/core'
 import { AppDrawer, useDrawerState } from 'app/components/drawer/AppDrawer'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import useSearchHistory from 'app/store/search/hooks'
 import { makeStyles } from 'app/styles'
 const { signOut } = signOutActions
@@ -38,19 +37,16 @@ const useStyles = makeStyles(({ spacing }) => ({
 
 export const SignOutConfirmationDrawer = () => {
   const styles = useStyles()
-  const dispatchWeb = useDispatchWeb()
   const dispatch = useDispatch()
   const { clearHistory } = useSearchHistory()
 
   const { onClose } = useDrawerState(MODAL_NAME)
 
   const handleSignOut = useCallback(() => {
     dispatch(signOut())
-    // TODO: move to the sign-out saga when store migrated to react-native
-    dispatchWeb(signOut)
     clearHistory()
     onClose()
-  }, [dispatchWeb, dispatch, clearHistory, onClose])
+  }, [dispatch, clearHistory, onClose])
 
   return (
     <AppDrawer modalName={MODAL_NAME} title={messages.drawerTitle}>

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

@@ -12,14 +12,13 @@ import type {
 } from '@react-navigation/native-stack'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 import { Text, View } from 'react-native'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import AudiusLogo from 'app/assets/images/audiusLogoHorizontal.svg'
 import IconCaretRight from 'app/assets/images/iconCaretRight.svg'
 import IconNotification from 'app/assets/images/iconNotification.svg'
 import IconSearch from 'app/assets/images/iconSearch.svg'
 import { IconButton } from 'app/components/core'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import type { ContextualParams } from 'app/hooks/useNavigation'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
@@ -94,7 +93,7 @@ export const useAppScreenOptions = (
 ) => {
   const styles = useStyles()
   const { accentOrangeLight1, neutralLight4 } = useThemeColors()
-  const dispatch = useDispatchWeb()
+  const dispatch = useDispatch()
   const notificationCount = useSelector(getNotificationUnviewedCount)
   const navigation = useNavigation<
     AppScreenParamList & AppTabScreenParamList['Search']

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

@@ -17,9 +17,7 @@ import LoadingSpinner from 'app/components/loading-spinner'
 import { StatusMessage } from 'app/components/status-message'
 import { ProfilePicture } from 'app/components/user'
 import UserBadges from 'app/components/user-badges'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { MessageType } from 'app/message'
 import { track, make } from 'app/services/analytics'
 import * as oauthActions from 'app/store/oauth/actions'
@@ -109,11 +107,10 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
 export const AccountVerificationScreen = () => {
   const styles = useStyles()
   const dispatch = useDispatch()
-  const dispatchWeb = useDispatchWeb()
   const [error, setError] = useState('')
   const [status, setStatus] = useState('')
   const [didValidateHandle, setDidValidateHandle] = useState(false)
-  const accountUser = useSelectorWeb(getAccountUser)
+  const accountUser = useSelector(getAccountUser)
   const navigation = useNavigation()
   const twitterInfo = useSelector(getTwitterInfo)
   const twitterError = useSelector(getTwitterError)
@@ -143,15 +140,15 @@ export const AccountVerificationScreen = () => {
       const handle = type === 'twitter' ? profile.screen_name : profile.username
       const verified =
         type === 'twitter' ? profile.verified : profile.is_verified
-      dispatchWeb({
+      dispatch({
         type: MessageType.SIGN_UP_VALIDATE_HANDLE,
         handle,
         verified,
         isAction: true,
         onValidate: null
       })
     },
-    [dispatchWeb, twitterInfo, instagramInfo]
+    [dispatch, twitterInfo, instagramInfo]
   )
 
   const trackOAuthComplete = useCallback(
@@ -239,7 +236,7 @@ export const AccountVerificationScreen = () => {
     if (!handle) return
     onVerifyButtonPress()
     dispatch(oauthActions.setTwitterError(null))
-    dispatchWeb({
+    dispatch({
       type: MessageType.REQUEST_TWITTER_AUTH,
       isAction: true
     })
@@ -255,7 +252,7 @@ export const AccountVerificationScreen = () => {
     if (!handle) return
     onVerifyButtonPress()
     dispatch(oauthActions.setInstagramError(null))
-    dispatchWeb({
+    dispatch({
       type: MessageType.REQUEST_INSTAGRAM_AUTH,
       isAction: true
     })

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

@@ -1,7 +1,6 @@
-import { useEffect } from 'react'
-
-import { PushNotificationSetting } from '@audius/common'
+import { PushNotificationSetting, settingsPageActions } from '@audius/common'
 import { useDispatch } from 'react-redux'
+import { useEffectOnce } from 'react-use'
 
 import { Screen } from 'app/components/core'
 import { remindUserToTurnOnNotifications } from 'app/components/notification-reminder/NotificationReminder'
@@ -10,6 +9,9 @@ import { Divider } from './Divider'
 import { EmailFrequencyControlRow } from './EmailFrequencyControlRow'
 import { NotificationRow } from './NotificationRow'
 
+const { getPushNotificationSettings, getNotificationSettings } =
+  settingsPageActions
+
 const messages = {
   title: 'Notifications',
   enablePn: 'Enable Push Notifications',
@@ -23,9 +25,11 @@ const messages = {
 export const NotificationSettingsScreen = () => {
   const dispatch = useDispatch()
 
-  useEffect(() => {
+  useEffectOnce(() => {
+    dispatch(getPushNotificationSettings())
+    dispatch(getNotificationSettings())
     remindUserToTurnOnNotifications(dispatch)
-  }, [dispatch])
+  })
 
   return (
     <Screen title={messages.title} variant='secondary' topbarRight={null}>

packages/mobile/src/store/notifications/sagas.ts

@@ -5,7 +5,7 @@ import {
   waitForValue
 } from '@audius/common'
 import { waitForBackendSetup } from 'audius-client/src/common/store/backend/sagas'
-import {
+import commonNotificationsSagas, {
   getNotifications,
   getPollingIntervalMs
 } from 'audius-client/src/common/store/notifications/sagas'
@@ -73,6 +73,7 @@ function* watchMarkedAllNotificationsViewed() {
 
 export default function sagas() {
   return [
+    ...commonNotificationsSagas(),
     watchMarkedAllNotificationsViewed,
     watchResetNotificationBadgeCount,
     notificationPollingDaemon

packages/mobile/src/store/sagas.ts

@@ -1,4 +1,5 @@
 import {
+  castSagas,
   remoteConfigSagas as remoteConfig,
   mobileOverflowMenuUISagas as overflowMenuSagas,
   shareModalUISagas as shareModalSagas,
@@ -12,7 +13,6 @@ import coreCacheSagas from 'common/store/cache/sagas'
 import tracksSagas from 'common/store/cache/tracks/sagas'
 import usersSagas from 'common/store/cache/users/sagas'
 import confirmerSagas from 'common/store/confirmer/sagas'
-import notificationsSagas from 'common/store/notifications/sagas'
 import collectionPageSagas from 'common/store/pages/collection/sagas'
 import exploreCollectionsPageSagas from 'common/store/pages/explore/exploreCollections/sagas'
 import explorePageSagas from 'common/store/pages/explore/sagas'
@@ -44,7 +44,7 @@ import walletSagas from 'common/store/wallet/sagas'
 import { all, fork } from 'typed-redux-saga'
 
 import initKeyboardEvents from './keyboard/sagas'
-import notificationsSagasNative from './notifications/sagas'
+import notificationsSagas from './notifications/sagas'
 import oauthSagas from './oauth/sagas'
 import settingsSagas from './settings/sagas'
 import signOutSagas from './sign-out/sagas'
@@ -82,7 +82,6 @@ export default function* rootSaga() {
     ...walletSagas(),
 
     ...notificationsSagas(),
-    ...notificationsSagasNative(),
 
     // Pages
     ...trackPageSagas(),
@@ -108,6 +107,9 @@ export default function* rootSaga() {
     ...settingsSagas(),
     ...signOutSagas(),
 
+    // Cast
+    ...castSagas(),
+
     // Application
     ...smartCollectionPageSagas(),
     ...overflowMenuSagas(),

packages/mobile/src/store/settings/sagas.ts

@@ -18,7 +18,7 @@ import PushNotifications from 'app/notifications'
 const { getPushNotificationSettings } = settingsPageSelectors
 const { getAccountUser } = accountSelectors
 
-export async function* disablePushNotifications() {
+export function* disablePushNotifications() {
   const audiusBackendInstance = yield* getContext('audiusBackendInstance')
   const { token } = yield* call([PushNotifications, 'getToken'])
   PushNotifications.deregister()

packages/mobile/src/store/sign-out/sagas.ts

@@ -6,6 +6,7 @@ import { audiusBackendInstance } from 'app/services/audius-backend-instance'
 import { localStorage } from 'app/services/local-storage'
 
 import { resetOAuthState } from '../oauth/actions'
+import { setSearchHistory } from '../search/actions'
 import { disablePushNotifications } from '../settings/sagas'
 
 const { resetAccount } = accountActions
@@ -21,6 +22,8 @@ function* watchSignOut() {
     yield* call([localStorage, 'clearAudiusAccountUser'])
     yield* call([audiusBackendInstance, 'signOut'])
     yield* call([localStorage, 'removeItem'], 'theme')
+
+    yield* put(setSearchHistory([]))
     yield* put(resetOAuthState())
   })
 }

packages/web/src/common/store/notifications/sagas.ts

@@ -97,11 +97,11 @@ const NOTIFICATION_LIMIT_DEFAULT = 20
 
 function* recordPlaylistUpdatesAnalytics(playlistUpdates: ID[]) {
   const existingUpdates: ID[] = yield* select(getPlaylistUpdates)
-  yield* put(notificationActions.setPlaylistUpdates(playlistUpdates))
   if (
     playlistUpdates.length > 0 &&
     existingUpdates.length !== playlistUpdates.length
   ) {
+    yield* put(notificationActions.setPlaylistUpdates(playlistUpdates))
     const event = make(Name.PLAYLIST_LIBRARY_HAS_UPDATE, {
       count: playlistUpdates.length
     })