content: import React from 'react';
  import {bindActionCreators} from 'redux';
  import {connect} from 'react-redux';
  import {selectTask, deleteTask, updateTaskStatus} from '../../actions/taskActions';
  import FontAwesome from 'react-fontawesome';
  
  class TaskListRow extends React.Component{
      constructor(){
          super();
          this.changeTaskStatus = this.changeTaskStatus.bind(this);
          this.deleteTask = this.deleteTask.bind(this);
      }
  
      changeTaskStatus(task) {
          this.props.updateTaskStatus(task);
  
          this.forceUpdate();
      }
  
      deleteTask(task) {
          this.props.deleteTask(task);
  
          //if deleted task is the same as selected task hide selected task description
          if(task===this.props.currentTask) {
              this.props.selectTask([]);
          }
      }
  
      render() {
          let task = this.props.task;
  
          return (
              <tr className={task.done ? 'alert alert-success' : 'alert alert-danger'}>
                  <th className="text-center">
                      <FontAwesome
                          onClick={() => this.changeTaskStatus(task)}
                          className="task-option"
                          name={task.done ? "check-square-o" : "square-o"} />
                  </th>
                  <td onClick={() => {
                      this.props.selectTask(task)
                  }}
                      className="text-center word-wrap">
                      <span id="task-name">
                          {task.taskName}
                      </span>
                  </td>
  
                  <td className="text-center ">
                      <FontAwesome
                          onClick={() => {
                              this.deleteTask(task)
                          }}
                          className="task-option"
                          name='remove' />
                  </td>
              </tr>
          );
      }
  }
  
  function mapStateToProps(state) {
      return {
          currentTask: state.activeTask
      };
  }
  
  function matchDispatchToProps(dispatch) {
      return bindActionCreators({
          selectTask: selectTask,
          deleteTask: deleteTask,
          updateTaskStatus: updateTaskStatus
      }, dispatch)
  }
  
  export default connect(mapStateToProps, matchDispatchToProps)(TaskListRow);
  