From 1e5abbbf2cdebec0225dfe613a335d9928420091 Mon Sep 17 00:00:00 2001 From: Drew Larson Date: Sun, 9 Apr 2017 13:48:13 -0600 Subject: [PATCH] More reduxy --- bikeshop_project/assets/js/bikes/actions.js | 4 +- .../js/bikes/components/BikeForm/index.jsx | 67 ++++++++++--------- .../js/bikes/components/BikeModal/index.jsx | 39 ++++------- .../js/bikes/components/BikeTable/index.jsx | 13 ++-- bikeshop_project/assets/js/bikes/reducers.js | 18 ++++- 5 files changed, 74 insertions(+), 67 deletions(-) diff --git a/bikeshop_project/assets/js/bikes/actions.js b/bikeshop_project/assets/js/bikes/actions.js index 8721491..c294f2f 100644 --- 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'); \ No newline at end of file +export const setBikeSaveFailed = createAction('set bike.isSaving'); +export const editBike = createAction('edit bike'); +export const createBike = createAction('create bike'); \ No newline at end of file diff --git a/bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx b/bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx index 7fddd74..c645028 100644 --- 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 (
@@ -220,13 +220,12 @@ class BikeForm extends React.Component { fullWidth />
- {editing && + {!create &&
}
- {editing && + {!create &&
@@ -259,10 +257,15 @@ class BikeForm extends React.Component {
} - {editing && + {!create &&
- +
- +
} @@ -292,11 +294,10 @@ class BikeForm extends React.Component { {sourceMenuItems}
- {editing && + {!create &&
({ - 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, } diff --git a/bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx b/bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx index 8a2d547..de682f4 100644 --- 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 = ( -
-

{this.props.bike ? 'Edit Bike' : 'Add Bike'}

-
- ); - - return (
- - { this.props.bike ? - : -
Unable to edit bike.
- } - -
); - } - - return null; + return ( + + + } + + ) } } BikeModal.propTypes = { open: PropTypes.bool, - bike: PropTypes.object, }; export default BikeModal; diff --git a/bikeshop_project/assets/js/bikes/components/BikeTable/index.jsx b/bikeshop_project/assets/js/bikes/components/BikeTable/index.jsx index fb9eac8..027f6b0 100644 --- 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 { {bike.serial_number} {bike.state} {bike.claimed_by} - this.handleOpen(bike.id)} /> + this.handleOpen(bike)} /> )); @@ -88,8 +88,6 @@ class BikeTableComponent extends React.Component {
); @@ -107,6 +105,9 @@ const mapDispatchToProps = dispatch => ({ fetchBikes: () => { dispatch(fetchBikes()); }, + editBike: (bike) => { + dispatch(editBike(bike)); + } }); const BikeTable = connect(mapStateToProps, mapDispatchToProps)(BikeTableComponent); diff --git a/bikeshop_project/assets/js/bikes/reducers.js b/bikeshop_project/assets/js/bikes/reducers.js index 3a7a33b..c7d67e9 100644 --- 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 });