App.js

import React from 'react';
import './App.css';
import { addItem, generateId, findById, toggleTodo, updateTodo } from './components/lib/todoHelper'
//import { TodoList } from './components/todo/TodoList'
import { AddPopup } from './components/todo/AddPopup'
import { EditPopup } from './components/todo/EditPopup'
import { TodoView } from './components/todo/TodoView'


class App extends React.Component {
  constructor(props){
    super(props);

  }
  state = {
    todos: [
      { id: 1, name: 'Task 1', description: '', isComplete: false },
      { id: 2, name: 'Task 2', description: '', isComplete: true },
      { id: 3, name: 'Task 3', description: '', isComplete: true }
    ],
    currentTodo: '',
    currentDsrp: '',
    errorMessage: '',
    showPopup: false,
    showEditPopup: false,
    todoToBeEdited: {},
    todoView: {},
    filterBy:'none'
  }
  handleToggle = (id) => {
    const todo = findById(id, this.state.todos)
    const toggled = toggleTodo(todo)
    const updatedTodos = updateTodo(this.state.todos, toggled)
    this.setState({
      todos: updatedTodos
    })
  }

  handleInput = (evt) => {
    this.setState({
      currentTodo: evt.target.value
    })
  }
  handleTextInput = (evt) => {
    this.setState({
      currentDsrp: evt.target.value
    })
  }
  handleSubmin = (evt) => {
    evt.preventDefault();
    if (this.state.currentTodo !== '') {
      const newId = generateId();
      const newItems = { id: newId, name: this.state.currentTodo, description: this.state.currentDsrp, isComplete: 'notdone' }
      const newArray = addItem(this.state.todos, newItems)
      this.setState({
        todos: newArray,
        currentTodo: '',
        errorMessage: '',
        currentDsrp: ''


      })
    }



  }
  handleError = (evt) => {
    evt.preventDefault();
    if (this.state.currentTodo === '') {
      this.setState({
        errorMessage: 'Insert something!'
      })
    }
  }
  togglePopup = (evt) => {
    evt.preventDefault()
    this.setState({
      showPopup: !this.state.showPopup
    })
  }
  toggleEditPopup = (index) => {

    this.setState({
      showEditPopup: !this.state.showEditPopup,
      todoToBeEdited: this.state.todos.find(todo => todo.id === index)
    })

  }
  handleDelete = (index, evt) => {
    evt.preventDefault();
    const modifItems = Object.assign([], this.state.todos)
    modifItems.splice(index, 1)
    this.setState({
      todos: modifItems
    })

  }
  setNameUpdate = (name, key) => {
    const items = this.state.todos
    items.map(item => {
      if (item.id === key) {
        item.name = name
      }
    })
    this.setState({
      todos: items
    })

  }
  setDescriptionUpdate = (description, key) => {
    const items = this.state.todos
    items.map(item => {
      if (item.id === key) {
        item.description = description
      }
    })
    this.setState({
      todos: items
    })
  }

  toggleView = (index) => {
    this.setState({
      todoView: this.state.todos.find(todo => todo.id === index)
    })
  }
  handleFilterChange(event) {
    event.preventDefault();
    this.setState({filterBy: event.target.value});
  }

  showFilteredTodos(completed) {
    console.log(completed);
    const complete = completed === 'done';
    return (
      <ul className="list">
        {this.state.todos.filter(todo => todo.isComplete === complete).map((todo, index) =>
          <li key={todo.id} onClick={this.toggleView.bind(this, todo.id)}>
            {todo.name}
            <button onClick={this.toggleEditPopup.bind(this, todo.id)}>Edit</button>
            <button onClick={this.handleDelete.bind(this, index)}>Delete</button>
          </li>)}
      </ul>
    );
  }

  handleComplete(id) {
    console.log(this.state);
   /* const updatedTodo = this.state.todos.find(todo => todo.id === id).map(todo => {
      return {
        ...todo,
        isComplete: !todo.isComplete
      }
    });*/
    this.setState({
      todos: this.state.todos.map(todo => todo.id === id ? { ...todo, isComplete: !todo.isComplete} : todo)
    });
  }


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <button onClick={this.togglePopup}>Add To-Do</button>
          <h4>To-Do List</h4>
        </header>
        <div className="container">
          {this.state.showPopup ?
            <AddPopup text='Add To-do Item'
              errorMessage={this.state.errorMessage}
              closePopup={this.togglePopup.bind(this)}
              currentTodo={this.state.currentTodo}
              currentDsrp={this.state.currentDsrp}
              handleSubmin={this.handleSubmin}
              handleInput={this.handleInput}
              handleError={this.handleError}
              handleTextInput={this.handleTextInput}
            /> : null}

          <form className="selector">
            <label>
              <select value={this.state.value} onClick={this.handleFilterChange.bind(this)}>
                <option value="none">Default</option>
                <option value="done">By Done</option>
                <option value="notdone">By Not Done</option>
              </select>
            </label>
          </form>


          {this.state.filterBy === 'none' &&
          <ul className="list">
            {this.state.todos.map((todo, index) =>
              <li key={todo.id} onClick={this.toggleView.bind(this, todo.id)}>
                {todo.name}
                <button onClick={this.toggleEditPopup.bind(this, todo.id)}>Edit</button>
                <button onClick={this.handleDelete.bind(this, index)}>Delete</button>
                {todo.isComplete === 'done' ? 'done' : 'notdone'}
              </li>)}
          </ul>}

          {this.showFilteredTodos(this.state.filterBy)}

          {this.state.showEditPopup ?
            <EditPopup
              id={this.state.todoToBeEdited.id}
              name={this.state.todoToBeEdited.name}
              description={this.state.todoToBeEdited.description}
              setNameUpdate={this.setNameUpdate}
              setDescriptionUpdate={this.setDescriptionUpdate}
              errorMessage={this.state.errorMessage}
              closePopup={this.toggleEditPopup.bind(this)}
              handleSubmin={this.handleSubmin}
              handleError={this.handleError}
            />
            : null}
        </div>
        <div className="main">
          <TodoView
            id={this.state.todoView.id}
            name={this.state.todoView.name}
            description={this.state.todoView.description}
            isComplete={this.state.todoView.isComplete}
            handleComplete={this.handleComplete.bind(this, this.state.todoView.id)}
          />
        </div>
      </div>
    );
  }
}

export default App;