Skip to content

Instantly share code, notes, and snippets.

@anthonybrown
Created October 21, 2016 22:26
Show Gist options
  • Save anthonybrown/e3e5b15a33646a0223e506d79edabb48 to your computer and use it in GitHub Desktop.
Save anthonybrown/e3e5b15a33646a0223e506d79edabb48 to your computer and use it in GitHub Desktop.
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory } from 'react-router'
import reduxThunk from 'redux-thunk'
import cookie from 'react-cookie';
import routes from './routes';
import reducers from './reducers/index';
import { AUTH_USER } from './actions/types'
/* REDUX-FORM */
import { reducer as reduxFormReducer } from 'redux-form'
/* MATERIAL-UI */
import injectTapEventPlugin from 'react-tap-event-plugin'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
// Import stylesheets
import './public/stylesheets/base.scss'
injectTapEventPlugin()
const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore)
const store = createStoreWithMiddleware(reducers)
const token = cookie.load('token')
if (token) {
// Update application state. User has token and is probably authenticated
store.dispatch({ type: AUTH_USER })
}
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Router history={browserHistory} routes={routes} />
</MuiThemeProvider>
</Provider>, document.querySelector('.wrapper'))
import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import { registerUser } from '../../actions/auth'
import { RadioButton } from 'material-ui/RadioButton'
import MenuItem from 'material-ui/MenuItem'
import { AutoComplete as MUIAutoComplete } from 'material-ui'
import {
AutoComplete,
Checkbox,
DatePicker,
RadioButtonGroup,
SelectField,
Slider,
TextField,
Toggle
} from 'redux-form-material-ui'
const validate = values => {
const errors = {}
const requiredFields = [
'firstName',
'lastName',
'email',
'organization',
'password',
'countryi',
'fieldOfStudy'
]
//requiredFields.forEach(field => {
//if (!values[ field ]) {
//errors[ field ] = 'Required'
//}
//})
if (values.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid email address'
}
return errors
}
class Register extends Component {
componentDidMount() {
this.refs.name // the Field
.getRenderedComponent() // on Field, returns ReduxFormMaterialUITextField
//.getRenderedComponent() // on ReduxFormMaterialUITextField, returns TextField
.focus() // on TextField
}
render() {
const { handleSubmit, pristine, reset, submitting } = this.props
return (
<div className='container'>
<form onSubmit={handleSubmit}>
<div>
<Field name='firstName' component={TextField} hintText='First Name' floatingLabelText="First Name"
ref="firstName" withRef/>
</div>
<div>
<Field name='lastName' component={TextField} hintText='Last Name' floatingLabelText='Last Name'
ref='lastName' withRef/>
</div>
<div>
<Field name="email" component={TextField} hintText="Email" floatingLabelText="Email"
ref='email' withRef/>
</div>
<div>
<Field name='organization' component={TextField} hintText='Organization' floatingLabelText='Organization'
ref='Organization' withRef/>
</div>
<div>
<Field name='fieldOfStudy' component={TextField} hintText='Field of Study' floatingLabelText='Field of Study'
ref='fieldOfStudy' withRef/>
</div>
<div>
<Field
name='country'
component={AutoComplete}
floatingLabelText='Country'
openOnFocus={true}
filter={MUIAutoComplete.fuzzyFilter}
dataSource={[
'Afghanistan',
'Albania',
'Algeria',
'America Samoa',
'Andorra',
'Angolilla',
'Augilla',
'Antartica',
'Antigua and Barbuda',
'Argentina',
'Armenia',
'Aruba',
'Australia',
'Austria',
'Azerbaijan',
'Bahamas',
'Bahrain',
'Bangladesh',
'Barbados',
'Belarus',
'Belguim',
'Belize',
'Benin',
'Bermuda',
'Bhutan',
'Bolivia',
'Bosnia and Herzegowia',
'Botswana',
'Bouvet Island',
'Brazil',
'British Indian Ocean Territory',
'Brunei Darussalam',
'Bulgaria',
'Burkina Faso',
'Burundi',
'Cambodia',
'Cameroon',
'Canada',
'Cape Verde',
'Caymen Islands',
'Central African Republic',
'Chad',
'Chile',
'China',
'Christmas Island',
'Cocos Islands',
'Columbia',
'Comoros',
'Congo',
'Democratic Republic of the Congo',
'Cook Islands',
'Costa Rica',
'Cote d\'Ivoire',
'Croatia',
'Cuba',
'Cyprus',
'Czech Republic',
'Denmark',
'Djhouti',
'Dominica',
'Dominican Republic',
'East Timor',
'Ecuador',
'Egypt',
'El Salvador',
'Equatorial Guinea',
'Eritrea',
'Estonia',
'Ethiopia',
'Falkland Islands',
'Faroe Islands',
'Fiji',
'Finland',
'France',
'French Guiana',
'French Polynesia',
'French Southren Territories',
'Gabon',
'Gambia',
'Georgia',
'Germany',
'Ghana',
'Gibraltar',
'Greece',
'Greenland',
'Grenada',
'Gudeloupe',
'Guam',
'Guatemala',
'Guinea',
'Guinea-Bissau',
'Guyana',
'Haiti',
'Heard &amp; McDonald Islands',
'Vatican City',
'Honduras',
'Hong Kong',
'Hungary',
'Iceland',
'India',
'Indonesia',
'Iran',
'Iraq',
'Ireland',
'Israel',
'Italy',
'Jamaica',
'Japan',
'Jordan',
'Kazakhstan',
'Kenya',
'Kiribati"',
'North Korea',
'Korea',
'Kuwait',
'Kyrgyzstan',
'Lao People\'s Democratic Republic',
'Latvia',
'Lebanon',
'Lesotho',
'Liberia',
'Libyan Arab Jamahiriya',
'Liechenstein',
'Lithuania',
'Luxembourg',
'Macau',
'Macedonia',
'Madagascar',
'Malwi',
'Malaysia',
'Maldives',
'Mali',
'Malta',
'Marshall Islands',
'Martinique',
'Mauritania',
'Mauritius',
'Mayotte',
'Mexico',
'Micronesia',
'Moldova',
'Monaco',
'Mongolia',
'Montserrat',
'Morocco',
'Mozambique',
'Myanmar',
'Namibia',
'Nauru',
'Nepal',
'Netherlands',
'Netherlands Antilles',
'New Caledonia',
'New Zealand',
'Nicaragua',
'Niger',
'Nigeria',
'Niue',
'Norfolk Island',
'Northern Mariana Islands',
'Norway',
'Oman',
'Pakistan',
'Palau',
'Panama',
'Papua New Guinea',
'Paraguay',
'Peru',
'Philippines',
'Pitcairn',
'Poland',
'Portugal',
'Puerto Rico',
'Qatar',
'Reunion',
'Romania',
'Russia',
'Rwanda',
'Saint Kitts and Nevis',
'Saint LUCIA',
'Saint Vincent and the Grenadines',
'Samoa',
'San Marino',
'Sao Tome and Principe',
'Saudi Arabia',
'Senegal',
'Seychelles',
'Sierra Leone',
'Singapore',
'Slovakia',
'Slovenia',
'Solomon Islands',
'Somalia',
'South Africa',
'South Georgia and the South Sandwich Islands',
'Spain',
'Sri Lanka',
'St. Helena',
'St. Pierre and Miquelon',
'Sudan',
'Suriname',
'Svalbard and Jan Mayen Islands',
'Swaziland',
'Sweden',
'Switzerland',
'Syrian Arab Republic',
'Taiwan',
'Tajikistan',
'Tanzania',
'Thailand',
'Togo',
'Tokelau',
'Tonga',
'Trinidad and Tobago',
'Tunisia',
'Turkey',
'Turkmenistan',
'Turks and Caicos Islands',
'Tuvalu',
'Uganda',
'Ukraine',
'United Arab Emirates',
'United Kingdom',
'United States',
'United States Minor Outlying Islands',
'Uruguay',
'Uzbekistan',
'Vanuatu',
'Venezuela',
'Viet Nam',
'Virgin Islands (British)',
'Virgin Islands (U.S.)',
'Wallis and Futuna Islands',
'Western Sahara',
'Yemen',
'Yugoslavia',
'Zambia',
'Zimbabwe'
]}
/>
</div>
<div>
<Field name="when"
component={DatePicker}
defaultValue={null} // DatePicker requires an object,
// and redux-form defaults to ''
hintText="Day of delivery?" />
</div>
<div>
<Field
name="notes"
component={TextField}
hintText="Notes"
floatingLabelText="Notes"
multiLine={true}
rows={2} />
</div>
<div>
<button className='btn btn-primary'
type="submit"
disabled={pristine || submitting}>
Submit
</button>
<button className='btn btn-primary'
type="button"
disabled={pristine || submitting}
onClick={reset}>
Clear
</button>
</div>
</form>
</div>
)
}
}
export default reduxForm({
form: 'Register',
validate
})(Register)
@anthonybrown
Copy link
Author

anthonybrown commented Oct 21, 2016

I was getting Required in the fields I had already filled out so
I commented out the errors check, but I'm still getting this error in the console.
Cannot read property 'getRenderedComponent' of undefined
The form still won't send

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment