diff --git a/src/useDataApiHook-example/index.js b/src/useDataApiHook-example/index.js index a2665a7..648a8b6 100644 --- a/src/useDataApiHook-example/index.js +++ b/src/useDataApiHook-example/index.js @@ -1,112 +1,102 @@ -import React, { - Fragment, - useState, - useEffect, - useReducer, -} from 'react'; +import React, { Fragment, useState, useEffect, useReducer } from 'react'; import axios from 'axios'; const dataFetchReducer = (state, action) => { - switch (action.type) { - case 'FETCH_INIT': - return { ...state, isLoading: true, isError: false }; - case 'FETCH_SUCCESS': - return { - ...state, - isLoading: false, - isError: false, - data: action.payload, - }; - case 'FETCH_FAILURE': - return { - ...state, - isLoading: false, - isError: true, - }; - default: - throw new Error(); - } + switch (action.type) { + case 'FETCH_INIT': + return { ...state, isLoading: true, isError: false }; + case 'FETCH_SUCCESS': + return { + ...state, + isLoading: false, + isError: false, + data: action.payload + }; + case 'FETCH_FAILURE': + return { + ...state, + isLoading: false, + isError: true + }; + default: + throw new Error(); + } }; -const useDataApi = (initialUrl, initialData) => { - const [url, setUrl] = useState(initialUrl); +const useDataApi = (initialData, initialUrl = 'http://hn.algolia.com/api/v1/search?query=redux') => { + const [ url, setUrl ] = useState(initialUrl); - const [state, dispatch] = useReducer(dataFetchReducer, { - isLoading: false, - isError: false, - data: initialData, - }); + const [ state, dispatch ] = useReducer(dataFetchReducer, { + // passing isLoading and isError property is redundant here + data: initialData + }); - useEffect(() => { - let didCancel = false; + useEffect( + () => { + let didCancel = false; - const fetchData = async () => { - dispatch({ type: 'FETCH_INIT' }); + const fetchData = async () => { + dispatch({ type: 'FETCH_INIT' }); - try { - const result = await axios(url); + try { + const result = await axios(url); - if (!didCancel) { - dispatch({ type: 'FETCH_SUCCESS', payload: result.data }); - } - } catch (error) { - if (!didCancel) { - dispatch({ type: 'FETCH_FAILURE' }); - } - } - }; + if (!didCancel) { + dispatch({ type: 'FETCH_SUCCESS', payload: result.data }); + } + } catch (error) { + if (!didCancel) { + dispatch({ type: 'FETCH_FAILURE' }); + } + } + }; - fetchData(); + fetchData(); - return () => { - didCancel = true; - }; - }, [url]); + return () => { + didCancel = true; + }; + }, + [ url ] + ); - return [state, setUrl]; + return [ state, setUrl ]; }; function App() { - const [query, setQuery] = useState('redux'); - const [{ data, isLoading, isError }, doFetch] = useDataApi( - 'http://hn.algolia.com/api/v1/search?query=redux', - { hits: [] }, - ); - - return ( - -
{ - doFetch( - `http://hn.algolia.com/api/v1/search?query=${query}`, - ); - - event.preventDefault(); - }} - > - setQuery(event.target.value)} - /> - -
- - {isError &&
Something went wrong ...
} - - {isLoading ? ( -
Loading ...
- ) : ( - - )} -
- ); + const [ query, setQuery ] = useState('redux'); + // Now our Custom hookAPI resemble more like native hook + const [ result, setUrl ] = useDataApi({ hits: [] }); + const { data, isLoading, isError } = result; + + return ( + +
{ + setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`); + + event.preventDefault(); + }} + > + setQuery(event.target.value)} /> + +
+ + {isError &&
Something went wrong ...
} + + {isLoading ? ( +
Loading ...
+ ) : ( + + )} +
+ ); } export default App;