2018-09-20 11:58:47 -07:00
|
|
|
import React from 'react';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { Spin, Icon } from 'antd';
|
|
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { createActions } from 'modules/create';
|
|
|
|
import { AppState } from 'store/reducers';
|
|
|
|
import './Final.less';
|
|
|
|
|
|
|
|
interface StateProps {
|
|
|
|
form: AppState['create']['form'];
|
2018-12-28 15:05:34 -08:00
|
|
|
submittedProposal: AppState['create']['submittedProposal'];
|
|
|
|
submitError: AppState['create']['submitError'];
|
2018-09-20 11:58:47 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
interface DispatchProps {
|
2018-12-28 15:05:34 -08:00
|
|
|
submitProposal: typeof createActions['submitProposal'];
|
2018-09-20 11:58:47 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
type Props = StateProps & DispatchProps;
|
|
|
|
|
|
|
|
class CreateFinal extends React.Component<Props> {
|
|
|
|
componentDidMount() {
|
2018-12-28 15:05:34 -08:00
|
|
|
this.submit();
|
2018-09-20 11:58:47 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2018-12-28 15:05:34 -08:00
|
|
|
const { submittedProposal, submitError } = this.props;
|
2018-09-20 11:58:47 -07:00
|
|
|
let content;
|
2018-12-28 15:05:34 -08:00
|
|
|
if (submitError) {
|
|
|
|
content = (
|
|
|
|
<div className="CreateFinal-message is-error">
|
|
|
|
<Icon type="close-circle" />
|
|
|
|
<div className="CreateFinal-message-text">
|
|
|
|
Something went wrong during creation: "{submitError}"{' '}
|
|
|
|
<a onClick={this.submit}>Click here</a> to try again.
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else
|
|
|
|
if (submittedProposal) {
|
2018-09-20 11:58:47 -07:00
|
|
|
content = (
|
|
|
|
<div className="CreateFinal-message is-success">
|
|
|
|
<Icon type="check-circle" />
|
|
|
|
<div className="CreateFinal-message-text">
|
2018-12-28 15:05:34 -08:00
|
|
|
Your proposal has been submitted!{' '}
|
|
|
|
<Link to={`/proposals/${submittedProposal.proposalUrlId}`}>
|
|
|
|
Click here
|
|
|
|
</Link>
|
|
|
|
{' '}to check it out.
|
2018-09-20 11:58:47 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
content = (
|
|
|
|
<div className="CreateFinal-loader">
|
|
|
|
<Spin size="large" />
|
2018-12-28 15:05:34 -08:00
|
|
|
<div className="CreateFinal-loader-text">
|
|
|
|
Submitting your proposal...
|
|
|
|
</div>
|
2018-09-20 11:58:47 -07:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return <div className="CreateFinal">{content}</div>;
|
|
|
|
}
|
|
|
|
|
2018-12-28 15:05:34 -08:00
|
|
|
private submit = () => {
|
2018-11-14 08:43:00 -08:00
|
|
|
if (this.props.form) {
|
2018-12-28 15:05:34 -08:00
|
|
|
this.props.submitProposal(this.props.form);
|
2018-11-14 08:43:00 -08:00
|
|
|
}
|
2018-09-20 11:58:47 -07:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
export default connect<StateProps, DispatchProps, {}, AppState>(
|
|
|
|
(state: AppState) => ({
|
|
|
|
form: state.create.form,
|
2018-12-28 15:05:34 -08:00
|
|
|
submittedProposal: state.create.submittedProposal,
|
|
|
|
submitError: state.create.submitError,
|
2018-09-20 11:58:47 -07:00
|
|
|
}),
|
|
|
|
{
|
2018-12-28 15:05:34 -08:00
|
|
|
submitProposal: createActions.submitProposal,
|
2018-09-20 11:58:47 -07:00
|
|
|
},
|
|
|
|
)(CreateFinal);
|