61 lines
1.3 KiB
JavaScript
61 lines
1.3 KiB
JavaScript
"use strict";
|
|
|
|
function move_checkboxes() {
|
|
let checkboxes = document.getElementsByName("users");
|
|
let fields = document.querySelectorAll(".checkbox_field");
|
|
if (checkboxes.length == fields.length) {
|
|
for (let i = 0; i < fields.length; ++i) {
|
|
let el = checkboxes[i].cloneNode(true);
|
|
fields[i].appendChild(el);
|
|
}
|
|
}
|
|
}
|
|
|
|
class TableRow extends React.Component {
|
|
render() {
|
|
return (
|
|
<tr>
|
|
<td>
|
|
<a href="#">{this.props.user.name}</a>
|
|
</td>
|
|
<td>{this.props.user.user.email}</td>
|
|
<td>{this.props.user.role}</td>
|
|
<td className="checkbox_field"></td>
|
|
</tr>
|
|
);
|
|
}
|
|
}
|
|
|
|
class TableBody extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { users: [] };
|
|
}
|
|
|
|
get_users() {
|
|
axios.get("/api/users").then((response) => {
|
|
this.setState({ users: response.data });
|
|
});
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.interval = setInterval(() => {
|
|
this.get_users();
|
|
move_checkboxes();
|
|
}, 1000);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
clearInterval(this.interval);
|
|
}
|
|
|
|
render() {
|
|
return this.state.users.map((user, key) => (
|
|
<TableRow user={user} key={key} />
|
|
));
|
|
}
|
|
}
|
|
|
|
move_checkboxes();
|
|
ReactDOM.render(<TableBody />, document.getElementById("table"));
|