diff --git a/src/index.js b/src/index.js index ed5e7b1..5bff30e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,15 +1,15 @@ -import { useEffect, useCallback } from 'react' -import { useSafeSetState } from './utils/hooks' -import { isRequiredService } from './utils' +import { useEffect, useCallback } from "react"; +import { useSafeSetState } from "./utils/hooks"; +import { isRequiredService } from "./utils"; -const SUCCESS_STATUS_REGEX = /^20[0-4]/ +const SUCCESS_STATUS_REGEX = /^20[0-4]/; const REQUEST_STATUS = { - idle: 'idle', - fetching: 'fetching', - success: 'success', - error: 'error' -} + idle: "idle", + fetching: "fetching", + success: "success", + error: "error", +}; function useLazyRequest({ service = isRequiredService(), @@ -18,62 +18,65 @@ function useLazyRequest({ onFailure, onFetch, dataSelector = (response) => response.data, - errorSelector = (response) => response.problem || response.data + errorSelector = (response) => response.problem || response.data, } = {}) { const [state, setState] = useSafeSetState({ data: null, error: null, - status: REQUEST_STATUS.idle - }) + status: REQUEST_STATUS.idle, + }); + + const fetchData = useCallback(async (directPayload) => { + setState({ status: REQUEST_STATUS.fetching }); + try { + const response = await service(directPayload || payload); + const isSuccess = SUCCESS_STATUS_REGEX.test(String(response.status)); - const fetchData = useCallback( - async (directPayload) => { - setState({ status: REQUEST_STATUS.fetching }) - try { - const response = await service(directPayload || payload) - const isSuccess = SUCCESS_STATUS_REGEX.test(String(response.status)) - - if (isSuccess) { - setState({ - data: dataSelector(response), - error: null, - status: REQUEST_STATUS.success - }) - - if (onSuccess) onSuccess(response) - } else { - setState({ data: null, error: errorSelector(response), status: REQUEST_STATUS.error }) - if (onFailure) onFailure(response) - } - - if (onFetch) onFetch() - } catch (error) { - console.error(`🚨 ${error}`) + if (isSuccess) { + setState({ + data: dataSelector(response), + error: null, + status: REQUEST_STATUS.success, + }); + + if (onSuccess) onSuccess(response); + } else { + setState({ + data: null, + error: errorSelector(response), + status: REQUEST_STATUS.error, + }); + if (onFailure) onFailure(response); } + + if (onFetch) onFetch(); + } catch (error) { + console.error(`🚨 Something went wrong: ${error}`); } - ) + }); const requestState = { isFetching: state.status === REQUEST_STATUS.fetching, isSuccess: state.status === REQUEST_STATUS.success, isError: state.status === REQUEST_STATUS.error, - ...state - } + ...state, + }; - return [requestState, fetchData, setState] + return [requestState, fetchData, setState]; } function useRequest(options = {}, deps = []) { - const [state, fetchData, setState] = useLazyRequest(options) + const [state, fetchData, setState] = useLazyRequest(options); const nextDeps = deps.concat(fetchData); useEffect(() => { - fetchData() - }, nextDeps) + fetchData(); + }, nextDeps); - return [state, fetchData, setState] + return [state, fetchData, setState]; } -const customizeHook = (hook, customOptions) => (options) => hook({ ...customOptions, ...options }) +const customizeHook = (hook, customOptions) => (options) => + hook({ ...customOptions, ...options }); -export { useLazyRequest, useRequest, customizeHook } +export { useLazyRequest, useRequest, customizeHook };