content: import React from 'react'
  import { connect } from 'react-redux'
  import { login, logout } from '../actions'
  
  let LoginStatus = ({ dispatch, user }) => {
    let input
  
  
    // dispatch({
    //   type: 'LOG_IN',
    //   name: 'fede',
    //   email: 'ft@gm'
    // })
    // These are EQUIVALENT.
    // dispatch(login('fede', 'fede@gmail.com'))
  
    if (!user.loggedIn) {
      return (
        <div>
          <button onClick={() => {
            console.log('logging in...')
            dispatch(login('fede', 'fede@gmail.com'))
          }}>
            Login
          </button>
        </div>
      )
    } else {
      return (
        <div>
          <button onClick={() => {
            console.log('goodbye. logging out...')
            dispatch(logout())
          }}>
            logout
          </button>
          <p> hello {user.name} </p>
          <p> {user.email} </p>
        </div>
      )
    }
  }
  
  // this function says "from our root master store
  // object, aka state, pull out state.user and pass it in to
  // my component as a prop called 'user'"
  const mapStateToProps = (state) => {
    return {
      user: state.user
    }
  }
  
  // this simply binds the mapStateToProps fn we just defined
  // it will effectively listen to changes in our store's state.user
  // if something changes, pass props into LoginStatus.
  LoginStatus = connect(mapStateToProps)(LoginStatus)
  // in this component, we mixed the presentation and container logic
  // the container logic is literally just the mapStateToProps
  // the presentation logic is the render fn above.
  
  export default LoginStatus