[C-967] Add native deactivate-account sagas (#1859)

packages/common/src/store/pages/deactivate-account/index.ts

@@ -0,0 +1,7 @@
+export {
+  default as deactivateAccountReducer,
+  actions as deactivateAccountActions,
+  DeactivateAccountState
+} from './slice'
+
+export * as deactivateAccountSelectors from './selectors'

packages/common/src/store/pages/deactivate-account/selectors.ts

@@ -0,0 +1,4 @@
+import { CommonState } from '../../commonStore'
+
+export const getDeactivateAccountStatus = (state: CommonState) =>
+  state.pages.deactivateAccount.status

packages/web/src/pages/deactivate-account-page/store/slice.ts → packages/common/src/store/pages/deactivate-account/slice.ts

@@ -1,22 +1,25 @@
-import { Status } from '@audius/common'
 import { createSlice } from '@reduxjs/toolkit'
 
+import { Status } from '../../../models'
+
 export type DeactivateAccountState = {
   status?: Status
 }
 
 const initialState: DeactivateAccountState = {
-  status: undefined
+  status: Status.IDLE
 }
 
 const slice = createSlice({
-  name: 'application/ui/deactivateAccount',
+  name: 'application/pages/deactivateAccount',
   initialState,
   reducers: {
     deactivateAccount: (state) => {
       state.status = Status.LOADING
     },
-    afterDeactivationSignOut: () => {},
+    afterDeactivationSignOut: (state) => {
+      state.status = Status.SUCCESS
+    },
     deactivateAccountFailed: (state) => {
       state.status = Status.ERROR
     }
@@ -28,4 +31,7 @@ export const {
   afterDeactivationSignOut,
   deactivateAccountFailed
 } = slice.actions
+
+export const actions = slice.actions
+
 export default slice.reducer

packages/common/src/store/pages/index.ts

@@ -121,3 +121,4 @@ export {
   actions as audioRewardsPageActions
 } from './audio-rewards/slice'
 export * from './audio-rewards/types'
+export * from './deactivate-account'

packages/common/src/store/recovery-email/slice.ts

@@ -1,25 +1,27 @@
 import { createSlice } from '@reduxjs/toolkit'
 
+import { Status } from '../../models'
+
 export type RecoveryEmailState = {
-  status: 'idle' | 'pending' | 'resolved' | 'rejected'
+  status: Status
 }
 
 const initialState: RecoveryEmailState = {
-  status: 'idle'
+  status: Status.IDLE
 }
 
 const slice = createSlice({
   name: 'recovery-email',
   initialState,
   reducers: {
     resendRecoveryEmail: (state) => {
-      state.status = 'pending'
+      state.status = Status.LOADING
     },
     resendSuccess: (state) => {
-      state.status = 'resolved'
+      state.status = Status.SUCCESS
     },
     resendError: (state) => {
-      state.status = 'rejected'
+      state.status = Status.ERROR
     }
   }
 })

packages/common/src/store/reducers.ts

@@ -17,6 +17,10 @@ import notifications from './notifications/reducer'
 import audioRewardsSlice from './pages/audio-rewards/slice'
 import collection from './pages/collection/reducer'
 import { CollectionsPageState } from './pages/collection/types'
+import {
+  deactivateAccountReducer,
+  DeactivateAccountState
+} from './pages/deactivate-account'
 import exploreCollectionsReducer from './pages/explore/exploreCollections/slice'
 import explorePageReducer from './pages/explore/slice'
 import feed from './pages/feed/reducer'
@@ -175,7 +179,8 @@ export const reducers = () => ({
     trendingUnderground,
     settings,
     notifications,
-    remixes
+    remixes,
+    deactivateAccount: deactivateAccountReducer
   }),
 
   // Solana
@@ -267,6 +272,7 @@ export type CommonState = {
     trendingUnderground: ReturnType<typeof trendingUnderground>
     notifications: ReturnType<typeof notifications>
     remixes: ReturnType<typeof remixes>
+    deactivateAccount: DeactivateAccountState
   }
 
   solana: ReturnType<typeof solanaReducer>

packages/mobile/src/components/deactivate-account-confirmation-drawer/DeactivateAccountConfirmationDrawer.tsx

@@ -1,13 +1,20 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 
-import { deactivateAccount } from 'audius-client/src/pages/deactivate-account-page/store/slice'
+import {
+  deactivateAccountActions,
+  deactivateAccountSelectors,
+  Status
+} from '@audius/common'
 import { View } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
+import LoadingSpinner from 'app/components/loading-spinner'
 import { makeStyles } from 'app/styles'
 
 import { Button, Text } from '../core'
 import { AppDrawer, useDrawerState } from '../drawer'
+const { deactivateAccount } = deactivateAccountActions
+const { getDeactivateAccountStatus } = deactivateAccountSelectors
 
 const MODAL_NAME = 'DeactivateAccountConfirmation'
 const messages = {
@@ -34,14 +41,21 @@ const useStyles = makeStyles(({ spacing }) => ({
 }))
 
 export const DeactivateAccountConfirmationDrawer = () => {
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const styles = useStyles()
+  const status = useSelector(getDeactivateAccountStatus)
 
   const { onClose } = useDrawerState(MODAL_NAME)
 
+  useEffect(() => {
+    if (status === Status.SUCCESS) {
+      onClose()
+    }
+  }, [status, onClose])
+
   const handleConfirmation = useCallback(() => {
-    dispatchWeb(deactivateAccount)
-  }, [dispatchWeb])
+    dispatch(deactivateAccount())
+  }, [dispatch])
 
   return (
     <AppDrawer modalName={MODAL_NAME} title={messages.confirmTitle}>
@@ -60,6 +74,7 @@ export const DeactivateAccountConfirmationDrawer = () => {
             text: { textTransform: 'uppercase' }
           }}
           onPress={onClose}
+          disabled={status !== Status.IDLE}
         />
         <Button
           title={messages.confirmText}
@@ -70,6 +85,8 @@ export const DeactivateAccountConfirmationDrawer = () => {
           }}
           variant='destructive'
           onPress={handleConfirmation}
+          icon={status === Status.LOADING ? LoadingSpinner : undefined}
+          disabled={status !== Status.IDLE}
         />
       </View>
     </AppDrawer>

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

@@ -4,7 +4,8 @@ import {
   accountSelectors,
   recoveryEmailActions,
   recoveryEmailSelectors,
-  modalsActions
+  modalsActions,
+  Status
 } from '@audius/common'
 import { Text, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
@@ -87,10 +88,10 @@ export const AccountSettingsScreen = () => {
   }, [dispatch])
 
   useEffect(() => {
-    if (recoveryEmailStatus === 'resolved') {
+    if (recoveryEmailStatus === Status.SUCCESS) {
       toast({ content: messages.recoveryEmailSent })
     }
-    if (recoveryEmailStatus === 'rejected') {
+    if (recoveryEmailStatus === Status.ERROR) {
       toast({ content: messages.recoveryEmailSent })
     }
   }, [recoveryEmailStatus, toast])

packages/mobile/src/store/sagas.ts

@@ -15,6 +15,7 @@ import usersSagas from 'common/store/cache/users/sagas'
 import changePasswordSagas from 'common/store/change-password/sagas'
 import confirmerSagas from 'common/store/confirmer/sagas'
 import collectionPageSagas from 'common/store/pages/collection/sagas'
+import deactivateAccountSagas from 'common/store/pages/deactivate-account/sagas'
 import exploreCollectionsPageSagas from 'common/store/pages/explore/exploreCollections/sagas'
 import explorePageSagas from 'common/store/pages/explore/sagas'
 import feedPageSagas from 'common/store/pages/feed/sagas'
@@ -117,6 +118,7 @@ export default function* rootSaga() {
     ...changePasswordSagas(),
     ...smartCollectionPageSagas(),
     ...overflowMenuSagas(),
+    ...deactivateAccountSagas(),
     ...shareModalSagas(),
     ...vipDiscordModalSagas(),
     ...themeSagas(),

packages/web/src/pages/deactivate-account-page/store/sagas.ts → packages/web/src/common/store/pages/deactivate-account/sagas.ts

@@ -4,7 +4,8 @@ import {
   getContext,
   waitForValue,
   waitForAccount,
-  signOutActions
+  signOutActions,
+  deactivateAccountActions
 } from '@audius/common'
 import { call, delay, put, select, takeEvery } from 'typed-redux-saga'
 
@@ -14,11 +15,8 @@ import { requestConfirmation } from 'common/store/confirmer/actions'
 import { confirmTransaction } from 'common/store/confirmer/sagas'
 import { getConfirmCalls } from 'common/store/confirmer/selectors'
 
-import {
-  afterDeactivationSignOut,
-  deactivateAccount,
-  deactivateAccountFailed
-} from './slice'
+const { afterDeactivationSignOut, deactivateAccount, deactivateAccountFailed } =
+  deactivateAccountActions
 const { signOut } = signOutActions
 const { getAccountUser, getUserId } = accountSelectors
 

packages/web/src/pages/deactivate-account-page/DeactivateAccountPage.tsx

@@ -1,6 +1,11 @@
 import { ReactNode, useCallback, useEffect } from 'react'
 
-import { Name, Status } from '@audius/common'
+import {
+  deactivateAccountActions,
+  deactivateAccountSelectors,
+  Name,
+  Status
+} from '@audius/common'
 import { Button, ButtonType } from '@audius/stems'
 import cn from 'classnames'
 import { push as pushRoute } from 'connected-react-router'
@@ -14,8 +19,9 @@ import { isMobile } from 'utils/clientUtil'
 import styles from './DeactivateAccountPage.module.css'
 import { DeactivateAccountPageDesktop } from './components/desktop/DeactivateAccountPage'
 import { DeactivateAccountPageMobile } from './components/mobile/DeactivateAccountPage'
-import { getDeactivateAccountStatus } from './store/selectors'
-import { deactivateAccount } from './store/slice'
+
+const { deactivateAccount } = deactivateAccountActions
+const { getDeactivateAccountStatus } = deactivateAccountSelectors
 
 export const messages = {
   title: 'Delete',

packages/web/src/store/reducers.ts

@@ -21,7 +21,6 @@ import passwordReset from 'components/password-reset/store/reducer'
 import remixSettingsModal from 'components/remix-settings-modal/store/slice'
 import unfollowConfirmation from 'components/unfollow-confirmation-modal/store/reducers'
 import dashboard from 'pages/artist-dashboard-page/store/reducer'
-import deactivateAccount from 'pages/deactivate-account-page/store/slice'
 import deleted from 'pages/deleted-page/store/slice'
 import upload from 'pages/upload-page/store/reducer'
 import visualizer from 'pages/visualizer/store/slice'
@@ -75,7 +74,6 @@ const createRootReducer = (routeHistory: History) =>
       ui: combineReducers({
         appCTAModal,
         cookieBanner,
-        deactivateAccount,
         editFolderModal,
         editPlaylistModal,
         editTrackModal,

packages/web/src/store/sagas.ts

@@ -20,6 +20,7 @@ import confirmerSagas from 'common/store/confirmer/sagas'
 import notificationSagas from 'common/store/notifications/sagas'
 import oauthSagas from 'common/store/oauth/sagas'
 import collectionSagas from 'common/store/pages/collection/sagas'
+import deactivateAccountSagas from 'common/store/pages/deactivate-account/sagas'
 import exploreCollectionsPageSagas from 'common/store/pages/explore/exploreCollections/sagas'
 import explorePageSagas from 'common/store/pages/explore/sagas'
 import feedPageSagas from 'common/store/pages/feed/sagas'
@@ -60,7 +61,6 @@ import remixSettingsModalSagas from 'components/remix-settings-modal/store/sagas
 import shareSoundToTikTokModalSagas from 'components/share-sound-to-tiktok-modal/store/sagas'
 import dashboardSagas from 'pages/artist-dashboard-page/store/sagas'
 import rewardsPageSagas from 'pages/audio-rewards-page/store/sagas'
-import deactivateAccountSagas from 'pages/deactivate-account-page/store/sagas'
 import deletedSagas from 'pages/deleted-page/store/sagas'
 import remixesSagas from 'pages/remixes-page/store/sagas'
 import searchPageTracksSagas from 'pages/search-page/store/lineups/tracks/sagas'
@@ -83,8 +83,6 @@ import tokenDashboardSagas from 'store/token-dashboard/sagas'
 
 import notificationSagasWeb from './notifications/sagas'
 
-import notificationSagasWeb from './notifications/sagas'
-
 const NATIVE_MOBILE = process.env.REACT_APP_NATIVE_MOBILE
 
 export default function* rootSaga() {

packages/web/src/store/types.ts

@@ -31,7 +31,6 @@ import { PasswordResetState } from 'components/password-reset/store/types'
 import RemixSettingsModalReducer from 'components/remix-settings-modal/store/slice'
 import { UnfollowConfirmationModalState } from 'components/unfollow-confirmation-modal/store/types'
 import ArtistDashboardState from 'pages/artist-dashboard-page/store/types'
-import { DeactivateAccountState } from 'pages/deactivate-account-page/store/slice'
 import DeletedPageReducer from 'pages/deleted-page/store/slice'
 import { UploadPageState } from 'pages/upload-page/store/types'
 import VisualizerReducer from 'pages/visualizer/store/slice'
@@ -80,7 +79,6 @@ export type AppState = CommonState & {
       editFolderModal: EditFolderModalState
       editTrackModal: EditTrackModalState
       embedModal: EmbedModalState
-      deactivateAccount: DeactivateAccountState
       firstUploadModal: FirstUploadModalState
       mobileKeyboard: MobileKeyboardState
       musicConfetti: ReturnType<typeof MusicConfetti>