У меня есть компонент входа и регистрации, когда dihome успешно выполняет вход, затем перенаправляет на дом, если вход успешен, но я хочу использовать компонент логики в подробном компоненте продукта, при успешном входе он переходит непосредственно к компоненту извлечения, чтоЯ хочу спросить, как вы отличаете дело?ниже файла Login.jsx
import React, { Component } from "react";
import { Input, Form, Button, Icon, Checkbox, Row, Col, Affix } from "antd";
import { Redirect,Link } from "react-router-dom";
import ButtonFacebook from "../../components/Button/SocialMedia/Facebook";
import ButtonGoogle from "../../components/Button/SocialMedia/Google";
import { connect } from "react-redux";
import logoMonggoPesen from "../../assets/img/logo_monggopesen.png";
import "./style.sass";
import strings from "../../localization/localization";
import {
loginWithGoogle,
loginWithForm
} from "../../store/actions/authentication";
import {
rulesEmail,
rulesPassword,
AlertLogin
} from "../Register/registerContainer";
import HomePage from "../Home";
const FormItem = Form.Item;
class Login extends Component {
constructor(props) {
super(props);
this.state = {
errorMessage: null,
isErorloaded: false
};
}
handleloginGoogle = request => {
this.props.loginWithGoogle(this.props.history, request);
};
handleSubmit = e => {
try {
e.preventDefault();
this.props.form.validateFields(async (err, values) => {
if (!err) {
console.log("Received values of form: ", values);
await this.props.loginWithForm(values);
if (this.state.isAuthenticated !== true) {
this.setState({
errorMessage: "Email atau password anda salah",
isErorloaded: true
});
}
}
});
} catch (error) {
console.log(error);
}
};
render() {
console.log(this.props.token);
const { form, isAuthenticated } = this.props;
const { getFieldDecorator } = form;
const { errorMessage, isErorloaded } = this.state;
const linkCheckout = "/checkout";
if (isAuthenticated === true) {
return <Redirect to={linkCheckout} />;
}
console.log(errorMessage);
return (
<React.Fragment>
<Row>
<Col md={{ span: 14 }}>
<div
className="scrollable-container"
ref={node => {
this.container = node;
}}
>
<Affix target={() => this.container}>
<div className="register_Background" />
</Affix>
</div>
</Col>
<Col md={{ span: 10 }}>
<div className="register">
<Link to="/">
<img
className="register__logo"
src={logoMonggoPesen}
alt="login__logo"
/>
</Link>
<h2 className="register__title">{strings.login_enter}</h2>
<Form onSubmit={this.handleSubmit}>
<FormItem>
{getFieldDecorator("email", rulesEmail())(
<Input
className="register__input"
size={"large"}
prefix={
<Icon
type={"user"}
style={{ color: "rgba(0,0,0,.25)" }}
/>
}
placeholder={"Email"}
/>
)}
</FormItem>
<FormItem>
{getFieldDecorator("password", rulesPassword())(
<Input
size={"large"}
prefix={
<Icon
type={"lock"}
style={{ color: "rgba(0,0,0,.25)" }}
/>
}
placeholder={"Password"}
type="password"
/>
)}
</FormItem>
<FormItem>
{/* {getFieldDecorator("remember", {
valuePropName: "checked",
initialValue: true
})(<Checkbox>{strings.login_remember_me}</Checkbox>)} */}
<a className="login-form__forgot" href="/">
{strings.login_forgot_password}
</a>
<Button
size={"large"}
htmlType="submit"
className="register__form__button-register"
>
<p className="register__form__button-register-text">
{strings.login_enter}
</p>
</Button>
<AlertLogin errorMessage={errorMessage} isErorloaded={isErorloaded}/>
</FormItem>
<div className="login__separator">
<p>
{strings.login_option}
</p>
</div>
<Form.Item className="register__form__btn-socmed">
<div className="register__form__socmed-box">
<ButtonFacebook
className="register__form__socmed-button"
onSubmit={this.handleRegisterGoogle}
>
{strings.facebook}
</ButtonFacebook>
<ButtonGoogle
className="register__form__socmed-button"
onSubmit={this.handleRegisterGoogle}
>
{strings.google}
</ButtonGoogle>
</div>
<center className="register__form__direct-login">
{strings.formatString(
strings.login_quote,
<a href="/register" className="login-form__login">
{strings.login_register}{" "}
</a>
)}
</center>
</Form.Item>
</Form>
</div>
</Col>
</Row>
</React.Fragment>
);
}
}
const mapStateToProps = state => ({
isAuthenticated: state.authentication.isAuthenticated,
token: state.authentication.token
});
const LoginForm = Form.create({})(Login);
export default connect(
mapStateToProps,
{ loginWithGoogle, loginWithForm }
)(LoginForm);
как компонент входа в систему узнает, если, например, он из подробного продукта перенаправляет к оформлению заказа и как он узнает, что в дополнение к отсутствию на странице продукта подробностипри успешном входе в систему направляются на дом?
ниже, prodocut detail.jsx
import React, { Component } from "react";
import SliderProductDetail from "components/SliderSecondary";
import { Col, Row, Card, Spin } from "antd";
import Variants from "../../components/Variant/Variants";
import "./style.sass";
import ButtonQuantity from "../../components/ButtonQuantity";
import { Redirect } from "react-router-dom";
import strings from "../../localization/localization";
import ProductAttibutes from "../../components/ProductAttributes";
import Shipping from "../../components/Shipping";
import ScrollToTopOnMount from "../../components/ScrollToTopOnMount"
import Login from "../Login";
export default class ProductDetail extends Component {
render() {
const {
changeCheckout,
open,
addCheckout,
price,
name,
images,
index,
variants,
variantsRef,
changed,
onChangeVariant,
sizeId,
colorId,
sku,
onChangeQuantity,
stockAlert,
details
} = this.props;
const Login = <Login nextPage={"checkout"} />
return (
<React.Fragment>
<Row>
<Col md={24}>
<ScrollToTopOnMount/>
<div className="productDetailBorder" />
<div className="container productDetail">
<Row>
<Col md={10}>
<h2>
{" "}
{name || <Spin />}
</h2>
<SliderProductDetail images={images} index={index} />
</Col>
<Col md={14}>
<div className="productDetail__variantContent">
{!name ? (
<Spin />
) : (
<p className="productDetail__price">{price}</p>
)}
{variants.map((variant, index) => (
<Variants
ref={variantsRef[index]}
key={variant.id}
index={index}
name={
variant.name.charAt(0).toUpperCase() +
variant.name.substring(1)
}
values={variant.values}
id={variant.id}
changed={changed}
onChangeVariant={onChangeVariant}
sizeId={sizeId}
colorId={colorId}
sku={sku}
/>
))}
<ButtonQuantity
title="Jumlah"
quantity={1}
onChange={onChangeQuantity}
/>
<p className="productDetail__stock">{stockAlert}</p>
<div className="productDetail__delivery">
{!price ? (
<Spin />
) : (
<p>
{strings.delivery_from}:{" "}
<b className="productDetail__china">
{strings.china}
</b>{" "}
{strings.delivery_to}
</p>
)}
</div>
<Shipping />
<button
className="productDetail__addCart"
onClick={addCheckout}
>
{strings.add_to_cart}
</button>
</div>
</Col>
</Row>
<Row>
<Col md={24} style={{ marginTop: 50 }}>
<Card>
<h2 style={{ padding: 12 }}>{strings.detail_product}</h2>
{Object.keys(details).map((detail, i) => {
return (
<ProductAttibutes
key={i}
description={details[detail]}
label={
detail.charAt(0).toUpperCase() + detail.substring(1)
}
/>
);
})}
</Card>
</Col>
</Row>
</div>
</Col>
</Row>
{open === true && <Redirect to={Login}/>}
{changeCheckout === true && <Redirect to="/checkout" />}
</React.Fragment>
);
}
}