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);
+
     this.state = {
       members: [],
-            signOn: {purpose: 'FIX', member: undefined},
+      signOn: { purpose: 'FIX', member: undefined },
       error: '',
       signedIn: [],
-            searchText: ''
+      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 () {
+  componentDidMount() {
     fetch('/members/signin/')
-            .then((response) => {
+            .then(response => response.json())
-                return response.json()
-            })
             .then((data) => {
               const visits = JSON.parse(data);
-                this.setState({signedIn: visits.map((visit) => {
+              this.setState({ signedIn: visits.map(visit => ({
-                    return {
                 id: visit.member.id,
                 purpose: visit.purpose,
-                        text: visit.member.full_name,
+                text: `${visit.member.first_name} ${visit.member.last_name}`,
-                        value: `${visit.member.full_name} <${visit.member.email}>`,
+                value: `${visit.member.first_name} ${visit.member.last_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) {
+  handleUpdate(text, dataSource) {
     const self = this;
-        self.setState({searchText: text})
+    self.setState({ searchText: text });
     fetch(`/members/search/${text}/`)
             .then((response) => {
-                if (response.status === 200)
+              if (response.status === 200) {
                 return response.json();
+              }
             })
             .then((data) => {
               if (data.results.length > 0) {
                 self.setState({
                   ...this.state,
                   error: '',
-                        members: data.results.map((result) => {
+                  members: data.results.map(result => ({ text: `${result.name}`, value: `${result.name} <${result.email}>`, id: result.id })),
-                            return {text: `${result.name}`, value: `${result.name} <${result.email}>`, id: result.id}
-                        })
                 });
               } else {
-                    self.setState({...this.state, error: 'Member not found.'})
+                self.setState({ ...this.state, error: 'Member not found.' });
               }
-            })
+            });
   }
 
-    signIn () {
+  signIn() {
     const purpose = this.state.signOn.purpose;
     const member = this.state.signOn.member;
 
-        if (!this.state.signedIn.find((signedInMember) => {return signedInMember.id === member.id})) {
+    if (!this.state.signedIn.find(signedInMember => signedInMember.id === member.id)) {
       fetch('/members/signin/', {
         method: 'post',
         body: `id=${member.id}&purpose=${purpose}`,
         headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded'
+          'Content-Type': 'application/x-www-form-urlencoded',
-                }
+        } })
-            }).then((response) => {
+          .then((response) => {
-                if (response.status === 201)
+            if (response.status === 201) {
               return response.json();
-            }).then((data) => {
+            }
-                const now = moment();
+          })
+          .then((data) => {
             const signedIn = this.state.signedIn;
-                signedIn.push({...member, purpose, at: now});
+            const parsedData = JSON.parse(data);
+
+            signedIn.push({ ...member, purpose, at: moment(parsedData.results.created_at) });
             this.setState({
               ...this.state,
-                    signedIn: signedIn,
+              signedIn,
-                    signOn: {purpose: 'FIX', member: undefined},
+              signOn: { purpose: 'FIX', member: undefined },
               searchText: '',
-                    members: []
+              members: [],
-                })
+            });
           });
     } else {
-            this.setState({...this.state, error: 'Member already signed in.'})
+      this.setState({ ...this.state, error: 'Member already signed in.' });
     }
   }
 
-    chooseMember (chosenRequest, index) {
+  chooseMember(chosenRequest, index) {
-        console.log(index);
     const member = this.state.members[index];
     const purpose = this.state.signOn.purpose;
 
-        this.setState({...this.state, signOn: {member, purpose}});
+    this.setState({ ...this.state, signOn: { member, purpose } });
+  }
+
+  onUpdateSearchText(searchText) {
+    this.setState({ searchText });
   }
 
-    onUpdateSearchText(searchText, dataSource) {
+  handlePurposeChoice(event, index, value) {
-        this.setState({searchText: searchText})
+    this.setState({ ...this.state, signOn: { ...this.state.signOn, purpose: value } });
   }
 
-    render () {
+  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}
             />
-                <br />
-                <Purpose handleChange={this.handlePurposeChoice} default={this.state.signOn.purpose}  />
-                <div>
-                    <RaisedButton onClick={this.signIn} label="Sign-in" />
           </div>
-                <br />
+          <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>
     );
   }
 }