Skip to content

Instantly share code, notes, and snippets.

@laere
Created February 16, 2019 17:43
Show Gist options
  • Save laere/66f247749a8f8fc64fa09df051fdd4fe to your computer and use it in GitHub Desktop.
Save laere/66f247749a8f8fc64fa09df051fdd4fe to your computer and use it in GitHub Desktop.
import React from 'react';
import { addBudget } from 'actions';
import { connect } from 'react-redux';
import BudgetForm 'components/Budgets/BudgetForm';
class BudgetCreate extends React.Component {
onSubmit = formValues => {
this.props.addBudget(formValues);
}
render() {
return (
<div>
<BudgetForm onSubmit={this.onSubmit} />
</div>
);
}
}
export default connect(null, { addBudget })(BudgetCreate);
import 'css/BudgetForm.css';
import React from 'react';
import { Link } from 'react-router-dom';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import BudgetField from 'components/budgets/BudgetField';
import formFields from 'components/budgets/formFields';
import * as actions from 'actions';
class BudgetForm extends React.Component {
renderFields() {
return formFields.map(({ label, name, type }) => {
return <Field key={name} label={label} name={name} type={type} component={BudgetField} />
});
}
onSubmit = formValues => {
this.props.onSubmit(formValues);
}
render() {
console.log(this.props);
return (
<div className="budget-new">
<form onSubmit={this.props.handleSubmit(this.onSubmit)}>
{this.renderFields()}
<Link to="/budgets" type="submit" className="button is-danger is-large">Cancel</Link>
<button type="submit" className="button is-primary is-large">Done</button>
</form>
</div>
);
}
};
const validate = values => {
const errors = {};
formFields.forEach(({ name, required }) => {
if (required && !values[name]) {
errors[name] = 'You must provide a value!'
}
});
return errors;
}
export default reduxForm({
form: 'budgetForm',
validate
})(connect(null, actions)(BudgetForm));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment