[C-3590] Add handle field positive validation to native (#7160)

AudiusProject · Jan 11, 2024 · 78eac49 · 78eac49
1 parent fda09d4
commit 78eac49
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 12 deletions.
diff --git a/packages/common/src/messages/sign-on/pages.ts b/packages/common/src/messages/sign-on/pages.ts
@@ -59,7 +59,9 @@ export const pickHandlePageMessages = {
   claimHandleDescription:
     'Verify your Audius account by linking a verified social media account.',
   claimHandleHeadsUp:
-    'Heads up! 👋 Picking a handle that doesn’t match your verified account cannot be undone later.'
+    'Heads up! 👋 Picking a handle that doesn’t match your verified account cannot be undone later.',
+  handleAvailable: 'Handle available!',
+  linkToClaim: 'Link to claim.'
 }
 
 export const finishProfilePageMessages = {

diff --git a/packages/mobile/src/screens/sign-on-screen/components/HandleField.tsx b/packages/mobile/src/screens/sign-on-screen/components/HandleField.tsx
@@ -0,0 +1,46 @@
+import {
+  pickHandlePageMessages as messages,
+  useIsWaitingForValidation
+} from '@audius/common'
+import { useField } from 'formik'
+
+import { Flex, IconCheck, Text } from '@audius/harmony-native'
+import { TextField, type TextFieldProps } from 'app/components/fields'
+
+export const HandleField = ({
+  name = 'handle',
+  ...other
+}: Partial<TextFieldProps>) => {
+  const [{ value: handle }, { error }] = useField(name)
+
+  const { isWaitingForValidation, handleChange } = useIsWaitingForValidation()
+
+  const helperText =
+    error && error !== 'handle required' && handle
+      ? error
+      : handle && !isWaitingForValidation
+      ? messages.handleAvailable
+      : null
+
+  return (
+    <Flex gap='s'>
+      {/* TODO: harmonize this component */}
+      <TextField
+        name={name}
+        label={messages.handle}
+        noGutter
+        {...other}
+        onChangeText={() => {
+          handleChange()
+        }}
+        debouncedValidationMs={1000}
+        Icon={
+          !isWaitingForValidation && handle && !error ? IconCheck : undefined
+        }
+      />
+      {helperText ? (
+        <Text color={error ? 'danger' : 'default'}>{helperText}</Text>
+      ) : undefined}
+    </Flex>
+  )
+}
diff --git a/packages/mobile/src/screens/sign-on-screen/screens/PickHandleScreen.tsx b/packages/mobile/src/screens/sign-on-screen/screens/PickHandleScreen.tsx
@@ -22,9 +22,9 @@ import {
   Text,
   useTheme
 } from '@audius/harmony-native'
-import { TextField } from 'app/components/fields'
 import { useNavigation } from 'app/hooks/useNavigation'
 
+import { HandleField } from '../components/HandleField'
 import { SocialMediaLoading } from '../components/SocialMediaLoading'
 import { SocialMediaSignUpButtons } from '../components/SocialMediaSignUpButtons'
 import { Heading, Page, PageFooter } from '../components/layout'
@@ -142,6 +142,7 @@ export const PickHandleScreen = () => {
       initialValues={initialValues}
       onSubmit={handleSubmit}
       validationSchema={validationSchema}
+      validateOnChange={false}
     >
       {({ handleSubmit: triggerSubmit, dirty, isValid }) => (
         <Page>
@@ -153,7 +154,7 @@ export const PickHandleScreen = () => {
             description={messages.description}
           />
           <Flex direction='column' gap='l'>
-            <TextField name='handle' label={messages.handle} noGutter />
+            <HandleField />
             <Divider>
               <Text
                 variant='body'

diff --git a/packages/mobile/src/screens/sign-on-screen/screens/ReviewHandleScreen.tsx b/packages/mobile/src/screens/sign-on-screen/screens/ReviewHandleScreen.tsx
@@ -17,10 +17,10 @@ import { useDispatch, useSelector } from 'react-redux'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
 
 import { Paper } from '@audius/harmony-native'
-import { TextField } from 'app/components/fields'
 import { useNavigation } from 'app/hooks/useNavigation'
 
 import { ReadOnlyAccountHeader } from '../components/AccountHeader'
+import { HandleField } from '../components/HandleField'
 import { Heading, Page, PageFooter } from '../components/layout'
 import type { SignUpScreenParamList } from '../types'
 import { restrictedHandles } from '../utils/restrictedHandles'
@@ -66,6 +66,7 @@ export const ReviewHandleScreen = () => {
       onSubmit={handleSubmit}
       validationSchema={validationSchema}
       validateOnMount
+      validateOnChange={false}
       initialTouched={{ handle: true }}
     >
       {({ isValid }) => (
@@ -77,10 +78,10 @@ export const ReviewHandleScreen = () => {
           {hasImages ? (
             <Paper gap='xl' direction='column'>
               <ReadOnlyAccountHeader />
-              <TextField name='handle' label={messages.handle} noGutter />
+              <HandleField />
             </Paper>
           ) : (
-            <TextField name='handle' label={messages.handle} noGutter />
+            <HandleField />
           )}
           <PageFooter buttonProps={{ disabled: !isValid }} />
         </Page>

diff --git a/packages/web/src/pages/sign-up-page/components/HandleField.tsx b/packages/web/src/pages/sign-up-page/components/HandleField.tsx
@@ -4,6 +4,7 @@ import {
   MAX_HANDLE_LENGTH,
   socialMediaMessages,
   pickHandleErrorMessages,
+  pickHandlePageMessages as messages,
   useIsWaitingForValidation
 } from '@audius/common'
 import { TextLink } from '@audius/harmony'
@@ -20,12 +21,6 @@ import { SignupFlowInstagramAuth } from './SignupFlowInstagramAuth'
 import { SignupFlowTikTokAuth } from './SignupFlowTikTokAuth'
 import { SignupFlowTwitterAuth } from './SignupFlowTwitterAuth'
 
-const messages = {
-  handle: 'Handle',
-  linkToClaim: 'Link to claim.',
-  handleAvailable: 'Handle available!'
-}
-
 const handleAuthMap = {
   [pickHandleErrorMessages.twitterReservedError]: SignupFlowTwitterAuth,
   [pickHandleErrorMessages.instagramReservedError]: SignupFlowInstagramAuth,