From e9249d63495f3ed5f5f5ba8e1a001675e4ee0758 Mon Sep 17 00:00:00 2001 From: Casey Harding Date: Wed, 8 Sep 2021 12:48:43 -0400 Subject: [PATCH 1/5] Initial commit. --- src/components/App.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index 55a72c4..ce223b8 100755 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,9 +1,9 @@ -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react'; // 👉 TASK 1 - import the axios lib from node_modules - +import axios from 'axios'; // 👉 TASK 2 - import the contants from constants/index.js - -import Details from './Details' +import { BASE_URL, API_KEY } from '../constants'; +import Details from './Details'; export default function App() { const [friends, setFriends] = useState([]) @@ -21,6 +21,13 @@ export default function App() { // caused by the first render only. You'll need `useEffect` from React. // The effect should consist of a call to the API using axios. // On success, set the array of friend objects from the API into state. + useEffect(() => { + // console.log(`${BASE_URL}/friends?api_key=${API_KEY}`) + axios.get(`${BASE_URL}/friends?api_key=${API_KEY}`) + .then(res => { + setFriends(res.data); + }).catch(err => console.error(err)); + }, []) const Friend = props => (
@@ -34,6 +41,9 @@ export default function App() { return (

Some of my friends:

+ {/* if (friends.length === 0)

LOADING

*/} + {/* logical AND operator, both left AND right have to be true */} + {friends.length === 0 &&

LOADING

} { // If the initial value of `friends` state weren't an empty array, // this would crash due to invoking `map` method on non-array. From e0f3ecbf34f47e55b34c5980a82ec89e35a574e0 Mon Sep 17 00:00:00 2001 From: Casey Harding Date: Wed, 8 Sep 2021 13:05:28 -0400 Subject: [PATCH 2/5] Through step 7. --- src/components/Details.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/components/Details.js b/src/components/Details.js index e58e627..87c1129 100755 --- a/src/components/Details.js +++ b/src/components/Details.js @@ -4,20 +4,44 @@ import axios from 'axios' export default function Details(props) { const { friendId, close } = props + // const friendId = props.friendId const [details, setDetails] = useState(null) // 👉 TASK 4 - Create a side effect 🥇 that runs only after first render. + useEffect(() => { + console.log('Effect after component first mounts!!'); + return () => console.log("Cleanup right before unmount!"); + }, []) // 👉 TASK 5 - Create a side effect 👻 that runs only after first render // and puts a 'click' event handler on document. // See what happens if we don't clean up. + useEffect(() => { + console.log('Adding a silly event listener!!'); + document.addEventListener('click', function() { + console.log("WHY'D YOU CLICK ME!"); + }) + + return () => { + console.log("Cleaning up the event listener! Don't worry!!") + } + }, []) // 👉 TASK 6 - Create a side effect 🥵 that runs after every render. + useEffect(() => { + console.log("I'm tired from all this running!!"); + }) // 👉 TASK 7 - Create a side effect 📲 that runs when a particular variable changes: // Whenever props.friendId updates we should trigger a fetch for details of the friend. // The URL should end up looking like `http://localhost:4000/friends/1?api_key=xyz` // On success, shove the details of the friend in `details` slice of state + useEffect(() => { + axios.get(`${BASE_URL}/friends/${friendId}?api_key=${API_KEY}`) + .then(res => { + console.log(res); + }) + }, [friendId]) return (
From 30c921c8e8821f7b5ba97dd47cbe3f0e5e69d575 Mon Sep 17 00:00:00 2001 From: Casey Harding Date: Wed, 8 Sep 2021 13:20:22 -0400 Subject: [PATCH 3/5] Finished solution. --- src/components/Details.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Details.js b/src/components/Details.js index 87c1129..38708b3 100755 --- a/src/components/Details.js +++ b/src/components/Details.js @@ -3,10 +3,10 @@ import { BASE_URL, API_KEY } from '../constants' import axios from 'axios' export default function Details(props) { - const { friendId, close } = props + const { friendId, close } = props; // -> props is an object // const friendId = props.friendId - const [details, setDetails] = useState(null) - + const [details, setDetails] = useState(null) //-> useState returns an array + // 👉 TASK 4 - Create a side effect 🥇 that runs only after first render. useEffect(() => { console.log('Effect after component first mounts!!'); @@ -39,7 +39,7 @@ export default function Details(props) { useEffect(() => { axios.get(`${BASE_URL}/friends/${friendId}?api_key=${API_KEY}`) .then(res => { - console.log(res); + setDetails(res.data); }) }, [friendId]) From f27203af14fb198dda2050b232889b6b1f31e300 Mon Sep 17 00:00:00 2001 From: Casey Harding Date: Wed, 8 Sep 2021 13:31:19 -0400 Subject: [PATCH 4/5] Finished solution. --- src/components/Details.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Details.js b/src/components/Details.js index 38708b3..f0f8775 100755 --- a/src/components/Details.js +++ b/src/components/Details.js @@ -6,7 +6,8 @@ export default function Details(props) { const { friendId, close } = props; // -> props is an object // const friendId = props.friendId const [details, setDetails] = useState(null) //-> useState returns an array - + + // 👉 TASK 4 - Create a side effect 🥇 that runs only after first render. useEffect(() => { console.log('Effect after component first mounts!!'); From d0896d029f2ca9784d294c4fe21d613d91f67354 Mon Sep 17 00:00:00 2001 From: brad Date: Wed, 6 Oct 2021 13:53:27 -0400 Subject: [PATCH 5/5] it works --- src/components/Details.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Details.js b/src/components/Details.js index f0f8775..ce7519c 100755 --- a/src/components/Details.js +++ b/src/components/Details.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react' +cdimport React, { useState, useEffect } from 'react' import { BASE_URL, API_KEY } from '../constants' import axios from 'axios'