From 182c56b72c460daca484c9389d2ad2e18c4c7bed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Tue, 5 Sep 2023 11:41:08 +0200
Subject: [PATCH] Trim and validate locked fields (if they are required)

---
 ComApp/src/App/Views/ContactDetailsScreen.js | 111 +++++++++++--------
 1 file changed, 63 insertions(+), 48 deletions(-)

diff --git a/ComApp/src/App/Views/ContactDetailsScreen.js b/ComApp/src/App/Views/ContactDetailsScreen.js
index 0cbf32e..b36587d 100644
--- a/ComApp/src/App/Views/ContactDetailsScreen.js
+++ b/ComApp/src/App/Views/ContactDetailsScreen.js
@@ -166,6 +166,7 @@ class ContactDetailsScreen extends React.Component {
     const contact = Object.assign({}, this.state.contact);
 
     const defaultForms = Form.getAll(InputStatus.DEFAULT);
+    const lockedForms = Form.getAll(InputStatus.LOCKED);
 
     console.debug('save Contact');
 
@@ -181,19 +182,27 @@ class ContactDetailsScreen extends React.Component {
       console.debug('invalid prop email');
       error = error.concat(i18n.t('error.invalid_email_address') + '.\n');
     }
-
-    if (contact.firstname && contact.firstname.length >= 255) {
-      console.debug('invalid prop invalid_firstname');
-      error = error.concat(i18n.t('contact.invalid_firstname') + '.\n');
-    }
-    if (contact.lastname && contact.lastname.length >= 255) {
-      console.debug('invalid prop lastname');
-      error = error.concat(i18n.t('contact.invalid_lastname') + '.\n');
-    }
-    if (contact.phone && contact.phone.length >= 255) {
-      console.debug('invalid prop phone');
-      error = error.concat(i18n.t('contact.invalid_phone') + '.\n');
-    }
+    const lockedFields = ['firstname', 'lastname', 'phone'];
+    lockedFields.forEach(fieldName => {
+      const form = lockedForms.find(inputForm => inputForm.name === fieldName);
+      if (!form) {
+        throw new Error(`failed to get form ${fieldName}`);
+      }
+      if (contact[fieldName]?.length) {
+        contact[fieldName] = contact[fieldName].trim();
+      }
+      if (form.required && !contact[fieldName]?.length) {
+        error = error.concat(
+          i18n.t('contact_details_s.input_required', {
+            placeholder: form.placeholder[i18n.locale],
+          }) + '.\n',
+        );
+      }
+      if (contact[fieldName] && contact[fieldName]?.length >= 255) {
+        console.debug(`invalid prop invalid_${fieldName}`);
+        error = error.concat(i18n.t(`contact.invalid_${fieldName}`) + '.\n');
+      }
+    });
 
     contact.data.forEach(input => {
       const formToValidate = defaultForms.find(
@@ -208,18 +217,21 @@ class ContactDetailsScreen extends React.Component {
         );
       }
       if (
-        input?.value?.length &&
-        input?.value?.length > 255 &&
-        (formToValidate.type === InputType.EMAIL ||
-          formToValidate.type === InputType.PHONE ||
-          formToValidate.type === InputType.TEXT)
+        formToValidate.type === InputType.EMAIL ||
+        formToValidate.type === InputType.PHONE ||
+        formToValidate.type === InputType.TEXT
       ) {
-        console.debug('invalid data ', input.formSlug);
-        error = error.concat(
-          i18n.t('contact_details_s.input_too_long', {
-            placeholder: formToValidate.placeholder[i18n.locale],
-          }) + '.\n',
-        );
+        if (input?.value?.length) {
+          input.value = input.value.trim();
+        }
+        if (input?.value?.length > 255) {
+          console.debug('invalid data ', input.formSlug);
+          error = error.concat(
+            i18n.t('contact_details_s.input_too_long', {
+              placeholder: formToValidate.placeholder[i18n.locale],
+            }) + '.\n',
+          );
+        }
       }
       if (
         input?.value?.length &&
@@ -1075,36 +1087,39 @@ class ContactDetailsScreen extends React.Component {
     keyboardType,
     isVisible,
   ) {
+    /** @type {typeof import('./../Models/Contact').ContactData} */
+    const contact = this.state.contact;
+    /** @type {Array<import('./../Models/Contact').InputDataType>} */
+    const allInputs = this.state.allInputs;
+    const changeText = text => {
+      if (isDefault) {
+        const dataIndex = contact.data.findIndex(
+          input => input.formSlug === slug,
+        );
+        // * Set value on data.
+        contact.data[dataIndex].value = text;
+        console.debug('data ', contact.data[dataIndex].value);
+      } else {
+        // * Set value on model
+        contact[slug] = text;
+        console.debug('prop ', contact[slug]);
+      }
+      allInputs[index].value = text;
+      this.setState({
+        contact: contact,
+        allInputs: allInputs,
+      });
+    };
     return this.wrapper(
       placeHolder,
       requiredStr,
       isVisible,
       <TextInput
         value={this.state.allInputs[index].value}
-        onChangeText={text => {
-          text = text.trim();
-          /** @type {typeof import('./../Models/Contact').ContactData} */
-          const contact = this.state.contact;
-          if (isDefault) {
-            const dataIndex = contact.data.findIndex(
-              input => input.formSlug === slug,
-            );
-            // * Set value on data.
-            contact.data[dataIndex].value = text;
-            console.debug('data ', contact.data[dataIndex].value);
-          } else {
-            // * Set value on model
-            contact[slug] = text;
-            console.debug('prop ', contact[slug]);
-          }
-          /** @type {Array<import('./../Models/Contact').InputDataType>} */
-          const allInputs = this.state.allInputs;
-          allInputs[index].value = text;
-          this.setState({
-            contact: contact,
-            allInputs: allInputs,
-          });
-        }}
+        onEndEditing={event =>
+          changeText((event.nativeEvent?.text ?? '').trim())
+        }
+        onChangeText={changeText}
         style={{ ...styles.input, ...{ display: isVisible ? 'flex' : 'none' } }}
         placeholder={`${placeHolder} ${requiredStr}`}
         autoCapitalize={'none'}