README.md

UseEffect + Data Fetching

• Question 1: What are the names of the tools you're using this week?

  • Axios
  • React!!!!

• Question 2: Name some things about React

  • State
  • Components
  • Children
  • Props
  • Hooks

  • {1 + 1}

    - JSX
  • Stories - storybook

• useEffect

  • what kind of thing is this????
  • useEffect()
  • similar to useState(), that's the pattern for a Hook
    • what's a hook? that's not today's quest
  • Quick fact about Hooks: Hooks add functionality to components

Your Basic Component

const CoolComponent = ({ name }) => {
    // LETS PUT SOME PIZAZZ IN HERE

    return (
        <h1>Ayy what up, { name }</h1>
    )
}

// somewhere Else

<CoolComponent name="Bradlina">
<CoolComponent name="Josephetta-lynn>

• what does "effect" mean

  • you'll see the word "effect" in a couple different places

  • input -----> f() ------> output

  • f(x) = x + 2

  • every time you use the SAME input, you get the SAME output

  • input + state -----> f() -----> output

  • input ------> f() { network request } ------> output

• what does that even look like in react?

  useEffect(() => {
    console.log('HELLO')
  }, [])

// in Express
  app.get('/dogs', (req, res) => {
    console.log('HELLO')
  })
// in JQuery
  $(document).ready(() => {
    console.log('HELLO')
  })

• why do we have to wrap that stuff up in useEffect?
• some neat demos
  • maybe play around with inputs
  • timers
    • cleanup
• BREAK - go look up some cool APIs that we can play with!
• Data fetching with axios

App.js

import React, { useState, useEffect } from 'react';
import './App.css';
import axios from 'axios'

/*

Basically useState will change the variable and manage its value, while useEffect will fire a function *when* it changes?

-Alex, react Expert
*/

const NewComponentWhoDis = () => {
  const [number, setNumber] = useState(0)
  const [specialNumber, setSpecialNumber] = useState(0)

  // This thing should ONLY RUN ONCE
  useEffect(() => {
    console.log('HELLO')
  }, []) // empty array means that THIS COMPONENT will only run this effect once

  // this effect runs on the first render, AND whenever SPECIAL NUMBER changes
  useEffect(() => {
    console.log('Special Number Changed')
  }, [specialNumber])

  useEffect(() => {
    console.log('EITHER specialNumber OR number changed')
  }, [specialNumber, number])

  return (
    <div>
      <h1>😎 - {number} - {specialNumber}</h1>
      <button onClick={() => setNumber(number + 1)}>Change Number</button>
      <button onClick={() => setSpecialNumber(specialNumber + 1)}>Change Special Number</button>
    </div>
  )
}

// Fetching from Chuck Norris
// I'm using Axios, but there's other things like "superagent", "ky"
const ChuckNorrisFact = () => {
  const [fact, setFact] = useState("Loading...")
  
  useEffect(() => {
    // fetch from the API
    axios.get('https://api.icndb.com/jokes/random')
      .then(response => {
        console.log(response)
        const newFact = response.data.value.joke
        // change the fact to the one that I fetched
        setFact(newFact)
      })

  }, [])

  return (
    <h1>Fact: {fact}</h1>
  )
}


// Searching the Cat API
const CatSearch = () => {
  const [catBreeds, setCatBreeds] = useState([])
  const [catSearch, setCatSearch] = useState("")

  useEffect(() => {
    // what am I going to do?
    if (catSearch === "") return

    axios.get(`https://api.thecatapi.com/v1/breeds/search?q=${catSearch}&?api_key=a3458952-0a69-497c-8ce0-36bf1a0c6262`)
      .then(response => {
        const catNames = response.data.map(c => c.name)
        setCatBreeds(catNames)
      })

  }, [catSearch])

  return (
    <div>
      <input type="text" value={catSearch} onChange={e => setCatSearch(e.target.value)} />
      {
        catBreeds.join(', ')
      }
    </div>
  )
}

const App = () => {
  return (
    <div>
      <h1>Welcome to APP!</h1>
      {/* <CatSearch /> */}
      {/* <ChuckNorrisFact />
      <ChuckNorrisFact />
      <ChuckNorrisFact />
      <ChuckNorrisFact />
      <ChuckNorrisFact /> */}
      {/* <NewComponentWhoDis />
      <NewComponentWhoDis />
      <NewComponentWhoDis />
      <NewComponentWhoDis />
      <NewComponentWhoDis /> */}
    </div>
  )
}

function OldApp () {
  const [number, setNumber] = useState(0)
  
  console.log('Word up')

  // How do I make this console.log only print once?
  // How do I make this console.log only print on EVEN numbers?

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1)
        if (number % 0 === 0) console.log('EVEN NUMBER')
      }}>
        Click here!
      </button>
    </div>
  );
}

export default App;