gistfile1.txt

import React, { useCallback, useRef, useEffect } from 'react';
import {
    Image,
    View,
    ScrollView,
    KeyboardAvoidingView,
    Platform,
    TextInput,
    Alert,
    Linking,
} from 'react-native';
import { Form } from '@unform/mobile';
import { FormHandles } from '@unform/core';
import * as Yup from 'yup';
import { useSelector, useDispatch } from 'react-redux';

import getValidationErrors from '../../utils/get-validation-errors';

import DeliveryMotorcycle from '../../assets/img/logo.png';
import Input from '../../components/input';
import Button from '../../components/button';
import { navigate } from '../../config/navigation';
import {
    Container,
    Title,
    ForgotPassword,
    ForgotPasswordText,
    TextError,
    SignUpContainer,
    SignUpText
} from './styles';
import { SignInFormData } from './signin.props';
import { RootState } from 'src/store/reducers';
import { requestAuthAction } from '../../store/modules/auth/actions';

const SignIn: React.FC = () => {
    const formRef = useRef<FormHandles>(null);
    const passwordInputRef = useRef<TextInput>(null);
    const dispatch = useDispatch();

    const handleSignIn = useCallback(async (data: SignInFormData) => {
        try {
            formRef.current?.setErrors({});

            const schemaValidator = Yup.object().shape({
                email: Yup.string()
                    .required('E-mail obrigatório')
                    .email('Digite um e-mail válido'),
                password: Yup.string().min(4, 'No mínimo 4 dígitos'),
            });

            await schemaValidator.validate(data, {
                abortEarly: false,
            });
            dispatch(requestAuthAction(data));
        } catch (error) {
            const errors = getValidationErrors(error);
            formRef.current?.setErrors(errors);
            console.log('unform:', { errors });
            Alert.alert(
                'Erro na autenticação',
                'Ocorreu um erro ao fazer login, cheque suas credenciais',
            );
        }
    }, []);

    const authState = (state: RootState) => state.auth;
    const auth = useSelector(authState);

    useEffect(() => {
        if (auth.errors && !auth.loading) {
            formRef.current?.setErrors({
                email: '!',
                password: '!',
            });
        }
    }, [auth]);

    const handleSignUp = () => {
        Linking.openURL('https://agenciaccm.typeform.com/c/OuCPH8xB?typeform-cui-avatar=https://images.typeform.com/images/rhRgZEwNN7bf');
    }

    return (
        <>
            <KeyboardAvoidingView
                style={{ flex: 1 }}
                behavior={Platform.OS === 'ios' ? 'padding' : undefined}
                enabled
            >
                <ScrollView
                    contentContainerStyle={{ flex: 1 }}
                    keyboardShouldPersistTaps="handled"
                >
                    <Container>
                        <Image source={DeliveryMotorcycle} />
                        <View>
                            <Title>Login do Entregador</Title>
                        </View>
                        {!!auth.errors && (
                            <View>
                                <TextError> {auth.errors}</TextError>
                            </View>
                        )}
                        <Form ref={formRef} onSubmit={handleSignIn}>
                            <Input
                                name="email"
                                icon="mail"
                                placeholder="E-mail"
                                autoCapitalize="none"
                                autoCorrect={false}
                                keyboardType="email-address"
                                returnKeyType="next"
                                onSubmitEditing={() => {
                                    passwordInputRef.current?.focus();
                                }}
                            />
                            <Input
                                ref={passwordInputRef}
                                name="password"
                                icon="lock"
                                placeholder="Senha"
                                secureTextEntry
                                returnKeyType="send"
                                onSubmitEditing={() => {
                                    formRef.current?.submitForm();
                                }}
                            />
                        </Form>
                        <Button
                            isLoading={auth.loading}
                            onPress={() => {
                                formRef.current?.submitForm();
                            }}
                        >
                            Entrar
                        </Button>
                        <Button
                            onPress={() => handleSignUp()}
                        >
                            Seja um Entregador
                        </Button>

                        <ForgotPassword onPress={() => navigate('ForgotPage')}>
                            <ForgotPasswordText>
                                Esqueci minha senha
                            </ForgotPasswordText>
                        </ForgotPassword>


                    </Container>
                </ScrollView>
            </KeyboardAvoidingView>
        </>
    );
};

export default SignIn;