feat: ui update for autofill

hopetambala · Feb 9, 2021 · 46e37fc · 46e37fc
1 parent 3a8d7ee
commit 46e37fc
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 69 deletions.
diff --git a/components/FormikFields/PaperInputPicker/AutoFill/index.js b/components/FormikFields/PaperInputPicker/AutoFill/index.js
@@ -9,6 +9,7 @@ import { TextInput } from 'react-native-paper';
 import { getData } from '../../../../modules/async-storage';
 import { cacheAutofillData } from '../../../../modules/cached-resources';
 import I18n from '../../../../modules/i18n';
+import { theme } from '../../../../modules/theme';
 import { stylesDefault, stylesPaper } from '../index.style';
 
 YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
@@ -56,7 +57,7 @@ export default class AutoFill extends Component {
       label, translatedLabel, formikProps, formikKey, scrollViewScroll, setScrollViewScroll
     } = this.props;
 
-    const placeholder = `${I18n.t('components.autofill.placeholder')} ${I18n.t(label)} ${I18n.t('components.autofill.placeholder_end')}`;
+    const placeholder = I18n.t(label);
 
     return (
       <View style={styles.container}>
@@ -71,88 +72,75 @@ export default class AutoFill extends Component {
             style={stylesDefault.label}
           />
         ) : (
-          <View>
-            <Autocomplete
-              autoCapitalize="none"
-              autoCorrect={false}
-              containerStyle={styles.autocompleteContainer}
+            <View>
+              <Autocomplete
+                autoCapitalize="none"
+                autoCorrect={false}
+                containerStyle={styles.autocompleteContainer}
+                inputContainerStyle={styles.textInputContainer}
                 // data to show in suggestion
-              data={fields.length === 1 && comp(query, fields[0]) ? [] : fields}
+                data={fields.length === 1 && comp(query, fields[0]) ? [] : fields}
                 // default value if you want to set something in input
-              defaultValue={query}
+                defaultValue={query}
                 /* onchange of the text changing the state of the query which will trigger
                 the findFilm method to show the suggestions */
-              onChangeText={(text) => {
-                this.setState({ query: text });
-                formikProps.setFieldValue(formikKey, text);
-              }}
-              placeholder={placeholder}
-              listStyle={styles.listContainer}
-              keyExtractor={(item,) => item.key}
-              onStartShouldSetResponderCapture={() => {
-                // this allows for us to scroll within the result list when the user is toouching it
-                // and on the screen when they are not
-                setScrollViewScroll(false);
-                if (fields.length === 0
+                onChangeText={(text) => {
+                  this.setState({ query: text });
+                  formikProps.setFieldValue(formikKey, text);
+                }}
+                placeholder={placeholder}
+                listStyle={styles.listContainer}
+                keyExtractor={(item,) => item.key}
+                onStartShouldSetResponderCapture={() => {
+                  // this allows for us to scroll within the result list when the user is toouching it
+                  // and on the screen when they are not
+                  setScrollViewScroll(false);
+                  if (fields.length === 0
                     && scrollViewScroll === false) {
-                  setScrollViewScroll(true);
-                }
-              }}
-              renderItem={({ item }) => (
-                // you can change the view you want to show in suggestion from here
-                <TouchableOpacity
-                  key={`${item}`}
-                  onPress={() => {
-                    this.setState({ query: item });
-                    formikProps.setFieldValue(formikKey, item);
-                  }}
-                >
-                  <Text style={styles.itemText} key={item}>
-                    {item}
-                  </Text>
-                </TouchableOpacity>
-              )}
-            />
-            <View style={styles.descriptionContainer}>
-              {fields.length > 0 ? (
-                <Text style={styles.infoText}>{query}</Text>
-              ) : (
-                <Text style={styles.infoText}>{placeholder}</Text>
-              )}
+                    setScrollViewScroll(true);
+                  }
+                }}
+                renderItem={({ item }) => (
+                  // you can change the view you want to show in suggestion from here
+                  <TouchableOpacity
+                    key={`${item}`}
+                    onPress={() => {
+                      this.setState({ query: item });
+                      formikProps.setFieldValue(formikKey, item);
+                    }}
+                  >
+                    <Text style={styles.itemText} key={item}>
+                      {item}
+                    </Text>
+                  </TouchableOpacity>
+                )}
+              />
             </View>
-          </View>
-        )}
+          )}
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
-    // backgroundColor: '#F5FCFF',
     flex: 1,
-    padding: 16,
-    // marginTop: 40,
-    marginBottom: 40,
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingTop: 10,
+    marginBottom: 75,
   },
-  autocompleteContainer: {
-    backgroundColor: '#ffffff',
-    borderWidth: 0
-  },
-  descriptionContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    borderRadius: 20
+  textInputContainer: {
+    borderColor: theme.colors.primary,
+    borderWidth: 1,
+    color: 'red'
   },
   itemText: {
     fontSize: 15,
     paddingTop: 5,
     paddingBottom: 5,
     margin: 2,
-  },
-  infoText: {
-    textAlign: 'center',
-    fontSize: 16,
+    flex: 1
   },
   listContainer: {
     height: 80,

diff --git a/domains/Auth/SignUp/index.js b/domains/Auth/SignUp/index.js
@@ -67,12 +67,6 @@ export default function SignUp({ navigation }) {
     navigation.navigate('Sign In');
   };
 
-  useEffect(() => {
-    cacheAutofillData('organization').then((result) => {
-      console.log(result)
-    })
-  }, [])
-
   return (
     <KeyboardAvoidingView
       enabled

diff --git a/modules/cached-resources/read.js b/modules/cached-resources/read.js
@@ -23,7 +23,7 @@ async function cacheAutofillData(parameter) {
       if (connected) {
         retrievePuenteAutofillData('all').then((result) => {
           // cache organizations tied to all users
-          customQueryService(0, 500, 'User', 'adminVerified', "true").then((users) => {
+          customQueryService(0, 500, 'User', 'adminVerified', true).then((users) => {
             const orgsCapitalized = [];
             const orgResults = [];
             users.forEach((user) => {