// index.js

import React from 'react';
import InputTask from './components/InputTask/index'
import TaskList from './components/TaskList/index'

import { Provider } from 'react-redux'
import store from './store/index'



function App() {
  return (
    <div className="App">
      <Provider store={store}>
        <h1>TODO APP</h1>
        <InputTask />
        <TaskList />
      </Provider>
    </div>
  );
}

export default App;


// InputTask.js

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { addTask } from '../../actions/index'

class InputTask extends Component {
  state = {
    task: ""
  }

  handlerSubmit(event){
    event.preventDefault();
    this.props.dispatch(addTask(this.state.task));
  }

  render(){
    return(
      <form onSubmit={this.handlerSubmit.bind(this)}>
        <input type="text" value={this.state.task} onChange={(event) => this.setState({ task: event.target.value })}/>
        <button>Add</button>
      </form>
    )
  }
}

export default connect(state => state)(InputTask)

// TaskList.js

import React from 'react'
import { connect } from 'react-redux';

const TaskList = ({ tasks }) => (
    <ul>
        { tasks.map( (task) => <li key={task.id}>{task.text}</li> ) }
    </ul>
)

export default connect(state => ({ tasks: state.tasks }))(TaskList)