/
TodoList.js
102 lines (96 loc) · 2.72 KB
/
TodoList.js
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/**
* This file provided by Facebook is for non-commercial testing and evaluation
* purposes only. Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
* ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import MarkAllTodosMutation from '../mutations/MarkAllTodosMutation';
import Todo from './Todo';
import React from 'react';
import Relay from 'react-relay';
class TodoList extends React.Component {
static contextTypes = {
relay: Relay.PropTypes.Environment,
};
_handleMarkAllChange = (e) => {
var complete = e.target.checked;
this.context.relay.commitUpdate(
new MarkAllTodosMutation({
complete,
todos: this.props.viewer.todos,
viewer: this.props.viewer,
})
);
};
renderTodos() {
return this.props.viewer.todos.edges.map(edge =>
<Todo
key={edge.node.id}
todo={edge.node}
viewer={this.props.viewer}
/>
);
}
render() {
var numTodos = this.props.viewer.totalCount;
var numCompletedTodos = this.props.viewer.completedCount;
return (
<section className="main">
<input
checked={numTodos === numCompletedTodos}
className="toggle-all"
onChange={this._handleMarkAllChange}
type="checkbox"
/>
<label htmlFor="toggle-all">
Mark all as complete
</label>
<ul className="todo-list">
{this.renderTodos()}
</ul>
</section>
);
}
}
export default Relay.createContainer(TodoList, {
initialVariables: {
status: null,
},
prepareVariables({status}) {
var nextStatus;
if (status === 'active' || status === 'completed') {
nextStatus = status;
} else {
// This matches the Backbone example, which displays all todos on an
// invalid route.
nextStatus = 'any';
}
return {
status: nextStatus,
};
},
fragments: {
viewer: () => Relay.QL`
fragment on User {
completedCount,
todos(status: $status, first: 2147483647) {
edges {
node {
id,
${Todo.getFragment('todo')},
},
},
${MarkAllTodosMutation.getFragment('todos')},
},
totalCount,
${MarkAllTodosMutation.getFragment('viewer')},
${Todo.getFragment('viewer')},
}
`,
},
});