Merge pull request #3 from the-road-to-learn-react/fix-use-effect-example

Fix use effect example

Author: rwieruch

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);