import React from 'react';
import fetch from 'isomorphic-fetch';
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
import FlatButton from 'material-ui/FlatButton';
import { Toolbar, ToolbarGroup} from 'material-ui/Toolbar';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
function parseJSON(response) {
return response.json();
}
export default class MemberTable extends React.Component {
constructor(props) {
super(props);
this.state = {
members: [],
searchText: '',
filteredMembers: [],
error: undefined,
};
this.handleUpdate = this.handleUpdate.bind(this);
this.handleSearch = this.handleSearch.bind(this);
this.clearSearch = this.clearSearch.bind(this);
}
componentDidMount() {
fetch('/api/v1/members/')
.then(checkStatus)
.then(parseJSON)
.then((data) => {
this.setState({ members: data });
console.log('request succeeded with JSON response', data);
})
.catch((error) => {
console.log('request failed', error);
});
}
handleUpdate(event, value) {
this.setState({ ...this.state, searchText: value });
}
clearSearch() {
this.setState({
...this.state,
searchText: '',
});
}
handleSearch() {
const value = this.state.searchText.trim();
const self = this;
fetch(`/members/search/${value}/`)
.then((response) => {
if (response.status === 200) {
return response.json();
}
throw new Error('Bad response from server');
})
.then((data) => {
if (data.results.length > 0) {
self.setState({
...this.state,
error: '',
filteredMembers: this.state.members.filter((member) => {
const ids = data.results.map(m => m.id);
console.log(ids);
if (ids.indexOf(member.id) !== -1) {
return member;
}
}),
});
} else {
self.setState({ ...this.state, error: 'Member not found.' });
}
});
}
render() {
const memberRows = this.state.members.map(member => (