Ott 212 zipcode validation (#31)
parent
4616f2b32f
commit
9669fe14d7
@ -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…
Reference in new issue