bike/workstand
1
0
Fork 0
mirror of https://github.com/fspc/workstand.git synced 2025-02-23 09:13:23 -05:00
Code Issues Projects Releases Wiki Activity

More reduxy

Browse Source
This commit is contained in:
Drew Larson 2017-04-09 13:48:13 -06:00
parent 3b26cf33a2
commit 1e5abbbf2c
5 changed files with 74 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
bikeshop_project/assets/js/bikes/actions.js
View File

@ -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');

67
bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx
View File

@ -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,
}

39
bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx
View File

@ -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;

13
bikeshop_project/assets/js/bikes/components/BikeTable/index.jsx
View File

@ -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);

18
bikeshop_project/assets/js/bikes/reducers.js
View File

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