Bradley michaels

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 => (
     <div className='friend'>
@@ -34,6 +41,9 @@ export default function App() {
   return (
     <div className='container'>
       <h1>Some of my friends:</h1>
+      {/* if (friends.length === 0) <p>LOADING</p> */}
+      {/* logical AND operator, both left AND right have to be true */}
+      {friends.length === 0 && <p>LOADING</p>}
       {
         // If the initial value of `friends` state weren't an empty array,
         // this would crash due to invoking `map` method on non-array.

src/components/Details.js

@@ -1,23 +1,48 @@
-import React, { useState, useEffect } from 'react'
+cdimport React, { useState, useEffect } from 'react'
 import { BASE_URL, API_KEY } from '../constants'
 import axios from 'axios'
 
 export default function Details(props) {
-  const { friendId, close } = props
-  const [details, setDetails] = useState(null)
+  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!!');
+    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 => {
+        setDetails(res.data);
+      })
+  }, [friendId])
 
   return (
     <div className='container'>