Fix use effect example

src/index.js

@@ -2,9 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 // import App from './useState-example';
-// import App from './useEffect-example';
+import App from './useEffect-example';
 // import App from './customHook-example';
-import App from './useDataApiHook-example';
+// import App from './useDataApiHook-example';
 
 import * as serviceWorker from './serviceWorker';
 

src/useDataApiHook-example/index.js

@@ -1,43 +1,75 @@
-import React, { useState, useEffect } from 'react';
+import React, { Fragment, useState, useEffect } from 'react';
 import axios from 'axios';
 
-const useDataApi = url => {
- const [isLoading, setLoading] = useState(false);
- const [data, setData] = useState(null);
+const useDataApi = (url, defaultSearch, defaultState) => {
+ const [data, setData] = useState(defaultState);
+ const [search, setSearch] = useState(defaultSearch);
+ const [isLoading, setIsLoading] = useState(false);
+ const [isError, setIsError] = useState(false);
 
- useEffect(async () => {
- setLoading(true);
+ useEffect(
+ async () => {
+ setIsError(false);
+ setIsLoading(true);
 
- const result = await axios(url);
+ try {
+ const result = await axios(`${url}${search}`);
 
- setLoading(false);
- setData(result.data);
- }, []);
+ setData(result.data);
+ } catch (error) {
+ setIsError(true);
+ }
 
- return { data, isLoading };
+ setIsLoading(false);
+ },
+ [search],
+ );
+
+ const doSearch = (event, query) => {
+ setSearch(query);
+ event.preventDefault();
+ };
+
+ return { data, isLoading, isError, doSearch };
 };
 
+const INITIAL_SEARCH = 'redux';
+const INITIAL_DATA = { hits: [] };
+
 function App() {
- const { data, isLoading } = useDataApi(
- 'http://hn.algolia.com/api/v1/search?query=redux',
+ const [query, setQuery] = useState(INITIAL_SEARCH);
+
+ const { data, isLoading, isError, doSearch } = useDataApi(
+ 'http://hn.algolia.com/api/v1/search?query=',
+ INITIAL_SEARCH,
+ INITIAL_DATA,
  );
 
- if (isLoading) {
- return <div>Loading ...</div>;
- }
+ return (
+ <Fragment>
+ <form onSubmit={event => doSearch(event, query)}>
+ <input
+ type="text"
+ value={query}
+ onChange={event => setQuery(event.target.value)}
+ />
+ <button type="submit">Search</button>
+ </form>
 
- if (!data) {
- return null;
- }
+ {isError && <div>Something went wrong ...</div>}
 
- return (
- <ul>
- {data.hits.map(item => (
- <li key={item.objectID}>
- <a href={item.url}>{item.title}</a>
- </li>
- ))}
- </ul>
+ {isLoading ? (
+ <div>Loading ...</div>
+ ) : (
+ <ul>
+ {data.hits.map(item => (
+ <li key={item.objectID}>
+ <a href={item.url}>{item.title}</a>
+ </li>
+ ))}
+ </ul>
+ )}
+ </Fragment>
  );
 }
 

src/useEffect-example/index.js

@@ -4,14 +4,21 @@ function App() {
  const [isOn, setIsOn] = useState(false);
  const [timer, setTimer] = useState(0);
 
- useEffect(() => {
- const interval = setInterval(
- () => isOn && setTimer(timer + 1),
- 1000,
- );
-
- return () => clearInterval(interval);
- }, []);
+ useEffect(
+ () => {
+ let interval;
+
+ if (isOn) {
+ interval = setInterval(
+ () => setTimer(timer => timer + 1),
+ 1000,
+ );
+ }
+
+ return () => clearInterval(interval);
+ },
+ [isOn],
+ );
 
  const onReset = () => {
  setIsOn(false);