-
Notifications
You must be signed in to change notification settings - Fork 0
/
task.jsx
52 lines (46 loc) · 1.64 KB
/
task.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// Task component - represents a single todo item
Task = React.createClass({
propTypes: {
// This component gets the task to display through a React prop.
// We can use propTypes to indicate it is required
task: React.PropTypes.object.isRequired,
showPrivateButton: React.PropTypes.bool.isRequired
},
toggleChecked() {
// Set the checked property to the opposite of its current value
Meteor.call("setChecked", this.props.task._id, ! this.props.task.checked);
},
deleteThisTask() {
Meteor.call("removeTask", this.props.task._id);
},
togglePrivate() {
Meteor.call("setPrivate", this.props.task._id, ! this.props.task.private);
},
render() {
// Give tasks a different className when they are checked off,
// so that we can style them nicely in CSS
// Add "checked" and/or "private" to the className when needed
const taskClassName = (this.props.task.checked ? "checked" : "") + " " +
(this.props.task.private ? "private" : "");
return (
<li className={taskClassName}>
<button className="delete" onClick={this.deleteThisTask}>
×
</button>
<input
type="checkbox"
readOnly={true}
checked={this.props.task.checked}
onClick={this.toggleChecked} />
{ this.props.showPrivateButton ? (
<button className="toggle-private" onClick={this.togglePrivate}>
{ this.props.task.private ? "Private" : "Public" }
</button>
) : ''}
<span className="text">
<strong>{this.props.task.username}</strong>: {this.props.task.text}
</span>
</li>
);
}
});