import React, { Component } from 'react';
import { connect }  from 'react-redux';
import logo from './logo.svg';
import './App.css';

class App extends Component { 
        constructor(props){
            super(props);
             this.arrRefs = [];
        }
    
   handleAdd(){
       this.props.onHandleAdd(this.inputAdd.value);
       this.inputAdd.value = '';
   }
   handleRemove(){
       alert(this.arrRefs.length);     
       let checked = false;
            for(let i = 0; i < this.arrRefs.length;i++){
                
                if(this.arrRefs[i].checked == 'true'){ 
                    this.arrRefs.splice(this.arrRefs[i],1);
                    i--;
                }
            }
          
         this.props.onHandleRemove(this.arrRefs);
         
   }
    
    render() {
    return (
      <div className="todoMain">
          <span className="todo">TODO</span>
			
            <input className='val' placeholder="Add a Task..." type="text" ref={(input) => { this.inputAdd = input }}/>
    
			<input  type="button" value='Add' ref={ input => this.input = input} onClick={this.handleAdd.bind(this)} />
            
			<input  type="button" value='Clear' onClick={this.handleRemove.bind(this)} />
                                
            {this.props.newState.map((n,i)=>{
                return (
       		<div className="listElem" key={i} >
       		       <strong>{n}</strong>
                    <input type="checkbox" ref={ input=> this.arrRefs.push(input)} />
			</div>
            )})
            }
    </div>
  )
}
}

 
export default connect(
            state => (
                 {
                    newState: state
                }
                ),
            dispatch =>({
              onHandleAdd(payload){
                  
                  dispatch({type:'ADD_TODO', payload: payload});
              },
             onHandleRemove(payload){
                 console.log(payload.length)
                 dispatch({type:'REMOVE_TODO', payload: payload});
             }    
            })             
)(App);

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';

const initialState = ['Learn React', 'Learn Redux']

function reducer(state=initialState,action) { 
    if(action.type ==='ADD_TODO'){
       
        return [...state, action.payload];
    }else if(action.type === 'REMOVE_TODO'){
        return action.payload;
    }
    return state;
}

const store = createStore(reducer);

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
registerServiceWorker();