I'm following a tutorial from this link: http://www.thegreatcodeadventure.com/react-redux-tutorial-part-ii-react-router-and-container-components/
But when the handleSubmit() function is fired i get an error:
TypeError: Cannot read property 'logInUser' of undefined
Indeed when i try to log this.props.actions it's undefined but i don't understand why. Is there something missing?
I'm using Antd as UI framework.
Component
import React, { Component } from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as sessionActions from './actions/sessionActions';
const FormItem = Form.Item;
class Login extends Component {
constructor(props){
super(props);
this.state = {credentials: {username: '', password: ''}};
this.handleSubmit = this.handleSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
onChange(event) {
const field = event.target.name;
const credentials = this.state.credentials;
credentials[field] = event.target.value;;
return this.setState({credentials: credentials});
}
handleSubmit = (event) => {
event.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
//console.log(this.props.actions);
this.props.actions.logInUser(this.state.credentials);
}
});
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className="login-form">
<FormItem>
{getFieldDecorator('userName', {
rules: [{ required: true, message: 'username missing!' }],
})(
<Input
name="username"
value={this.state.credentials.username}
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Username o email"
onChange={this.onChange}/>
)}
</FormItem>
<FormItem>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Password missing!' }],
})(
<Input
name="password"
value={this.state.credentials.password}
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
type="password"
placeholder="Password"
onChange={this.onChange}/>
)}
</FormItem>
<FormItem>
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: false,
})(
<Checkbox>Ricordami</Checkbox>
)}
<Button type="primary" htmlType="submit" className="login-form-button">
Log in
</Button>
</FormItem>
</Form>
);
}
}
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(sessionActions, dispatch)
};
}
export default Form.create()(Login);connect(null, mapDispatchToProps)(Login);
sessionReducer.js
import * as types from '../actions/actionTypes';
import initialState from './initialState';
export default function sessionReducer(state = initialState.session, action) {
switch(action.type) {
case types.LOG_IN_SUCCESS:
this.context.history.push('/')
return !!sessionStorage.jwt
default:
return state;
}
}
sessionActions.js
import * as types from './actionTypes';
import sessionApi from '../api/sessionApi';
export function loginSuccess() {
return {type: types.LOG_IN_SUCCESS}
}
export function logInUser(credentials) {
return function(dispatch) {
return sessionApi.login(credentials).then(response => {
sessionStorage.setItem('jwt', response.jwt);
dispatch(loginSuccess());
}).catch(error => {
throw(error);
});
};
}
UPDATE
I fixed the problem with the help of #Chaim Friedman but now i got another error:
Error: Actions must be plain objects. Use custom middleware for async actions.
But i'm using redux-thunk as middleware. Here's login function if it can helps:
sessionApi.js
import React from 'react'
var axios = require('axios');
var qs = require('qs');
class SessionApi {
static login(credentials){
axios.post('http://localhost:5000/login', qs.stringify({auth: credentials}))
.then(response => {
console.log(response);
return response.json();
}),
error => {
console.log(error);
return error;
};
}
}
I believe your trouble is with this line here.
export default Form.create()(Login);connect(null, mapDispatchToProps)(Login);
You are only exporting what Form.create() returns, so therefor your component is not actually connected to redux.
To fix this issue you would need to do something like this.
export default Form.create(connect(null, matchDispatchToProps)(Login));
The exact syntax made be different, it would depend on the usage of Form.create(), but this would be the basic idea.
Related
I have an issue in my React form. I must use the context to know what the name of the form is to set/get the value from the Redux store.
However, I have an issue. My form is in two parts. I set the values in the Redux store and if I need to go back to the previous part of the form, I still have the value saved. However, I have a little problem. I can't set the default state of the form input using the context since I don't know how to access the context in the constructor.
Could you help me achieve this?
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import { handleChange } from 'redux/actions';
import { connect } from 'react-redux';
import FormContext from 'context/FormContext';
export class TextInput extends Component {
constructor (props, context) {
super(props, context);
this.state = { value: this.getValue(context) || '' };
this.handleChange = this.handleChange.bind(this);
this.handleBlur = this.handleBlur.bind(this);
}
getRequired () {
if (this.props.required === true) {
return <span className="tw-font-semibold tw-text-red-500 tw-text-sm tw-ml-2">{this.props.t('required')}</span>;
}
}
handleChange (e) {
var value = e.target.value;
this.setState({ value: value });
}
handleBlur (context) {
this.props.handleChange(this.props.name, this.state.value, context.name);
}
getValue (context) {
if (this.props.input && this.props.input[context.name] && this.props.input[context.name][this.props.name]) {
return this.props.input[context.name][this.props.name];
} else {
return undefined;
}
}
render () {
return (
<FormContext.Consumer>
{context =>
<div className={`tw-flex tw-flex-col ${this.props.size} tw-px-2 tw-mb-3`}>
<label htmlFor={this.props.name} className="tw-text-sm tw-font-bold">{this.props.title || this.props.t('common:' + this.props.name)}{this.getRequired()}</label>
<input
value={this.state.value}
onChange={this.handleChange}
onBlur={() => {
this.handleBlur(context);
}}
type={this.props.type} id={this.props.name} placeholder={this.props.title} className="focus:tw-outline-none focus:tw-shadow-outline tw-bg-gray-300 tw-rounded-lg tw-py-2 tw-px-3" />
{this.props.errors && this.props.errors[context.name] && this.props.errors[context.name][this.props.name] && (
<div className="tw-bg-red-100 tw-mt-2 tw-border-l-4 tw-border-red-500 tw-text-red-700 tw-p-2 tw-text-sm">
<p>{this.props.errors[context.name][this.props.name]}</p>
</div>
)}
</div>
}
</FormContext.Consumer>
);
}
}
TextInput.defaultProps = {
size: 'w-full',
required: true,
type: 'text'
};
TextInput.propTypes = {
name: PropTypes.string.isRequired,
title: PropTypes.string,
size: PropTypes.string.isRequired,
required: PropTypes.bool,
type: PropTypes.string,
t: PropTypes.func.isRequired
};
const mapStateToProps = ({ errors, input }, ownProps) => {
return {
errors: errors,
input: input
};
};
export default connect(mapStateToProps, { handleChange })(withTranslation(['input'])(TextInput));
How about you wrap your FormContext wherever you call your TextInput. In that way, you could access your FormContext in your constructor.
function FormThatUsesTextInput() {
return (
<FormContext.Consumer>
{context => <TextInput context={context} {...otherProps} />}
</FormContext.Consumer>
)
}
I have 2 components:
Form
EmailForm (which extends Form)
I don't understand why my state "errors" is not updated whenI submit the form button?
When I check in the component react tool in chrome dev tools nothing happens.
Do you know what I didn't do correctly in the handleSubmit and validate function?
import React from 'react';
import Form from './form';
class EmailForm extends Form {
state = {
data: { email: '' },
errors: {}
};
render() {
return (
<div>
<p>
<i>Renseignez votre email pour être averti dès que l'application sera disponible :</i>
</p>
<form onSubmit={this.handleSubmit}>
{this.renderInput('email', 'Email')}
{this.renderButton('Envoyer')}
</form>
</div>
);
}
}
export default EmailForm;
import React, { Component } from 'react';
import { ButtonPrimary } from './buttonPrimary';
import { ButtonTransparent } from './buttonTransparent';
import Input from './input2';
interface IFormState {
data: any;
errors: any;
}
class Form extends React.PureComponent<{}, IFormState> {
state = {
data: {},
errors: {}
};
validate = (): any => {
return { email: 'Email is required' };
};
validateProperty = (input: any) => {
console.log('validated Property');
};
handleSubmit = (e: any) => {
e.preventDefault();
const errors: any = this.validate();
this.setState({ errors });
if (errors) return;
this.doSubmit();
};
doSubmit = () => {
console.log('Submitted');
};
handleChange = ({ currentTarget: input }: any) => {
const errors: any = { ...this.state.errors };
const errorMessage: any = this.validateProperty(input);
if (errorMessage) errors[input.name] = errorMessage;
else delete errors[input.name];
const data: any = { ...this.state.data };
data[input.name] = input.value;
this.setState({ data, errors });
};
renderButton(label: string) {
return <ButtonPrimary disabled={!this.validate()}>{label}</ButtonPrimary>;
}
renderInput(name: string, label: string, type = 'email') {
const { data, errors }: any = this.state;
return (
<Input
autoFocus
type={type}
name={name}
value={data[name]}
label={label}
onChange={this.handleChange}
error={errors[name]}
/>
);
}
}
export default Form;
After I'm done creating an article via CreateArticle component (which works fine), I want to display only what the user has written (its value) in <textarea value={value}> in the SearchArticle component via displayName() function.
In other words, in CreateArticle component when the user's done typing something in <textarea/> followed by clicking Submit (which's a button that saves what the user wrote), I want to only display what the user has written in Search Article inside displayName() function.
What am I doing wrong and how can I fix it?
Here's CreateArticle:
import React, { Component } from 'react';
import {connect} from "react-redux";
import * as actionType from "../../store/actions/actions";
class CreateArticle extends Component {
constructor(props) {
super(props);
}
handleSubmit = event => {
this.setState({storyTextValue: event.target.value});
this.props.storyTextValueRedux(event.target.storyTextValue);
event.preventDefault();
}
handleStoryText = event => {
event.preventDefault();
this.setState({value: event.target.value});
}
onSubmit = () => {
if(this.state.value === "") {
alert("Please enter the value and then click submit");
} else {
alert("Article saved " + '\n' + this.state.value + this.props.articleIdValue);
}
}
render() {
return(
<div>
<form onSubmit={this.handleSubmit}>
<input onChange={this.handleChange} value={this.props.cityCodeValue} type="text" placeholder="city code"/>
<input type="text" placeholder="author name"/>
<textarea value={this.props.storyTextValue} onChange={this.handleStoryText} rows="2" cols="25" />
<button type="submit" value="Submit" onClick={() => this.onSubmit()}>Submit</button>
</form>
</div>
);
}
}
const mapStateToProps = state => {
return {
articleIdValue: state.articleIdValue.articleIdValue,
storyTextValue: state.storyTextValue.storyTextValue
};
};
const mapDispatchToProps = dispatch => {
return {
articleIdValueRedux: (value) => dispatch({type: actionType.ARTICLE_ID_VALUE, value}),
storyTextValueRedux: (value) => dispatch({type: actionType.STORY_VALUE, value})
};
};
export default connect(mapStateToProps, mapDispatchToProps)(CreateArticle);
Here's SearchArticle:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actionType from '../../store/actions/actions';
import ArticleText from '../../containers/ArticleText/ArticleText';
class SearchArticle extends Component {
constructor(props) {
super(props);
this.state = {
flag: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
this.props.CityCodeReducerRedux(event.target.value);
}
handleSubmit(event) {
this.setState({flag: true});
event.preventDefault();
}
displayName = () => {
if(this.props.cityCodeValue === "nyc" || this.props.articleIdValue === 1) {
return(
<div>
<p>author name: {this.props.authorNameValue}</p>
<p>article text: {<ArticleText/>}</p>
</div>
);
}
}
render() {
return(
<div>
<form onSubmit={this.handleSubmit}>
<input onChange={this.handleChange} value={this.props.cityCodeValue} type="text" placeholder="city code"/>
<input onChange={this.handleChange} value={this.props.articleIdValue} placeholder="article id"/>
<button onClick={() => this.displayName} value="Search">Submit</button>
{this.state.flag ? this.displayName() : null}
</form>
</div>
);
}
}
const mapStateToProps = state => {
return {
cityCodeValue: state.cityCodeValue.cityCodeValue,
authorNameValue: state.authorNameValue.authorNameValue,
articleIdValue: state.articleIdValue.articleIdValue
};
};
const mapDispatchToProps = dispatch => {
return {
CityCodeReducerRedux: (value) => dispatch({type: actionType.CITY_CODE_VALUE, value}),
articleIdValueRedux: (value) => dispatch({type: actionType.ARTICLE_ID_VALUE, value})
};
};
export default connect(mapStateToProps, mapDispatchToProps)(SearchArticle);
Here's StoryTextReducer:
import * as actionType from '../store/actions/actions';
const initialState = {
storyTextValue: ''
};
const StoryTextReducer = (state = initialState, action) => {
switch (action.type) {
case actionType.STORY_VALUE:
return {
...state,
storyTextValue: action.value
};
default:
return state;
}
};
export default StoryTextReducer;
You're looking at 2 different instances of <ArticleText>. Changing properties of the instance in CreateArticle will not change the instance in SearchArticle
Instead of trying to share a value by using the same class, you should be sharing a value by whats in the redux store.
You should define an action that dispatches and event like {type: updateArticleText, articleText: foo}, then in your reducer you can set the redux state to have a property ArticleText equal to event.articleText.
Now that your value is stored in redux store rather than component state, your components simply get props from the redux store in the mapStateToProps function.
I have this free components:
my LoginForm:
import React, { Component } from "react";
import { Pane, TextInputField, Checkbox, Button } from "evergreen-ui";
import { validateEmail, validatePassword } from "./FormValidator";
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
passwordErr: {
status: false,
value: ""
},
emailErr: {
status: false,
value: ""
},
email: "",
password: "",
CheckBoxchecked: false
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleCheckbox = this.handleCheckbox.bind(this);
}
handleEmailInput = e => {
const email = e.target.value;
this.setState({ email: email });
};
handlePasswordInput = e => {
const password = e.target.value;
this.setState({ password: password });
};
handleCheckbox() {
this.setState({
CheckBoxchecked: !this.state.CheckBoxchecked
});
}
handleSubmit() {
if (this.checkFormStatus()) {
alert("Form OK");
}
}
checkFormStatus() {
// form validation middleware
const { email, password } = this.state;
const emailErr = validateEmail(email);
const passwordErr = validatePassword(password);
if (!emailErr.status && !passwordErr.status) {
return true;
} else {
this.setState({
emailErr,
passwordErr
});
return false;
}
}
render() {
return (
<Pane padding={15}>
<TextInputField
tabIndex={0}
required
isInvalid={this.state.emailErr.status}
validationMessage={
this.state.emailErr.status ? this.state.emailErr.value : false
}
onChange={this.handleEmailInput}
value={this.state.email}
appearance="neutral"
type="email"
label="Your email-address"
inputHeight={36}
//description="We’ll need your email-address to create an new account"
/>
<TextInputField
required
validationMessage={
this.state.passwordErr.status ? this.state.passwordErr.value : false
}
isInvalid={this.state.passwordErr.status}
onChange={this.handlePasswordInput}
value={this.state.password}
appearance="neutral"
label="Your Password"
type="password"
inputHeight={36}
//description="Create a secure password to protect your account"
/>
<Checkbox
label="Keep me logged in"
checked={this.state.CheckBoxchecked}
onChange={this.handleCheckbox}
/>
</Pane>
);
}
}
export default LoginForm;
my export LoginFormButton:
export class LoginFormButton extends Component {
render() {
return (
<Button
appearance="primary"
marginLeft={8}
marginRight={16}
intent="success"
onClick={} //How can i call handleSubmit() from here?
>
Login
</Button>
);
}
}
and my Dialog...
import ReactDOM from "react-dom";
import LoginForm from './LoginForm';
import LoginFormButton from './LoginFormButton';
class LoginDialog extends Components {
render(
return(
<Dialog>
<LoginForm/>
<div className="Footer">
<LoginFormButton/>
</div>
</Dialog>
);
)
}
I have the function handleSubmit() stored in the LoginForm Component. I want to call these function from the LoginFormButton. This Button is contained in the Dialog Component:
How can i do this? Thanks for your answer and our help. I am a beginner, so i don't exactly know, how can i implement this.
Looks like, you want to have a LoginForm Component, and a LoginFormButton to handle form submit.
import React, { Component } from "react";
import { Pane, TextInputField, Checkbox, Button } from "evergreen-ui";
import { validateEmail, validatePassword } from "./FormValidator";
const LoginFormButton = ({ handleSubmit }) => {
return (
<Button
appearance="primary"
marginLeft={8}
marginRight={16}
intent="success"
onClick={() => handleSubmit()} // or just -> onClick={handleSubmit}
>
Login
</Button>
);
}
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
passwordErr: {
status: false,
value: ""
},
emailErr: {
status: false,
value: ""
},
email: "",
password: "",
CheckBoxchecked: false
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleCheckbox = this.handleCheckbox.bind(this);
}
handleEmailInput = e => {
const email = e.target.value;
this.setState({ email: email });
};
handlePasswordInput = e => {
const password = e.target.value;
this.setState({ password: password });
};
handleCheckbox() {
this.setState({
CheckBoxchecked: !this.state.CheckBoxchecked
});
}
handleSubmit() {
if (this.checkFormStatus()) {
alert("Form OK");
}
}
checkFormStatus() {
// form validation middleware
const { email, password } = this.state;
const emailErr = validateEmail(email);
const passwordErr = validatePassword(password);
if (!emailErr.status && !passwordErr.status) {
return true;
} else {
this.setState({
emailErr,
passwordErr
});
return false;
}
}
render() {
return (
<Pane padding={15}>
<TextInputField
tabIndex={0}
required
isInvalid={this.state.emailErr.status}
validationMessage={
this.state.emailErr.status ? this.state.emailErr.value : false
}
onChange={this.handleEmailInput}
value={this.state.email}
appearance="neutral"
type="email"
label="Your email-address"
inputHeight={36}
//description="We’ll need your email-address to create an new account"
/>
<TextInputField
required
validationMessage={
this.state.passwordErr.status ? this.state.passwordErr.value : false
}
isInvalid={this.state.passwordErr.status}
onChange={this.handlePasswordInput}
value={this.state.password}
appearance="neutral"
label="Your Password"
type="password"
inputHeight={36}
//description="Create a secure password to protect your account"
/>
<Checkbox
label="Keep me logged in"
checked={this.state.CheckBoxchecked}
onChange={this.handleCheckbox}
/>
<LoginFormButton
handleSubmit={this.handleSubmit}
/>
</Pane>
);
}
}
export default LoginForm;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
1) Validation will happen in LoginForm Component, unless you pass this.state.password and this.state.email to LoginFormButton Component. I wouldn't advice to do that, as validation can be handled in LoginForm Component.
2) HandleSubmit function can be passed to LoginFormButton component as props from LoginForm component, and can be directly used within the component.
I would advice to follow JS standards for naming conventions(camelCases) in your state variable. And use Arrow Functions so that you don't have to bind function explicitly, unless otherwise.
I Changed you LoginFormButton to a stateless Component, as it does not require a state. It is better that way, and what React Community encourages.
Check below corrected code
LoginForm component
import React, { Component } from "react";
import { Pane, TextInputField, Checkbox, Button } from "evergreen-ui";
import { validateEmail, validatePassword } from "./FormValidator";
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
passwordErr: {
status: false,
value: ""
},
emailErr: {
status: false,
value: ""
},
email: "",
password: "",
CheckBoxchecked: false
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleCheckbox = this.handleCheckbox.bind(this);
}
handleEmailInput = e => {
const email = e.target.value;
this.setState({ email: email });
};
handlePasswordInput = e => {
const password = e.target.value;
this.setState({ password: password });
};
handleCheckbox() {
this.setState({
CheckBoxchecked: !this.state.CheckBoxchecked
});
}
handleSubmit() {
if (this.checkFormStatus()) {
alert("Form OK");
}
}
checkFormStatus() {
// form validation middleware
const { email, password } = this.state;
const emailErr = validateEmail(email);
const passwordErr = validatePassword(password);
if (!emailErr.status && !passwordErr.status) {
return true;
} else {
this.setState({
emailErr,
passwordErr
});
return false;
}
}
render() {
return (
<Pane padding={15}>
<TextInputField
tabIndex={0}
required
isInvalid={this.state.emailErr.status}
validationMessage={
this.state.emailErr.status ? this.state.emailErr.value : false
}
onChange={this.handleEmailInput}
value={this.state.email}
appearance="neutral"
type="email"
label="Your email-address"
inputHeight={36}
//description="We’ll need your email-address to create an new account"
/>
<TextInputField
required
validationMessage={
this.state.passwordErr.status ? this.state.passwordErr.value : false
}
isInvalid={this.state.passwordErr.status}
onChange={this.handlePasswordInput}
value={this.state.password}
appearance="neutral"
label="Your Password"
type="password"
inputHeight={36}
//description="Create a secure password to protect your account"
/>
<Checkbox
label="Keep me logged in"
checked={this.state.CheckBoxchecked}
onChange={this.handleCheckbox}
/>
<div className="Footer">
<LoginFormButton handleSubmit={this.handleSubmit} />
</div>
</Pane>
);
}
}
export default LoginForm;
LoginFormButton component
export class LoginFormButton extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div>
<Button
appearance="primary"
marginLeft={8}
marginRight={16}
intent="success"
onClick={this.props.handleSubmit}
>
Login
</Button>
</div>
);
}
}
Dialog component
import ReactDOM from "react-dom";
import LoginForm from './LoginForm';
import LoginFormButton from './LoginFormButton';
class LoginDialog extends Components {
render(
return(
<Dialog>
<LoginForm/>
</Dialog>
);
)
}
I recommend that you do not put the business logic in the button component. The button's only job should be to notify whoever's using it that the button has been clicked. This is done by passing a prop to the button:
export class LoginFormButton extends Component {
render() {
return (
<Button
appearance="primary"
marginLeft={8}
marginRight={16}
intent="success"
onClick={this.props.onClick}
>
Login
</Button>
);
}
}
Then whatever component uses the prop will be where the business logic happens. The other solutions assumed the login form button would be part of the login form, and that's probably how i would do it as well. So my recommendation is to take this part out of LoginDialog:
<div className="Footer">
<LoginFormButton/>
</div>
Move it into LoginForm.js, and add the callback:
render() {
return (
<Pane padding={15}>
{/* inputs and checkbox components omitted */}
<div className="Footer" onClick={this.handleSubmit}>
<LoginFormButton/>
</div>
</Pane>
)
}
If you can't do move the button into the form for some reason, then you'll have more work to do. You'll want to move the business logic up to the component which is the shared ancestor of both the button and the text inputs -- ie, LoginDialog. So you'd take most of the code that's currently in LoginForm and move it to LoginDialog instead. This includes moving the state up from LoginForm to LoginDialog. LoginForm will then need callbacks to pass relevant changes back to the loginDialog, so that the dialog can update its state. An when the button is pressed, that event will go to handleSubmit in LoginDialog.
This act of moving state up to a parent is fairly common in react development, enough so that it's mentioned in react's tutorial page here: https://reactjs.org/tutorial/tutorial.html#lifting-state-up . So it's a valid way to solve the problem, but in this case i think you're probably better off just moving the button into the form
i am currently working on creating email password request with mailtrap, i get the email, but app crashs, i tried to catch error but it didnt work. I am losing my mind over this
error
import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Message } from "semantic-ui-react";
import ForgotPasswordForm from "../forms/ForgotPasswordForm";
import { resetPasswordRequest } from "../../actions/auth";
class ForgotPasswordPage extends React.Component {
state = {
success: false
};
submit = data =>
this.props
.resetPasswordRequest(data)
.then(() => this.setState({ success: true }));
render() {
return (
<div>
{this.state.success ? (
<Message>Email has been sent.</Message>
) : (
<ForgotPasswordForm submit={this.submit} />
)}
</div>
);
}
}
ForgotPasswordPage.propTypes = {
resetPasswordRequest: PropTypes.func.isRequired
};
export default connect(
null,
{ resetPasswordRequest }
)(ForgotPasswordPage);
import React from "react";
import PropTypes from "prop-types";
import { Form, Button, Message } from "semantic-ui-react";
import isEmail from "validator/lib/isEmail";
import InLineError from "../messages/InLineError";
class ForgotPasswordForm extends React.Component {
state = {
data: {
email: ""
},
loading: false,
errors: {}
};
onChange = e =>
this.setState({
...this.state,
data: { ...this.state.data, [e.target.name]: e.target.value }
});
onSubmit = e => {
e.preventDefault();
const errors = this.validate(this.state.data);
this.setState({ errors });
if (Object.keys(errors).length === 0) {
this.setState({ loading: true });
this.props
.submit(this.state.data)
.catch(err =>
this.setState({ errors: err.response.data.errors, loading: false })
);
}
};
validate = data => {
const errors = {};
if (!isEmail(data.email)) errors.email = "Invalid email";
return errors;
};
render() {
const { errors, data, loading } = this.state;
return (
<Form onSubmit={this.onSubmit} loading={loading}>
{!!errors.global && <Message negative>{errors.global}</Message>}
<Form.Field error={!!errors.email}>
<label htmlFor="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="email"
value={data.email}
onChange={this.onChange}
/>
{errors.email && <InLineError text={errors.email} />}
</Form.Field>
<Button primary>ForgotPasswordForm</Button>
</Form>
);
}
}
ForgotPasswordForm.propTypes = {
submit: PropTypes.func.isRequired
};
export default ForgotPasswordForm;
Code after this is okey, but its keep crashing at submit for no clear reason for me
Am if number no up period regard sudden better. Decisively surrounded all admiration and not you. Out particular sympathize not favourable introduced insipidity but