64 lines
1.7 KiB
TypeScript

import { useState, useCallback } from 'react';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { AuthStackParamList } from 'app/navigation/authStack';
import { loginWithPhone, useAppDispatch } from '@store';
type LoginNavProp = StackNavigationProp<AuthStackParamList, 'LoginScreen'>;
const MOBILE_NUMBER_LENGTH = 10;
interface UseLoginScreenResult {
mobileNumber: string;
error: string | undefined;
onChangeMobileNumber: (text: string) => void;
handleLogin: () => void;
}
export const useLoginScreen = (): UseLoginScreenResult => {
const navigation = useNavigation<LoginNavProp>();
const dispatch = useAppDispatch();
const [mobileNumber, setMobileNumber] = useState('');
const [error, setError] = useState<string | undefined>(undefined);
const onChangeMobileNumber = useCallback(
(text: string) => {
setMobileNumber(text);
if (error) {
setError(undefined);
}
},
[error],
);
const validateMobileNumber = (value: string): string | undefined => {
if (!value) {
return 'Mobile number is required';
}
if (value.length < MOBILE_NUMBER_LENGTH) {
return 'Please enter a valid mobile number';
}
return undefined;
};
const handleLogin = useCallback(() => {
const validationError = validateMobileNumber(mobileNumber);
if (validationError) {
setError(validationError);
return;
}
setError(undefined);
dispatch(loginWithPhone(mobileNumber));
navigation.navigate('OtpScreen', { mobileNumber });
}, [mobileNumber, dispatch, navigation]);
return {
mobileNumber,
error,
onChangeMobileNumber,
handleLogin,
};
};