caremyway-client/src/components/User/CompleteRegistration.jsx

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);