grocery-app/RiderApp/src/screens/Login/Login.js

187 lines
6.2 KiB
JavaScript
Raw Normal View History

2023-03-20 10:17:25 +00:00
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) {
2024-01-03 12:03:39 +00:00
setUsernameError(i18n.t('Usernameisrequired'))
2023-03-20 10:17:25 +00:00
res = false
}
if (!password) {
2024-01-03 12:03:39 +00:00
setPasswordError(i18n.t('Passwordisrequired'))
2023-03-20 10:17:25 +00:00
res = false
}
return res
}
async function onCompleted(data) {
FlashMessage({
2024-01-03 12:03:39 +00:00
message: i18n.t('Loggedin')
2023-03-20 10:17:25 +00:00
})
await AsyncStorage.setItem('rider-id', data.riderLogin.userId)
setTokenAsync(data.riderLogin.token)
}
function onError({ networkError, graphQLErrors }) {
console.log('errors', networkError, graphQLErrors)
2024-01-03 12:03:39 +00:00
let message = ''
if (!!graphQLErrors && graphQLErrors.length) {
message = graphQLErrors[0].message
}
if (!!networkError) {
message = networkError.result.errors[0].message
}
FlashMessage({
message: message
})
2023-03-20 10:17:25 +00:00
}
return (
<WrapperView>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.flex}>
<ScrollView
style={styles.flex}
contentContainerStyle={styles.scrollContent}>
<View style={[styles.flex, styles.container]}>
<Logo width={scale(130)} height={scale(130)} />
<View style={styles.width100}>
<TextDefault
style={alignment.MBmedium}
textColor={colors.placeHolderColor}>
2024-01-03 12:03:39 +00:00
{i18n.t('EnteryourEmailandPassword')}
2023-03-20 10:17:25 +00:00
</TextDefault>
<FilledTextField
defaultValue={'rider'}
error={usernameError}
keyboardType={'email-address'}
2024-01-03 12:03:39 +00:00
label={i18n.t('EmailorPhone')}
2023-03-20 10:17:25 +00:00
labelFontSize={scale(12)}
fontSize={scale(12)}
activeLineWidth={0}
labelHeight={10}
lineWidth={0}
textColor={colors.fontMainColor}
baseColor={colors.fontMainColor}
errorColor={colors.textErrorColor}
tintColor={colors.tagColor}
labelTextStyle={styles.labelStyle}
inputContainerStyle={styles.textContainer}
onChangeText={text => {
setUsername(text.toLowerCase().trim())
}}
/>
<View style={styles.mt15} />
<FilledTextField
defaultValue={'123123'}
error={passwordError}
2024-01-03 12:03:39 +00:00
label={i18n.t('Password')}
2023-03-20 10:17:25 +00:00
secureTextEntry
labelFontSize={scale(12)}
fontSize={scale(12)}
activeLineWidth={0}
labelHeight={10}
lineWidth={0}
textColor={colors.fontMainColor}
baseColor={colors.fontMainColor}
errorColor={colors.textErrorColor}
tintColor={colors.tagColor}
labelTextStyle={styles.labelStyle}
inputContainerStyle={styles.textContainer}
onChangeText={text => {
setPassword(text.trim())
}}
/>
<View style={[styles.lower_form]}>
{loading && <Spinner />}
{!loading && (
<TouchableOpacity
onPress={async () => {
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]}>
<TextDefault textColor={colors.fontMainColor} H5 bold>
{i18n.t('loginBtn')}
</TextDefault>
</TouchableOpacity>
)}
</View>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
</WrapperView>
)
}