TaskItemCompleted.js

import React, { Component, PropTypes } from 'react';
import { Text,
         TouchableHighlight,
         View,
         ListView,
         Image} from 'react-native';
import { styles } from '../styles/css';
import EditTask from './EditTask';
import Icon from 'react-native-vector-icons/FontAwesome';
import CheckBox from './CheckBox';
import * as TaskListsActions from '../actions/TaskListsActions';
import * as TaskActions from '../actions/TaskActions';
import moment from 'moment';

export default class TaskItemCompleted extends Component {
  constructor(props) {
    super(props);
    this._selectCompleted = this._selectCompleted.bind(this);
  }

   _selectCompleted() {
     this.props.dispatch(TaskListsActions.fetchToggleCompletedInTaskList(this.props.task_list.id,
                                                                         this.props.item.id,
                                                                         this.props.item,
                                                                         this.props.token));
     this.props.dispatch(TaskListsActions.fetchTaskList(this.props.token));
     this.props.dispatch(TaskActions.fetchTaskList(this.props.task_list, this.props.token));
   }

   _handleNextPress() {
     this.props.navigator.push({
       component: EditTask,
       title: this.props.task_list.name,
       id: 1,
       passProps: { navigator: this.props.navigator,
                    task_name: this.props.item.name,
                    task_list: this.props.task_list,
                    item: this.props.item,
                    dispatch: this.props.dispatch,
                    token: this.props.token },
     });
   }

   renderStar() {
      if (this.props.item.display_star_icon) {
          if (this.props.item.starred) {
             return (
               <Icon name="star" size={21} color="#FBA829"/>
             );
          } else {
             return (
               <Icon name="star" size={21} color="#A9B1BB"/>
             );
          }
      }
   }

    renderTaskListName() {
        if(this.props.task_list.type === 'custom' || this.props.task_list.type === 'deadline') {
            return(
                <View style={styles.taskTextContainerTaskListName}>
                    <Text style={styles.taskTextContainerListTitleCompleted} numberOfLines={1}>{this.props.item.task_list_name}</Text>
                </View>
            );
        }
    }

    renderTaskListDelimiter() {
        if((this.props.task_list.type === 'custom' || this.props.task_list.type === 'deadline') && this.props.item.due_by !== null) {
            return(
                <View style={styles.taskTextContainerTaskListDelimiter}></View>
            );
        }
    }

    renderTaskItemDate(){
        if(this.props.item.due_by !== null){
            return(
                <View style={styles.taskTextContainerDate}>
                    <Text style={[styles.taskTextContainerTaskDateCompleted]}>{moment(this.props.item.due_by).format('DD.MM.YYYY')}</Text>
                </View>
            );
        }
    }

    renderIterationIcon(){
        if(this.props.item.due_type !== null ){
            return(
                <Image
                    style={{marginLeft:8, marginRight:8}}
                    source={require('../images/arrow.png')}
                />
            );
        }
    }

  render() {
    const { item } = this.props;
    return (
      <TouchableHighlight underlayColor={'transparent'} {...this.props.sortHandlers}>
        <View style={styles.taskItemCompleted}>
          <View style={styles.taskItemInner}>
              <View style={styles.taskTextContainer}>
                  <TouchableHighlight underlayColor='transparent' onPress={() => this._handleNextPress() }>
                      <View>
                          <View style={styles.taskTextContainerDetails}>
                              {this.renderTaskListName()}
                          </View>
                          <Text style={styles.taskItemTitleCompleted} numberOfLines={1}>{item.name}</Text>
                      </View>
                  </TouchableHighlight>
              </View>
              <View style={styles.taskDetailsRightColumn}>
                  <View style={styles.taskDetailsRightRow}>
                      {this.renderIterationIcon()}
                      {this.renderTaskItemDate()}
                  </View>
              </View>
          </View>
        </View>
      </TouchableHighlight>
    );
  }
}

TaskItemCompleted.propTypes = {
  item: PropTypes.object.isRequired,
  token: PropTypes.string.isRequired,
  navigator: PropTypes.object.isRequired,
  dispatch: PropTypes.func.isRequired,
  task_list: PropTypes.object.isRequired
}