mirror of
https://github.com/fspc/workstand.git
synced 2025-11-04 08:55:35 -05:00
Big refactor and I should have done this better.
This commit is contained in:
Drew Larson
parent
883cebac74
commit
aa2a96b906
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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()
|
||||
})
|
||||
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() {
|
||||
fetch('/members/signin/')
|
||||
.then(response => 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)
|
||||
}
|
||||
})})
|
||||
})
|
||||
}
|
||||
|
||||
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: []
|
||||
})
|
||||
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),
|
||||
})) });
|
||||
});
|
||||
} 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;
|
||||
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 => ({ 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) {
|
||||
this.setState({searchText: searchText})
|
||||
}
|
||||
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);
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<Member
|
||||
handleUpdate={this.handleUpdate}
|
||||
signIn={this.chooseMember}
|
||||
error={this.state.error}
|
||||
members={this.state.members}
|
||||
searchText={this.state.searchText}
|
||||
/>
|
||||
<br />
|
||||
<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>
|
||||
);
|
||||
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.' });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user