content: import React from 'react';
  import 'font-awesome/css/font-awesome.css';
  import DropDownButton from './dropdownButton';
  import { connect } from 'react-redux';
  import axios from 'axios';
  import { markDone } from '../actions/todoActions';
  
  class Todo extends React.Component {
  
  	formatDate(dateString) {
  		if (dateString === undefined) return 'None';
  		const date = new Date(dateString);
  		const month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  					   'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  		return `${date.getDate()} ${month[date.getMonth()]} ${date.getFullYear()}`;
  	}
  
    toggleStatus(item) {
      axios.post(`http://localhost:2403/react-todos/${item.id}`, {...item, done: !item.done})
        .then(() => {
          this.props.markDone(item);
        })
    }
  
  	render () {
  		const icon = `fa fa-fw fa-${this.props.item.done ? 'check-square-o success' : 'square-o'}`;
  		return(
  			<div className="todo-item row"> 
  				<div className="columns small-1">
  					<i className={ icon } onClick={() => this.toggleStatus(this.props.item)}></i>
  				</div>
  				<div className="columns small-4">
  			  	<span> { this.props.item.name } </span>
  		  	</div>
  		  	<div className="columns small-4">
  			  	<span> { this.formatDate(this.props.item.dueAt) }</span>
  		  	</div>
  		  	<div className="columns small-3">
  		  		<DropDownButton item={this.props.item}/>
  		  	</div>
  	  	</div>
  		);
  	}
  }
  
  const mapStateToProps = (state) => {
  	return {
  	  todos: state.todoReducer,
    }
  };
  
  const mapDispatchToProps = (dispatch) => {
  	return {
  		markDone,
  	}
  };
  
  export default connect (mapStateToProps, mapDispatchToProps)(Todo);