/
TodoListFooter.js
75 lines (71 loc) · 2.43 KB
/
TodoListFooter.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
/**
* 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 {IndexLink, Link} from 'react-router';
import RemoveCompletedTodosMutation from '../mutations/RemoveCompletedTodosMutation';
import React from 'react';
import Relay from 'react-relay';
class TodoListFooter extends React.Component {
static contextTypes = {
relay: Relay.PropTypes.Environment,
};
_handleRemoveCompletedTodosClick = () => {
this.context.relay.commitUpdate(
new RemoveCompletedTodosMutation({
todos: this.props.viewer.todos,
viewer: this.props.viewer,
})
);
};
render() {
var numCompletedTodos = this.props.viewer.completedCount;
var numRemainingTodos = this.props.viewer.totalCount - numCompletedTodos;
return (
<footer className="footer">
<span className="todo-count">
<strong>{numRemainingTodos}</strong> item{numRemainingTodos === 1 ? '' : 's'} left
</span>
<ul className="filters">
<li>
<IndexLink to="/" activeClassName="selected">All</IndexLink>
</li>
<li>
<Link to="/active" activeClassName="selected">Active</Link>
</li>
<li>
<Link to="/completed" activeClassName="selected">Completed</Link>
</li>
</ul>
{numCompletedTodos > 0 &&
<button
className="clear-completed"
onClick={this._handleRemoveCompletedTodosClick}>
Clear completed
</button>
}
</footer>
);
}
}
export default Relay.createContainer(TodoListFooter, {
fragments: {
viewer: () => Relay.QL`
fragment on User {
completedCount,
todos(status: "completed", first: 2147483647) {
${RemoveCompletedTodosMutation.getFragment('todos')},
},
totalCount,
${RemoveCompletedTodosMutation.getFragment('viewer')},
}
`,
},
});