From ee3ab39adb2124d22f75c07ccd46e2327bd5138f Mon Sep 17 00:00:00 2001 From: Lee Date: Wed, 13 May 2020 09:01:41 -0600 Subject: [PATCH 1/5] revert name changes --- src/App.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 226db53..cf2e792 100644 --- a/src/App.js +++ b/src/App.js @@ -9,9 +9,9 @@ function App() { // state set[State] in camelCase you choose the name // | | intial value // \/ \/ \/ - const [thing, setThing] = useState(13); + const [count, setCount] = useState(1); - const title = useSetTitle(thing) + const title = useSetTitle(count) return (
@@ -20,8 +20,8 @@ function App() {

Edit src/App.js and save to reload.

-

You clicked {thing} times

- From bbc6adc8b1c08dc716e7241379790945f48ad50e Mon Sep 17 00:00:00 2001 From: Lee Date: Wed, 13 May 2020 09:47:53 -0600 Subject: [PATCH 2/5] Step 5: state hook --- src/App.js | 11 ++++------- src/hooks/countState.js | 7 +++++++ 2 files changed, 11 insertions(+), 7 deletions(-) create mode 100644 src/hooks/countState.js diff --git a/src/App.js b/src/App.js index cf2e792..9487b35 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,12 @@ -import React, {useState, useEffect} from 'react'; +import React from 'react'; import useSetTitle from './hooks/setTitle' +import useCountState from './hooks/countState' import logo from './logo.svg'; import './App.css'; function App() { - // Declare a new state variable, which we'll call "count" - // - // state set[State] in camelCase you choose the name - // | | intial value - // \/ \/ \/ - const [count, setCount] = useState(1); + + const [count, setCount] = useCountState(0); const title = useSetTitle(count) diff --git a/src/hooks/countState.js b/src/hooks/countState.js new file mode 100644 index 0000000..79e7095 --- /dev/null +++ b/src/hooks/countState.js @@ -0,0 +1,7 @@ +import {useState} from 'react' + +function useCountState(initial) { + return useState(initial); +} + +export default useCountState; \ No newline at end of file From 0e2a8fcc9fe5ecea95cad0c6a07d6a8f852e912b Mon Sep 17 00:00:00 2001 From: Lee Date: Wed, 13 May 2020 10:26:35 -0600 Subject: [PATCH 3/5] 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 (
- logo + logo

Edit src/App.js and save to reload.

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 Date: Wed, 13 May 2020 10:39:18 -0600 Subject: [PATCH 4/5] 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 (
logo + +

{loading ? 'Loading Cats' : 'This is ameowzing!'}

Edit src/App.js and save to reload.

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 Date: Wed, 13 May 2020 10:46:23 -0600 Subject: [PATCH 5/5] 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).