More reduxy

7 years ago · 1e5abbbf2c
5 changed files with 74 additions and 67 deletions
--- a/bikeshop_project/assets/js/bikes/actions.js
+++ b/bikeshop_project/assets/js/bikes/actions.js
@ -7,4 +7,6 @@ export const setBikesFetched = createAction('set bikes.fetched');
 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 setBikeSaveFailed = createAction('set bike.isSaving');
+export const editBike = createAction('edit bike');
+export const createBike = createAction('create bike');
--- a/bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx
+++ b/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,
 }

--- a/bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx
+++ b/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>
-        <Dialog
-          title={title}
-          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;
+    return (
+      <Dialog
+        title='Bike'
+        open={this.props.open}
+        autoScrollBodyContent
+      >
+          <BikeForm
+            enableReinitialize
+          />
+      }
+      </Dialog>
+    )
  }
 }

 BikeModal.propTypes = {
  open: PropTypes.bool,
-  bike: PropTypes.object,
 };

 export default BikeModal;
--- a/bikeshop_project/assets/js/bikes/components/BikeTable/index.jsx
+++ b/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);
--- a/bikeshop_project/assets/js/bikes/reducers.js
+++ b/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 });