After sign-in modal (#58)

bikeshop_project/assets/js/components/SignIn.jsx

@@ -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>
     );
   }

bikeshop_project/registration/views.py

@@ -1,6 +1,7 @@
 import json
 
 from django.contrib.auth.decorators import login_required
+from django.core.exceptions import ObjectDoesNotExist
 from django.core.urlresolvers import reverse
 from django.http import HttpResponse, HttpResponseRedirect, JsonResponse
 from django.shortcuts import get_object_or_404
@@ -13,7 +14,7 @@ from rest_framework import viewsets
 from rest_framework.renderers import JSONRenderer
 from rest_framework.serializers import ModelSerializer
 
-from core.models import Visit
+from core.models import Visit, Membership
 from registration.utils import signin_member, get_signed_in_members
 from .serializers import MemberSerializer
 from .forms import MemberForm
@@ -83,9 +84,16 @@ class MemberSignIn(View):
     def post(self, request):
         member = get_object_or_404(Member, id=request.POST.get('id'))
         visit = signin_member(member, request.POST.get('purpose'))
+        try:
+            membership = Membership.objects.select_related('payment').filter(member=member).last()
+        except ObjectDoesNotExist:
+            membership = None
+        membership_dict = dict(renewed_at=membership.renewed_at, payment=membership.payment.type,
+                               expires_at=membership.expires_at) if membership else None
         data = dict(results=dict(id=member.id, first_name=member.first_name, last_name=member.last_name,
                                  suspended=member.suspended, banned=member.banned,
-                                 created_at=visit.created_at.isoformat()))
+                                 created_at=visit.created_at.isoformat(), notes=member.notes,
+                                 membership=membership_dict))
 
         return JsonResponse(data=data, safe=False, status=201)