Mykel Aballe

App.js

import React, {useState} from 'react'

const TodoItem = ({index, data, onEdit, onEditing, onDelete, onToggle}) => (
  <div style={{display:'flex',flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
      <div>
        <input type="checkbox" onChange={() => onToggle(index)} />
        {!data.is_editing ? <span style={{textDecoration:data.done ? 'line-through' : 'none'}}>{data.title}</span> : <input type='text' value={data.title} onChange={e => onEditing(index, e.target.value)} />}
      </div>

      <div>
        <button onClick={() => onEdit(index)}>{data.is_editing ? 'Save' : 'Edit'}</button>
        <button onClick={() => onDelete(index)}>Delete</button>
      </div>
    </div>
)

export default () => {

  const [newTodo, setNewTodo] = useState('')
  const [todos, setTodos] = useState([])

  const handleChangeNewTodo = e => setNewTodo(e.target.value)

  const handleAddTodo = () => {
    let len = todos.length

    setNewTodo('')
    
    setTodos([
      ...todos,
      {
        id:len > 0 ? todos[len - 1].id + 1 : 1,
        title:newTodo,
        done:false,
        is_editing:false
      }
    ])
  }

  const handleEdit = index => {
    let temp = todos.slice()
    temp[index].is_editing = !temp[index].is_editing
    setTodos(temp)
  }

  const handleEditing = (index, newTitle) => {
    let temp = todos.slice()
    temp[index].title = newTitle
    setTodos(temp)
  }

  const handleDelete = index => {
    let temp = todos.slice()
    temp.splice(index, 1)
    setTodos(temp)
  }

  const handleToggle = index => {
    let temp = todos.slice()
    temp[index].done = !temp[index].done
    setTodos(temp)
  }

  return (
    <div style={{width:300}}>
      <input type='text' value={newTodo}  onChange={handleChangeNewTodo} />
      <input type='button' value='Add Todo' onClick={handleAddTodo} />

      {todos.map((todo, index) => (
        <TodoItem
          index={index}
          data={todo}
          onEdit={handleEdit}
          onEditing={handleEditing}
          onDelete={handleDelete}
          onToggle={handleToggle}
        />
      ))}
    </div>
  )
}