Added Complete Registration stepper component, all stepper logic

src/components/User/CompleteRegistration.jsx

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

src/components/User/Profile.jsx

@@ -29,7 +29,7 @@ const ProfileView = ({ user }) => (
           {user.userinfo && <List>
             {Object.keys(user.userinfo).map(function(key) {
               return (<List.Item key={key}>
-                {user.userinfo[key]}
+                {key}: {user.userinfo[key]}
               </List.Item>)
             })}
           </List>}