US-2046 I was unable to edit an existing contact (#830)

* fix: unable to save changes when editing existing contact * feat: disable save button when rns is loading * fix: add onSetLoadingRNS to dependency array
rsksmart · Dec 6, 2023 · 3347032 · 3347032
1 parent abe6c01
commit 3347032
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 11 deletions.
diff --git a/src/components/address/AddressInput.tsx b/src/components/address/AddressInput.tsx
@@ -38,6 +38,7 @@ export interface AddressInputProps extends Omit<InputProps, 'value'> {
   ) => void
   chainId: ChainTypesByIdType
   contactList?: Contact[]
+  onSetLoadingRNS?: (isLoading: boolean) => void
   searchContacts?: (textString: string) => void
   onSetProposedContact?: (contact: ProposedContact) => void
 }
@@ -50,6 +51,11 @@ enum Status {
   CHECKSUM = 'CHECKSUM',
 }
 
+interface StatusObject {
+  type: Status
+  value?: string
+}
+
 const typeColorMap = new Map([
   [Status.ERROR, sharedColors.danger],
   [Status.SUCCESS, sharedColors.success],
@@ -71,6 +77,7 @@ export const AddressInput = ({
   inputName,
   onChangeAddress,
   onSetProposedContact,
+  onSetLoadingRNS,
   resetValue,
   testID,
   chainId,
@@ -80,10 +87,7 @@ export const AddressInput = ({
   const [contactsFound, setContactsFound] = useState<Contact[] | null>(null)
   const [domainFound, setDomainFound] = useState<boolean>(false)
   // status
-  const [status, setStatus] = useState<{
-    type: Status
-    value?: string
-  }>({ type: Status.READY })
+  const [status, setStatus] = useState<StatusObject>({ type: Status.READY })
 
   const labelColor = useMemo<TextStyle>(() => {
     return typeColorMap.get(status.type)
@@ -137,6 +141,9 @@ export const AddressInput = ({
             value: t('contact_form_getting_info'),
           })
 
+          // send loading state to parent
+          onSetLoadingRNS?.(true)
+
           getRnsResolver(chainID)
             .addr(userInput, isBTC ? CoinType.BTC : CoinType.RSK)
             .then((resolvedAddress: string) => {
@@ -146,6 +153,9 @@ export const AddressInput = ({
                 value: t('contact_form_user_found'),
               })
 
+              // send loading state to parent
+              onSetLoadingRNS?.(false)
+
               if (contactList) {
                 const contactExists = checkIfContactExists(
                   resolvedAddress,
@@ -171,14 +181,17 @@ export const AddressInput = ({
                   : isBitcoinAddressValid(resolvedAddress),
               )
             })
-            .catch(_e =>
+            .catch(_e => {
               setStatus({
                 type: Status.ERROR,
                 value: `${t(
                   'contact_form_address_not_found',
                 )} ${userInput.toLowerCase()}`,
-              }),
-            )
+              })
+
+              // send loading state to parent
+              onSetLoadingRNS?.(false)
+            })
           break
         case AddressValidationMessage.INVALID_CHECKSUM:
           setStatus({
@@ -202,7 +215,7 @@ export const AddressInput = ({
           break
       }
     },
-    [t, onChangeAddress, onSetProposedContact, contactList],
+    [t, onChangeAddress, onSetProposedContact, contactList, onSetLoadingRNS],
   )
 
   const handleChangeText = useCallback(

diff --git a/src/screens/contacts/ContactFormScreen.tsx b/src/screens/contacts/ContactFormScreen.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { CompositeScreenProps } from '@react-navigation/native'
 import { Alert, KeyboardAvoidingView, Platform, ScrollView } from 'react-native'
 import { FormProvider, useForm } from 'react-hook-form'
@@ -72,6 +72,7 @@ export const ContactFormScreen = ({
   const contacts = useAppSelector(getContactsAsArray)
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
+  const [rnsLoading, setRnsLoading] = useState(false)
 
   const schema = useMemo(
     () =>
@@ -148,6 +149,17 @@ export const ContactFormScreen = ({
       const lAddress = address.toLowerCase()
       const trimmedName = name.trim()
 
+      let contactsToEvaluate: Contact[] = contacts
+
+      // if in edit mode remove the desired contact from exist evaluation
+      if (initialValue.address) {
+        contactsToEvaluate = contactsToEvaluate.filter(
+          c =>
+            c.displayAddress !==
+            (initialValue.displayAddress || initialValue.address),
+        )
+      }
+
       const contact: Contact = {
         name: trimmedName,
         address: lAddress,
@@ -156,7 +168,7 @@ export const ContactFormScreen = ({
       const contactExists = checkIfContactExists(
         displayAddress && lAddress,
         trimmedName,
-        contacts,
+        contactsToEvaluate,
       )
 
       if (contactExists) {
@@ -226,6 +238,7 @@ export const ContactFormScreen = ({
             onChangeAddress={handleAddressChange}
             chainId={chainId}
             isBitcoin={false}
+            onSetLoadingRNS={setRnsLoading}
           />
           <Input
             label={t('contact_form_name')}
@@ -246,7 +259,7 @@ export const ContactFormScreen = ({
         onPress={handleSubmit(saveContact)}
         style={sharedStyles.appButtonBottom}
         textColor={sharedColors.inputInactive}
-        disabled={hasErrors}
+        disabled={hasErrors || rnsLoading}
       />
     </KeyboardAvoidingView>
   )