ItemList.js

import React, { Component } from 'react';
import { Text, View, TextInput, Button, StyleSheet, Platform } from 'react-native';
import uuid from 'uuid';
import { CheckBox } from 'react-native-elements';
import Item from './Item';
import ItemInput from './ItemInput';

export default class TodoListContainer extends Component {
  constructor(props) {
    super(props);

    const createItemFunc = text => {
      if (!text) {
        return console.error('createItem no arg');
      }
      console.log(`createItemFunc text: ${text}`);
      return {
        title: text,
        complete: false,
        display: true,
        id: uuid.v4()
      };
    };

    this.state = {
      text: 'Enter your task',
      showCompleted: false,
      items: [createItemFunc('task1'), createItemFunc('task2'), createItemFunc('task3')]
    };

    this.createItem = createItemFunc.bind(this);
  }

  clearTextState = () => {
    this.setState({ text: '' });
  };

  defaultTextState = () => {
    this.setState({ text: 'Enter your task' });
  };

  updateStateText = text => {
    this.setState({ text });
  };

  toggleCompleteItem = id => {
    if (!id) return console.error('toggleCompleteItem no arg');

    const { items } = this.state;
    const newItemsState = items.map(item => {
      if (item.id === id) {
        return item.complete === false
          ? { ...item, complete: true }
          : { ...item, complete: false, display: true };
      }
      return item;
    });
    return this.setState({ items: newItemsState });
  };

  toggleShowAll = () => {
    const { showCompleted } = this.state;
    this.setState({ showCompleted: !showCompleted });
  };

  updateItems = () => {
    const { items, text } = this.state;
    const newItem = this.createItem(text);
    console.log(`updateItems new item: ${JSON.stringify(newItem)}`);
    items.push(newItem);
    this.setState({
      text: 'Enter your task',
      items
    });
  };

  hideItem = id => {
    if (!id) return console.error('hideItem no arg');

    const { items } = this.state;
    const newItemsState = items.map(item => {
      if (item.id === id) return item.complete === true ? { ...item, display: false } : item;
      return item;
    });

    return this.setState({ items: newItemsState });
  };

  render() {
    const { items, showCompleted, text } = this.state;
    console.log(JSON.stringify(this.state));
    const renderItems = items.map(item => {
      const checkBox = (
        <Item
          toggleCompleteItem={this.toggleCompleteItem}
          hideItem={this.hideItem}
          key={item.id}
          item={item}
        />
      );
      if (showCompleted) return checkBox;
      return item.display ? checkBox : null;
    });

    return (
      <View style={styles.todoInputLabel}>
        <ItemInput
          onFocus={this.clearTextState}
          onBlur={this.defaultTextState}
          onChangeText={this.updateStateText}
          onSubmit={this.updateItems}
        />
        <CheckBox
          center
          title="View Completed Tasks"
          checkedIcon="dot-circle-o"
          uncheckedIcon="circle-o"
          checked={showCompleted}
          onPress={this.toggleShowAll}
        />
        {renderItems}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  todoInputLabel: {
    padding: 1
  },
  item: {
    height: 40,
    borderColor: 'blue',
    borderWidth: 1,
    flexDirection: 'row'
  },
  taskList: { width: 100 }
});