import React from 'react'
import { connect } from 'react-redux'
import * as actions  from './actions'

class File extends React.Component {
  constructor (props) {
   super(props)
 }
handleChange (e) {
e.preventDefault();
let reader = new FileReader();
let file = e.target.files[0];
reader.onloadend = () => {
  let text = reader.result;
  this.props.jsonLoad(JSON.parse(text))
}
reader.readAsText(file)
}

render () {
return (
  <div>
    <h3> Add your file: </h3>
    <input type="file" multiple onChange={this.handleChange.bind(this)}/>
    <button >
      add text from file
    </button>
  </div>
 )
 }
}

const mapStateToProps = (state) => {
 return {
 json: state.json
  }
}

function mapDispatchToProps (dispatch) {
  return {
   jsonLoad: (json) => dispatch(actions.jsonLoad(json)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(File)

const USER_JSON = 'USER_JSON';
 export function jsonLoad(json) {
 console.log( json)
   return function (dispatch) {
    let file = json
   dispatch(addFile(file))
  }
 }

export function addFile (json) {
    return{
      type: 'USER_JSON',
      payload: json
   }
 };