Wizeline webinar on hooks

wizeline.js

import React, { useState, useEffect, useReducer, useMemo } from 'react'
import ReactDOM from 'react-dom'

// let text = 'hellllooooo'

// I AM REACT
// let domTable = {}
// let element = Counter // state = 0

// commit(element, domTable)
// let oldElement = element
// element = Counter // state = 1

// diff(element, oldElement)
// commit(diff)

function useDocumentTitle(message) {
  useEffect(() => {
    document.title = message
  }, [message])
}

let array = [1, 2, 3, 4, 5]
let add = (x, y) => {
  return x + y
}
let sum = array.reduce(add, 0)
console.log(sum)
// 0 + 1
// 1 + 2
// 3 + 3
// 6 + 4
// 10 + 5
// 15
const initialState = { count: 0, cake: true, user: {} }
const actions = [
  { type: 'ADD', by: 2 },
  { type: 'MINUS', by: 4 },
  { type: 'EAT_CAKE' },
]

function reducer(state, action) {
  if (action.type === 'ADD') {
    return { ...state, count: state.count + action.by }
  } else if (action.type === 'MINUS') {
    return { ...state, count: state.count - action.by }
  } else {
    return { ...state, cake: false }
  }
}

console.log(actions.reduce(reducer, initialState))

const Pokemon = () => {
  // const [pokemon, setPokemon] = useState('pikachu')
  // const [img, setImg] = useState(null)
  // const [error, setError] = useState(null)

  const [state, dispatch] = useReducer(
    (state, action) => {
      switch (action.type) {
        case 'LOAD_POKEMON': {
          return { ...state, pokemon: action.name, img: action.img }
        }
        case 'ERROR': {
          return { ...state, error: action.error }
        }
        case 'USER_INPUT': {
          return { ...state, pokemon: action.pokemon }
        }
        default: {
          return state
        }
      }
    },
    {
      pokemon: 'pikachu',
      img: null,
      error: null,
    }
  )

  let { pokemon, img, error } = state

  let someValue = useMemo(() => {
    // expensive
    return 'cake' + pokemon
  }, [pokemon])

  let message = 'Go ' + pokemon + '!'
  useDocumentTitle(message)

  // [var] // Effect is run on initial render, and when var changes
  // [] // Effect is run on initial render only
  // nothing // Run on initial render, AND every state change

  useEffect(() => {
    let isCurrent = true
    fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}/`)
      .then((res) => res.json())
      .then((res) => {
        if (isCurrent) {
          dispatch({
            type: 'LOAD_POKEMON',
            name: res.name,
            img: res.sprites.front_default,
          })
          // setPokemon(res.name)
          // setImg(res.sprites.front_default)
        }
      })
      .catch((emAll) => {
        // setError(emAll)
        dispatch({ type: 'ERROR', emAll })
      })

    return () => {
      isCurrent = false
    }
  }, [pokemon, img, error])

  return (
    <div>
      <input
        onChange={(event) => {
          // setPokemon(event.target.value)
          dispatch({ type: 'USER_INPUT', pokemon: event.target.value })
        }}
        value={pokemon}
        type="text"
      />
      <br />
      Hello {pokemon}!
      <br />
      {img && <img src={img} alt={pokemon} />}
    </div>
  )
}

function Counter() {
  let [count, setCount] = useState(0)
  let [error, setError] = useState(false)

  const add = () => {
    setCount(count + 1)
  }

  const subtract = () => {
    setCount(count - 1)
  }

  return (
    <div>
      <div>Current count: {count}</div>
      <Button fish={add}>Add</Button>
      <Button fish={subtract}>Subtract</Button>
    </div>
  )
}

const Button = ({ children, fish }) => {
  return <button onClick={fish}>{children}</button>
}
const domElement = document.getElementById('root')

ReactDOM.render(
  <div>
    <Pokemon />
    <Counter />
  </div>,
  domElement
)