119 lines
3.5 KiB
TypeScript
119 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Icon } from 'antd';
|
|
import { Link } from 'react-router-dom';
|
|
import Loader from 'components/Loader';
|
|
import { createActions } from 'modules/create';
|
|
import { AppState } from 'store/reducers';
|
|
import './Final.less';
|
|
import { STATUS } from 'types';
|
|
|
|
interface OwnProps {
|
|
goBack(): void;
|
|
}
|
|
|
|
interface StateProps {
|
|
form: AppState['create']['form'];
|
|
submittedProposal: AppState['create']['submittedProposal'];
|
|
submitError: AppState['create']['submitError'];
|
|
submittedLiveDraft: AppState['create']['submittedLiveDraft'];
|
|
submitErrorLiveDraft: AppState['create']['submitErrorLiveDraft'];
|
|
}
|
|
|
|
interface DispatchProps {
|
|
submitProposal: typeof createActions['submitProposal'];
|
|
submitLiveDraft: typeof createActions['submitLiveDraft'];
|
|
}
|
|
|
|
type Props = OwnProps & StateProps & DispatchProps;
|
|
|
|
class CreateFinal extends React.Component<Props, {}> {
|
|
componentDidMount() {
|
|
this.submit();
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
submittedProposal,
|
|
submittedLiveDraft,
|
|
submitError,
|
|
submitErrorLiveDraft,
|
|
goBack,
|
|
form,
|
|
} = this.props;
|
|
|
|
const isLiveDraft = form && form.status === STATUS.LIVE_DRAFT;
|
|
const error = isLiveDraft ? submitErrorLiveDraft : submitError;
|
|
const ready = isLiveDraft ? submittedLiveDraft : submittedProposal;
|
|
|
|
const updatedId = submittedLiveDraft ? submittedLiveDraft.proposalId : '';
|
|
|
|
let content;
|
|
if (error) {
|
|
content = (
|
|
<div className="CreateFinal-message is-error">
|
|
<Icon type="close-circle" />
|
|
<div className="CreateFinal-message-text">
|
|
<h3>
|
|
<b>Something went wrong during {isLiveDraft ? 'updating' : 'creation'}</b>
|
|
</h3>
|
|
<h5>{submitError}</h5>
|
|
<a onClick={goBack}>Click here</a> to go back to the form and try again.
|
|
</div>
|
|
</div>
|
|
);
|
|
} else if (ready) {
|
|
content = (
|
|
<>
|
|
<div className="CreateFinal-message is-success">
|
|
<Icon type="check-circle" />
|
|
<div className="CreateFinal-message-text">
|
|
{isLiveDraft ? (
|
|
<>
|
|
Your proposal has been updated!{' '}
|
|
<Link to={`/proposals/${updatedId}`}>Click here</Link> to see it live.
|
|
</>
|
|
) : (
|
|
<>
|
|
Your proposal has been submitted! Check your{' '}
|
|
<Link to={`/profile?tab=pending`}>profile's pending tab</Link> to check
|
|
its status.
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
} else {
|
|
content = <Loader size="large" tip="Submitting your proposal..." />;
|
|
}
|
|
|
|
return <div className="CreateFinal">{content}</div>;
|
|
}
|
|
|
|
private submit = () => {
|
|
const { form } = this.props;
|
|
if (form) {
|
|
if (form.status === STATUS.LIVE_DRAFT) {
|
|
this.props.submitLiveDraft(form);
|
|
} else {
|
|
this.props.submitProposal(form);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
export default connect<StateProps, DispatchProps, OwnProps, AppState>(
|
|
(state: AppState) => ({
|
|
form: state.create.form,
|
|
submittedProposal: state.create.submittedProposal,
|
|
submitError: state.create.submitError,
|
|
submittedLiveDraft: state.create.submittedLiveDraft,
|
|
submitErrorLiveDraft: state.create.submitErrorLiveDraft,
|
|
}),
|
|
{
|
|
submitProposal: createActions.submitProposal,
|
|
submitLiveDraft: createActions.submitLiveDraft,
|
|
},
|
|
)(CreateFinal);
|