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
103
104
105
106
107
108
109
110
111
112
113
|
import React from "react";
import { Button, Pagination } from "semantic-ui-react";
import ObjectComponent from "./ObjectComponent";
import SearchForm from "./SearchForm";
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
objects: [],
filter: {
field: "default-field",
value: ""
},
page: 1,
totalPages: 1
};
this.getData = this.getData.bind(this);
this.setPage = this.setPage.bind(this);
this.queryString = this.queryString.bind(this);
}
componentDidMount() {
this.getData();
}
queryString() {
return [
`limit=${process.env.PER_PAGE}`,
`skip=${this.state.page * process.env.PER_PAGE}`
].join("&");
}
// Fetch data from external source, update state
getData() {
fetch(`${process.env.COLLECTOR_URL}/sc/v0/get?${this.queryString()}`, {
headers: {
Authorization: "Basic " + btoa("user1:pw1")
}
})
// TODO: Look at `status` or return code or both?
.then(resp => {
if (resp.status !== 200)
throw `Unexpected HTTP response code from soc_collector: ${resp.status} ${resp.statusText}`;
this.setState({
totalPages: resp.headers.get("X-Total-Count")
});
return resp.json();
})
.then(json => {
if (json.status != "success")
throw `Unexpected status from soc_collector: ${json.status}`;
this.setState({
objects: json.data
});
})
.catch(e => this.props.setError(e));
}
filter(field, value) {
this.setState(
{
filter: {
field: field,
value: value
}
},
this.getData
);
}
setPage(e, { activePage: n }) {
this.setState({ page: n }, () => {
this.getData();
window.scrollTo(0, 0);
});
}
render() {
return (
<div id="list-container">
<div id="controls">
<div id="action">
<Button.Group>
<Button>Action 1</Button>
<Button>Action 2</Button>
</Button.Group>
</div>
<div id="search">
<SearchForm filter={this.filter} />
</div>
</div>
<div id="main">
{this.state.objects.map(data => {
return <ObjectComponent {...data} key={data._id} />;
})}
</div>
<div id="pagination">
<Pagination
activePage={this.state.page}
// totalPages={this.totalPages()}
totalPages={this.state.totalPages}
onPageChange={this.setPage}
/>
</div>
</div>
);
}
}
export default List;
|
