create a custom hook to fetch data

README.md

@@ -6,15 +6,8 @@ I left the steps commented out so the app doesn't break.<br/>
 With each new commit, I will test a different concept.<br/>
 Its simplier examples.<br/>
 
-### run project
-npm start </br>
-
-or create a simple React project on Code Sandbox:</br>
-
-``` ssh
-react.new
-```
-
+#### run project
+npm start
 
 ### content:
 
@@ -29,6 +22,3 @@ react.new
 - [refactoring useState to UseReducer](https://github.com/Jeefelix/ReactHooks/commit/c2bb644cf1c81f723dd709a411ca40d6380f0d6e)
 - [useReducer to dispatch actions](https://github.com/Jeefelix/ReactHooks/commit/88157e0e30b4e88ff2212c69c5a445ad13d59686)
 - [simple form with useRef](https://github.com/Jeefelix/ReactHooks/commit/eafd81baf82f0051bcda924ba9f716277fbd960e)
-- [controlled components using useState](https://github.com/Jeefelix/ReactHooks/commit/103f5b811ec987bd8ba9377fecaef92349f61b28)
-- [custom hook reusing form logic](https://github.com/Jeefelix/ReactHooks/commit/29fe9caf4f6447c3e9d8493f87b06a05f84495c9)
-- [useContext to access data from any child component](https://github.com/Jeefelix/ReactHooks/commit/75a9b2cf482a16491e452b290503bdaa33dfd6d2)

src/App.js

@@ -3,9 +3,6 @@ import { useHeadaches } from "./index";
 
 function App() {
   const { headaches } = useHeadaches();
-  //any component that is part of the app, because its
-  //been wrapper in the provider, we can read the value of
-  //headache context just calling useContext
   return (
     <div>
       <h1>Types of headaches</h1>

src/index.js

@@ -1,23 +1,23 @@
-import React, { createContext, useContext } from "react";
+import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-import App from "./App";
+import { useFetch } from "./useFetch";
 
-const HeadachesContext = createContext();
-//refactoring in a custom component to reuse
-export const useHeadaches = () => useContext(HeadachesContext);
+function App({ login }) {
+  const { loading, error, data } = useFetch(
+    `https://api.github.com/users/${login}`
+  );
 
-const headaches = [
-  { id: "1", type: "migraines" },
-  { id: "2", type: "digestive problem" },
-  { id: "3", type: "sinus headaches" },
-  { id: "4", type: "tension" }
-];
+  if (loading) return <h1>error</h1>;
+  if (error) return <pre>{JSON.stringfy(error, null, 2)}</pre>;
+  return (
+    <div>
+      <img src={data.avatar_url} alt={data.login} />
+      <h1>{data.login}</h1>
+      {data.name && <p>{data.name}</p>}
+      {data.location && <p>{data.location}</p>}
+    </div>
+  );
+}
 
-// Pass data down to the child components
-ReactDOM.render(
-  <HeadachesContext.Provider value={{ headaches }}>
-    <App />
-  </HeadachesContext.Provider>,
-  document.getElementById("root")
-);
+ReactDOM.render(<App login="Jeefelix" />, document.getElementById("root"));

src/useFetch.js

@@ -0,0 +1,22 @@
+//if data is loading
+//if data is avaliable
+// if we receive an error
+
+import { useState, useEffect } from "react";
+
+export function useFetch(uri) {
+  const [data, setData] = useState();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState();
+
+  useEffect(() => {
+    if (!uri) return;
+    fetch(uri)
+      .then((data) => data.json())
+      .then(setData)
+      .then(() => setLoading(false))
+      .catch(setError);
+  }, [uri]);
+
+  return { data, loading, error };
+}