From 468d03ef08fb325a61dd3eafc51f657cb96fd028 Mon Sep 17 00:00:00 2001 From: Nikolai R Kristiansen Date: Sat, 9 Oct 2021 18:14:27 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=20UserRegister=20form=20cleanups?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api.js | 2 +- src/modules/register/UserRegister.js | 134 ++++++++++++------------ src/modules/register/useUserRegister.js | 26 ++++- 3 files changed, 92 insertions(+), 70 deletions(-) diff --git a/src/api.js b/src/api.js index bd1c621..2b34396 100644 --- a/src/api.js +++ b/src/api.js @@ -82,7 +82,7 @@ export function requestUserData(authToken) { }; } -export function requestRegisterUser(firstName, lastName, email, phoneNumber, password) { +export function requestRegisterUser({ firstName, lastName, email, phoneNumber, password }) { return (dispatch) => { dispatch(registerUserRequest()); diff --git a/src/modules/register/UserRegister.js b/src/modules/register/UserRegister.js index 5c84247..a89c62a 100644 --- a/src/modules/register/UserRegister.js +++ b/src/modules/register/UserRegister.js @@ -1,8 +1,8 @@ import React from 'react'; -import { Container, Input, Spinner, Button, Text, Icon, Toast, FormControl } from 'native-base'; +import { Input, Spinner, Button, Text, WarningOutlineIcon, FormControl, ScrollView } from 'native-base'; import { StyleSheet, View } from 'react-native'; import * as EmailValidator from 'email-validator'; -import { useForm, Controller } from 'react-hook-form'; +import { Controller } from 'react-hook-form'; import theme from '../../theme'; import useUserRegister from './useUserRegister'; @@ -13,7 +13,7 @@ const FormInput = ({ name, label, rules = { - required: true, + required: 'kan ikke være tomt.', }, returnKeyType = 'next', ...rest @@ -22,15 +22,21 @@ const FormInput = ({ ( - + render={({ field: { onChange, onBlur, value, ref } }) => ( + {label} - + {errors[name] && ( - - kan ikke være tomt. - - + }> + {errors[name].message} + )} )} @@ -47,59 +53,50 @@ const Registerbutton = ({ isDisabled, onPress }) => ( ); const NonFieldErrors = ({ errors }) => { - if (Object.keys(errors).length !== 0 && 'non_field_errors' in errors) { - const err = errors.non_field_errors; - const errorFormatted = err ? err[0] : 'Kunne ikke registrere bruker, prøv igjen...'; - return ( - - {errorFormatted} - - ); + if (!Object.keys(errors).length || !['non_field_errors', 'detail'].some((errorField) => errorField in errors)) { + return null; } - if (Object.keys(errors).length !== 0 && 'detail' in errors) { - const err = errors.detail; - const errorFormatted = err || 'Kunne ikke registrere bruker, prøv igjen...'; - return ( - - {errorFormatted} - - ); + let errorFormatted; + if ('non_field_errors' in errors) { + errorFormatted = errors.non_field_errors?.[0]; + } else if ('detail' in errors) { + errorFormatted = errors.detail; } + if (!errorFormatted) errorFormatted = 'Kunne ikke registrere bruker, prøv igjen...'; - return ; + return ( + + }> + {errorFormatted} + + + ); }; const UserRegister = () => { - const { isRegisteringUser, onRegisterPress } = useUserRegister(); - // TODO: email validation - // TODO: focus next field - - const { - control, - handleSubmit, - formState: { errors, isDirty, isValid }, - } = useForm(); - const isDisabled = !isDirty || isRegisteringUser || !isValid; - const onSubmit = (data) => { - console.log(data); - // if (!canSubmitForm()) { - // Toast.show({ - // text: 'Noen av feltene er ikke fylt ut riktig', - // position: 'bottom', - // buttonText: 'OK', - // duration: 1500, - // }); - // return; - // } - - // onRegisterPress(firstName, lastName, email, phoneNumber, password); - }; + const { isRegisteringUser, onSubmit, control, isValid, errors, setFocus } = useUserRegister(); + const isDisabled = isRegisteringUser || !isValid; + // TODO: validate on type + // TODO: highlight errorfields return ( - + - - + setFocus('lastName')} + /> + setFocus('email')} + /> { keyboardType="email-address" autoCapitalize="none" autoCorrect={false} + rules={{ + required: 'kan ikke være tomt.', + validate: (v) => EmailValidator.validate(v) || 'er ikke en gyldig e-post', + }} + onSubmitEditing={() => setFocus('phoneNumber')} + /> + setFocus('password')} /> - { secureTextEntry={true} autoCapitalize="none" autoCorrect={false} + returnKeyType="send" + onSubmitEditing={onSubmit} /> - + {isRegisteringUser && } - + ); }; @@ -145,14 +156,5 @@ const styles = StyleSheet.create({ errorBox: { marginVertical: 10, }, - errorMessage: { - textAlign: 'center', - color: theme.colors.danger, - fontSize: 14, - }, card: theme.card, - errorText: { - paddingTop: 2, - paddingBottom: 12, - }, }); diff --git a/src/modules/register/useUserRegister.js b/src/modules/register/useUserRegister.js index 137929b..f2fe62b 100644 --- a/src/modules/register/useUserRegister.js +++ b/src/modules/register/useUserRegister.js @@ -1,6 +1,8 @@ import { useNavigation } from '@react-navigation/native'; import { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; +import { Toast } from 'native-base'; +import { useForm } from 'react-hook-form'; import { usePrevious } from '../../hooks'; import { requestRegisterUser } from '../../api'; @@ -15,8 +17,26 @@ const useUserRegister = () => { })); const isAuthenticatedPrev = usePrevious(isAuthenticated); - const onRegisterPress = () => (firstName, lastName, email, phoneNumber, password) => - dispatch(requestRegisterUser(firstName, lastName, email, phoneNumber, password)); + + const { + control, + handleSubmit, + formState: { errors, isValid }, + setFocus, + } = useForm(); + const onSubmit = handleSubmit((values) => { + if (!isValid) { + Toast.show({ + text: 'Noen av feltene er ikke fylt ut riktig', + position: 'bottom', + buttonText: 'OK', + duration: 1500, + }); + return; + } + + dispatch(requestRegisterUser(values)); + }); useEffect(() => { if (isAuthenticatedPrev !== isAuthenticated && isAuthenticated) { @@ -24,6 +44,6 @@ const useUserRegister = () => { } }, [isAuthenticatedPrev, isAuthenticated]); - return { onRegisterPress, isRegisteringUser, registerError }; + return { onSubmit, isRegisteringUser, registerError, control, setFocus, errors }; }; export default useUserRegister;