1// ./src/components/Todo.js
2import React, { Component } from 'react'
3import PropTypes from 'prop-types'
4import moment from 'moment'
5import {connect} from 'react-redux'
6import {editTodo, toggleTodo, deleteTodo} from '../redux/actions'
7
8export class Todo extends Component {
9  constructor() {
10    super();
11    this.state = {
12      formOpen: false,
13      todo: {}
14    }
15    this.handleOpen=this.handleOpen.bind(this);
16    this.handleClose=this.handleClose.bind(this);
17    this.handleFieldChange=this.handleFieldChange.bind(this);
18    this.handleEdit=this.handleEdit.bind(this);
19    this.handleDelete=this.handleDelete.bind(this);
20    this.handleToggle=this.handleToggle.bind(this);
21  }
22
23  // Open Todo edit form
24  handleOpen() {
25    this.setState({formOpen: true});
26  }
27
28  // Close Todo edit form and reset any changes
29  handleClose() {
30    this.setState({formOpen: false});
31    this.setState({todo: {}});
32  }
33  // Handle changes to the input fields
34  handleFieldChange(e) {
35    // Property to change e.g title
36    var field = e.target.name;
37   // New value
38    var value = e.target.value;
39    var todo = this.state.todo;
40    var todo = Object.assign({}, todo, {[field]: value});
41    this.setState({todo: todo});
42  }
43
44  handleEdit() {
45    // Send to-do id and new details to actions for updating
46    this.props.editTodo(this.props.id, this.state.todo);
47    this.handleClose();
48  }
49
50  handleDelete() {
51   // Send to-do id to actions for deletion
52    this.props.deleteTodo(this.props.id);
53  }
54
55  handleToggle() {
56    // Mark a to-do as completed or incomplete
57    this.props.toggleTodo(this.props.id, {done: !this.props.done})
58  }
59
60  render() {
61    return (
62      <div className="column">
63        <div className="ui brown card">
64          <img className="ui image" src={this.props.url} />
65          {this.state.formOpen ?
66            <div className="content">
67              <div className='ui form'>
68                <div className='field'>
69                  <label>Title</label>
70                  <input type='text'
71                    name="title"
72                    defaultValue={this.props.title}
73                    onChange={this.handleFieldChange}
74                  />
75                </div>
76                <div className='field'>
77                  <label>Project</label>
78                  <input type='text'
79                    name="project"
80                    defaultValue={this.props.project}
81                    onChange={this.handleFieldChange}
82                  />
83                </div>
84              </div>
85            </div> :
86            <div className="content">
87              <div className="header">{this.props.title}</div>
88              <div className="meta">{this.props.project}</div>
89              <div className="meta">Created {moment(this.props.createdAt).fromNow()}</div>
90            </div>
91          }
92          <div className="extra content">
93            {this.state.formOpen ?
94              <div className="ui two buttons">
95                <button className='ui basic green button' onClick={this.handleEdit}>
96                  <i className='checkmark icon'></i> Update
97                </button>
98                <button className='ui basic red button' onClick={this.handleClose}>
99                  <i className='remove icon'></i> Cancel
100                </button>
101              </div> :
102              <div>
103                <div className="ui toggle checkbox" style={{marginBottom: '10px'}}>
104                  <input type="checkbox" name="public" value="on" defaultChecked ={this.props.done} onChange={this.handleToggle}/>
105                  <label>Complete</label>
106                </div>
107                <div className="ui two buttons">
108                  <button className='ui basic green button' onClick={this.handleOpen}>Edit</button>
109                  <button className="ui basic red button" onClick={this.handleDelete}>Delete</button>
110                </div>
111              </div>
112            }
113          </div>
114        </div>
115      </div>
116    )
117  }
118}
119
120Todo.propTypes = {
121  id: PropTypes.string.isRequired,
122  title: PropTypes.string.isRequired,
123  project: PropTypes.string.isRequired,
124  done: PropTypes.bool.isRequired,
125  url: PropTypes.string.isRequired,
126  createdAt: PropTypes.string.isRequired,
127  editTodo: PropTypes.func.isRequired,
128  toggleTodo: PropTypes.func.isRequired,
129  deleteTodo: PropTypes.func.isRequired
130};
131
132export default connect(null, {editTodo, toggleTodo, deleteTodo})(Todo);