Add member notes (#35)

* Linting.

* Clean up.

* Hope this makes installs better.

* Rework edit member form with notes and banned and suspended.

* Add slack notifications.

* Display new member statuses.

* Update docker run command

migrate, collectstatic, and rebuild_index

* Formatting and only push when master.

* Don’t need this for an edit page.

* More meaningful action.

* Add testing requirements.

* Run tests during build.

* Use prod settings for testing.

* Nail down the order of those tests.

bikeshop_project/assets/js/components/SignIn.jsx

@@ -29,11 +29,14 @@ export default class SignIn extends React.Component {
   componentDidMount() {
     fetch('/members/signin/')
             .then(response => response.json())
-            .then((data) => {
-              const visits = JSON.parse(data);
+            .then((visits) => {
               this.setState({ signedIn: visits.map(visit => ({
                 id: visit.member.id,
+                banned: visit.member.banned,
+                suspended: visit.member.suspended,
                 purpose: visit.purpose,
+                first_name: visit.member.first_name,
+                last_name: visit.member.last_name,
                 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),
@@ -68,14 +71,11 @@ export default class SignIn extends React.Component {
               return response.json();
             }
           })
-          .then((data) => {
-            const signedIn = this.state.signedIn;
-            const parsedData = JSON.parse(data);
-
-            signedIn.push({ ...member, purpose, at: moment(parsedData.results.created_at) });
+          .then((parsedData) => {
             this.setState({
               ...this.state,
-              signedIn,
+              signedIn: [...this.state.signedIn,
+                { ...parsedData.results, purpose, at: moment(parsedData.results.created_at) }],
               signOn: { purpose: 'FIX', member: undefined },
               searchText: '',
               members: [],

bikeshop_project/assets/js/components/SignedInList.jsx

@@ -5,6 +5,33 @@ import React, { PropTypes } from 'react';
 import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
 import moment from 'moment';
 
+const styles = {
+  suspended: {
+    display: 'block',
+    padding: '10px',
+    background: 'yellow',
+    borderRadius: '5px',
+    textAlign: 'center',
+    color: 'black',
+  },
+  good: {
+    display: 'block',
+    padding: '10px',
+    background: 'green',
+    borderRadius: '5px',
+    textAlign: 'center',
+    color: 'white',
+  },
+  banned: {
+    display: 'block',
+    padding: '10px',
+    background: 'red',
+    borderRadius: '5px',
+    textAlign: 'center',
+    color: 'white',
+  },
+};
+
 export default class SignedInList extends React.Component {
   static propTypes = {
     members: PropTypes.arrayOf(PropTypes.shape({
@@ -40,14 +67,25 @@ export default class SignedInList extends React.Component {
 
   render() {
     const memberRows = this.sortMembers(this.props.members)
-        .map(member => (
-          <TableRow selectable={false} key={member.id}>
-            <TableRowColumn>{member.text}</TableRowColumn>
-            <TableRowColumn>{member.purpose}</TableRowColumn>
-            <TableRowColumn>{member.at.fromNow()}</TableRowColumn>
-            <TableRowColumn><a href={`/members/edit/${member.id}/`}>Profile</a></TableRowColumn>
-          </TableRow>
-        ));
+        .map((member) => {
+          let memberStatus = <span style={styles.good} className="good">good</span>;
+
+          if (member.banned) {
+            memberStatus = <span style={styles.banned} className="banned">banned</span>;
+          } else if (member.suspended) {
+            memberStatus = <span style={styles.suspended} className="suspended">suspended</span>;
+          }
+
+          return (
+            <TableRow selectable={false} key={member.id}>
+              <TableRowColumn>{member.first_name} {member.last_name}</TableRowColumn>
+              <TableRowColumn>{member.purpose}</TableRowColumn>
+              <TableRowColumn>{member.at.fromNow()}</TableRowColumn>
+              <TableRowColumn>{memberStatus}</TableRowColumn>
+              <TableRowColumn><a href={`/members/edit/${member.id}/`}>Profile</a></TableRowColumn>
+            </TableRow>
+          );
+        });
 
     return (
       <div className="mdl-cell mdl-cell--12-col">
@@ -57,11 +95,12 @@ export default class SignedInList extends React.Component {
         </FloatingActionButton>
         <Table selectable={false}>
           <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
-            <TableRow>
+            <TableRow key="blah">
               <TableHeaderColumn>Name</TableHeaderColumn>
               <TableHeaderColumn>Purpose</TableHeaderColumn>
               <TableHeaderColumn>Signed-in At</TableHeaderColumn>
-              <TableHeaderColumn/>
+              <TableHeaderColumn>Member Status</TableHeaderColumn>
+              <TableHeaderColumn />
             </TableRow>
           </TableHeader>
           <TableBody displayRowCheckbox={false}>