import React, { useState } from 'react'
import { connect } from 'react-redux'
import { addArticle } from '../redux/actions'

function mapDispatchToProps(dispatch) {
  return {
    addArticle: article => dispatch(addArticle(article)),
  }
}

function dispatchCarrier(dispatch) {
    return dispatch(addArticle(a))
}

const ConnectedForm = () => {
  const [title, setTitle] = useState('')

  const handleTitleInput = e => {
    setTitle(e.target.value)
    console.log(title)
  }
  const handleSubmit = e => {
    e.preventDefault()
    addArticle({ title })
    console.log({ title })
    setTitle('')
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="title">Title</label>
        <input
          type="text"
          id="title"
          value={title}
          onChange={handleTitleInput}
        />
      </div>
      <button type="submit">SAVE</button>
    </form>
  )
}

const Form = connect(
  null,
  mapDispatchToProps
)(ConnectedForm)
export default Form