From 8061365f9c30a80ff4e6a42aac070f7d9fd3e67a Mon Sep 17 00:00:00 2001
From: David Katz <15Dkatz@shcp.edu>
Date: Tue, 25 Oct 2022 13:38:49 -0700
Subject: [PATCH] useEffect

---
 react-hooks/home/src/App.js  | 15 +++++++++------
 react-hooks/home/src/Joke.js | 27 +++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 react-hooks/home/src/Joke.js

diff --git a/react-hooks/home/src/App.js b/react-hooks/home/src/App.js
index b46d152..dd30b3a 100644
--- a/react-hooks/home/src/App.js
+++ b/react-hooks/home/src/App.js
@@ -1,10 +1,13 @@
 import { useState } from 'react';
+import Joke from './Joke';
 
 function App() {
   const [userQuery, setUserQuery] = useState('');
 
-  const searchQuery = () => {
-    window.open(`https://google.com/search?q=${userQuery}`, '_blank');
+  const updateUserQuery = event => {
+    console.log('userQuery', userQuery);
+
+    setUserQuery(event.target.value);
   }
 
   const handleKeyPress = event => {
@@ -13,10 +16,8 @@ function App() {
     }
   }
 
-  const updateUserQuery = event => {
-    console.log('userQuery', userQuery);
-
-    setUserQuery(event.target.value);
+  const searchQuery = () => {
+    window.open(`https://google.com/search?q=${userQuery}`, '_blank');
   }
 
   return ( 
@@ -30,6 +31,8 @@ function App() {
         />
         <button onClick={searchQuery}>Search</button>
       </div>
+      <hr />
+      <Joke />
     </div>
   );
 }
diff --git a/react-hooks/home/src/Joke.js b/react-hooks/home/src/Joke.js
new file mode 100644
index 0000000..efb6fc7
--- /dev/null
+++ b/react-hooks/home/src/Joke.js
@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+
+function Joke() {
+  const [joke, setJoke] = useState({});
+
+  useEffect(() => {
+    fetch('https://official-joke-api.appspot.com/jokes/random')
+      .then(response => response.json())
+      .then(json => {
+        console.log('joke json', json);
+
+        setJoke(json);
+      });
+  }, []);
+
+  const { setup, punchline } = joke;
+
+  return (
+    <div>
+      <h3>Joke of the session</h3>
+      <p>{setup}</p>
+      <p><em>{punchline}</em></p>
+    </div>
+  );
+}
+
+export default Joke;