From 6b5be334955ca3698aa1a82cef26e0ae21afe9f1 Mon Sep 17 00:00:00 2001 From: Drew Larson Date: Sat, 1 Apr 2017 13:49:23 -0600 Subject: [PATCH] Initial values loaded. --- bikeshop_project/assets/js/bikes/actions.js | 3 + .../js/bikes/components/BikeForm/index.jsx | 4 +- .../js/bikes/components/BikeModal/index.jsx | 68 +++++++------------ .../js/bikes/components/BikeTable/index.jsx | 62 +++++++---------- bikeshop_project/assets/js/bikes/reducers.js | 4 +- bikeshop_project/assets/js/bikes/sagas.js | 12 +++- .../assets/js/bikes/services/index.js | 14 ++++ 7 files changed, 84 insertions(+), 83 deletions(-) diff --git a/bikeshop_project/assets/js/bikes/actions.js b/bikeshop_project/assets/js/bikes/actions.js index d944ed6..8721491 100644 --- a/bikeshop_project/assets/js/bikes/actions.js +++ b/bikeshop_project/assets/js/bikes/actions.js @@ -5,3 +5,6 @@ export const setBikes = createAction('set bikes'); export const setBikesIsFetching = createAction('set bikes.isFetching'); 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 diff --git a/bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx b/bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx index 60535ec..7fddd74 100644 --- a/bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx +++ b/bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx @@ -326,7 +326,7 @@ BikeForm = reduxForm({ BikeForm = connect( state => ({ - initialValues: state.bike, // pull initial values from account reducer + initialValues: state.bikes.entities['1'], // pull initial values from account reducer }), )(BikeForm); @@ -335,5 +335,7 @@ BikeForm.propTypes = { handleClose: PropTypes.func, } + + export default BikeForm; diff --git a/bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx b/bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx index 80cce25..8a2d547 100644 --- a/bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx +++ b/bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx @@ -9,59 +9,41 @@ import BikeForm from '../BikeForm'; class BikeModal extends React.Component { constructor(props) { super(props); - - this.state = { - open: props.open, - bike: undefined, - editing: props.editing, - }; - } - - componentWillReceiveProps(newProps) { - this.setState({ - ...this.state, - open: newProps.open || false, - bike: newProps.bike || undefined, - editing: newProps.editing || false, - }); } - handleClose() { - this.setState({ open: false }); - }; - render() { - const title = this.state.bike && this.state.bike.stolen ? - (
-

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

-

STOLEN

-
) : -

Edit Bike

; - - return (
- - { this.state.bike ? - : -
Unable to edit bike.
+ if (this.props.bike) { + const title = ( +
+

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

+
+ ); + + return (
+ + { this.props.bike ? + : +
Unable to edit bike.
} - -
); + +
); + } + + return null; } } BikeModal.propTypes = { open: PropTypes.bool, bike: PropTypes.object, - editing: PropTypes.bool, }; 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 fbd909d..fb9eac8 100644 --- a/bikeshop_project/assets/js/bikes/components/BikeTable/index.jsx +++ b/bikeshop_project/assets/js/bikes/components/BikeTable/index.jsx @@ -8,67 +8,55 @@ import { friendlySize } from '../Size'; import BikeModal from '../BikeModal'; import { fetchBikes, setBike } from '../../actions'; -const renderBikes = (bikes) => { - console.log(bikes); - const bikeRows = bikes.map(bike => ( - - {friendlySize(bike.size)} - {bike.colour} - {bike.make} - {bike.serial_number} - {bike.state} - {bike.claimed_by} - - - )); - return bikeRows; -} - class BikeTableComponent extends React.Component { constructor(props) { super(props); this.state = { - bikes: [], bikeModal: { open: false, bike: undefined, - editing: false, }, }; - this.handleEditBike = this.handleEditBike.bind(this); + this.handleOpen = this.handleOpen.bind(this); + this.renderBikes = this.renderBikes.bind(this); } componentDidMount() { this.props.fetchBikes(); } - handleEditBike(bike) { + handleOpen(id) { this.setState({ ...this.state, bikeModal: { + ...this.state.bikeModal, open: true, - bike, - editing: true, + bike: id, }, }); } - handleAddBike() { - this.setState({ - ...this.state, - bikeModal: { - open: true, - bike: {}, - editing: false, - }, - }); - } + renderBikes(bikes) { + const bikeRows = bikes.map(bike => ( + + {friendlySize(bike.size)} + {bike.colour} + {bike.make} + {bike.serial_number} + {bike.state} + {bike.claimed_by} + this.handleOpen(bike.id)} /> + + )); + + return bikeRows; +} render() { if (this.props.bikes.fetched) { - const bikeRows = renderBikes(Object.values(this.props.bikes.entities)); + const bikeRows = this.renderBikes(Object.values(this.props.bikes.entities)); return (
@@ -98,6 +86,11 @@ class BikeTableComponent extends React.Component {
+
); } @@ -114,9 +107,6 @@ const mapDispatchToProps = dispatch => ({ fetchBikes: () => { dispatch(fetchBikes()); }, - setBike: (id) => { - dispatch(setBike(id)); - }, }); 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 8b9a351..3a7a33b 100644 --- a/bikeshop_project/assets/js/bikes/reducers.js +++ b/bikeshop_project/assets/js/bikes/reducers.js @@ -17,7 +17,7 @@ export default handleActions({ [setBikesFetchFailed]: (state, action) => ({ ...state, fetchFailed: { - message: action.payload - } + message: action.payload, + }, }), }, { entities: {}, isFetching: false, fetched: false, fetchFailed: undefined }); diff --git a/bikeshop_project/assets/js/bikes/sagas.js b/bikeshop_project/assets/js/bikes/sagas.js index 0413277..83f208f 100644 --- a/bikeshop_project/assets/js/bikes/sagas.js +++ b/bikeshop_project/assets/js/bikes/sagas.js @@ -1,5 +1,6 @@ import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'; -import { fetchBikes as fetchBikesAction, setBikes, setBikesIsFetching, setBikesFetched, setBikesFetchFailed } from './actions'; +import { fetchBikes as fetchBikesAction, setBikes, setBikesIsFetching, setBikesFetched, + setBikesFetchFailed, setBikeSaved, setBikeSaveFailed, setBikeIsSaving } from './actions'; import { normalize } from 'normalizr'; import * as schema from './schema'; import Api from './services'; @@ -24,4 +25,13 @@ function* watchFetchBikes() { yield takeEvery(fetchBikesAction.toString(), fetchBikes); } +// function *saveBike(action) { +// try { +// yield put({ type: setBikeIsSaving.toString(), payload: true }); +// const bike = yield call(Api.saveBike(action.payload)); +// yield put({ type: setBikes.toString(), payload: normalize([state])}) +// yield put({ type: setBikeSaved, payload: true}) +// } +// } + export default watchFetchBikes; diff --git a/bikeshop_project/assets/js/bikes/services/index.js b/bikeshop_project/assets/js/bikes/services/index.js index 27d22d9..2162c0a 100644 --- a/bikeshop_project/assets/js/bikes/services/index.js +++ b/bikeshop_project/assets/js/bikes/services/index.js @@ -21,6 +21,20 @@ const Api = { .then(data => data) .catch((error) => { console.log('request failed', error); + throw error; + }); + }, + saveBike(id) { + return fetch(`/api/v1/bike/${id}`, { + credentials: 'same-origin', + method: 'PUT', + }) + .then(checkStatus) + .then(parseJson) + .then(data => data) + .catch((error) => { + console.log('request failed', error); + throw error; }); }, };