feat: v2 of search validation

pranshuchittora · Jul 1, 2021 · 86d635e · 86d635e
1 parent 8e0c6f5
commit 86d635e
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 32 deletions.
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -339,6 +339,7 @@ export default {
     cameraPermissionsNotGranted: 'Camera permissions not granted',
     messages: {
         noPhoneNumber: 'Please enter a phone number including the country code e.g +447814266907',
+        noEmailOrPhone: 'Please enter a valid email address or phone number.',
         maxParticipantsReached: 'You\'ve reached the maximum number of participants for a group chat.',
     },
     onfidoStep: {

diff --git a/src/libs/API.js b/src/libs/API.js
@@ -996,6 +996,19 @@ function Inbox_CallUser(parameters) {
     return Network.post(commandName, parameters);
 }
 
+/**
+ * Validates PhoneNumber
+ *
+ * @param {Object} parameters
+ * @param {String} parameters.phoneNumber
+ * @returns {Promise}
+ */
+function IsValidPhoneNumber(parameters) {
+    const commandName = 'IsValidPhoneNumber';
+    requireParameters(['phoneNumber'], parameters, commandName);
+    return Network.post(commandName, parameters);
+}
+
 export {
     Authenticate,
     BankAccount_Create,
@@ -1014,6 +1027,7 @@ export {
     GetRequestCountryCode,
     Graphite_Timer,
     Inbox_CallUser,
+    IsValidPhoneNumber,
     Log,
     PayIOU,
     PayWithWallet,

diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /* eslint-disable no-continue */
 import _ from 'underscore';
 import Onyx from 'react-native-onyx';
@@ -10,6 +11,7 @@ import {getReportParticipantsTitle, isDefaultRoom} from './reportUtils';
 import {translate} from './translate';
 import Permissions from './Permissions';
 import md5 from './md5';
+import * as API from './API';
 
 /**
  * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can
@@ -420,11 +422,45 @@ function getOptions(reports, personalDetails, draftComments, activeReportID, {
         const login = (Str.isValidPhone(searchValue) && !searchValue.includes('+'))
             ? `+${countryCodeByIP}${searchValue}`
             : searchValue;
-        const userInvitePersonalDetails = getPersonalDetailsForLogins([login], personalDetails);
-        userToInvite = createOption(userInvitePersonalDetails, null, draftComments, {
-            showChatPreviewLine,
-        });
-        userToInvite.icons = [defaultAvatarForUserToInvite];
+
+
+        const returnIfValid = () => {
+            const userInvitePersonalDetails = getPersonalDetailsForLogins([login], personalDetails);
+            userToInvite = createOption(userInvitePersonalDetails, null, draftComments, {
+                showChatPreviewLine,
+            });
+            userToInvite.icons = [defaultAvatarForUserToInvite];
+
+            return new Promise((resolve) => {
+                resolve({
+                    personalDetails: personalDetailsOptions,
+                    recentReports: recentReportOptions,
+                    userToInvite,
+                });
+            });
+        };
+        if (Str.isValidPhone(login)) {
+            // eslint-disable-next-line @lwc/lwc/no-async-await
+            return (async function () {
+                const resp = await API.IsValidPhoneNumber({phoneNumber: login});
+                console.log(login, resp.isValid);
+                if (!resp.isValid) {
+                    return {
+                        personalDetails: [],
+                        recentReports: [],
+                        userToInvite: null,
+                    };
+                }
+                return returnIfValid();
+            })();
+
+            // eslint-disable-next-line no-console
+            // console.log(isNotValid);
+            // if (isNotValid) {
+            //     return isNotValid;
+            // }
+        }
+        return returnIfValid();
     }
 
     return {
@@ -603,19 +639,30 @@ function getSidebarOptions(
  * @return {String}
  */
 function getHeaderMessage(hasSelectableOptions, hasUserToInvite, searchValue, maxParticipantsReached = false) {
-    if (maxParticipantsReached) {
-        return translate(preferredLocale, 'messages.maxParticipantsReached');
-    }
+    console.log('getHeaderMessage', searchValue);
+
+    const immediateResolve = payload => new Promise(resolve => resolve(payload));
+
+    // if (maxParticipantsReached) {
+    //     return immediateResolve(translate(preferredLocale, 'messages.maxParticipantsReached'));
+    // }
 
     if (!hasSelectableOptions && !hasUserToInvite) {
-        if (/^\d+$/.test(searchValue)) {
-            return translate(preferredLocale, 'messages.noPhoneNumber');
+        if (Str.isValidPhone(searchValue)) {
+            const login = (Str.isValidPhone(searchValue) && !searchValue.includes('+'))
+                ? `+${countryCodeByIP}${searchValue}`
+                : searchValue;
+            // eslint-disable-next-line @lwc/lwc/no-async-await
+            return API.IsValidPhoneNumber({phoneNumber: login}).then((resp) => {
+                if (!resp.isValid) {
+                    return translate(preferredLocale, 'messages.noPhoneNumber');
+                }
+                return '';
+            });
         }
-
-        return searchValue;
+        return immediateResolve(translate(preferredLocale, 'messages.noEmailOrPhone'));
     }
-
-    return '';
+    return immediateResolve('');
 }
 
 /**

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import _ from 'underscore';
 import React, {Component} from 'react';
 import {View} from 'react-native';
@@ -81,9 +82,10 @@ class SearchPage extends Component {
 
         this.state = {
             searchValue: '',
+            userToInvite,
             recentReports,
             personalDetails,
-            userToInvite,
+            headerMessage: '',
         };
     }
 
@@ -103,7 +105,8 @@ class SearchPage extends Component {
     getSections() {
         const sections = [{
             title: this.props.translate('common.recents'),
-            data: this.state.recentReports.concat(this.state.personalDetails),
+            data: this.state.recentReports
+                ? this.state.recentReports.concat(this.state.personalDetails) : this.state.personalDetails,
             shouldShow: true,
             indexOffset: 0,
         }];
@@ -120,21 +123,50 @@ class SearchPage extends Component {
         return sections;
     }
 
+    getHeader() {
+        if (this.state.recentReports && this.state.personalDetails) {
+            getHeaderMessage(
+                (this.state.recentReports.length + this.state.personalDetails.length) !== 0,
+                Boolean(this.state.userToInvite),
+                this.state.searchValue,
+            ).then((header) => {
+                this.setState((prevState) => {
+                    if (prevState.headerMessage !== header) {
+                        return {
+                            headerMessage: header,
+                        };
+                    }
+                });
+            });
+        } else {
+            this.setState((prevState) => {
+                if (prevState.headerMessage !== '') {
+                    return {
+                        headerMessage: '',
+                    };
+                }
+            });
+        }
+    }
+
     updateOptions() {
-        const {
-            recentReports,
-            personalDetails,
-            userToInvite,
-        } = getSearchOptions(
+        getSearchOptions(
             this.props.reports,
             this.props.personalDetails,
             this.state.searchValue,
             this.props.betas,
-        );
-        this.setState({
-            userToInvite,
-            recentReports,
-            personalDetails,
+        ).then((resp) => {
+            const {
+                recentReports,
+                personalDetails,
+                userToInvite,
+            } = resp;
+            console.log(recentReports, personalDetails, userToInvite);
+            this.setState({
+                userToInvite,
+                recentReports,
+                personalDetails,
+            });
         });
     }
 
@@ -162,13 +194,10 @@ class SearchPage extends Component {
         }
     }
 
+
     render() {
         const sections = this.getSections();
-        const headerMessage = getHeaderMessage(
-            (this.state.recentReports.length + this.state.personalDetails.length) !== 0,
-            Boolean(this.state.userToInvite),
-            this.state.searchValue,
-        );
+        this.getHeader();
         return (
             <ScreenWrapper>
                 {({didScreenTransitionEnd}) => (
@@ -185,7 +214,7 @@ class SearchPage extends Component {
                                 value={this.state.searchValue}
                                 onSelectRow={this.selectReport}
                                 onChangeText={this.onChangeText}
-                                headerMessage={headerMessage}
+                                headerMessage={this.state.headerMessage}
                                 hideSectionHeaders
                                 hideAdditionalOptionStates
                                 showTitleTooltip