|
|
@ -2,11 +2,21 @@ import fetch from 'isomorphic-fetch'; |
|
|
|
import moment from 'moment'; |
|
|
|
import React from 'react'; |
|
|
|
import RaisedButton from 'material-ui/RaisedButton'; |
|
|
|
import Dialog from 'material-ui/Dialog'; |
|
|
|
|
|
|
|
import Member from './Member'; |
|
|
|
import Purpose from './Purpose'; |
|
|
|
import SignedInList from './SignedInList'; |
|
|
|
|
|
|
|
const renderMemberStatus = member => { |
|
|
|
if (member.banned) { |
|
|
|
return <h5>Banned</h5>; |
|
|
|
} else if (member.suspended) { |
|
|
|
return <h2>Suspended</h2>; |
|
|
|
} |
|
|
|
return null; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export default class SignIn extends React.Component { |
|
|
|
constructor(props) { |
|
|
@ -18,9 +28,14 @@ export default class SignIn extends React.Component { |
|
|
|
error: '', |
|
|
|
signedIn: [], |
|
|
|
searchText: '', |
|
|
|
modal: { |
|
|
|
open: false, |
|
|
|
member: null |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
this.handleUpdate = this.handleUpdate.bind(this); |
|
|
|
this.handleClose = this.handleClose.bind(this); |
|
|
|
this.signIn = this.signIn.bind(this); |
|
|
|
this.chooseMember = this.chooseMember.bind(this); |
|
|
|
this.handlePurposeChoice = this.handlePurposeChoice.bind(this); |
|
|
@ -49,7 +64,7 @@ export default class SignIn extends React.Component { |
|
|
|
} |
|
|
|
|
|
|
|
chooseMember(chosenRequest, index) { |
|
|
|
const member = this.state.members[index]; |
|
|
|
const member = chosenRequest; |
|
|
|
const purpose = this.state.signOn.purpose; |
|
|
|
|
|
|
|
this.setState({ ...this.state, signOn: { member, purpose } }); |
|
|
@ -80,6 +95,27 @@ export default class SignIn extends React.Component { |
|
|
|
searchText: '', |
|
|
|
members: [], |
|
|
|
}); |
|
|
|
|
|
|
|
return parsedData.results; |
|
|
|
}).then(parsedData => { |
|
|
|
const {created_at, membership, ...rest} = parsedData |
|
|
|
const parsedMembership = membership ? { |
|
|
|
renewed_at: membership ? moment(membership.renewed_at) : undefined, |
|
|
|
expires_at: membership ? moment(membership.expires_at) : undefined, |
|
|
|
payment: membership ? membership.payment : undefined, |
|
|
|
} : null; |
|
|
|
this.setState(state => ({ |
|
|
|
...state, |
|
|
|
modal: { |
|
|
|
...state.modal, |
|
|
|
open: true, |
|
|
|
member: { |
|
|
|
...rest, |
|
|
|
created_at: moment(created_at), |
|
|
|
membership: parsedMembership, |
|
|
|
} |
|
|
|
} |
|
|
|
})) |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.setState({ ...this.state, error: 'Member already signed in.' }); |
|
|
@ -105,7 +141,10 @@ export default class SignIn extends React.Component { |
|
|
|
self.setState({ |
|
|
|
...this.state, |
|
|
|
error: '', |
|
|
|
members: data.results.map(result => ({ text: `${result.name}`, value: `${result.name} <${result.email}>`, id: result.id })), |
|
|
|
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.' }); |
|
|
@ -113,7 +152,18 @@ export default class SignIn extends React.Component { |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
handleClose() { |
|
|
|
this.setState(state => ({ |
|
|
|
...state, |
|
|
|
modal: { |
|
|
|
open: false, |
|
|
|
member: null, |
|
|
|
} |
|
|
|
})) |
|
|
|
} |
|
|
|
|
|
|
|
render() { |
|
|
|
const { member } = this.state.modal; |
|
|
|
return ( |
|
|
|
<div> |
|
|
|
<div className="mdl-grid"> |
|
|
@ -148,6 +198,38 @@ export default class SignIn extends React.Component { |
|
|
|
<div className="mdl-grid"> |
|
|
|
<SignedInList members={this.state.signedIn} /> |
|
|
|
</div> |
|
|
|
{this.state.modal.member && |
|
|
|
<Dialog |
|
|
|
title={`${member.first_name} ${member.last_name}`} |
|
|
|
open={this.state.modal.open} |
|
|
|
onRequestClose={this.handleClose} |
|
|
|
actions={[<RaisedButton primary onClick={this.handleClose} label="Close" />]} |
|
|
|
> |
|
|
|
<div> |
|
|
|
{renderMemberStatus(member)} |
|
|
|
</div> |
|
|
|
{ member.notes && |
|
|
|
<div> |
|
|
|
<h5>Notes</h5> |
|
|
|
<p>{member.notes}</p> |
|
|
|
</div> |
|
|
|
} |
|
|
|
<div> |
|
|
|
<h5>Membership Details</h5> |
|
|
|
{!member.membership |
|
|
|
? <strong>No membership 😿</strong> |
|
|
|
: <dl> |
|
|
|
<dt>Renewed</dt><dd>{member.membership.renewed_at.format('MMMM Do, YYYY')} ({member.membership.renewed_at.fromNow()})</dd> |
|
|
|
<dt>{member.membership.expires_at.isAfter() |
|
|
|
? 'Expires' |
|
|
|
: 'Expired'} |
|
|
|
</dt> |
|
|
|
<dd>{member.membership.expires_at.format('MMMM Do, YYYY')} ({member.membership.expires_at.fromNow()})</dd> |
|
|
|
</dl> |
|
|
|
} |
|
|
|
</div> |
|
|
|
</Dialog> |
|
|
|
} |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |
|
|
|