Skip to content

Instantly share code, notes, and snippets.

@zeroasterisk
Last active May 5, 2016 21:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zeroasterisk/caa75ebd3c7ea95cc4994a087d0fc0de to your computer and use it in GitHub Desktop.
Save zeroasterisk/caa75ebd3c7ea95cc4994a087d0fc0de to your computer and use it in GitHub Desktop.
redux-form validate functions passed into component
import { Meteor } from 'meteor/meteor';
import { Email } from 'meteor/email';
import { createContainer } from 'meteor/react-meteor-data';
import { Texts } from '../../../api/Texts/collection';
import { Users } from '../../../api/Users/collection';
import { schemaInviteRequest, sendInviteRequest } from '../../../api/Invites/methods';
import { Bert } from 'meteor/themeteorchef:bert';
import RequestInvitePage from '../pages/RequestInvitePage';
import SST from 'meteor-simple-schema-transform';
// no need to make this included in Tracker (autorun)
const validate = SST.forReduxForm.buildValidate(schemaInviteRequest);
export default createContainer(({ params }) => {
const userId = Meteor.userId();
const currentUser = (userId ? Users.findOne(userId) : false);
if (currentUser) {
currentUser.name = currentUser.name();
currentUser.email = currentUser.email();
}
const pageText = Texts.get('MyRequestInvite');
// this is the submit form handler, passed into form
// we are not handling the onSubmit event from the DOM
// instead we are handling the Results from ReduxForm
//
// <Container> --> `handleSendInvite` (meteor code)
// <PageComponent> --> `onSubmit` (submitted, validated, data)
// <ReduxFormWrapped> --> `handleSubmit` (event handle in ReduxForm)
// <FormComponent>
//
// this is the Meteor function to submit the data
// callback w/ an error or success
const handleSendInvite = (data) => {
console.log('handleSendInvite data', data);
const sent = sendInviteRequest.call(data, (err) => {
if (err) {
// TODO pass validation info back into redux-form
Bert.err(err, 'Email Not Sent');
return err;
}
Bert.success('Sent Invite');
return true;
});
};
return {
pageText,
currentUser,
schemaInviteRequest,
validate,
handleSendInvite,
Bert,
};
}, RequestInvitePage);
import React, { Component, PropTypes } from 'react';
import { reduxForm } from 'redux-form';
import StaticField from '../../../ui/components/elements/StaticField';
import TextInput from '../../../ui/components/elements/TextInput';
import ButtonsField from '../../../ui/components/elements/ButtonsField';
class MyRequestInviteForm extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const {
currentUser,
fields: { orgName, message },
resetForm, handleSubmit, submitting,
} = this.props;
console.log('currentUser', currentUser);
const userName = (currentUser && currentUser.name ? currentUser.name : '');
const userEmail = (currentUser && currentUser.email ? currentUser.email : '');
return (
<form onSubmit={handleSubmit}>
<StaticField
label="From"
value={
<span>
{userName}
<small className="text-muted">&lt;{userEmail}&gt;</small>
</span>
}
/>
<TextInput field={orgName}
label={schema.label('orgName')}
placeholder="Acme, LLC"
help="Enter the name of the Organization you would like access to"
/>
<TextInput field={message}
label={schema.label('message')}
help="Tell us what you need access to and why."
/>
<ButtonsField
submitText="Send Request"
submitClass="btn btn-success"
submitIcon="fa fa-envelope"
submitting={submitting}
resetForm={resetForm}
/>
</form>
);
}
}
MyRequestInviteForm.propTypes = {
currentUser: PropTypes.object.isRequired,
fields: PropTypes.object.isRequired,
resetForm: PropTypes.func,
schema: PropTypes.object,
submitting: PropTypes.bool,
handleSubmit: PropTypes.func, // passed into reduxForm wrapped comp.
validate: PropTypes.func, // passed into reduxForm wrapped comp.
};
export default reduxForm({
form: 'myRequestInviteForm',
fields: ['orgName', 'message'],
// onSubmit is passed in from MyRequestInviteForm
// validate is passed in from MyRequestInviteForm
})(MyRequestInviteForm);
import React from 'react';
import MyRequestInviteForm from '../components/RequestInviteForm';
export default class MyRequestInvitePage extends React.Component {
render() {
return (
<div>
<h1>Auth Request Invite</h1>
{this.props.currentUser && this.props.currentUser._id ?
<MyRequestInviteForm
currentUser={this.props.currentUser}
onSubmit={this.props.handleSendInvite.bind(this)}
validate={this.props.validate.bind(this)}
schema={this.props.schemaInviteRequest}
/>
: <p>You must login</p>}
</div>
);
}
}
// these will be passed into the page from Meteor enabled container
MyRequestInvitePage.propTypes = {
currentUser: React.PropTypes.object,
handleSendInvite: React.PropTypes.func.isRequired,
validate: React.PropTypes.func.isRequired,
schemaInviteRequest: React.PropTypes.object,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment