Ott 212 zipcode validation (#31)

keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan 6 years ago committed by GitHub
parent 4616f2b32f
commit 9669fe14d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      src/features/Register/components/RegistrationStep/index.tsx
  2. 78
      src/hooks/useRequest.tsx

@ -16,7 +16,6 @@ import { emailRegex } from '../../helpers/isValidEmail'
import { useForm } from './hooks/useForm'
const commonFieldRegex = '^.{0,500}$'
const postalCodeRegex = '^\\d{5}(?:[-\\s]\\d{4})?$'
const labelWidth = 116
export const RegistrationStep = () => {
@ -111,7 +110,6 @@ export const RegistrationStep = () => {
id={formIds.postalCode}
labelLexic='form_postal_code'
labelWidth={labelWidth}
pattern={postalCodeRegex}
title={defaultMessage}
/>
<Input

@ -0,0 +1,78 @@
import { useState, useCallback } from 'react'
/**
* Хук для состояния загрузки и ошибки.
* Возвращает isFetching и switchState для переключения состояния
* switchState слушает Promise и завершает загрузку при завершении Promise
*/
const useRequestState = () => {
const [isFetching, setFetchingState] = useState(false)
const [error, setError] = useState<Error | null>(null)
const switchState = useCallback(
(promise: Promise<unknown>) => {
setFetchingState(true)
setError(null)
return promise
.catch((err) => {
setError(err)
return Promise.reject(err)
})
.finally(() => setFetchingState(false))
},
[],
)
return {
error,
isFetching,
switchState,
}
}
/**
* Хук для состояния загрузки.
* Получает asyncFunction функция возвращающая Promise
* и возвращает функцию обертку над asyncFunction
*
* Загрузка начинается при вызове обертки, заканчивается при завершении Promise
*
* ```ts
* const [countries, setCountries] = useState([])
*
* const { request: fetchCountries, isFetching } = useRequest(getCountries)
*
* useEffect(() => {
* fetchCountries().then(setCountries)
* }, [])
*
* return (
* <div>
* {isFetching && 'Loading...'}
* ...
* </div>
* )
* ```
*/
export const useRequest = <
F extends (...args: any) => Promise<unknown>,
>(asyncFunction: F) => {
const {
error,
isFetching,
switchState,
} = useRequestState()
const request = useCallback(
(...args: Parameters<F>) => (
switchState(asyncFunction(...args)) as ReturnType<F>
),
[switchState, asyncFunction],
)
return {
error,
isFetching,
request,
}
}
Loading…
Cancel
Save