parent
e69773ac8e
commit
561664a701
9 changed files with 251 additions and 18 deletions
@ -0,0 +1,102 @@ |
||||
import React, { Component } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { Redirect } from "react-router-dom"; |
||||
import { Grid, Modal, Step } from "semantic-ui-react"; |
||||
|
||||
import { |
||||
setCompleteRegistrationStep |
||||
} from "../../actions/user/reducer.actions"; |
||||
import { |
||||
USER_INFO_STEP, |
||||
CLIENT_OR_PROVIDER_STEP, |
||||
COMPLETE_INFORMATION_STEP |
||||
} from "../../constants/user.constants"; |
||||
|
||||
class CompleteRegistration extends Component { |
||||
onChangeStep = (event, data) => { |
||||
event.preventDefault(); |
||||
this.props.dispatch(setCompleteRegistrationStep(data.step)); |
||||
}; |
||||
|
||||
render() { |
||||
const { |
||||
userToken, |
||||
completeRegistrationCurrentStep, |
||||
completeRegistrationMaxStep, |
||||
completeRegistrationClientOrProvider |
||||
} = this.props; |
||||
if (!userToken) return <Redirect to="/auth/login" />; |
||||
return ( |
||||
<CompleteRegistrationView |
||||
currentStep={completeRegistrationCurrentStep} |
||||
maxStep={completeRegistrationMaxStep} |
||||
completeRegistrationClientOrProvider={ |
||||
completeRegistrationClientOrProvider |
||||
} |
||||
onChangeStep={this.onChangeStep} |
||||
/> |
||||
); |
||||
} |
||||
} |
||||
|
||||
function mapStateToProps(state) { |
||||
return { |
||||
...state.user, |
||||
userToken: state.auth.userToken |
||||
}; |
||||
} |
||||
|
||||
const CompleteRegistrationView = ({ |
||||
currentStep, |
||||
maxStep, |
||||
completeRegistrationClientOrProvider, |
||||
onChangeStep |
||||
}) => ( |
||||
<Modal defaultOpen={true} closeOnDimmerClick={false} size="large"> |
||||
<Modal.Header>Complete Registration</Modal.Header> |
||||
<Modal.Content> |
||||
<Grid> |
||||
<Grid.Row> |
||||
<Grid.Column stretched={true}> |
||||
<Step.Group stackable="tablet" ordered> |
||||
<Step |
||||
completed={maxStep > USER_INFO_STEP} |
||||
active={currentStep === USER_INFO_STEP} |
||||
title="Basic User Info" |
||||
description="Fill out your user information" |
||||
onClick={onChangeStep} |
||||
disabled={maxStep < USER_INFO_STEP} |
||||
step={USER_INFO_STEP} |
||||
/> |
||||
<Step |
||||
completed={maxStep > CLIENT_OR_PROVIDER_STEP} |
||||
active={currentStep === CLIENT_OR_PROVIDER_STEP} |
||||
title="Client or Provider" |
||||
description="Choose to be a Client or a Provider" |
||||
onClick={onChangeStep} |
||||
disabled={maxStep < CLIENT_OR_PROVIDER_STEP} |
||||
step={CLIENT_OR_PROVIDER_STEP} |
||||
/> |
||||
<Step |
||||
completed={maxStep > COMPLETE_INFORMATION_STEP} |
||||
active={currentStep === COMPLETE_INFORMATION_STEP} |
||||
title="Complete Information" |
||||
description="Fill out the client or provider information" |
||||
onClick={onChangeStep} |
||||
disabled={maxStep < COMPLETE_INFORMATION_STEP} |
||||
step={COMPLETE_INFORMATION_STEP} |
||||
/> |
||||
</Step.Group> |
||||
</Grid.Column> |
||||
</Grid.Row> |
||||
<Grid.Row> |
||||
{currentStep === USER_INFO_STEP && <p>User Info</p>} |
||||
{currentStep === CLIENT_OR_PROVIDER_STEP && <p>Client or Provider</p>} |
||||
{currentStep === COMPLETE_INFORMATION_STEP && <p>Complete Info</p>} |
||||
</Grid.Row> |
||||
</Grid> |
||||
</Modal.Content> |
||||
</Modal> |
||||
); |
||||
|
||||
export default connect(mapStateToProps)(CompleteRegistration); |
Loading…
Reference in new issue