From 0e2a8fcc9fe5ecea95cad0c6a07d6a8f852e912b Mon Sep 17 00:00:00 2001
From: Lee <leeblazek@gmail.com>
Date: Wed, 13 May 2020 10:26:35 -0600
Subject: [PATCH 1/3] Step 6: cat api effect

---
 src/App.js          |  5 ++++-
 src/hooks/catApi.js | 23 +++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/catApi.js

diff --git a/src/App.js b/src/App.js
index 9487b35..bf8aeef 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import useSetTitle from './hooks/setTitle'
 import useCountState from './hooks/countState'
+import useCatApi from './hooks/catApi'
 import logo from './logo.svg';
 import './App.css';
 
@@ -10,10 +11,12 @@ function App() {
 
   const title = useSetTitle(count)
 
+  const {data, loading} = useCatApi()
+
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+        <img src={data ? data[0].url : logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>
diff --git a/src/hooks/catApi.js b/src/hooks/catApi.js
new file mode 100644
index 0000000..81e1029
--- /dev/null
+++ b/src/hooks/catApi.js
@@ -0,0 +1,23 @@
+import {useEffect, useState} from 'react';
+
+// This is using the cat api
+function useCatApi() {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState(null)
+  useEffect(()=>{
+    async function getCats() {
+      setLoading(true)
+      const response = await fetch(
+        'https://api.thecatapi.com/v1/images/search'
+      )
+      const data = await response.json()
+      console.log(data);
+      setData(data)
+      setLoading(false);
+    }
+    getCats()
+  },[])
+  return {loading, data};
+}
+
+export default useCatApi
\ No newline at end of file

From 9dfb61b78996fe7cfe7bb80b7921b8cfbb623d2e Mon Sep 17 00:00:00 2001
From: Lee <leeblazek@gmail.com>
Date: Wed, 13 May 2020 10:39:18 -0600
Subject: [PATCH 2/3] Step 7: cats on click

---
 src/App.js          | 4 +++-
 src/hooks/catApi.js | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index bf8aeef..636d302 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,12 +11,14 @@ function App() {
 
   const title = useSetTitle(count)
 
-  const {data, loading} = useCatApi()
+  const {data, loading} = useCatApi(count)
 
   return (
     <div className="App">
       <header className="App-header">
         <img src={data ? data[0].url : logo} className="App-logo" alt="logo" />
+
+        <h1>{loading ? 'Loading Cats' : 'This is ameowzing!'}</h1>
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>
diff --git a/src/hooks/catApi.js b/src/hooks/catApi.js
index 81e1029..0e5ad03 100644
--- a/src/hooks/catApi.js
+++ b/src/hooks/catApi.js
@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react';
 
 // This is using the cat api
-function useCatApi() {
+function useCatApi(count) {
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState(null)
   useEffect(()=>{
@@ -16,7 +16,9 @@ function useCatApi() {
       setLoading(false);
     }
     getCats()
-  },[])
+//     !IMPORTANT - deps if no defined it will run on every render, if empty it runs on init only, other wise it watches value
+//     \/
+  },[count])
   return {loading, data};
 }
 

From 00e7db8effc417f35984d41641cbcd5404c01ac8 Mon Sep 17 00:00:00 2001
From: Lee <leeblazek@gmail.com>
Date: Wed, 13 May 2020 10:46:23 -0600
Subject: [PATCH 3/3] fix typo

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 672f01b..04d071e 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 
 # Basic React Hooks lunch and learn
-## From BERERK [Denver, Colorado's Javascript Pros BERZERK](http://www.BERZERK.io)
+## From BERZERK [Denver, Colorado's Javascript Pros BERZERK](http://www.BERZERK.io)
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).