Reactjs routing in Microsoft Edge - reactjs

Question

I am having an issue when routing in Microsoft edge. I have 3 pages and they work like a wizard.
getting-started>start-date>proposer
The application jumps back to getting-started, when I go from start-date to proposer. really weird behaviour and only happing in Edge browser.
Please find the code below,
Start date:
import React, { Component } from "react";
import {
Button,
Form,
Header,
Container,
Grid,
Message
} from "semantic-ui-react";
import { WizardStepper } from "./WizardStepper";
import { startDateActions } from "../redux/actions/startdate-actions";
import { connect } from "react-redux";
import moment from "moment";
import { QuoteRequest } from "../models/quote-request";
import { IStoreState } from "../redux/reducers";
import { AuthResponse } from "../models/auth-response";
import { quoteActions } from "../redux/actions/quote-actions";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
interface IStartDateProps {
history: any;
addQuoteStartDate(quoteStartDate: string): void;
clearErrors(quoteRequest: QuoteRequest): void;
quoteRequest: QuoteRequest;
quoteStartDate: string;
}
export class _StartDate extends Component<IStartDateProps> {
state = {
startDate: new Date(),
showDateEmptyError: false
};
constructor(props: IStartDateProps) {
super(props);
this.state.startDate = this.props.quoteStartDate
? moment(this.props.quoteStartDate).toDate()
: new Date();
}
render() {
return (
<Container fluid>
<WizardStepper
activeStep={2} />
<Container className="basic padded segment abg___main_content_wrapper">
<Header as="h1" className="page-title">
Choose the Start Date
</Header>
<p>
The start date for cover can be from today's date up to 45 days
ahead; we cannot back-date cover.
</p>
<div className="ui hidden divider" />
<Grid stackable>
<Grid.Row>
<Grid.Column mobile={16} tablet={9} computer={8}>
<Form>
<label>What date would you like the cover to start?</label>
<Container className="abg___datepicker">
<DatePicker
className={
this.state.showDateEmptyError ? "error-datepicker" : ""
}
autoComplete="off"
dateFormat="dd/MM/yyyy"
minDate={moment().toDate()}
maxDate={moment()
.add(45, "day")
.toDate()}
onChange={(date: any) => {
this.setState({ startDate: date });
}}
placeholderText="Start date (DD/MM/YYYY)"
selected={this.state.startDate}
/>
{this.state.showDateEmptyError === true ? (
<Message negative>
Please complete the highlighted mandatory field
</Message>
) : null}
<div className="ui hidden divider" />
<Button
size="large"
positive
className="right floated"
onClick={() => {
if (!this.state.startDate) {
this.setState({ showDateEmptyError: true });
} else {
this.setState({ showDateEmptyError: false });
this.props.addQuoteStartDate(
moment(this.state.startDate).format()
);
//Note:This will clear any errors if you had any errors in the next quote proposer screen
this.props.clearErrors(this.props.quoteRequest);
this.props.history.push("/quote/quote-proposer");
}
}}
>
Next
</Button>
</Container>
</Form>
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
</Container>
);
}
}
const mapStateToProps = ({
quoteStartDate,
authResponse,
quoteRequest
}: IStoreState): {
quoteStartDate: string;
authResponse: AuthResponse;
quoteRequest: QuoteRequest;
} => {
return { quoteStartDate, authResponse, quoteRequest };
};
const mapDispatchToProps = (dispatch: any) => {
return {
addQuoteStartDate: (quoteStartDate: string) => {
return dispatch(startDateActions.addStartDate(quoteStartDate));
},
clearErrors: (quoteRequest: QuoteRequest) => {
return dispatch(quoteActions.clearErrors(quoteRequest));
}
};
};
export const StartDate = connect(
mapStateToProps,
mapDispatchToProps
)(_StartDate);
Proposer:
import React from "react";
import {
Button,
Form,
Header,
Container,
Message,
Grid
} from "semantic-ui-react";
import { WizardStepper } from "./WizardStepper";
import { QuoteRequest, Proposer } from "../models/quote-request";
import { connect } from "react-redux";
import { quoteActions } from "../redux/actions/quote-actions";
import { IStoreState } from "../redux/reducers";
import { QuoteType } from "../models/enums";
import { validation } from "../util/validation";
import ErrorMessage from "./validators/ErrorMessage";
import { TitleSelector } from "./shared/TitleSelector";
interface IQuoteProposerProps {
history: any;
quoteStartDate: string;
createQuote(quoteRequest: QuoteRequest): void;
updateQuote(quoteId: number, quoteRequest: QuoteRequest): void;
resetQuoteUpdate(quoteRequest: QuoteRequest): void;
quoteType: QuoteType;
quoteRequest: QuoteRequest;
clearErrors(quoteRequest: QuoteRequest): void;
}
export class _QuoteProposer extends React.Component<IQuoteProposerProps> {
state = {
title: "",
firstName: "",
surname: "",
companyName: "",
contactEmail: "",
contactPhone: "",
showFirstNameEmptyError: false,
showSurNameEmptyError: false,
isTitleSelected: "",
showInvalidEmailError: false,
showInvalidPhoneError: false,
isValidForm: null,
areMandatoryFieldsEmpty: false
};
constructor(props: IQuoteProposerProps) {
super(props);
if (this.props.quoteRequest.proposer) {
this.state.companyName = this.props.quoteRequest.proposer.companyName
? this.props.quoteRequest.proposer.companyName
: "";
this.state.title = this.props.quoteRequest.proposer.salutation
? this.props.quoteRequest.proposer.salutation
: "";
this.state.firstName = this.props.quoteRequest.proposer.firstName
? this.props.quoteRequest.proposer.firstName
: "";
this.state.surname = this.props.quoteRequest.proposer.lastName
? this.props.quoteRequest.proposer.lastName
: "";
this.state.contactEmail = this.props.quoteRequest.proposer.contactEmail
? this.props.quoteRequest.proposer.contactEmail
: "";
this.state.contactPhone = this.props.quoteRequest.proposer.contactPhone
? this.props.quoteRequest.proposer.contactPhone
: "";
}
}
handleCreateQuote = (event: any) => {
event.preventDefault();
this.checkMandatoryFieldsEmpty();
if (this.isValidForm()) {
let quoteRequest = new QuoteRequest();
quoteRequest.startDate = this.props.quoteStartDate;
quoteRequest.proposer = new Proposer();
quoteRequest.proposer.companyName = !this.state.companyName
? null
: this.state.companyName;
quoteRequest.proposer.firstName = this.state.firstName;
quoteRequest.proposer.lastName = this.state.surname;
quoteRequest.proposer.salutation = this.state.title;
quoteRequest.proposer.contactEmail = !this.state.contactEmail
? null
: this.state.contactEmail;
quoteRequest.proposer.contactPhone = !this.state.contactPhone
? null
: this.state.contactPhone;
if (
this.props.quoteRequest.quoteDetails &&
this.props.quoteRequest.quoteDetails.quoteId
) {
this.props.updateQuote(
this.props.quoteRequest.quoteDetails.quoteId,
quoteRequest
);
} else {
this.props.createQuote(quoteRequest);
}
} else {
this.setState({ isValidForm: false });
}
};
getSnapshotBeforeUpdate(prevProps: IQuoteProposerProps, prevState: any) {
return null;
}
componentDidUpdate(
prevProps: IQuoteProposerProps,
prevState: any,
snapshot: any
) {
//When creating
if (
prevProps.quoteRequest.isQuoteCreated !==
this.props.quoteRequest.isQuoteCreated
) {
if (this.props.quoteRequest.isQuoteCreated) {
this.props.clearErrors(this.props.quoteRequest);
if (this.props.quoteType === QuoteType.Simple) {
this.props.history.push("/quote/simple-risk");
} else {
this.props.history.push("/quote/complex-risk");
}
}
}
//When updating
if (
prevProps.quoteRequest.isQuoteUpdated !==
this.props.quoteRequest.isQuoteUpdated
) {
if (this.props.quoteRequest.isQuoteUpdated) {
this.props.clearErrors(this.props.quoteRequest);
this.props.clearErrors(this.props.quoteRequest);
if (this.props.quoteType === QuoteType.Simple) {
this.props.history.push("/quote/simple-risk");
} else {
this.props.history.push("/quote/complex-risk");
}
}
}
}
isValidForm = (): boolean => {
let isValid = true;
if (validation.isEmpty(this.state.firstName)) {
this.setState({ showFirstNameEmptyError: true });
isValid = false;
} else {
this.setState({ showFirstNameEmptyError: false });
}
if (validation.isEmpty(this.state.surname)) {
this.setState({ showSurNameEmptyError: true });
isValid = false;
} else {
this.setState({ showSurNameEmptyError: false });
}
if (validation.isEmpty(this.state.title)) {
this.setState({ isTitleSelected: "false" });
isValid = false;
} else {
this.setState({ isTitleSelected: "true" });
}
if (
!validation.isEmpty(this.state.contactEmail) &&
!validation.isEmail(this.state.contactEmail)
) {
isValid = false;
this.setState({ showInvalidEmailError: true });
} else {
this.setState({ showInvalidEmailError: false });
}
if (
!validation.isEmpty(this.state.contactPhone) &&
!validation.isPhone(this.state.contactPhone)
) {
isValid = false;
this.setState({ showInvalidPhoneError: true });
} else {
this.setState({ showInvalidPhoneError: false });
}
return isValid;
};
checkMandatoryFieldsEmpty = () => {
if (
validation.isEmpty(this.state.firstName) ||
validation.isEmpty(this.state.surname) ||
this.state.isTitleSelected === "false"
) {
this.setState({ areMandatoryFieldsEmpty: true });
} else {
this.setState({ areMandatoryFieldsEmpty: false });
}
};
handleMandatoryFieldsCheck = (event: any) => {
this.checkMandatoryFieldsEmpty();
};
render() {
return (
<Container fluid>
<WizardStepper activeStep={3} />
<Container className="padded abg___main_content_wrapper">
<Header as="h1" className="page-title">
About the Proposer
</Header>
<p>Please tell us about the proposer.</p>
<div className="ui hidden divider" />
<Grid stackable doubling>
<Grid.Row>
<Grid.Column mobile={16} tablet={9} computer={8}>
<Form
onSubmit={this.handleCreateQuote}
autoComplete="off"
noValidate
>
<Container>
<Form.Field>
<label>Company name</label>
<Form.Input
type="text"
maxLength={30}
name="company-name"
value={this.state.companyName}
placeholder="Company Name"
onChange={(event: any) => {
this.setState({
companyName: event.target.value
});
}}
/>
</Form.Field>
<Form.Field>
<TitleSelector
onClick={async (data: any) => {
await this.setState({
title: data
});
this.setState({
isTitleSelected: !validation.isEmpty(
this.state.title
)
? "true"
: "false"
});
}}
showTitleNotSelectedError={
this.state.isTitleSelected === "false"
}
titles={["Mr", "Mrs", "Miss", "Ms"]}
selectedTitle={this.state.title}
cssClasses="abg___button-options"
/>
</Form.Field>
<Form.Field>
<label>First name</label>
<Form.Input
type="text"
name="first-name"
value={this.state.firstName}
maxLength={30}
error={this.state.showFirstNameEmptyError}
placeholder="First Name"
onChange={async (event: any) => {
await this.setState({
firstName: event.target.value
});
if (!validation.isEmpty(this.state.firstName)) {
this.setState({ showFirstNameEmptyError: false });
}
}}
/>
</Form.Field>
<Form.Field>
<label>Surname</label>
<Form.Input
type="text"
name="surname"
maxLength={30}
value={this.state.surname}
error={this.state.showSurNameEmptyError}
placeholder="Surname"
onChange={async (event: any) => {
await this.setState({ surname: event.target.value });
if (!validation.isEmpty(this.state.surname)) {
this.setState({ showSurNameEmptyError: false });
}
}}
/>
</Form.Field>
<Form.Field>
<label>Contact email</label>
<Form.Input
type="email"
name="email"
maxLength={30}
value={this.state.contactEmail}
error={this.state.showInvalidEmailError}
placeholder="Contact email"
onChange={(event: any) => {
this.setState({ contactEmail: event.target.value });
}}
onBlur={(event: any) => {
this.setState({
showInvalidEmailError: !validation.isEmail(
this.state.contactEmail
)
});
}}
/>
<ErrorMessage
show={this.state.showInvalidEmailError}
message="Invalid email"
/>
</Form.Field>
<Form.Field>
<label>Contact phone</label>
<Form.Input
type="text"
name="tel"
maxLength={30}
value={this.state.contactPhone}
error={this.state.showInvalidPhoneError}
placeholder="Contact phone"
onChange={(event: any) => {
this.setState({ contactPhone: event.target.value });
}}
onBlur={(event: any) => {
this.setState({
showInvalidPhoneError: !validation.isPhone(
this.state.contactPhone
)
});
}}
/>
<ErrorMessage
show={this.state.showInvalidPhoneError}
message="Invalid phone"
/>
</Form.Field>
{this.props.quoteRequest.quoteCreateError ||
this.props.quoteRequest.quoteUpdateError ? (
<Message negative>Server Error, please try again</Message>
) : null}
{this.state.areMandatoryFieldsEmpty ? (
<Message negative>
Please complete the highlighted mandatory fields
</Message>
) : null}
</Container>
<div className="ui hidden divider" />
<Container>
<Button
size="large"
type="submit"
floated="right"
positive
loading={
this.props.quoteRequest.isCreatingQuote ||
this.props.quoteRequest.isUpdatingQuote
}
>
Next
</Button>
</Container>
</Form>
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
</Container>
);
}
}
function mapStateToProps(state: IStoreState) {
return {
quoteStartDate: state.quoteStartDate,
quoteType: state.quoteType,
quoteRequest: state.quoteRequest
};
}
const mapDispatchToProps = (dispatch: any) => {
return {
createQuote: (quoteRequest: QuoteRequest) => {
return dispatch(quoteActions.createQuote(quoteRequest));
},
updateQuote: (quoteId: number, quoteRequest: QuoteRequest) => {
return dispatch(quoteActions.updateQuote(quoteId, quoteRequest));
},
resetQuoteUpdate: (quoteRequest: QuoteRequest) => {
return dispatch(quoteActions.resetQuoteUpdate(quoteRequest));
},
clearErrors: (quoteRequest: QuoteRequest) => {
return dispatch(quoteActions.clearErrors(quoteRequest));
}
};
};
export const QuoteProposer = connect(
mapStateToProps,
mapDispatchToProps
)(_QuoteProposer);
Layout page routes:
render() {
return (
<div id="page-container">
<div id="content-wrap" className="clearfix">
<PageHeaderBar />
<Switch>
<Route
exact
path="/login"
component={Login}
authenticatedRedirect="/quote/getting-started"
/>
<PrivateRoute exact path="/" component={GettingStarted} />
<PrivateRoute
exact
path="/quote/getting-started"
component={GettingStarted}
/>
<PrivateWizardRoute
exact
path="/quote/start-date"
component={StartDate}
wizard={this.props.wizard}
/>
<PrivateWizardRoute
exact
path="/quote/quote-proposer"
component={QuoteProposer}
wizard={this.props.wizard}
/>
<PrivateWizardRoute
exact
path="/quote/simple-risk"
component={SimpleRisk}
wizard={this.props.wizard}
/>
<PrivateWizardRoute
exact
path="/quote/complex-risk"
component={ComplexRisk}
wizard={this.props.wizard}
/>
<PrivateRoute exact path="/quote/summary" component={Summary} />
</Switch>
<PageFooter />
</div>
</div>
);
}
}
PrivateWizardRoute:
import React from "react";
import { Redirect, Route, RouteProps } from "react-router-dom";
import { Wizard } from "../models/wizard";
import { WizardStage } from "../models/enums";
interface IPrivateWizardRouteProps {
wizard: Wizard;
}
export class PrivateWizardRoute extends React.Component<
IPrivateWizardRouteProps & RouteProps
> {
renderRoute = () => {
let isAuthenticated = localStorage.getItem("authResponse") ? true : false;
if (isAuthenticated) {
if (this.props.wizard.wizardStage === WizardStage.InProgress) {
const { path, exact, component } = this.props;
return <Route path={path} exact={exact} component={component} />;
} else {
return (
<Redirect
to={{
pathname: "/quote/getting-started"
}}
/>
);
}
} else {
return <Redirect to={{ pathname: "/login" }} />;
}
};
render() {
return this.renderRoute();
}
}
export default PrivateWizardRoute;

Answer 1

I was missing event.preventDefault StartDate button click.