Last active
May 5, 2016 21:42
-
-
Save zeroasterisk/caa75ebd3c7ea95cc4994a087d0fc0de to your computer and use it in GitHub Desktop.
redux-form validate functions passed into component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"><{userEmail}></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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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