update checks, disable button if unavailable

src/screens/Signup/StepHandle.tsx

@@ -126,11 +126,14 @@ export function StepHandle() {
     )
   }
 
-  const textFieldInvalid =
-    (!isPending &&
+  const isHandleTaken =
+    !isPending &&
     queryEnabled &&
     isHandleAvailable &&
-      !isHandleAvailable.available) ||
+    !isHandleAvailable.available
+
+  const textFieldInvalid =
+    isHandleTaken ||
     !validCheck.frontLengthNotTooLong ||
     !validCheck.handleChars ||
     !validCheck.hyphenStartOrEnd ||
@@ -175,10 +178,7 @@ export function StepHandle() {
                 <RequirementText>{state.error}</RequirementText>
               </Requirement>
             )}
-            {queryEnabled &&
-              isHandleAvailable &&
-              !isHandleAvailable.available &&
-              validCheck.overall && (
+            {isHandleTaken && validCheck.overall && (
               <>
                 <Requirement>
                   <RequirementText>
@@ -215,7 +215,10 @@ export function StepHandle() {
                   </RequirementText>
                 ) : (
                   <RequirementText>
-                    <Trans>Only contains letters, numbers, and hyphens</Trans>
+                    <Trans>
+                      Username must only contain letters (a-z), numbers, and
+                      hyphens
+                    </Trans>
                   </RequirementText>
                 )}
               </Requirement>
@@ -240,7 +243,7 @@ export function StepHandle() {
       <Animated.View layout={native(LinearTransition)}>
         <BackNextButtons
           isLoading={isNextLoading}
-          isNextDisabled={!validCheck.overall || !!state.error}
+          isNextDisabled={!validCheck.overall || !!state.error || isHandleTaken}
           onBackPress={onBackPress}
           onNextPress={onNextPress}
         />