Big refactor and I should have done this better.

bikeshop_project/assets/js/components/Member.jsx

@@ -15,6 +15,7 @@ export default class Member extends React.Component {
                 searchText={this.props.searchText}
                 fullWidth={true}
                 textFieldStyle={{textAlign: 'center', fontSize: '32px', lineHeight: '48px'}}
+                tabIndex={this.props.tabIndex}
             />
         );
     }

bikeshop_project/assets/js/components/Purpose.jsx

@@ -9,6 +9,7 @@ export default class Purpose extends React.Component {
               value={this.props.default}
               onChange={this.props.handleChange.bind(this)}
               fullWidth={true}
+              tabIndex={this.props.tabIndex}
               >
                 <MenuItem value={'VOLUNTEER'} primaryText="Volunteer" />
                 <MenuItem value={'FIX'} primaryText="Fix" />

bikeshop_project/assets/js/components/SignIn.jsx

@@ -1,135 +1,150 @@
+import fetch from 'isomorphic-fetch';
+import moment from 'moment';
 import React from 'react';
 import RaisedButton from 'material-ui/RaisedButton';
 import { polyFill } from 'es6-promise';
-import fetch from 'isomorphic-fetch';
 import Purpose from './Purpose';
 import Member from './Member';
 import SignedInList from './SignedInList';
-import moment from 'moment';
 
 export default class SignIn extends React.Component {
-    constructor (props) {
+  constructor(props) {
-        super(props);
+    super(props);
-        this.state = {
-            members: [],
-            signOn: {purpose: 'FIX', member: undefined},
-            error: '',
-            signedIn: [],
-            searchText: ''
-        };
-        this.handleUpdate = this.handleUpdate.bind(this);
-        this.signIn = this.signIn.bind(this);
-        this.chooseMember = this.chooseMember.bind(this);
-        this.handlePurposeChoice = this.handlePurposeChoice.bind(this);
-    }
 
-    componentDidMount () {
+    this.state = {
-        fetch('/members/signin/')
+      members: [],
-            .then((response) => {
+      signOn: { purpose: 'FIX', member: undefined },
-                return response.json()
+      error: '',
-            })
+      signedIn: [],
+      searchText: '',
+    };
+
+    this.handleUpdate = this.handleUpdate.bind(this);
+    this.signIn = this.signIn.bind(this);
+    this.chooseMember = this.chooseMember.bind(this);
+    this.handlePurposeChoice = this.handlePurposeChoice.bind(this);
+  }
+
+  componentDidMount() {
+    fetch('/members/signin/')
+            .then(response => response.json())
             .then((data) => {
-                const visits = JSON.parse(data);
+              const visits = JSON.parse(data);
-                this.setState({signedIn: visits.map((visit) => {
+              this.setState({ signedIn: visits.map(visit => ({
-                    return {
+                id: visit.member.id,
-                        id: visit.member.id,
+                purpose: visit.purpose,
-                        purpose: visit.purpose,
+                text: `${visit.member.first_name} ${visit.member.last_name}`,
-                        text: visit.member.full_name,
+                value: `${visit.member.first_name} ${visit.member.last_name} <${visit.member.email}>`,
-                        value: `${visit.member.full_name} <${visit.member.email}>`,
+                at: moment(visit.created_at),
-                        at: moment(visit.created_at)
+              })) });
-                    }
-                })})
-            })
-    }
-
-    handlePurposeChoice (event, index, value) {
-        this.setState({...this.state, signOn: {...this.state.signOn, purpose: value}});
-    }
-
-    handleUpdate (text, dataSource) {
-        const self = this;
-        self.setState({searchText: text})
-        fetch(`/members/search/${text}/`)
-            .then((response) => {
-                if (response.status === 200)
-                    return response.json();
-            })
-            .then((data) => {
-                if (data.results.length > 0) {
-                    self.setState({
-                        ...this.state,
-                        error: '',
-                        members: data.results.map((result) => {
-                            return {text: `${result.name}`, value: `${result.name} <${result.email}>`, id: result.id}
-                        })
-                    });
-                } else {
-                    self.setState({...this.state, error: 'Member not found.'})
-                }
-            })
-    }
-
-    signIn () {
-        const purpose = this.state.signOn.purpose;
-        const member = this.state.signOn.member;
-
-        if (!this.state.signedIn.find((signedInMember) => {return signedInMember.id === member.id})) {
-            fetch('/members/signin/', {
-                method: 'post',
-                body: `id=${member.id}&purpose=${purpose}`,
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded'
-                }
-            }).then((response) => {
-                if (response.status === 201)
-                    return response.json();
-            }).then((data) => {
-                const now = moment();
-                const signedIn = this.state.signedIn;
-                signedIn.push({...member, purpose, at: now});
-                this.setState({
-                    ...this.state,
-                    signedIn: signedIn,
-                    signOn: {purpose: 'FIX', member: undefined},
-                    searchText: '',
-                    members: []
-                })
             });
-        } else {
+  }
-            this.setState({...this.state, error: 'Member already signed in.'})
-        }
-    }
 
-    chooseMember (chosenRequest, index) {
+  handleUpdate(text, dataSource) {
-        console.log(index);
+    const self = this;
-        const member = this.state.members[index];
+    self.setState({ searchText: text });
-        const purpose = this.state.signOn.purpose;
+    fetch(`/members/search/${text}/`)
+            .then((response) => {
+              if (response.status === 200) {
+                return response.json();
+              }
+            })
+            .then((data) => {
+              if (data.results.length > 0) {
+                self.setState({
+                  ...this.state,
+                  error: '',
+                  members: data.results.map(result => ({ text: `${result.name}`, value: `${result.name} <${result.email}>`, id: result.id })),
+                });
+              } else {
+                self.setState({ ...this.state, error: 'Member not found.' });
+              }
+            });
+  }
 
-        this.setState({...this.state, signOn: {member, purpose}});
+  signIn() {
-    }
+    const purpose = this.state.signOn.purpose;
+    const member = this.state.signOn.member;
 
-    onUpdateSearchText(searchText, dataSource) {
+    if (!this.state.signedIn.find(signedInMember => signedInMember.id === member.id)) {
-        this.setState({searchText: searchText})
+      fetch('/members/signin/', {
-    }
+        method: 'post',
+        body: `id=${member.id}&purpose=${purpose}`,
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        } })
+          .then((response) => {
+            if (response.status === 201) {
+              return response.json();
+            }
+          })
+          .then((data) => {
+            const signedIn = this.state.signedIn;
+            const parsedData = JSON.parse(data);
 
-    render () {
+            signedIn.push({ ...member, purpose, at: moment(parsedData.results.created_at) });
-        return (
+            this.setState({
-            <div>
+              ...this.state,
-                <Member
+              signedIn,
-                    handleUpdate={this.handleUpdate}
+              signOn: { purpose: 'FIX', member: undefined },
-                    signIn={this.chooseMember}
+              searchText: '',
-                    error={this.state.error}
+              members: [],
-                    members={this.state.members}
+            });
-                    searchText={this.state.searchText}
+          });
-                />
+    } else {
-                <br />
+      this.setState({ ...this.state, error: 'Member already signed in.' });
-                <Purpose handleChange={this.handlePurposeChoice} default={this.state.signOn.purpose}  />
-                <div>
-                    <RaisedButton onClick={this.signIn} label="Sign-in" />
-                </div>
-                <br />
-                <SignedInList members={this.state.signedIn} />
-            </div>
-        );
     }
-}
+  }
+
+  chooseMember(chosenRequest, index) {
+    const member = this.state.members[index];
+    const purpose = this.state.signOn.purpose;
+
+    this.setState({ ...this.state, signOn: { member, purpose } });
+  }
+
+  onUpdateSearchText(searchText) {
+    this.setState({ searchText });
+  }
+
+  handlePurposeChoice(event, index, value) {
+    this.setState({ ...this.state, signOn: { ...this.state.signOn, purpose: value } });
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="mdl-grid">
+          <div className="mdl-cell--12-col mdl-cell">
+            <h1 className="mdl-typography--display-4">Sign-in</h1>
+            <h2 className="mdl-typography--display-3">{moment().format('MMM DD, YYYY')}</h2>
+          </div>
+        </div>
+        <div className="mdl-grid">
+          <div className="mdl-cell--8-col mdl-cell">
+            <Member
+              handleUpdate={this.handleUpdate}
+              signIn={this.chooseMember}
+              error={this.state.error}
+              members={this.state.members}
+              searchText={this.state.searchText}
+              tabIndex={1}
+            />
+          </div>
+          <div className="mdl-cell mdl-cell--4-col">
+            <Purpose handleChange={this.handlePurposeChoice} default={this.state.signOn.purpose} tabIndex={2} />
+          </div>
+        </div>
+
+        <div className="mdl-grid">
+          <div className="mdl-cell mdl-cell--2-col mdl-cell--10-offset">
+            <RaisedButton onClick={this.signIn} label="Sign-in" tabIndex={3} />
+          </div>
+        </div>
+        <div className="mdl-grid">
+          <SignedInList members={this.state.signedIn} />
+        </div>
+      </div>
+    );
+  }
+}