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

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