Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(frontend): Convert some forms to functional components #281

Merged
merged 2 commits into from
Aug 20, 2016
Merged

refactor(frontend): Convert some forms to functional components #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a1cd28e
refactor(frontend): Convert some forms to functional components
nicogreenarry Aug 20, 2016
70c1f8c
refactor(frontend): Replace bulky if/else block with a switch object
nicogreenarry Aug 20, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 6 additions & 9 deletions src/furniture/components/listingFurnitureRow.component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,12 @@ export default function listingFurnitureRow(props) {
const { roomName, furnitureName, furnitureObj } = props.data;

function controlsClick(e, type) {
// todo: Convert this to a switch-object. Or refactor otherwise; it's looking like it
// hardly does anything, and maybe could just be done inline or something.
if (type === 'edit') {
props.updateEditStatus(furnitureName, true);
} else if (type === 'cancel') {
props.updateEditStatus(furnitureName, false);
} else if (type === 'submit') {
props.updateEditStatus(furnitureName, false);
}
const status = {
edit: true,
cancel: false,
submit: false,
};
props.updateEditStatus(furnitureName, status[type]);
}

return props.editing ? (
Expand Down
114 changes: 56 additions & 58 deletions src/furniture/containers/updateFurnitureForm.container.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,65 +4,63 @@ import { reduxForm, change as changeFieldValue } from 'redux-form';
import { updateFurniture } from '../actions/furniture.action';
import ColorInput from '../../rooms/components/colorPicker.component.jsx';

class UpdateFurnitureForm extends Component {
render() {
const { fields: {
itemName, price, size, description, originalItemName, color
}, handleSubmit } = this.props;
const currentFurnitureObj = this.props.rooms[this.props.roomSelected].furniture[this.props.name];
const boundUpdateFurniture = this.props.updateFurniture.bind(null,
this.props.name, this.props.roomSelected, currentFurnitureObj
);
const UpdateFurnitureForm = (props) => {
const { fields: {
itemName, price, size, description, originalItemName, color
}, handleSubmit } = props;
const currentFurnitureObj = props.rooms[props.roomSelected].furniture[props.name];
const boundUpdateFurniture = props.updateFurniture.bind(null,
props.name, props.roomSelected, currentFurnitureObj
);

return (
<form onSubmit={ handleSubmit(boundUpdateFurniture) }>
<table className="furniture-detail">
<tbody>
<tr>
<td>
<label>Name
<input type="text" id="itemName" className={ (itemName.touched && itemName.error) ? 'invalid' : 'valid'} { ...itemName } />
</label>
<div className="help-text"><span className="form-warning">{ itemName.touched ? itemName.error : null}</span></div>
</td>
<td>
<label>Price
<input type="text" className={ price.error ? 'invalid' : 'valid'} { ...price } />
</label>
<div className="help-text"><span className="form-warning">{ price.error }</span></div>
</td>
</tr>
<tr>
<td>
<label s={10}>Color
<input type="text" className={ color.error ? 'invalid' : 'valid'} { ...color } />
</label>
<ColorInput s={2} action={ colorObj => this.props.changeFieldValue( 'UpdateFurnitureForm' , 'color', colorObj.hex) } />
<div className="help-text"><span className="form-warning">{ color.error }</span></div>
</td>
<td>
<label>Dimensions
<input type="text" className={ size.error ? 'invalid' : 'valid'} { ...size } />
</label>
<div className="help-text"><span className="form-warning">{ size.error }</span></div>
</td>
</tr>
<tr>
<td colSpan="3">
<label>Notes
<textarea className={ description.error ? 'invalid' : 'valid'} { ...description } />
</label>
<div className="help-text"><span className="form-warning">{ description.error }</span></div>
</td>
</tr>
</tbody>
</table>
<button type="submit" disabled={this.props.pristine}>Submit</button>
<input type="text" className="hidden-field" value={ this.props.name } disabled { ...originalItemName } aria-hidden="true" />
</form>
);
}
}
return (
<form onSubmit={ handleSubmit(boundUpdateFurniture) }>
<table className="furniture-detail">
<tbody>
<tr>
<td>
<label>Name
<input type="text" id="itemName" className={ (itemName.touched && itemName.error) ? 'invalid' : 'valid'} { ...itemName } />
</label>
<div className="help-text"><span className="form-warning">{ itemName.touched ? itemName.error : null}</span></div>
</td>
<td>
<label>Price
<input type="text" className={ price.error ? 'invalid' : 'valid'} { ...price } />
</label>
<div className="help-text"><span className="form-warning">{ price.error }</span></div>
</td>
</tr>
<tr>
<td>
<label s={10}>Color
<input type="text" className={ color.error ? 'invalid' : 'valid'} { ...color } />
</label>
<ColorInput s={2} action={ colorObj => props.changeFieldValue( 'UpdateFurnitureForm' , 'color', colorObj.hex) } />
<div className="help-text"><span className="form-warning">{ color.error }</span></div>
</td>
<td>
<label>Dimensions
<input type="text" className={ size.error ? 'invalid' : 'valid'} { ...size } />
</label>
<div className="help-text"><span className="form-warning">{ size.error }</span></div>
</td>
</tr>
<tr>
<td colSpan="3">
<label>Notes
<textarea className={ description.error ? 'invalid' : 'valid'} { ...description } />
</label>
<div className="help-text"><span className="form-warning">{ description.error }</span></div>
</td>
</tr>
</tbody>
</table>
<button type="submit" disabled={props.pristine}>Submit</button>
<input type="text" className="hidden-field" value={ props.name } disabled { ...originalItemName } aria-hidden="true" />
</form>
);
};

const mapStateToProps = ({ roomSelected, rooms }) => ({ roomSelected, rooms });

Expand Down
91 changes: 39 additions & 52 deletions src/furniture/containers/updateFurnitureFormTable.container.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,58 +2,45 @@ import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { updateFurniture } from '../actions/furniture.action';

class UpdateFurnitureFormTable extends Component {
handleClick(e, type) {
// Todo: Should I refactor this function some? It isn't doing a lot.
e.preventDefault(); // Prevent the page from reloading due to form being submitted

if (type === 'cancel') {
this.props.controlsClick(e, 'cancel');
} else {
this.props.controlsClick(e, 'submit');
}
}

render() {
const { roomName, furnitureName, furnitureObj } = this.props.data;
const { fields: { itemName, price, size, color }, handleSubmit } = this.props;
const boundProps = {
furnitureName,
roomName,
furnitureObj,
controlsClick: this.props.controlsClick,
};
const boundUpdateFurniture = this.props.updateFurniture.bind(null,
boundProps, null, null
);

return (
<form onSubmit={ handleSubmit(boundUpdateFurniture) } className={ `table-item tr ${this.props.invalid ? 'row-has-error' : ''}` }>
<span className="td room slimDown"><strong>{ roomName }</strong></span>
<span className="td furniture slimDown">
<div className="edit-view help-text"><span className="form-warning">{ (itemName.error) }</span></div>
<input type="text" className={ (itemName.error) ? 'invalid' : 'valid' } { ...itemName } />
</span>
<span className="td price slimDown">
<div className="edit-view help-text"><span className="form-warning">{ price.error }</span></div>
<input type="text" className={ price.error ? 'invalid' : 'valid' } { ...price } />
</span>
<span className="td size slimDown">
<div className="edit-view help-text"><span className="form-warning">{ size.error }</span></div>
<input type="text" className={ size.error ? 'invalid' : 'valid' } { ...size } />
</span>
<span className="td color slimDown">
<div className="edit-view help-text"><span className="form-warning">{ color.error }</span></div>
<input type="text" className={ color.error ? 'invalid' : 'valid' } { ...color } />
</span>
<span className="td controls slimDown">
<button className="btn-flat" type="submit">Submit</button>
<button className="btn-flat" type="reset" onClick={ (e) => this.props.controlsClick(e, 'cancel') }>Cancel</button>
</span>
</form>
);
}
}
const UpdateFurnitureFormTable = props => {
const { roomName, furnitureName, furnitureObj } = props.data;
const { fields: { itemName, price, size, color }, handleSubmit } = props;
const boundProps = {
furnitureName,
roomName,
furnitureObj,
controlsClick: props.controlsClick,
};
const boundUpdateFurniture = props.updateFurniture.bind(null,
boundProps, null, null
);

return (
<form onSubmit={ handleSubmit(boundUpdateFurniture) } className={ `table-item tr ${props.invalid ? 'row-has-error' : ''}` }>
<span className="td room slimDown"><strong>{ roomName }</strong></span>
<span className="td furniture slimDown">
<div className="edit-view help-text"><span className="form-warning">{ (itemName.error) }</span></div>
<input type="text" className={ (itemName.error) ? 'invalid' : 'valid' } { ...itemName } />
</span>
<span className="td price slimDown">
<div className="edit-view help-text"><span className="form-warning">{ price.error }</span></div>
<input type="text" className={ price.error ? 'invalid' : 'valid' } { ...price } />
</span>
<span className="td size slimDown">
<div className="edit-view help-text"><span className="form-warning">{ size.error }</span></div>
<input type="text" className={ size.error ? 'invalid' : 'valid' } { ...size } />
</span>
<span className="td color slimDown">
<div className="edit-view help-text"><span className="form-warning">{ color.error }</span></div>
<input type="text" className={ color.error ? 'invalid' : 'valid' } { ...color } />
</span>
<span className="td controls slimDown">
<button className="btn-flat" type="submit">Submit</button>
<button className="btn-flat" type="reset" onClick={ (e) => props.controlsClick(e, 'cancel') }>Cancel</button>
</span>
</form>
);
};

function validate(values) {
const errors = {};
Expand Down