- Breaking up the profile

2019-08-17 02:45:57 -04:00
parent c146884636
commit cc8442b0b2
12 changed files with 557 additions and 192 deletions
--- a/app/components/Profile/ProfileInputs/EmailInput.js
+++ b/app/components/Profile/ProfileInputs/EmailInput.js
@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Text, TextInput, View } from 'react-native';
+
+import { getEmailAvailability } from '../../../api/profile.js';
+
+import styles from '../Profile.styles.js';
+
+const STRINGS = {
+    CONTINUE: 'continue',
+    PLACEHOLDER: 'email address',
+    REGISTERED: `You've already registered!`,
+    RESET_PASSWORD: 'reset password',
+};
+
+export default function EmailInput({ email, handleValidEmailEntry, isRequired, showContinueButton }) {
+    const [emailValue, setEmail] = useState(email);
+    const [isEmailAvailable, setEmailAvailable] = useState(null);
+
+    const _handleContinueButtonPress = () => {
+
+    };
+
+    const _handleEndEditing = () => {
+        if (!emailValue.match(/.+\@.+\..+/)) {
+            Alert.alert(
+                'Invalid Email',
+                `Hmmm... You entered '${emailValue}' and something doesn't look quite right...`,
+            );
+
+            return;
+        }
+
+        getEmailAvailability(emailValue)
+            .then((result) => {
+                const { available } = result;
+
+                console.log(`EmailInput._validateEmail => getEmailAvailability(${emailValue}):`, result);
+
+                if (available) {
+                    handleValidEmailEntry(emailValue);
+                }
+
+                setEmailAvailable(available);
+            });
+    };
+
+    return (
+        <View style={[styles.sectionWrap, styles.password, isRequired && styles.requiredWrap]}>
+            <TextInput
+                autoCapitalize="none"
+                keyboardType="email-address"
+                onChangeText={setEmail}
+                onEndEditing={showContinueButton ? null : _handleEndEditing}
+                placeholder={STRINGS.PLACEHOLDER}
+                style={[styles.textInput, isRequired && styles.requiredInput]}
+                value={emailValue || ''}
+            />
+            {isEmailAvailable === false && (
+                <View style={styles.emailTaken}>
+                    <Text style={{color:'red'}}>{STRINGS.REGISTERED}</Text>
+                    <Button title={STRINGS.RESET_PASSWORD} onPress={() => {}} />
+                </View>
+            )}
+            {showContinueButton && !isEmailAvailable && (
+                <Button
+                    onPress={_handleEndEditing}
+                    title={STRINGS.CONTINUE}
+                />
+            )}
+        </View>
+    );
+}
+
+EmailInput.propTypes = {
+    email: PropTypes.string,
+    handleValidEmailEntry: PropTypes.func.isRequired,
+    isRequired: PropTypes.bool,
+    showContinueButton: PropTypes.bool,
+};
+
+EmailInput.defaultProps = {
+    email: null,
+    isRequired: false,
+    showContinueButton: false,
+}