Completed full user profile editing functionality

src/components/App.jsx

@@ -8,6 +8,7 @@ import ResetPassword from "./Auth/ResetPassword";
 import Settings from "./Auth/Settings";
 import VerifyEmail from "./Auth/VerifyEmail";
 import CompleteRegistration from "./User/CompleteRegistration";
+import EditProfile from "./User/EditProfile";
 import Profile from "./User/Profile";
 import PrivateRoute from "./Shared/PrivateRoute";
 import About from "./Static/About";
@@ -45,6 +46,7 @@ class App extends Component {
                 path="/auth/reset-password/:uid/:token"
                 component={ResetPassword}
               />
+              <PrivateRoute path="/user/profile/edit" component={EditProfile} />
               <PrivateRoute path="/user/profile" component={Profile} />
               <Route path='/user/complete-registration' component={Profile} />
               <Route component={NoMatch} />

src/components/User/EditClientForm.jsx

@@ -0,0 +1,59 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import {
+  clearUserRequestError,
+  clearUserRequestSuccess,
+  setFormBusinessNumber
+} from "../../actions/user/reducer.actions";
+import { updateClientRequest } from "../../actions/user/saga.actions";
+import ClientFormView from "./ClientFormView";
+
+class EditClientForm extends Component {
+  changeBusinessNumber = event => {
+    this.props.dispatch(setFormBusinessNumber(event.target.value));
+    this.props.dispatch(clearUserRequestError());
+    this.props.dispatch(clearUserRequestSuccess());
+  };
+
+  onSubmitClient = event => {
+    event.preventDefault();
+    const { selfUser, businessNumber } = this.props;
+    const businessNumberVal =
+      businessNumber || (selfUser.client || {}).business_number;
+    this.props.dispatch(
+      updateClientRequest({
+        username: selfUser.username,
+        business_number: businessNumberVal
+      })
+    );
+  };
+
+  render() {
+    const {
+      isSendingUserRequest,
+      userRequestError,
+      userRequestSuccess,
+      businessNumber,
+      selfUser
+    } = this.props;
+    const businessNumberVal =
+      businessNumber || (selfUser.client || {}).business_number;
+    return (
+      <ClientFormView
+        isSendingUserRequest={isSendingUserRequest}
+        userRequestError={userRequestError}
+        userRequestSuccess={userRequestSuccess}
+        businessNumber={businessNumberVal}
+        changeBusinessNumber={this.changeBusinessNumber}
+        onSubmitClient={this.onSubmitClient}
+      />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.user };
+}
+
+export default connect(mapStateToProps)(EditClientForm);

src/components/User/EditProfile.jsx

@@ -0,0 +1,59 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Container, Header, Tab } from "semantic-ui-react";
+
+import {
+  setEditProfileTabActiveIndex,
+  clearUserRequestError,
+  clearUserRequestSuccess
+} from "../../actions/user/reducer.actions";
+import EditClientForm from "./EditClientForm";
+import EditProviderForm from "./EditProviderForm";
+import EditUserInfoForm from "./EditUserInfoForm";
+
+class EditProfile extends Component {
+  onTabChange = (event, { activeIndex }) => {
+    if (this.props.editProfileActiveIndex !== activeIndex) {
+      this.props.dispatch(clearUserRequestError());
+      this.props.dispatch(clearUserRequestSuccess());
+    }
+    this.props.dispatch(setEditProfileTabActiveIndex(activeIndex));
+  };
+
+  render() {
+    const { selfUser, editProfileActiveIndex } = this.props;
+    const panes = [
+      {
+        menuItem: "User Information",
+        render: () => <Tab.Pane><EditUserInfoForm /></Tab.Pane>
+      }
+    ];
+    if (selfUser.client) {
+      panes.push({
+        menuItem: "Client Information",
+        render: () => <Tab.Pane><EditClientForm /></Tab.Pane>
+      });
+    } else if (selfUser.provider) {
+      panes.push({
+        menuItem: "Provider Information",
+        render: () => <Tab.Pane><EditProviderForm /></Tab.Pane>
+      });
+    }
+    return (
+      <Container>
+        <Header>Edit Profile</Header>
+        <Tab
+          panes={panes}
+          onTabChange={this.onTabChange}
+          activeIndex={editProfileActiveIndex}
+        />
+      </Container>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.user };
+}
+
+export default connect(mapStateToProps)(EditProfile);

src/components/User/EditProviderForm.jsx

@@ -0,0 +1,56 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import {
+  clearUserRequestError,
+  clearUserRequestSuccess,
+  setFormSocialInsuranceNumber
+} from "../../actions/user/reducer.actions";
+import { updateProviderRequest } from "../../actions/user/saga.actions";
+import ProviderFormView from "./ProviderFormView";
+
+class EditProviderForm extends Component {
+  changeSocialInsuranceNumber = event => {
+    this.props.dispatch(setFormSocialInsuranceNumber(event.target.value));
+    this.props.dispatch(clearUserRequestError());
+    this.props.dispatch(clearUserRequestSuccess());
+  };
+
+  onSubmitProvider = event => {
+    event.preventDefault();
+    const { selfUser, socialInsuranceNumber } = this.props;
+    const socialInsuranceNumberVal =
+      socialInsuranceNumber || (selfUser.provider || {}).sin;
+    this.props.dispatch(
+      updateProviderRequest({ username: selfUser.username, sin: socialInsuranceNumberVal })
+    );
+  };
+
+  render() {
+    const {
+      isSendingUserRequest,
+      userRequestError,
+      userRequestSuccess,
+      socialInsuranceNumber,
+      selfUser
+    } = this.props;
+    const socialInsuranceNumberVal =
+      socialInsuranceNumber || (selfUser.provider || {}).sin;
+    return (
+      <ProviderFormView
+        isSendingUserRequest={isSendingUserRequest}
+        userRequestError={userRequestError}
+        userRequestSuccess={userRequestSuccess}
+        socialInsuranceNumber={socialInsuranceNumberVal}
+        changeSocialInsuranceNumber={this.changeSocialInsuranceNumber}
+        onSubmitProvider={this.onSubmitProvider}
+      />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.user };
+}
+
+export default connect(mapStateToProps)(EditProviderForm);

src/components/User/EditUserInfoForm.jsx

@@ -0,0 +1,62 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import {
+  clearUserRequestError,
+  clearUserRequestSuccess,
+  setFormPhoneNumber
+} from "../../actions/user/reducer.actions";
+import { updateUserInfoRequest } from "../../actions/user/saga.actions";
+
+import UserInfoFormView from "./UserInfoFormView";
+
+class EditUserInfoForm extends Component {
+  changePhoneNumber = event => {
+    this.props.dispatch(setFormPhoneNumber(event.target.value));
+    this.props.dispatch(clearUserRequestError());
+    this.props.dispatch(clearUserRequestSuccess());
+  };
+
+  onSubmitUserInfo = event => {
+    event.preventDefault();
+    const { selfUser, phoneNumber } = this.props;
+    const phoneNumberVal =
+      phoneNumber || (selfUser.userinfo || {}).phone_number;
+
+    this.props.dispatch(
+      updateUserInfoRequest({
+        ...selfUser.userinfo,
+        username: selfUser.username,
+        phone_number: phoneNumberVal
+      })
+    );
+  };
+
+  render() {
+    const {
+      isSendingUserRequest,
+      userRequestError,
+      userRequestSuccess,
+      selfUser,
+      phoneNumber
+    } = this.props;
+    const phoneNumberVal =
+      phoneNumber || (selfUser.userinfo || {}).phone_number;
+    return (
+      <UserInfoFormView
+        isSendingUserRequest={isSendingUserRequest}
+        userRequestError={userRequestError}
+        userRequestSuccess={userRequestSuccess}
+        phoneNumber={phoneNumberVal}
+        changePhoneNumber={this.changePhoneNumber}
+        onSubmitUserInfo={this.onSubmitUserInfo}
+      />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.user };
+}
+
+export default connect(mapStateToProps)(EditUserInfoForm);

src/components/User/Profile.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
+import { Link } from "react-router-dom";
 import { Card, Container, Header, Label, List } from "semantic-ui-react";
 
 class Profile extends Component {
@@ -16,10 +17,17 @@ function mapStateToProps(state) {
 const ProfileView = ({ user }) => (
   <Container>
     <Header>Profile</Header>
-    <Card>
+    <Card fluid={true}>
       <Card.Content>
         <Card.Header>{user.username || "No username!"}</Card.Header>
-        <Card.Meta>{user.email || "No email!"}</Card.Meta>
+        <Card.Meta>
+          {user.client && <Label color="blue" size="tiny">Client</Label>}
+          {user.provider && <Label color="orange" size="tiny">Provider</Label>}
+          <Label color={user.is_active ? "teal" : "red"} size="tiny">
+            {user.is_active ? "Active" : "Deactivated"}
+          </Label>
+          {" "}{user.email || "No email!"}
+        </Card.Meta>
         <Card.Description>
           <span>
             {!user.client &&
@@ -56,11 +64,7 @@ const ProfileView = ({ user }) => (
         </Card.Description>
       </Card.Content>
       <Card.Content extra>
-        {user.client && <Label color="blue">Client</Label>}
-        {user.provider && <Label color="orange">Provider</Label>}
-        <Label color={user.is_active ? "teal" : "red"}>
-          {user.is_active ? "Active" : "Deactivated"}
-        </Label>
+        <Link to="/user/profile/edit">Edit Profile</Link>
       </Card.Content>
     </Card>
   </Container>

src/components/User/UserInfoFormView.jsx

@@ -22,7 +22,7 @@ const UserInfoFormView = ({
       <Form.Field>
         <label>Phone Number</label>
         <input
-          placeholder="780-999-9999"
+          placeholder="7809999999"
           type="tel"
           value={phoneNumber}
           onChange={changePhoneNumber}