[C-927] Move sign up to native (#1820)

packages/mobile/.env.dev.tmpl

@@ -1,6 +1,5 @@
 ENVIRONMENT=staging
 IS_PRODUCTION=true
-STATIC_SERVER_PORT=3100
 USER_METADATA_NODE=https://usermetadata.audius.co
 AUDIUS_URL=https://audius.co
 USER_NODE=https://usermetadata.staging.audius.co

packages/mobile/.env.prod.tmpl

@@ -1,6 +1,5 @@
 ENVIRONMENT=production
 IS_PRODUCTION=true
-STATIC_SERVER_PORT=3100
 USER_METADATA_NODE=https://usermetadata.audius.co
 AUDIUS_URL=https://audius.co
 USER_NODE=https://usermetadata.audius.co

packages/mobile/.env.stage.tmpl

@@ -1,6 +1,5 @@
 ENVIRONMENT=staging
 IS_PRODUCTION=true
-STATIC_SERVER_PORT=3101
 USER_METADATA_NODE=https://usermetadata.audius.co
 AUDIUS_URL=https://staging.audius.co
 USER_NODE=https://usermetadata.staging.audius.co

packages/mobile/src/screens/root-screen/RootScreen.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 
+import { accountSelectors } from '@audius/common'
 import type { DrawerContentComponentProps } from '@react-navigation/drawer'
 import { createDrawerNavigator } from '@react-navigation/drawer'
 // eslint-disable-next-line import/no-unresolved
@@ -22,8 +23,6 @@ import {
 import { SignOnScreen } from 'app/screens/signon'
 import { UpdateRequiredScreen } from 'app/screens/update-required-screen/UpdateRequiredScreen'
 import { enterBackground, enterForeground } from 'app/store/lifecycle/actions'
-import { getIsSignedIn, getOnSignUp } from 'app/store/lifecycle/selectors'
-import { getAccountAvailable } from 'app/store/signon/selectors'
 
 export type RootScreenParamList = {
   signOn: undefined
@@ -129,9 +128,7 @@ const NotificationsDrawerContents = (
  */
 export const RootScreen = () => {
   const dispatch = useDispatch()
-  const signedIn = useSelector(getIsSignedIn)
-  const onSignUp = useSelector(getOnSignUp)
-  const isAccountAvailable = useSelector(getAccountAvailable)
+  const hasAccount = useSelector(accountSelectors.getHasAccount)
   const [disableGestures, setDisableGestures] = useState(false)
   const { updateRequired } = useUpdateRequired()
 
@@ -142,13 +139,7 @@ export const RootScreen = () => {
 
   if (updateRequired) return <UpdateStack />
 
-  // This check is overly complicated and should probably just check `signedIn`.
-  // However, this allows the feed screen to load initially so that when the
-  // splash screen disappears there is already content (skeletons) on the screen
-  const isAuthed =
-    signedIn === null || (signedIn && !onSignUp) || isAccountAvailable
-
-  return isAuthed ? (
+  return hasAccount ? (
     <Drawer.Navigator
       // legacy implementation uses reanimated-v1
       useLegacyImplementation={true}

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

@@ -2,6 +2,9 @@ import { useCallback, useEffect, useState } from 'react'
 
 import { Status, accountSelectors } from '@audius/common'
 import { NOTIFICATION_PAGE } from 'audius-client/src/utils/route'
+import { getHandleField } from 'common/store/pages/signon/selectors'
+import type { EditableField } from 'common/store/pages/signon/types'
+import { EditingStatus } from 'common/store/pages/signon/types'
 import { Image, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -26,7 +29,6 @@ import {
   getTwitterError,
   getTwitterInfo
 } from 'app/store/oauth/selectors'
-import { getHandleError, getHandleIsValid } from 'app/store/signon/selectors'
 import { makeStyles } from 'app/styles'
 import { EventNames } from 'app/types/analytics'
 import { getUserRoute } from 'app/utils/routes'
@@ -117,8 +119,8 @@ export const AccountVerificationScreen = () => {
   const twitterError = useSelector(getTwitterError)
   const instagramInfo = useSelector(getInstagramInfo)
   const instagramError = useSelector(getInstagramError)
-  const handleIsValid = useSelector(getHandleIsValid)
-  const handleError = useSelector(getHandleError)
+
+  const handleField: EditableField = useSelector(getHandleField)
 
   const name = accountUser?.name
   const handle = accountUser?.handle
@@ -185,21 +187,20 @@ export const AccountVerificationScreen = () => {
 
   useEffect(() => {
     if (twitterInfo) {
-      if (!handleIsValid && !didValidateHandle) {
+      if (handleField.status !== EditingStatus.SUCCESS && !didValidateHandle) {
         validateHandle('twitter')
         setDidValidateHandle(true)
-      } else if (handleError || twitterInfo.requiresUserReview) {
+      } else if (handleField.error || twitterInfo.requiresUserReview) {
         trackOAuthComplete('twitter')
         setStatus('')
-      } else if (handleIsValid) {
+      } else if (handleField.status === EditingStatus.SUCCESS) {
         trackOAuthComplete('twitter')
         setStatus(Status.SUCCESS)
       }
     }
   }, [
     twitterInfo,
-    handleIsValid,
-    handleError,
+    handleField,
     didValidateHandle,
     validateHandle,
     trackOAuthComplete
@@ -211,21 +212,20 @@ export const AccountVerificationScreen = () => {
 
   useEffect(() => {
     if (instagramInfo) {
-      if (!handleIsValid && !didValidateHandle) {
+      if (handleField.status !== EditingStatus.SUCCESS && !didValidateHandle) {
         validateHandle('instagram')
         setDidValidateHandle(true)
-      } else if (handleError || instagramInfo.requiresUserReview) {
+      } else if (handleField.error || instagramInfo.requiresUserReview) {
         trackOAuthComplete('instagram')
         setStatus('')
-      } else if (handleIsValid) {
+      } else if (handleField.status === EditingStatus.SUCCESS) {
         trackOAuthComplete('instagram')
         setStatus(Status.SUCCESS)
       }
     }
   }, [
     instagramInfo,
-    handleIsValid,
-    handleError,
+    handleField,
     didValidateHandle,
     validateHandle,
     trackOAuthComplete

packages/mobile/src/screens/signon/CreatePassword.tsx

@@ -1,6 +1,9 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 
 import type { NativeStackScreenProps } from '@react-navigation/native-stack'
+import * as signOnActions from 'common/store/pages/signon/actions'
+import { getEmailField } from 'common/store/pages/signon/selectors'
+import type { EditableField } from 'common/store/pages/signon/types'
 import commonPasswordList from 'fxa-common-password-list'
 import {
   Animated,
@@ -18,18 +21,15 @@ import {
   ScrollView
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { useSelector, useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
+import { useEffectOnce } from 'react-use'
 
 import IconArrow from 'app/assets/images/iconArrow.svg'
 import IconCheck from 'app/assets/images/iconValidationCheck.svg'
 import ValidationIconX from 'app/assets/images/iconValidationX.svg'
 import Button from 'app/components/button'
 import LoadingSpinner from 'app/components/loading-spinner'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { MessageType } from 'app/message/types'
 import { track, make } from 'app/services/analytics'
-import * as lifecycleActions from 'app/store/lifecycle/actions'
-import { getOnSignUp } from 'app/store/lifecycle/selectors'
 import { EventNames } from 'app/types/analytics'
 import { useThemeColors } from 'app/utils/theme'
 
@@ -271,9 +271,9 @@ type CreatePasswordProps = NativeStackScreenProps<
 >
 const CreatePassword = ({ navigation, route }: CreatePasswordProps) => {
   const dispatch = useDispatch()
-  const dispatchWeb = useDispatchWeb()
-  const onSignOn = useSelector(getOnSignUp)
-  const [didFetchArtists, setDidFetchArtists] = useState(false)
+
+  const emailField: EditableField = useSelector(getEmailField)
+
   const [passwordBorderColor, setPasswordBorderColor] =
     useState(defaultBorderColor)
   const [passwordConfirmationBorderColor, setPasswordConfirmationBorderColor] =
@@ -307,15 +307,9 @@ const CreatePassword = ({ navigation, route }: CreatePasswordProps) => {
     }
   })
 
-  useEffect(() => {
-    if (!didFetchArtists) {
-      setDidFetchArtists(true)
-      dispatchWeb({
-        type: MessageType.FETCH_ALL_FOLLOW_ARTISTS,
-        isAction: true
-      })
-    }
-  }, [didFetchArtists, dispatchWeb])
+  useEffectOnce(() => {
+    dispatch(signOnActions.fetchAllFollowArtists())
+  })
 
   useEffect(() => {
     setIsDisabled(
@@ -406,13 +400,6 @@ const CreatePassword = ({ navigation, route }: CreatePasswordProps) => {
     []
   )
 
-  // Set Lifecycle onSignUp(true) so signup flow isn't hidden even if signed in
-  const setOnSignOn = () => {
-    if (!onSignOn) {
-      dispatch(lifecycleActions.onSignUp(true))
-    }
-  }
-
   const onTermsOfUse = () => {
     Linking.openURL('https://audius.co/legal/terms-of-use').catch((err) =>
       console.error('An error occurred trying to open terms of use', err)
@@ -432,17 +419,14 @@ const CreatePassword = ({ navigation, route }: CreatePasswordProps) => {
         onPress={() => {
           Keyboard.dismiss()
           setisWorking(true)
-          setOnSignOn()
+          dispatch(signOnActions.setValueField('password', password))
           track(
             make({
               eventName: EventNames.CREATE_ACCOUNT_COMPLETE_PASSWORD,
-              emailAddress: route.params.email
+              emailAddress: emailField.value
             })
           )
-          navigation.replace('ProfileAuto', {
-            email: route.params.email,
-            password
-          })
+          navigation.replace('ProfileAuto')
         }}
         disabled={isDisabled}
         containerStyle={styles.mainButtonContainer}