From aa2a96b906215d399be868f0dbf8e9cb396a3afd Mon Sep 17 00:00:00 2001 From: Drew Larson Date: Sun, 1 Jan 2017 17:38:10 -0600 Subject: [PATCH] Big refactor and I should have done this better. --- .../assets/js/components/Member.jsx | 1 + .../assets/js/components/Purpose.jsx | 1 + .../assets/js/components/SignIn.jsx | 241 ++++++++++-------- 3 files changed, 130 insertions(+), 113 deletions(-) diff --git a/bikeshop_project/assets/js/components/Member.jsx b/bikeshop_project/assets/js/components/Member.jsx index 03aa6d4..460aba1 100644 --- a/bikeshop_project/assets/js/components/Member.jsx +++ b/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} /> ); } diff --git a/bikeshop_project/assets/js/components/Purpose.jsx b/bikeshop_project/assets/js/components/Purpose.jsx index da5a281..4ce436f 100644 --- a/bikeshop_project/assets/js/components/Purpose.jsx +++ b/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} > diff --git a/bikeshop_project/assets/js/components/SignIn.jsx b/bikeshop_project/assets/js/components/SignIn.jsx index 6ea16a1..71bf00f 100644 --- a/bikeshop_project/assets/js/components/SignIn.jsx +++ b/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) { - 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); - } + constructor(props) { + super(props); - componentDidMount () { - fetch('/members/signin/') - .then((response) => { - return response.json() - }) - .then((data) => { - const visits = JSON.parse(data); - this.setState({signedIn: visits.map((visit) => { - return { - id: visit.member.id, - purpose: visit.purpose, - text: visit.member.full_name, - value: `${visit.member.full_name} <${visit.member.email}>`, - at: moment(visit.created_at) - } - })}) - }) - } + this.state = { + members: [], + signOn: { purpose: 'FIX', member: undefined }, + error: '', + signedIn: [], + searchText: '', + }; - handlePurposeChoice (event, index, value) { - this.setState({...this.state, signOn: {...this.state.signOn, purpose: value}}); - } + this.handleUpdate = this.handleUpdate.bind(this); + this.signIn = this.signIn.bind(this); + this.chooseMember = this.chooseMember.bind(this); + this.handlePurposeChoice = this.handlePurposeChoice.bind(this); + } - handleUpdate (text, dataSource) { - const self = this; - self.setState({searchText: text}) - fetch(`/members/search/${text}/`) + componentDidMount() { + fetch('/members/signin/') + .then(response => response.json()) + .then((data) => { + const visits = JSON.parse(data); + this.setState({ signedIn: visits.map(visit => ({ + id: visit.member.id, + purpose: visit.purpose, + text: `${visit.member.first_name} ${visit.member.last_name}`, + value: `${visit.member.first_name} ${visit.member.last_name} <${visit.member.email}>`, + at: moment(visit.created_at), + })) }); + }); + } + + handleUpdate(text, dataSource) { + const self = this; + self.setState({ searchText: text }); + fetch(`/members/search/${text}/`) .then((response) => { - if (response.status === 200) - return response.json(); + 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.'}) - } - }) - } + 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.' }); + } + }); + } + + signIn() { + const purpose = this.state.signOn.purpose; + const member = this.state.signOn.member; - signIn () { - const purpose = this.state.signOn.purpose; - const member = this.state.signOn.member; + 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', + } }) + .then((response) => { + if (response.status === 201) { + return response.json(); + } + }) + .then((data) => { + const signedIn = this.state.signedIn; + const parsedData = JSON.parse(data); - 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: [] - }) + signedIn.push({ ...member, purpose, at: moment(parsedData.results.created_at) }); + this.setState({ + ...this.state, + signedIn, + signOn: { purpose: 'FIX', member: undefined }, + searchText: '', + members: [], }); - } else { - this.setState({...this.state, error: 'Member already signed in.'}) - } + }); + } else { + this.setState({ ...this.state, error: 'Member already signed in.' }); } + } - chooseMember (chosenRequest, index) { - console.log(index); - const member = this.state.members[index]; - const purpose = this.state.signOn.purpose; + chooseMember(chosenRequest, 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, dataSource) { - this.setState({searchText: searchText}) - } + onUpdateSearchText(searchText) { + this.setState({ searchText }); + } - render () { - return ( -
- -
- -
- -
-
- -
- ); - } -} \ No newline at end of file + handlePurposeChoice(event, index, value) { + this.setState({ ...this.state, signOn: { ...this.state.signOn, purpose: value } }); + } + + render() { + return ( +
+
+
+

Sign-in

+

{moment().format('MMM DD, YYYY')}

+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ ); + } +}