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 (
-
-
);
- }
-
- 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 });