import { useMutation } from '@apollo/react-hooks' import AsyncStorage from '@react-native-async-storage/async-storage' import { useNavigation } from '@react-navigation/native' import Constants from 'expo-constants' import * as Notifications from 'expo-notifications' import gql from 'graphql-tag' import React, { useContext, useEffect, useState } from 'react' import { KeyboardAvoidingView, Platform, ScrollView, TouchableOpacity, View } from 'react-native' import { FilledTextField } from 'react-native-material-textfield' import Logo from '../../../assets/images/Svg/Logo' import i18n from '../../../i18n' import { riderLogin } from '../../apollo/mutations' import { Spinner, TextDefault, WrapperView } from '../../components' import { FlashMessage } from '../../components/FlashMessage/FlashMessage' import { AuthContext } from '../../context/auth' import { alignment } from '../../utilities/alignment' import colors from '../../utilities/colors' import { scale } from '../../utilities/scaling' import useStyle from './styles' const RIDER_LOGIN = gql` ${riderLogin} ` export default function Login() { const styles = useStyle() const navigation = useNavigation() const [username, setUsername] = useState('rider') const [password, setPassword] = useState('123123') const [usernameError, setUsernameError] = useState('') const [passwordError, setPasswordError] = useState('') const { setTokenAsync } = useContext(AuthContext) useEffect(() => { navigation.setOptions({ headerLeft: null }) }, []) const [mutate, { loading }] = useMutation(RIDER_LOGIN, { onCompleted, onError }) function validateForm() { let res = true setUsernameError('') setPasswordError('') if (!username) { setUsernameError(i18n.t('Usernameisrequired')) res = false } if (!password) { setPasswordError(i18n.t('Passwordisrequired')) res = false } return res } async function onCompleted(data) { FlashMessage({ message: i18n.t('Loggedin') }) await AsyncStorage.setItem('rider-id', data.riderLogin.userId) setTokenAsync(data.riderLogin.token) } function onError({ networkError, graphQLErrors }) { console.log('errors', networkError, graphQLErrors) let message = '' if (!!graphQLErrors && graphQLErrors.length) { message = graphQLErrors[0].message } if (!!networkError) { message = networkError.result.errors[0].message } FlashMessage({ message: message }) } return ( {i18n.t('EnteryourEmailandPassword')} { setUsername(text.toLowerCase().trim()) }} /> { setPassword(text.trim()) }} /> {loading && } {!loading && ( { if (validateForm()) { let notificationToken = null if (Constants.isDevice) { const { status: existingStatus } = await Notifications.getPermissionsAsync() if (existingStatus === 'granted') { notificationToken = ( await Notifications.getExpoPushTokenAsync() ).data } } mutate({ variables: { username: username.toLowerCase(), password: password, notificationToken } }) } }} activeOpacity={0.5} style={[styles.RContainer]}> {i18n.t('loginBtn')} )} ) }