More reduxy

bikeshop_project/assets/js/bikes/actions.js

@@ -8,3 +8,5 @@ export const setBikesFetchFailed = createAction('set bikes.fetchFailed');
 export const setBikeSaved = createAction('set bike.saved');
 export const setBikeIsSaving = createAction('set bike.isSaving');
 export const setBikeSaveFailed = createAction('set bike.isSaving');
+export const editBike = createAction('edit bike');
+export const createBike = createAction('create bike');

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

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { Field, reduxForm } from 'redux-form';
+import { Field, formValueSelector, reduxForm } from 'redux-form';
 import { connect } from 'react-redux';
 import Checkbox from 'material-ui/Checkbox';
 import Cookies from 'js-cookie';
@@ -87,9 +87,9 @@ const validate = (values) => {
 const handleSubmit = data => false;
 
 class BikeForm extends React.Component {
-  constructor({ bike, editing = false }) {
+  constructor({ bike, create }) {
     super();
-    if (editing) {
+    if (!create) {
       this.state = {
         bike,
       };
@@ -139,11 +139,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/';
+    const url = this.props.create ? `/api/v1/bikes/${id}/` : '/api/v1/bikes/';
 
     fetch(url, {
       credentials: 'same-origin',
-      method: this.props.editing ? 'PUT' : 'POST',
+      method: this.props.create ? 'PUT' : 'POST',
       headers: {
         'Content-Type': 'application/json',
         'X-CSRFToken': csrfToken,
@@ -160,20 +160,20 @@ class BikeForm extends React.Component {
   }
 
   render() {
-    const timezone = moment.tz.guess();
-    const {
-      claimed_at,
-      claimed_by,
-      cpic_searched_at,
-      created_at,
-      stolen,
-      checked,
-    } = 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)
-        .fromNow() : '';
+    // const timezone = moment.tz.guess();
+    // const {
+    //   claimed_at,
+    //   claimed_by,
+    //   cpic_searched_at,
+    //   created_at,
+    //   stolen,
+    //   checked,
+    // } = this.props.bike || {};
+    const create = this.props.create;
+    // 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)
+    //     .fromNow() : '';
 
     return (
       <div>
@@ -220,13 +220,12 @@ class BikeForm extends React.Component {
                 fullWidth
               />
             </div>
-            {editing &&
+            {!create &&
               <div className="mdl-cell mdl-cell--6-col">
                 <Field
                   name="created_at"
                   component={renderTextField}
                   floatingLabelText="Created at"
-                  value={createdAtFormatted}
                   fullWidth
                   readOnly
                   disabled
@@ -234,14 +233,13 @@ class BikeForm extends React.Component {
               </div>
             }
           </div>
-          {editing &&
+          {!create &&
             <div className="mdl-grid">
               <div className="mdl-cell mdl-cell--6-col">
                 <Field
                   name="claimed_at"
                   component={renderTextField}
                   floatingLabelText="Claimed on"
-                  value={claimedAtFormatted}
                   fullWidth
                   disabled
                 />
@@ -259,10 +257,15 @@ class BikeForm extends React.Component {
             </div>
           }
 
-          {editing &&
+          {!create &&
             <div className="content-grid mdl-grid" style={styles.bottom}>
               <div className="mdl-cell mdl-cell--6-col">
-                <TextField floatingLabelText="CPIC searched" value={cpicSearchedAtFormatted} disabled />
+                <Field
+                  name="cpic_searched_at"
+                  component={renderTextField}
+                  floatingLabelText="CPIC searched"
+                  disabled
+                />
               </div>
               <div className="mdl-cell mdl-cell--4-col">
                 <Field
@@ -271,13 +274,12 @@ class BikeForm extends React.Component {
                   label="Stolen"
                   labelPosition="left"
                   style={styles.checkbox}
-                  checked={stolen}
                   disabled
                   readOnly
                 />
               </div>
               <div className="mdl-cell mdl-cell--2-col">
-                <FlatButton label="Check" onTouchTap={this.handleCpicCheck} disabled={moment(cpic_searched_at).isValid()} primary />
+                <FlatButton label="Check" onTouchTap={this.handleCpicCheck} disabled={this.props.cpic_searched} primary />
               </div>
             </div>
           }
@@ -292,11 +294,10 @@ class BikeForm extends React.Component {
                 {sourceMenuItems}
               </Field>
             </div>
-            {editing &&
+            {!create &&
               <div className="mdl-cell mdl-cell--4-col">
                 <div style={styles.block}>
                   <Field
-                    checked={checked}
                     name="stripped"
                     label="Stripped"
                     labelPosition="left"
@@ -324,14 +325,18 @@ BikeForm = reduxForm({
   validate,
 })(BikeForm);
 
+const selector = formValueSelector('BikeForm')
+
 BikeForm = connect(
   state => ({
-    initialValues: state.bikes.entities['1'],  // pull initial values from account reducer
+    initialValues: state.bikes.form.bike,  // pull initial values from account reducer
+    create: state.bikes.form.create,
+    cpic_searched: selector(state.bikes.form.bike, 'cpic_searched_at'),
   }),
 )(BikeForm);
 
 BikeForm.propTypes = {
-  editing: PropTypes.bool,
+  create: PropTypes.bool,
   handleClose: PropTypes.func,
 }
 

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

@@ -12,38 +12,23 @@ class BikeModal extends React.Component {
   }
 
   render() {
-    if (this.props.bike) {
-      const title = (
-        <div>
-          <h3>{this.props.bike ? 'Edit Bike' : 'Add Bike'}</h3>
-        </div>
-    );
-
-      return (<div>
+    return (
       <Dialog
-          title={title}
+        title='Bike'
         open={this.props.open}
         autoScrollBodyContent
       >
-          { this.props.bike ?
           <BikeForm
             enableReinitialize
-              bike={this.props.bike}
-              bikes={this.props.bikes}
-            /> :
-            <div>Unable to edit bike.</div>
+          />
       }
       </Dialog>
-      </div>);
-    }
-
-    return null;
+    )
   }
 }
 
 BikeModal.propTypes = {
   open: PropTypes.bool,
-  bike: PropTypes.object,
 };
 
 export default BikeModal;

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

@@ -6,7 +6,7 @@ import ContentAdd from 'material-ui/svg-icons/content/add';
 import React from 'react';
 import { friendlySize } from '../Size';
 import BikeModal from '../BikeModal';
-import { fetchBikes, setBike } from '../../actions';
+import { fetchBikes, setBike, editBike } from '../../actions';
 
 class BikeTableComponent extends React.Component {
   constructor(props) {
@@ -27,15 +27,15 @@ class BikeTableComponent extends React.Component {
     this.props.fetchBikes();
   }
 
-  handleOpen(id) {
+  handleOpen(bike) {
     this.setState({
       ...this.state,
       bikeModal: {
         ...this.state.bikeModal,
         open: true,
-        bike: id,
       },
     });
+   this.props.editBike(bike);
   }
 
   renderBikes(bikes) {
@@ -47,7 +47,7 @@ class BikeTableComponent extends React.Component {
       <TableRowColumn>{bike.serial_number}</TableRowColumn>
       <TableRowColumn>{bike.state}</TableRowColumn>
       <TableRowColumn>{bike.claimed_by}</TableRowColumn>
-      <TableRowColumn><FlatButton label="Edit" primary onTouchTap={(e) => this.handleOpen(bike.id)} /></TableRowColumn>
+      <TableRowColumn><FlatButton label="Edit" primary onTouchTap={(e) => this.handleOpen(bike)} /></TableRowColumn>
     </TableRow>
     ));
 
@@ -88,8 +88,6 @@ class BikeTableComponent extends React.Component {
           </div>
           <BikeModal
             open={this.state.bikeModal.open}
-            bike={this.state.bikeModal.bike}
-            bikes={this.props.bikes.entities}
           />
         </div>
       );
@@ -107,6 +105,9 @@ const mapDispatchToProps = dispatch => ({
   fetchBikes: () => {
     dispatch(fetchBikes());
   },
+  editBike: (bike) => {
+    dispatch(editBike(bike));
+  }
 });
 
 const BikeTable = connect(mapStateToProps, mapDispatchToProps)(BikeTableComponent);

bikeshop_project/assets/js/bikes/reducers.js

@@ -1,4 +1,4 @@
-import { setBikes, setBikesFetched, setBikesIsFetching, setBikesFetchFailed } from './actions';
+import { setBikes, setBikesFetched, setBikesIsFetching, setBikesFetchFailed, createBike, editBike } from './actions';
 import { handleActions } from 'redux-actions';
 
 export default handleActions({
@@ -20,4 +20,18 @@ export default handleActions({
       message: action.payload,
     },
   }),
-}, { entities: {}, isFetching: false, fetched: false, fetchFailed: undefined });
+  [editBike]: (state, action) => ({
+    ...state,
+    form: {
+      bike: action.payload,
+      create: false,
+    },
+  }),
+  [createBike]: (state, action) => ({
+    ...state,
+    form: {
+      bike: null,
+      create: true,
+    },
+  }),
+}, { entities: {}, form: { bike: null, create: undefined }, isFetching: false, fetched: false, fetchFailed: undefined });