[C-965] Add native reset-password (#1858)

packages/mobile/src/screens/settings-screen/ChangePasswordScreen.tsx → packages/mobile/src/screens/settings-screen/ChangePasswordScreen/ChangePasswordScreen.tsx

@@ -7,17 +7,17 @@ import {
   changePasswordActions
 } from '@audius/common'
 import { View } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { ConfirmCredentials } from 'app/components/confirm-credentials'
 import { Button, Screen, Text } from 'app/components/core'
-import { EnterPassword } from 'app/components/enter-password'
 import LoadingSpinner from 'app/components/loading-spinner'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { makeStyles } from 'app/styles'
 
-import type { ProfileTabScreenParamList } from '../app-screen/ProfileTabScreen'
+import type { ProfileTabScreenParamList } from '../../app-screen/ProfileTabScreen'
+
+import { ConfirmCredentials } from './ConfirmCredentials'
+import { EnterPassword } from './EnterPassword'
 const { changePage, changePassword } = changePasswordActions
 const { getChangePasswordStatus, getCurrentPage } = changePasswordSelectors
 
@@ -59,18 +59,18 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
 }))
 
 export const ChangePasswordScreen = () => {
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const styles = useStyles()
   const [email, setEmail] = useState('')
   const [oldPassword, setOldPassword] = useState('')
   const navigation = useNavigation<ProfileTabScreenParamList>()
 
-  const changePasswordStatus = useSelectorWeb(getChangePasswordStatus)
-  const currentPage = useSelectorWeb(getCurrentPage)
+  const changePasswordStatus = useSelector(getChangePasswordStatus)
+  const currentPage = useSelector(getCurrentPage)
 
   const setCurrentPage = useCallback(
-    (page: ChangePasswordPageStep) => dispatchWeb(changePage(page)),
-    [dispatchWeb]
+    (page: ChangePasswordPageStep) => dispatch(changePage(page)),
+    [dispatch]
   )
 
   const handleCredentialsConfirmed = ({
@@ -86,7 +86,7 @@ export const ChangePasswordScreen = () => {
   }
 
   const handleNewPasswordSubmitted = (password: string) => {
-    dispatchWeb(changePassword({ email, password, oldPassword }))
+    dispatch(changePassword({ email, password, oldPassword }))
   }
 
   const handlePressDone = useCallback(() => {
@@ -142,7 +142,7 @@ export const ChangePasswordScreen = () => {
     </View>
   )
 
-  const getPageContent = () => {
+  const renderContent = () => {
     switch (currentPage) {
       case ChangePasswordPageStep.NEW_PASSWORD:
         return changePasswordView
@@ -159,7 +159,7 @@ export const ChangePasswordScreen = () => {
 
   return (
     <Screen topbarRight={null} variant='secondary'>
-      {getPageContent()}
+      {renderContent()}
     </Screen>
   )
 }

packages/mobile/src/components/confirm-credentials/ConfirmCredentials.tsx → packages/mobile/src/screens/settings-screen/ChangePasswordScreen/ConfirmCredentials.tsx

@@ -6,13 +6,12 @@ import {
   changePasswordActions
 } from '@audius/common'
 import { View } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
 
 import IconArrow from 'app/assets/images/iconArrow.svg'
 import { Button, TextInput } from 'app/components/core'
 import LoadingSpinner from 'app/components/loading-spinner'
-import { StatusMessage } from 'app/components/status-message/'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
+import { StatusMessage } from 'app/components/status-message'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
 const { confirmCredentials } = changePasswordActions
@@ -45,21 +44,21 @@ const useStyles = makeStyles(({ spacing }) => ({
 }))
 
 export const ConfirmCredentials = ({ onComplete }: ConfirmCredentialsProps) => {
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const styles = useStyles()
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [errorSeen, setErrorSeen] = useState(false)
   const [hasSubmitted, setHasSubmitted] = useState(false)
-  const status = useSelectorWeb(getConfirmCredentialsStatus)
+  const status = useSelector(getConfirmCredentialsStatus)
   const { neutralLight4, primary } = useThemeColors()
 
   const handleEmailChange = (val: string) => setEmail(val)
   const handlePasswordChange = (val: string) => setPassword(val)
   const handleKeyPress = () => setErrorSeen(true)
 
   const onSubmit = () => {
-    dispatchWeb(confirmCredentials({ email, password }))
+    dispatch(confirmCredentials({ email, password }))
     setHasSubmitted(true)
     setErrorSeen(false)
   }

packages/mobile/src/components/enter-password/EnterPassword.tsx → packages/mobile/src/screens/settings-screen/ChangePasswordScreen/EnterPassword.tsx

@@ -95,7 +95,7 @@ export const EnterPassword = ({
   })
   const { neutralLight4, primary } = useThemeColors()
 
-  const onPasswordChange = (password: string) => {
+  const handlePasswordChange = (password: string) => {
     const number =
       requirements.number === 'default'
         ? getNumberRequirement(password) === 'valid'
@@ -127,7 +127,7 @@ export const EnterPassword = ({
     })
   }
 
-  const onPasswordConfirmationChange = (passwordConfirmation: string) => {
+  const handlePasswordConfirmationChange = (passwordConfirmation: string) => {
     if (requirements.match !== 'default') {
       setRequirements({
         ...requirements,
@@ -197,7 +197,7 @@ export const EnterPassword = ({
         style={styles.input}
         placeholder={messages.passwordPlaceholder}
         value={password}
-        onChangeText={onPasswordChange}
+        onChangeText={handlePasswordChange}
         onBlur={handlePasswordBlur}
         textContentType='password'
         secureTextEntry
@@ -206,7 +206,7 @@ export const EnterPassword = ({
         style={styles.input}
         placeholder={messages.confirmationPlaceholder}
         value={passwordConfirmation}
-        onChangeText={onPasswordConfirmationChange}
+        onChangeText={handlePasswordConfirmationChange}
         onBlur={handleConfirmationBlur}
         textContentType='password'
         secureTextEntry

packages/mobile/src/screens/settings-screen/ChangePasswordScreen/index.ts

@@ -0,0 +1 @@
+export * from './ChangePasswordScreen'

packages/mobile/src/store/sagas.ts

@@ -12,6 +12,7 @@ import collectionsSagas from 'common/store/cache/collections/sagas'
 import coreCacheSagas from 'common/store/cache/sagas'
 import tracksSagas from 'common/store/cache/tracks/sagas'
 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 exploreCollectionsPageSagas from 'common/store/pages/explore/exploreCollections/sagas'
@@ -113,6 +114,7 @@ export default function* rootSaga() {
     ...castSagas(),
 
     // Application
+    ...changePasswordSagas(),
     ...smartCollectionPageSagas(),
     ...overflowMenuSagas(),
     ...shareModalSagas(),

packages/web/src/components/change-password/store/sagas.ts → packages/web/src/common/store/change-password/sagas.ts

@@ -1,5 +1,5 @@
 import { Name, changePasswordActions, getContext } from '@audius/common'
-import { call, put, takeEvery } from 'redux-saga/effects'
+import { call, put, takeEvery } from 'typed-redux-saga'
 
 import { make, TrackEvent } from 'common/store/analytics/actions'
 import { waitForBackendSetup } from 'common/store/backend/sagas'
@@ -15,59 +15,62 @@ const {
 function* handleConfirmCredentials(
   action: ReturnType<typeof confirmCredentials>
 ) {
+  const { email, password } = action.payload
   const audiusBackendInstance = yield* getContext('audiusBackendInstance')
-  yield call(waitForBackendSetup)
+  yield* call(waitForBackendSetup)
   try {
-    const confirmed: boolean = yield call(
+    const confirmed = yield* call(
       audiusBackendInstance.confirmCredentials,
-      action.payload.email,
-      action.payload.password
+      email,
+      password
     )
     if (!confirmed) {
-      throw new Error('Invalid credentials')
+      yield* put(confirmCredentialsFailed())
+    } else {
+      yield* put(confirmCredentialsSucceeded())
     }
-    yield put(confirmCredentialsSucceeded())
   } catch {
-    yield put(confirmCredentialsFailed())
+    yield* put(confirmCredentialsFailed())
   }
 }
 
 function* handleChangePassword(action: ReturnType<typeof changePassword>) {
+  const { email, password, oldPassword } = action.payload
   const audiusBackendInstance = yield* getContext('audiusBackendInstance')
-  yield call(waitForBackendSetup)
+  yield* call(waitForBackendSetup)
   try {
-    yield call(
+    yield* call(
       audiusBackendInstance.changePassword,
-      action.payload.email,
-      action.payload.password,
-      action.payload.oldPassword
+      email,
+      password,
+      oldPassword
     )
-    yield put(changePasswordSucceeded())
+    yield* put(changePasswordSucceeded())
     const trackEvent: TrackEvent = make(
       Name.SETTINGS_COMPLETE_CHANGE_PASSWORD,
       {
         status: 'success'
       }
     )
-    yield put(trackEvent)
+    yield* put(trackEvent)
   } catch {
-    yield put(changePasswordFailed())
+    yield* put(changePasswordFailed())
     const trackEvent: TrackEvent = make(
       Name.SETTINGS_COMPLETE_CHANGE_PASSWORD,
       {
         status: 'failure'
       }
     )
-    yield put(trackEvent)
+    yield* put(trackEvent)
   }
 }
 
 function* watchConfirmCredentials() {
-  yield takeEvery(confirmCredentials, handleConfirmCredentials)
+  yield* takeEvery(confirmCredentials, handleConfirmCredentials)
 }
 
 function* watchChangePassword() {
-  yield takeEvery(changePassword, handleChangePassword)
+  yield* takeEvery(changePassword, handleChangePassword)
 }
 
 export default function sagas() {

packages/web/src/store/sagas.ts

@@ -15,6 +15,7 @@ import collectionsSagas from 'common/store/cache/collections/sagas'
 import coreCacheSagas from 'common/store/cache/sagas'
 import tracksSagas from 'common/store/cache/tracks/sagas'
 import usersSagas from 'common/store/cache/users/sagas'
+import changePasswordSagas from 'common/store/change-password/sagas'
 import confirmerSagas from 'common/store/confirmer/sagas'
 import notificationSagas from 'common/store/notifications/sagas'
 import oauthSagas from 'common/store/oauth/sagas'
@@ -53,7 +54,6 @@ import supportingPageSagas from 'common/store/user-list/supporting/sagas'
 import topSupportersPageSagas from 'common/store/user-list/top-supporters/sagas'
 import walletSagas from 'common/store/wallet/sagas'
 import addToPlaylistSagas from 'components/add-to-playlist/store/sagas'
-import changePasswordSagas from 'components/change-password/store/sagas'
 import firstUploadModalSagas from 'components/first-upload-modal/store/sagas'
 import passwordResetSagas from 'components/password-reset/store/sagas'
 import remixSettingsModalSagas from 'components/remix-settings-modal/store/sagas'
@@ -83,6 +83,8 @@ 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() {