Browse Source

Big refactor and I should have done this better.

feature/python-error-tracking
Drew Larson 8 years ago
parent
commit
aa2a96b906
  1. 1
      bikeshop_project/assets/js/components/Member.jsx
  2. 1
      bikeshop_project/assets/js/components/Purpose.jsx
  3. 239
      bikeshop_project/assets/js/components/SignIn.jsx

1
bikeshop_project/assets/js/components/Member.jsx

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

1
bikeshop_project/assets/js/components/Purpose.jsx

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

239
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 React from 'react';
import RaisedButton from 'material-ui/RaisedButton'; import RaisedButton from 'material-ui/RaisedButton';
import { polyFill } from 'es6-promise'; import { polyFill } from 'es6-promise';
import fetch from 'isomorphic-fetch';
import Purpose from './Purpose'; import Purpose from './Purpose';
import Member from './Member'; import Member from './Member';
import SignedInList from './SignedInList'; import SignedInList from './SignedInList';
import moment from 'moment';
export default class SignIn extends React.Component { 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: [],
.then((data) => { searchText: '',
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)
}
})})
})
}
handlePurposeChoice (event, index, value) { this.handleUpdate = this.handleUpdate.bind(this);
this.setState({...this.state, signOn: {...this.state.signOn, purpose: value}}); this.signIn = this.signIn.bind(this);
} this.chooseMember = this.chooseMember.bind(this);
this.handlePurposeChoice = this.handlePurposeChoice.bind(this);
}
handleUpdate (text, dataSource) { componentDidMount() {
const self = this; fetch('/members/signin/')
self.setState({searchText: text}) .then(response => response.json())
fetch(`/members/search/${text}/`) .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) => { .then((response) => {
if (response.status === 200) if (response.status === 200) {
return response.json(); return response.json();
}
}) })
.then((data) => { .then((data) => {
if (data.results.length > 0) { if (data.results.length > 0) {
self.setState({ self.setState({
...this.state, ...this.state,
error: '', 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.' });
} else { }
self.setState({...this.state, error: 'Member not found.'}) });
} }
})
} signIn() {
const purpose = this.state.signOn.purpose;
const member = this.state.signOn.member;
signIn () { if (!this.state.signedIn.find(signedInMember => signedInMember.id === member.id)) {
const purpose = this.state.signOn.purpose; fetch('/members/signin/', {
const member = this.state.signOn.member; 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})) { signedIn.push({ ...member, purpose, at: moment(parsedData.results.created_at) });
fetch('/members/signin/', { this.setState({
method: 'post', ...this.state,
body: `id=${member.id}&purpose=${purpose}`, signedIn,
headers: { signOn: { purpose: 'FIX', member: undefined },
'Content-Type': 'application/x-www-form-urlencoded' searchText: '',
} members: [],
}).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.'}) } else {
} 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 member = this.state.members[index]; const purpose = this.state.signOn.purpose;
const purpose = this.state.signOn.purpose;
this.setState({...this.state, signOn: {member, purpose}}); this.setState({ ...this.state, signOn: { member, purpose } });
} }
onUpdateSearchText(searchText, dataSource) { onUpdateSearchText(searchText) {
this.setState({searchText: searchText}) this.setState({ searchText });
} }
render () { handlePurposeChoice(event, index, value) {
return ( this.setState({ ...this.state, signOn: { ...this.state.signOn, purpose: value } });
<div> }
<Member
handleUpdate={this.handleUpdate} render() {
signIn={this.chooseMember} return (
error={this.state.error} <div>
members={this.state.members} <div className="mdl-grid">
searchText={this.state.searchText} <div className="mdl-cell--12-col mdl-cell">
/> <h1 className="mdl-typography--display-4">Sign-in</h1>
<br /> <h2 className="mdl-typography--display-3">{moment().format('MMM DD, YYYY')}</h2>
<Purpose handleChange={this.handlePurposeChoice} default={this.state.signOn.purpose} /> </div>
<div> </div>
<RaisedButton onClick={this.signIn} label="Sign-in" /> <div className="mdl-grid">
</div> <div className="mdl-cell--8-col mdl-cell">
<br /> <Member
<SignedInList members={this.state.signedIn} /> handleUpdate={this.handleUpdate}
</div> 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>
);
}
} }
Loading…
Cancel
Save