Support for adding a new bike.

bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx

@@ -22,11 +22,17 @@ const styles = {
 };
 
 class BikeForm extends React.Component {
-  constructor({ bike }) {
+  constructor({ bike, editing = false }) {
     super();
-    this.state = {
+    if (editing) {
-      bike,
+      this.state = {
-    };
+        bike,
+      };
+    } else {
+      this.state = {
+        bike: {},
+      };
+    }
 
     this.handleChange = this.handleChange.bind(this);
     this.handleSizeChange = this.handleSizeChange.bind(this);
@@ -74,10 +80,11 @@ class BikeForm extends React.Component {
     const id = this.state.bike.id;
     const data = JSON.stringify(this.state.bike);
     const csrfToken = Cookies.get('csrftoken');
+    const url = this.props.editing ? `/api/v1/bikes/${id}/` : '/api/v1/bikes/';
 
-    fetch(`/api/v1/bikes/${id}/`, {
+    fetch(url, {
       credentials: 'same-origin',
-      method: 'PUT',
+      method: this.props.editing ? 'PUT' : 'POST',
       headers: {
         'Content-Type': 'application/json',
         'X-CSRFToken': csrfToken,
@@ -99,7 +106,8 @@ class BikeForm extends React.Component {
       cpic_searched_at,
       created_at,
       stolen,
-    } = this.state.bike;
+    } = this.props.bike;
+    const editing = this.props.editing;
     const createdAtFormatted = (moment(created_at).isValid()) ? moment(created_at).tz(timezone).fromNow() : '';
     const claimedAtFormatted = (moment(claimed_at).isValid()) ? moment(claimed_at).tz(timezone).fromNow() : '';
     const cpicSearchedAtFormatted = (moment(cpic_searched_at).isValid()) ? moment(cpic_searched_at).tz(timezone)
@@ -159,53 +167,60 @@ class BikeForm extends React.Component {
               required
             />
           </div>
-          <div className="mdl-cell mdl-cell--6-col">
+          {editing &&
-            <TextField
+            <div className="mdl-cell mdl-cell--6-col">
-              floatingLabelText="Created at"
+              <TextField
-              value={createdAtFormatted}
+                floatingLabelText="Created at"
-              fullWidth
+                value={createdAtFormatted}
-              readOnly
+                fullWidth
-              disabled
+                readOnly
-            />
+                disabled
-          </div>
+              />
-        </div>
+            </div>
-        <div className="mdl-grid">
+          }
-          <div className="mdl-cell mdl-cell--6-col">
-            <TextField
-              floatingLabelText="Claimed on"
-              value={claimedAtFormatted}
-              fullWidth
-              disabled
-            />
-          </div>
-          <div className="mdl-cell mdl-cell--6-col">
-            <TextField
-              floatingLabelText="Claimed by"
-              value={claimed_by}
-              fullWidth
-              disabled
-              readonly
-            />
-          </div>
         </div>
-        <div className="content-grid mdl-grid" style={styles.bottom}>
+        {editing &&
-          <div className="mdl-cell mdl-cell--6-col">
+          <div className="mdl-grid">
-            <TextField floatingLabelText="CPIC searched" value={cpicSearchedAtFormatted} />
+            <div className="mdl-cell mdl-cell--6-col">
-          </div>
+              <TextField
-          <div className="mdl-cell mdl-cell--4-col">
+                floatingLabelText="Claimed on"
-            <Checkbox
+                value={claimedAtFormatted}
-              name="stolen"
+                fullWidth
-              label="Stolen"
+                disabled
-              labelPosition="left"
+              />
-              style={styles.checkbox}
+            </div>
-              checked={stolen}
+            <div className="mdl-cell mdl-cell--6-col">
-              disabled
+              <TextField
-            />
+                floatingLabelText="Claimed by"
+                value={claimed_by}
+                fullWidth
+                disabled
+                readonly
+              />
+            </div>
           </div>
-          <div className="mdl-cell mdl-cell--2-col">
+        }
-            <FlatButton label="Check" onTouchTap={this.handleCpicCheck} disabled={!!cpic_searched_at} primary />
+
+        {editing &&
+          <div className="content-grid mdl-grid" style={styles.bottom}>
+            <div className="mdl-cell mdl-cell--6-col">
+              <TextField floatingLabelText="CPIC searched" value={cpicSearchedAtFormatted} disabled />
+            </div>
+            <div className="mdl-cell mdl-cell--4-col">
+              <Checkbox
+                name="stolen"
+                label="Stolen"
+                labelPosition="left"
+                style={styles.checkbox}
+                checked={stolen}
+                disabled
+              />
+            </div>
+            <div className="mdl-cell mdl-cell--2-col">
+              <FlatButton label="Check" onTouchTap={this.handleCpicCheck} disabled={!!cpic_searched_at} primary />
+            </div>
           </div>
-        </div>
+        }
         <div className="mdl-grid" style={styles.bottom}>
           <div className="mdl-cell mdl-cell--8-col">
             <Source
@@ -213,18 +228,20 @@ class BikeForm extends React.Component {
               onChange={this.handleSourceChange}
             />
           </div>
-          <div className="mdl-cell mdl-cell--4-col">
+          {editing &&
-            <div style={styles.block}>
+            <div className="mdl-cell mdl-cell--4-col">
-              <Checkbox
+              <div style={styles.block}>
-                checked={this.state.bike.stripped}
+                <Checkbox
-                name="stripped"
+                  checked={this.state.bike.stripped}
-                label="Stripped"
+                  name="stripped"
-                labelPosition="left"
+                  label="Stripped"
-                style={styles.checkbox}
+                  labelPosition="left"
-                onCheck={this.handleChange}
+                  style={styles.checkbox}
-              />
+                  onCheck={this.handleChange}
+                />
+              </div>
             </div>
-          </div>
+          }
         </div>
         <div className="mdl-grid">
           <div className="mdl-cell right">

bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx

@@ -9,6 +9,7 @@ import BikeForm from '../BikeForm';
 export default class BikeModal extends React.Component {
   static propTypes = {
     open: PropTypes.bool,
+    editing: PropTypes.bool,
   }
 
   constructor(props) {
@@ -17,11 +18,17 @@ export default class BikeModal extends React.Component {
     this.state = {
       open: props.open,
       bike: undefined,
+      editing: props.editing,
     };
   }
 
-  componentWillReceiveProps(newProps) {
+  componentWillReceiveProps = (newProps) => {
-    this.setState({ open: newProps.open || false, bike: newProps.bike || false });
+    this.setState({
+      ...this.state,
+      open: newProps.open || false,
+      bike: newProps.bike || undefined,
+      editing: newProps.editing || false,
+    });
   }
 
   handleClose = () => {
@@ -45,7 +52,7 @@ export default class BikeModal extends React.Component {
 
     const title = this.state.bike && this.state.bike.stolen ?
       (<div>
-        <h3>Edit Bike</h3>
+        <h3>{this.props.editing ? 'Edit Bike' : 'Add Bike'}</h3>
         <h4>STOLEN</h4>
       </div>) :
       <h3>Edit Bike</h3>;
@@ -58,7 +65,7 @@ export default class BikeModal extends React.Component {
         open={this.state.open}
         autoScrollBodyContent
       >
-        { this.state.bike ? <BikeForm bike={this.state.bike} /> : <div>Unable to edit bike.</div>}
+        { this.state.bike ? <BikeForm bike={this.state.bike} editing={this.state.editing} /> : <div>Unable to edit bike.</div>}
       </Dialog>
     </div>);
   }

bikeshop_project/assets/js/bikes/components/BikeTable/index.jsx

@@ -2,6 +2,8 @@ import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowCol
 import Cookies from 'js-cookie';
 import fetch from 'isomorphic-fetch';
 import FlatButton from 'material-ui/FlatButton';
+import FloatingActionButton from 'material-ui/FloatingActionButton';
+import ContentAdd from 'material-ui/svg-icons/content/add';
 import React from 'react';
 import { friendlySize } from '../Size';
 import BikeModal from '../BikeModal';
@@ -28,6 +30,7 @@ export default class BikeTable extends React.Component {
       bikeModal: {
         open: false,
         bike: undefined,
+        editing: false,
       },
     };
 
@@ -35,7 +38,6 @@ export default class BikeTable extends React.Component {
   }
 
   componentDidMount() {
-
     fetch('/api/v1/bikes/', {
       credentials: 'same-origin',
     })
@@ -51,12 +53,23 @@ export default class BikeTable extends React.Component {
   }
 
   handleEditBike(bike) {
-    console.log('Bike edit!');
     this.setState({
       ...this.state,
       bikeModal: {
         open: true,
         bike,
+        editing: true,
+      },
+    });
+  }
+
+  handleAddBike = () => {
+    this.setState({
+      ...this.state,
+      bikeModal: {
+        open: true,
+        bike: {},
+        editing: false,
       },
     });
   }
@@ -78,6 +91,9 @@ export default class BikeTable extends React.Component {
       <div className="mdl-grid">
         <div className="mdl-cell mdl-cell--12-col">
           <h3>Bikes</h3>
+          <FloatingActionButton onTouchTap={this.handleAddBike}>
+            <ContentAdd />
+          </FloatingActionButton>
           <Table selectable={false}>
             <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
               <TableRow>
@@ -99,7 +115,11 @@ export default class BikeTable extends React.Component {
             }
             </TableBody>
           </Table>
-          <BikeModal bike={this.state.bikeModal.bike} open={this.state.bikeModal.open} />
+          <BikeModal
+            bike={this.state.bikeModal.bike}
+            open={this.state.bikeModal.open}
+            editing={this.state.bikeModal.editing}
+          />
         </div>
       </div>
     );