@@ -147,6 +150,9 @@ export default class SignIn extends React.Component {
+
+
+
);
diff --git a/bikeshop_project/assets/js/members/components/MemberTable/index.jsx b/bikeshop_project/assets/js/members/components/MemberTable/index.jsx
new file mode 100644
index 0000000..44eb40c
--- /dev/null
+++ b/bikeshop_project/assets/js/members/components/MemberTable/index.jsx
@@ -0,0 +1,155 @@
+import React from 'react';
+import { polyFill } from 'es6-promise';
+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, ToolbarSeparator, ToolbarTitle } 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 => (
+